2024.5.0-beta.2 (#38)

src-web/components/Settings/SettingsAppearance.tsx

@@ -14,7 +14,7 @@ import { Editor } from '../core/Editor';
 import type { IconProps } from '../core/Icon';
 import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
-import type { SelectOption } from '../core/Select';
+import type { SelectProps } from '../core/Select';
 import { Select } from '../core/Select';
 import { Separator } from '../core/Separator';
 import { HStack, VStack } from '../core/Stacks';
@@ -64,14 +64,14 @@ export function SettingsAppearance() {
     return null;
   }
 
-  const lightThemes: SelectOption<string>[] = themes
+  const lightThemes: SelectProps<string>['options'] = themes
     .filter((theme) => !isThemeDark(theme))
     .map((theme) => ({
       label: theme.name,
       value: theme.id,
     }));
 
-  const darkThemes: SelectOption<string>[] = themes
+  const darkThemes: SelectProps<string>['options'] = themes
     .filter((theme) => isThemeDark(theme))
     .map((theme) => ({
       label: theme.name,
@@ -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
@@ -131,8 +130,9 @@ export function SettingsAppearance() {
             name="lightTheme"
             label="Light Theme"
             size="sm"
+            className="flex-1"
             value={activeTheme.light.id}
-            options={[{ label: 'Light Mode Themes', options: lightThemes }]}
+            options={lightThemes}
             onChange={(themeLight) => {
               trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' });
               updateSettings.mutateAsync({ ...settings, themeLight });
@@ -143,11 +143,12 @@ export function SettingsAppearance() {
           <Select
             hideLabel
             name="darkTheme"
+            className="flex-1"
             label="Dark Theme"
             leftSlot={<Icon icon="moon" />}
             size="sm"
             value={activeTheme.dark.id}
-            options={[{ label: 'Dark Mode Themes', options: darkThemes }]}
+            options={darkThemes}
             onChange={(themeDark) => {
               trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' });
               updateSettings.mutateAsync({ ...settings, themeDark });

src-web/components/Settings/SettingsGeneral.tsx

@@ -8,8 +8,8 @@ import { useUpdateWorkspace } from '../../hooks/useUpdateWorkspace';
 import { Checkbox } from '../core/Checkbox';
 import { Heading } from '../core/Heading';
 import { IconButton } from '../core/IconButton';
-import { Input } from '../core/Input';
 import { KeyValueRow, KeyValueRows } from '../core/KeyValueRow';
+import { PlainInput } from '../core/PlainInput';
 import { Select } from '../core/Select';
 import { Separator } from '../core/Separator';
 import { VStack } from '../core/Stacks';
@@ -59,7 +59,7 @@ export function SettingsGeneral() {
         </div>
       </Heading>
       <VStack className="mt-1 w-full" space={3}>
-        <Input
+        <PlainInput
           size="sm"
           name="requestTimeout"
           label="Request Timeout (ms)"
@@ -68,6 +68,7 @@ export function SettingsGeneral() {
           defaultValue={`${workspace.settingRequestTimeout}`}
           validate={(value) => parseInt(value) >= 0}
           onChange={(v) => updateWorkspace.mutate({ settingRequestTimeout: parseInt(v) || 0 })}
+          type="number"
         />
 
         <Checkbox