Better settings dialog

src-web/components/core/Dialog.tsx

@@ -65,8 +65,9 @@ export function Dialog({
             )}
           >
             {title ? (
-              <Heading className="text-xl font-semibold w-full" id={titleId}>
-                {title}
+              <Heading size={1} id={titleId}>
+                {' '}
+                {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}>
-      {children}
-    </h1>
+    <Component
+      className={classNames(
+        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',