muerwre/markdown-home-tab
1
0
Fork 0
mirror of https://github.com/muerwre/markdown-home-tab.git synced 2025-04-25 00:46:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

added gaps to settings

Browse source
This commit is contained in:
Fedor Katurov 2023-04-29 22:04:43 +06:00
parent b39633c736
commit 2a5dd5ca30
5 changed files with 149 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/containers/Grid/index.tsx Normal file
View file

@ -0,0 +1,13 @@
import { FC, PropsWithChildren } from "react";
import styles from "./styles.module.scss";
import classNames from "classnames";
type VerticalListProps = PropsWithChildren & {
direction?: "row" | "column";
};
const Grid: FC<VerticalListProps> = ({ children, direction = "column" }) => (
<div className={classNames(styles.list, styles[direction])}>{children}</div>
);
export { Grid };

16
src/components/containers/Grid/styles.module.scss Normal file
View file

@ -0,0 +1,16 @@
.list {
display: flex;
gap: 16px;
width: 100%;
&.column {
flex-direction: column;
}
&.row {
flex-direction: row;
flex-wrap: wrap;
justify-content: stretch;
align-items: stretch;
}
}

29
src/components/containers/RowGroup/index.tsx
View file

@ -1,18 +1,25 @@
import { FC, ReactNode } from "react"; import { FC, ReactNode, useMemo } from "react";
import styles from "./styles.module.scss"; import styles from "./styles.module.scss";
interface RowGroupProps { interface RowGroupProps {
children: ReactNode[]; children: ReactNode | ReactNode[];
} }
const RowGroup: FC<RowGroupProps> = ({ children }) => ( const RowGroup: FC<RowGroupProps> = ({ children }) => {
<div className={styles.group}> const items = useMemo(
{children.map((item, key) => ( () => (Array.isArray(children) ? children : [children]),
<div key={key} className={styles.row}> [children]
{item} );
</div>
))} return (
</div> <div className={styles.group}>
); {items.map((item, key) => (
<div key={key} className={styles.row}>
{item}
</div>
))}
</div>
);
};
export { RowGroup }; export { RowGroup };

1
src/components/containers/RowGroup/styles.module.scss
View file

@ -3,6 +3,7 @@
flex-direction: column; flex-direction: column;
border-radius: 6px; border-radius: 6px;
box-shadow: var(--color-border) 0 0 0 1px; box-shadow: var(--color-border) 0 0 0 1px;
width: 100%;
} }
.row { .row {

193
src/modules/settings/containers/ColorSettings/index.tsx
View file

@ -10,6 +10,7 @@ import {
import { useBuiltinThemes } from "~/modules/theme/constants/themes"; import { useBuiltinThemes } from "~/modules/theme/constants/themes";
import { fillThemeHeadings } from "~/modules/theme/utils/fillThemeHeadings"; import { fillThemeHeadings } from "~/modules/theme/utils/fillThemeHeadings";
import { ThemeSelect } from "../../components/ThemeSelect"; import { ThemeSelect } from "../../components/ThemeSelect";
import { Grid } from "~/components/containers/Grid";
const ColorSettings: FC = () => { const ColorSettings: FC = () => {
const { update, settings } = useSettings(); const { update, settings } = useSettings();
@ -55,107 +56,115 @@ const ColorSettings: FC = () => {
}, [currentTheme, t]); }, [currentTheme, t]);
return ( return (
<RowGroup> <Grid>
<label> <RowGroup>
<SettingsRow title={t("Color theme")} subTitle={themeSubtitle}> <label>
<ThemeSelect <SettingsRow title={t("Color theme")} subTitle={themeSubtitle}>
value={currentTheme} <ThemeSelect
onChange={setThemeColors} value={currentTheme}
themes={themes} onChange={setThemeColors}
/> themes={themes}
</SettingsRow> />
</label> </SettingsRow>
</label>
</RowGroup>
<label> <Grid direction="row">
<SettingsRow title={t("Background")}> <RowGroup>
<input <label>
type="color" <SettingsRow title={t("Background")}>
onChange={setString("backgroundColor")} <input
value={settings.backgroundColor} type="color"
/> onChange={setString("backgroundColor")}
</SettingsRow> value={settings.backgroundColor}
</label> />
</SettingsRow>
</label>
<label> <label>
<SettingsRow title={t("Text")}> <SettingsRow title={t("Text")}>
<input <input
type="color" type="color"
onChange={setString("textColor")} onChange={setString("textColor")}
value={settings.textColor} value={settings.textColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
<label> <label>
<SettingsRow title={t("Links")}> <SettingsRow title={t("Links")}>
<input <input
type="color" type="color"
onChange={setString("linkColor")} onChange={setString("linkColor")}
value={settings.linkColor} value={settings.linkColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
<label> <label>
<SettingsRow title={t("Inline code")}> <SettingsRow title={t("Inline code")}>
<input <input
type="color" type="color"
onChange={setString("codeColor")} onChange={setString("codeColor")}
value={settings.codeColor} value={settings.codeColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
</RowGroup>
<label> <RowGroup>
<SettingsRow title={t("Heading 1")}> <label>
<input <SettingsRow title={t("Heading 1")}>
type="color" <input
onChange={setString("h1Color")} type="color"
value={settings.h1Color || settings.textColor} onChange={setString("h1Color")}
/> value={settings.h1Color || settings.textColor}
</SettingsRow> />
</label> </SettingsRow>
</label>
<label> <label>
<SettingsRow title={t("Heading 2")}> <SettingsRow title={t("Heading 2")}>
<input <input
type="color" type="color"
onChange={setString("h2Color")} onChange={setString("h2Color")}
value={settings.h2Color || settings.textColor} value={settings.h2Color || settings.textColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
<label> <label>
<SettingsRow title={t("Heading 3")}> <SettingsRow title={t("Heading 3")}>
<input <input
type="color" type="color"
onChange={setString("h3Color")} onChange={setString("h3Color")}
value={settings.h3Color || settings.textColor} value={settings.h3Color || settings.textColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
<label> <label>
<SettingsRow title={t("Heading 4")}> <SettingsRow title={t("Heading 4")}>
<input <input
type="color" type="color"
onChange={setString("h4Color")} onChange={setString("h4Color")}
value={settings.h4Color || settings.textColor} value={settings.h4Color || settings.textColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
<label> <label>
<SettingsRow title={t("Heading 5")}> <SettingsRow title={t("Heading 5")}>
<input <input
type="color" type="color"
onChange={setString("h5Color")} onChange={setString("h5Color")}
value={settings.h5Color || settings.textColor} value={settings.h5Color || settings.textColor}
/> />
</SettingsRow> </SettingsRow>
</label> </label>
</RowGroup> </RowGroup>
</Grid>
</Grid>
); );
}; };