From 2a5dd5ca30a25661a050df9f7cdc60f0532ab106 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 29 Apr 2023 22:04:43 +0600
Subject: [PATCH] added gaps to settings

---
 src/components/containers/Grid/index.tsx      |  13 ++
 .../containers/Grid/styles.module.scss        |  16 ++
 src/components/containers/RowGroup/index.tsx  |  29 ++-
 .../containers/RowGroup/styles.module.scss    |   1 +
 .../containers/ColorSettings/index.tsx        | 193 +++++++++---------
 5 files changed, 149 insertions(+), 103 deletions(-)
 create mode 100644 src/components/containers/Grid/index.tsx
 create mode 100644 src/components/containers/Grid/styles.module.scss

diff --git a/src/components/containers/Grid/index.tsx b/src/components/containers/Grid/index.tsx
new file mode 100644
index 0000000..5ae3b2e
--- /dev/null
+++ b/src/components/containers/Grid/index.tsx
@@ -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 };
diff --git a/src/components/containers/Grid/styles.module.scss b/src/components/containers/Grid/styles.module.scss
new file mode 100644
index 0000000..f8c8656
--- /dev/null
+++ b/src/components/containers/Grid/styles.module.scss
@@ -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;
+  }
+}
diff --git a/src/components/containers/RowGroup/index.tsx b/src/components/containers/RowGroup/index.tsx
index a611360..32a734a 100644
--- a/src/components/containers/RowGroup/index.tsx
+++ b/src/components/containers/RowGroup/index.tsx
@@ -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 };
diff --git a/src/components/containers/RowGroup/styles.module.scss b/src/components/containers/RowGroup/styles.module.scss
index fc3a8fb..d397c4a 100644
--- a/src/components/containers/RowGroup/styles.module.scss
+++ b/src/components/containers/RowGroup/styles.module.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   border-radius: 6px;
   box-shadow: var(--color-border) 0 0 0 1px;
+  width: 100%;
 }
 
 .row {
diff --git a/src/modules/settings/containers/ColorSettings/index.tsx b/src/modules/settings/containers/ColorSettings/index.tsx
index b93fc94..7abab11 100644
--- a/src/modules/settings/containers/ColorSettings/index.tsx
+++ b/src/modules/settings/containers/ColorSettings/index.tsx
@@ -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>
   );
 };