muerwre/markdown-home-tab
1
0
Fork 0
mirror of https://github.com/muerwre/markdown-home-tab.git synced 2025-04-24 16:36: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";
interface RowGroupProps {
children: ReactNode[];
children: ReactNode | ReactNode[];
}
const RowGroup: FC<RowGroupProps> = ({ children }) => (
<div className={styles.group}>
{children.map((item, key) => (
<div key={key} className={styles.row}>
{item}
</div>
))}
</div>
);
const RowGroup: FC<RowGroupProps> = ({ children }) => {
const items = useMemo(
() => (Array.isArray(children) ? children : [children]),
[children]
);
return (
<div className={styles.group}>
{items.map((item, key) => (
<div key={key} className={styles.row}>
{item}
</div>
))}
</div>
);
};
export { RowGroup };

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

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

193
src/modules/settings/containers/ColorSettings/index.tsx
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>
);
};