fix(settings): started settings cleanup

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 {