Better settings dialog

src-web/components/SettingsDialog.tsx

@@ -4,7 +4,9 @@ import { useSettings } from '../hooks/useSettings';
 import { useUpdateSettings } from '../hooks/useUpdateSettings';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { Checkbox } from './core/Checkbox';
+import { Heading } from './core/Heading';
 import { Input } from './core/Input';
+import { Separator } from './core/Separator';
 import { HStack, VStack } from './core/Stacks';
 
 export const SettingsDialog = () => {
@@ -19,7 +21,39 @@ export const SettingsDialog = () => {
 
   return (
     <VStack space={2}>
+      <HStack alignItems="center" space={2}>
+        <div className="w-1/3">Appearance</div>
+        <select
+          value={settings.appearance}
+          style={selectBackgroundStyles}
+          onChange={(e) => updateSettings.mutateAsync({ ...settings, appearance: e.target.value })}
+          className={classNames(
+            'font-mono text-xs border w-full px-2 outline-none bg-transparent',
+            'border-highlight focus:border-focus',
+            'h-xs',
+          )}
+        >
+          <option value="system">Match System</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </HStack>
+      <Separator className="my-4" />
+
+      <Heading size={2}>Workspace ({workspace.name})</Heading>
       <VStack className="w-full" space={3}>
+        <Input
+          size="xs"
+          name="requestTimeout"
+          label="Request Timeout (ms)"
+          labelPosition="left"
+          labelClassName="w-1/3"
+          containerClassName="col-span-2"
+          defaultValue={`${workspace.settingRequestTimeout}`}
+          validate={(value) => parseInt(value) >= 0}
+          onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
+        />
+
         <Checkbox
           checked={workspace.settingValidateCertificates}
           title="Validate TLS Certificates"
@@ -35,38 +69,6 @@ export const SettingsDialog = () => {
             updateWorkspace.mutateAsync({ settingFollowRedirects })
           }
         />
-
-        <Input
-          size="xs"
-          name="requestTimeout"
-          label="Request Timeout (ms)"
-          labelPosition="left"
-          labelClassName="w-1/3"
-          containerClassName="col-span-2"
-          defaultValue={`${workspace.settingRequestTimeout}`}
-          validate={(value) => parseInt(value) >= 0}
-          onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
-        />
-
-        <HStack alignItems="center" space={2}>
-          <div className="w-1/3">Appearance</div>
-          <select
-            value={settings.appearance}
-            style={selectBackgroundStyles}
-            onChange={(e) =>
-              updateSettings.mutateAsync({ ...settings, appearance: e.target.value })
-            }
-            className={classNames(
-              'font-mono text-xs border w-full px-2 outline-none bg-transparent',
-              'border-highlight focus:border-focus',
-              'h-xs',
-            )}
-          >
-            <option value="system">Match System</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-          </select>
-        </HStack>
       </VStack>
       {/*<Checkbox checked={appearance === 'dark'} title="Dark Mode" onChange={toggleAppearance} />*/}
     </VStack>

src-web/components/core/Dialog.tsx

@@ -65,8 +65,9 @@ export function Dialog({
             )}
           >
             {title ? (
-              <Heading className="text-xl font-semibold w-full" id={titleId}>
+              <Heading size={1} id={titleId}>
-                {title}
+                {' '}
+                {title}{' '}
               </Heading>
             ) : (
               <span />

src-web/components/core/Dropdown.tsx

@@ -383,7 +383,11 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                 >
                   {items.map((item, i) => {
                     if (item.type === 'separator') {
-                      return <Separator key={i} className="my-1.5" label={item.label} />;
+                      return (
+                        <Separator key={i} className="my-1.5">
+                          {item.label}
+                        </Separator>
+                      );
                     }
                     if (item.hidden) {
                       return null;

src-web/components/core/Heading.tsx

@@ -1,10 +1,22 @@
 import classNames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { ComponentType, HTMLAttributes } from 'react';
 
-export function Heading({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+interface Props extends HTMLAttributes<HTMLHeadingElement> {
+  size?: 1 | 2 | 3;
+}
+
+export function Heading({ className, size = 1, ...props }: Props) {
+  const Component = size === 1 ? 'h1' : size === 2 ? 'h2' : 'h3';
   return (
-    <h1 className={classNames(className, 'text-2xl font-semibold text-gray-900 mb-3')} {...props}>
+    <Component
-      {children}
+      className={classNames(
-    </h1>
+        className,
+        'font-semibold text-gray-900',
+        size === 1 && 'text-2xl',
+        size === 2 && 'text-xl',
+        size === 3 && 'text-lg',
+      )}
+      {...props}
+    />
   );
 }

src-web/components/core/Separator.tsx

@@ -4,18 +4,18 @@ interface Props {
   orientation?: 'horizontal' | 'vertical';
   variant?: 'primary' | 'secondary';
   className?: string;
-  label?: string;
+  children?: string;
 }
 
 export function Separator({
   className,
   variant = 'primary',
   orientation = 'horizontal',
-  label,
+  children,
 }: Props) {
   return (
     <div role="separator" className={classNames(className, 'flex items-center')}>
-      {label && <div className="text-xs text-gray-500 mx-2 whitespace-nowrap">{label}</div>}
+      {children && <div className="text-xs text-gray-500 mx-2 whitespace-nowrap">{children}</div>}
       <div
         className={classNames(
           variant === 'primary' && 'bg-highlight',

tailwind.config.cjs

@@ -52,10 +52,10 @@ module.exports = {
       sm: '0.9rem',
       base: '1rem',
       xl: '1.25rem',
-      '2xl': '1.563rem',
+      '2xl': '1.5rem',
-      '3xl': '1.953rem',
+      '3xl': '2rem',
-      '4xl': '2.441rem',
+      '4xl': '2.5rem',
-      '5xl': '3.052rem',
+      '5xl': '3rem',
     },
     colors: {
       selection: 'hsl(var(--color-violet-500) / 0.3)',