added gaps to settings

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

View file

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