Tweak appearance settings

src-web/components/Settings/Settings.tsx

@@ -1,7 +1,11 @@
 import { getCurrent } from '@tauri-apps/api/webviewWindow';
+import React from 'react';
 import { createGlobalState, useKeyPressEvent } from 'react-use';
 import { capitalize } from '../../lib/capitalize';
+import { HStack } from '../core/Stacks';
 import { TabContent, Tabs } from '../core/Tabs/Tabs';
+import { HeaderSize } from '../HeaderSize';
+import { WindowControls } from '../WindowControls';
 import { SettingsAppearance } from './SettingsAppearance';
 import { SettingsGeneral } from './SettingsGeneral';
 
@@ -22,12 +26,20 @@ export const Settings = () => {
 
   return (
     <>
-      <div
+      <HeaderSize
         data-tauri-drag-region
-        className="x-theme-appHeader h-[27px] bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
+        size="md"
+        className="x-theme-appHeader bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
       >
-        Settings
-      </div>
+        <HStack
+          space={2}
+          justifyContent="center"
+          className="w-full h-full grid grid-cols-[1fr_auto]"
+        >
+          <div className="text-center">Settings</div>
+          <WindowControls className="ml-auto" />
+        </HStack>
+      </HeaderSize>
       <Tabs
         value={tab}
         addBorders

src-web/components/Settings/SettingsAppearance.tsx

@@ -123,6 +123,7 @@ export function SettingsAppearance() {
         ]}
       />
       <HStack space={2}>
+        <div>Theme</div>
         {(settings.appearance === 'system' || settings.appearance === 'light') && (
           <Select
             hideLabel
@@ -131,7 +132,7 @@ export function SettingsAppearance() {
             label="Light Theme"
             size="sm"
             value={activeTheme.light.id}
-            options={lightThemes}
+            options={[{ label: 'Light Mode Themes', options: lightThemes }]}
             onChange={(themeLight) => {
               trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' });
               updateSettings.mutateAsync({ ...settings, themeLight });
@@ -146,7 +147,7 @@ export function SettingsAppearance() {
             leftSlot={<Icon icon="moon" />}
             size="sm"
             value={activeTheme.dark.id}
-            options={darkThemes}
+            options={[{ label: 'Dark Mode Themes', options: darkThemes }]}
             onChange={(themeDark) => {
               trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' });
               updateSettings.mutateAsync({ ...settings, themeDark });
@@ -159,11 +160,11 @@ export function SettingsAppearance() {
         space={3}
         className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
       >
-        <HStack className="text-fg font-bold" alignItems="center" space={2}>
+        <HStack className="text-fg font-bold" space={2}>
           Theme Preview{' '}
           <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} className="text-fg-subtle" />
         </HStack>
-        <HStack space={1.5} alignItems="center" className="w-full">
+        <HStack space={1.5} className="w-full">
           {buttonColors.map((c, i) => (
             <IconButton
               key={c}