fix(settings): started settings cleanup

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;