mirror of
https://github.com/muerwre/markdown-home-tab.git
synced 2025-04-25 08:56:41 +07:00
added gaps to settings
This commit is contained in:
parent
b39633c736
commit
2a5dd5ca30
5 changed files with 149 additions and 103 deletions
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue