Tweak settings labels

src-web/components/Settings/SettingsAppearance.tsx

@@ -109,7 +109,7 @@ export function SettingsAppearance() {
       <Select
         name="appearance"
         label="Appearance"
-        labelPosition="left"
+        labelPosition="top"
         size="sm"
         value={settings.appearance}
         onChange={(appearance) => {
@@ -123,7 +123,6 @@ export function SettingsAppearance() {
         ]}
       />
       <HStack space={2}>
-        <div>Theme</div>
         {(settings.appearance === 'system' || settings.appearance === 'light') && (
           <Select
             hideLabel

src-web/components/core/Input.tsx

@@ -133,7 +133,11 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
     >
       <label
         htmlFor={id}
-        className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
+        className={classNames(
+          labelClassName,
+          'text-fg-subtle whitespace-nowrap',
+          hideLabel && 'sr-only',
+        )}
       >
         {label}
       </label>

src-web/components/core/PlainInput.tsx

@@ -85,7 +85,11 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
     >
       <label
         htmlFor={id}
-        className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
+        className={classNames(
+          labelClassName,
+          'text-fg-subtle whitespace-nowrap',
+          hideLabel && 'sr-only',
+        )}
       >
         {label}
       </label>

src-web/components/core/Select.tsx

@@ -51,7 +51,11 @@ export function Select<T extends string>({
     >
       <label
         htmlFor={id}
-        className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
+        className={classNames(
+          labelClassName,
+          'text-fg-subtle whitespace-nowrap',
+          hideLabel && 'sr-only',
+        )}
       >
         {label}
       </label>