chore(settings): added new translation strings

src/components/settings/AppearanceShims.tsx

@@ -219,12 +219,25 @@ export const DisplaySeasonalShim = observer(() => {
 
     return (
         <>
-            <h3>Theme Options</h3>
+            <h3>
+                <Text id="app.settings.pages.appearance.theme_options.title" />
+            </h3>
+            {/* TOFIX: WIP feature - follows system theme */}
+            {/*<Checkbox
+                checked={settings.get("appearance:seasonal") ?? true}
+                onChange={(v) => settings.set("appearance:seasonal", v)}
+                description={
+                    <Text id="app.settings.pages.appearance.theme_options.follow_desc" />
+                }>
+                <Text id="app.settings.pages.appearance.theme_options.follow" />
+            </Checkbox>*/}
             <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
+                description={
+                    <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
+                }>
+                <Text id="app.settings.pages.appearance.theme_options.seasonal" />
             </Checkbox>
         </>
     );

src/components/ui/Checkbox.tsx

@@ -40,7 +40,8 @@ const CheckboxBase = styled.label`
 const CheckboxContent = styled.span`
     display: flex;
     flex-grow: 1;
-    font-size: 1rem;
+    font-size: 14px;
+    gap: 2px;
     font-weight: 600;
     flex-direction: column;
 `;
@@ -111,7 +112,10 @@ export default function Checkbox(props: CheckboxProps) {
                     !props.disabled && props.onChange(!props.checked)
                 }
             />
-            <Checkmark checked={props.checked} contrast={props.contrast} className="check">
+            <Checkmark
+                checked={props.checked}
+                contrast={props.contrast}
+                className="check">
                 <Check size={20} />
             </Checkmark>
         </CheckboxBase>

src/components/ui/fluent/CategoryButton.tsx

@@ -30,6 +30,11 @@ const CategoryBase = styled.div<BaseProps>`
         flex-shrink: 0;
     }
 
+    .action {
+        display: flex;
+        align-items: center;
+    }
+
     .content {
         display: flex;
         flex-grow: 1;