fix(settings): started settings cleanup

external/lang

@@ -1 +1 @@
-Subproject commit d98236483bdedade9d86578f3db5aee41506451f
+Subproject commit c5d2538d70e3df1b099caf9084e41b015a52387d

src/components/settings/AppearanceShims.tsx

@@ -1,4 +1,4 @@
-import { Store } from "@styled-icons/boxicons-regular";
+import { Store } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
 // @ts-expect-error shade-blend-color does not have typings.
@@ -54,7 +54,11 @@ export const ThemeShopShim = () => {
 
     return (
         <Link to="/settings/theme_shop" replace>
-            <CategoryButton icon={<Store size={24} />} action="chevron" hover>
+            <CategoryButton
+                icon={<Store size={24} />}
+                action="chevron"
+                description={"Browse themes made by the community"}
+                hover>
                 <Text id="app.settings.pages.theme_shop.title" />
             </CategoryButton>
         </Link>
@@ -194,7 +198,7 @@ export const DisplayLigaturesShim = observer(() => {
     if (settings.theme.getFont() !== "Inter") return null;
 
     return (
-        <p>
+        <>
             <Checkbox
                 checked={settings.get("appearance:ligatures") ?? false}
                 onChange={(v) => settings.set("appearance:ligatures", v)}
@@ -203,7 +207,7 @@ export const DisplayLigaturesShim = observer(() => {
                 }>
                 <Text id="app.settings.pages.appearance.ligatures" />
             </Checkbox>
-        </p>
+        </>
     );
 });
 
@@ -214,14 +218,15 @@ export const DisplaySeasonalShim = observer(() => {
     const settings = useApplicationState().settings;
 
     return (
-        <p>
+        <>
+            <h3>Theme Options</h3>
             <Checkbox
                 checked={settings.get("appearance:seasonal") ?? true}
                 onChange={(v) => settings.set("appearance:seasonal", v)}
                 description="Displays effects in the home tab during holiday seasons.">
                 Seasonal theme
             </Checkbox>
-        </p>
+        </>
     );
 });
 

src/components/ui/Button.tsx

@@ -21,7 +21,7 @@ export default styled.button<Props>`
     align-items: center;
     justify-content: center;
     padding: 2px 16px;
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
     font-family: inherit;
     font-weight: 500;
     flex-shrink: 0;

src/components/ui/DateDivider.tsx

@@ -32,8 +32,10 @@ const Unread = styled.div`
     color: var(--accent-contrast);
     font-size: 7px;
     padding: 2px 6px;
+    font-size: 10px;
     border-radius: 60px;
     font-weight: 600;
+    margin-top: -1px;
 `;
 
 interface Props {

src/pages/home/Home.module.scss

@@ -27,7 +27,8 @@
 
         .actions {
             //grid-template-columns: repeat(2, 300px);
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-template-columns: 300px 300px;
+            //grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             grid-column: span 2;
             gap: 16px;
             //margin: auto;

src/pages/settings/Settings.module.scss

@@ -255,6 +255,16 @@
             font-weight: 600;
         }
 
+        details {
+            summary {
+                font-size: 0.8125rem;
+                font-weight: 700;
+                text-transform: uppercase;
+                color: var(--secondary-foreground);
+                cursor: pointer;
+            }
+        }
+
         .footer {
             border-top: 1px solid;
             margin: 0;

src/pages/settings/panes/Appearance.tsx

@@ -24,13 +24,16 @@ export const Appearance = observer(() => {
         <div className={styles.appearance}>
             <ThemeBaseSelectorShim />
             <ThemeShopShim />
+            <hr />
             <ThemeAccentShim />
+            <hr />
             <DisplaySeasonalShim />
-
+            <hr />
             <DisplayFontShim />
             <DisplayLigaturesShim />
+            <hr />
             <DisplayEmojiShim />
-
+            <hr />
             <CollapsibleSection
                 defaultValue={false}
                 id="settings_overrides"
@@ -40,7 +43,6 @@ export const Appearance = observer(() => {
                 <h3>App</h3>
                 <ThemeOverrides />
             </CollapsibleSection>
-
             <CollapsibleSection
                 id="settings_advanced_appearance"
                 defaultValue={false}

src/pages/settings/panes/Panes.module.scss

@@ -345,124 +345,6 @@
     }
 }
 
-.appearance {
-    .theme {
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .themes {
-        gap: 8px;
-        display: flex;
-        width: 100%;
-        margin-bottom: 15px;
-
-        img {
-            cursor: pointer;
-            border-radius: var(--border-radius);
-            transition: border 0.3s;
-            border: 3px solid transparent;
-            width: 100%;
-
-            &[data-active="true"] {
-                cursor: default;
-                border: 3px solid var(--accent);
-                &:hover {
-                    border: 3px solid var(--accent);
-                }
-            }
-
-            &:hover {
-                border: 3px solid var(--tertiary-background);
-            }
-        }
-    }
-
-    details {
-        summary {
-            font-size: 0.8125rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            color: var(--secondary-foreground);
-            cursor: pointer;
-        }
-    }
-
-    .emojiPack {
-        gap: 12px;
-        display: flex;
-        flex-direction: column;
-
-        .row {
-            gap: 12px;
-            display: flex;
-
-            > div {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-            }
-        }
-
-        .button {
-            padding: 2rem 1.2rem;
-            display: grid;
-            place-items: center;
-
-            cursor: pointer;
-            transition: border 0.3s;
-            background: var(--hover);
-            border: 3px solid transparent;
-            border-radius: var(--border-radius);
-
-            img {
-                max-width: 100%;
-            }
-
-            &[data-active="true"] {
-                cursor: default;
-                background: var(--secondary-background);
-                border: 3px solid var(--accent);
-
-                &:hover {
-                    border: 3px solid var(--accent);
-                }
-            }
-
-            &:hover {
-                background: var(--secondary-background);
-                border: 3px solid var(--tertiary-background);
-            }
-        }
-
-        h4 {
-            text-transform: unset;
-
-            a {
-                opacity: 0.7;
-                color: var(--accent);
-                font-weight: 600;
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-
-            @media only screen and (max-width: 800px) {
-                a {
-                    display: block;
-                }
-            }
-        }
-    }
-
-    .display {
-        gap: 8px;
-        display: flex;
-        flex-direction: column;
-    }
-}
-
 .sessions {
     .session {
         display: flex;
@@ -477,12 +359,13 @@
 
             svg {
                 margin-top: 1px;
+                flex-shrink: 0;
             }
         }
     }
 
     .entry {
-        padding: 16px;
+        padding: 12px;
         display: flex;
         margin: 10px 0;
         flex-direction: column;
@@ -514,7 +397,7 @@
             background: transparent;
             border: 0;
             font-family: inherit;
-            font-size: 1rem;
+            font-size: 0.875rem;
             padding: 0;
             outline: 0;
             border-radius: 0;