Resize titlebar and tweak things

src-web/components/core/Button.tsx

@@ -59,14 +59,14 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     return (
       <Link ref={ref} to={to} className={classes} {...props}>
         {children}
-        {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
+        {forDropdown && <Icon icon="chevronDown" className="ml-1 -mr-1" />}
       </Link>
     );
   } else {
     return (
       <button ref={ref} className={classes} {...props}>
         {children}
-        {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
+        {forDropdown && <Icon icon="chevronDown" size="sm" className="ml-1 -mr-1" />}
       </button>
     );
   }

src-web/components/core/Icon.tsx

@@ -3,6 +3,7 @@ import {
   CameraIcon,
   CheckboxIcon,
   CheckIcon,
+  ChevronDownIcon,
   ClockIcon,
   CodeIcon,
   ColorWheelIcon,
@@ -49,6 +50,7 @@ const icons = {
   home: HomeIcon,
   listBullet: ListBulletIcon,
   magicWand: MagicWandIcon,
+  chevronDown: ChevronDownIcon,
   magnifyingGlass: MagnifyingGlassIcon,
   moon: MoonIcon,
   paperPlane: PaperPlaneIcon,

src-web/components/core/Input.tsx

@@ -80,7 +80,7 @@ export function Input({
         className={classnames(
           containerClassName,
           'relative w-full rounded-md text-gray-900',
-          'border border-gray-200 focus-within:border-focus',
+          'border border-highlight focus-within:border-focus',
           !isValid && '!border-invalid',
           size === 'md' && 'h-md leading-md',
           size === 'sm' && 'h-sm leading-sm',

src-web/components/core/PairEditor.tsx

@@ -271,7 +271,6 @@ const FormRow = memo(function FormRow({
         onChange={handleChangeEnabled}
       />
       <div
-        onDragStart={(e) => e.preventDefault()}
         className={classnames(
           'grid items-center',
           '@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',

src-web/components/core/Separator.tsx

@@ -2,16 +2,18 @@ import classnames from 'classnames';
 
 interface Props {
   orientation?: 'horizontal' | 'vertical';
+  variant?: 'primary' | 'secondary';
   className?: string;
 }
 
-export function Separator({ className, orientation = 'horizontal' }: Props) {
+export function Separator({ className, variant = 'primary', orientation = 'horizontal' }: Props) {
   return (
     <div
       role="separator"
       className={classnames(
         className,
-        'bg-gray-300/40',
+        variant === 'primary' && 'bg-highlight',
+        variant === 'secondary' && 'bg-highlightSecondary',
         orientation === 'horizontal' && 'w-full h-[1px]',
         orientation === 'vertical' && 'h-full w-[1px]',
       )}

src-web/components/core/WindowDragRegion.tsx

@@ -10,7 +10,7 @@ export function WindowDragRegion({ className, ...props }: Props) {
   return (
     <div
       data-tauri-drag-region
-      className={classnames(className, 'w-full h-12 flex-shrink-0')}
+      className={classnames(className, 'w-full h-md flex-shrink-0')}
       {...props}
     />
   );