From 21644297d199634cb7f15016828448d3b15ceb62 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 13 Mar 2025 10:26:14 -0700
Subject: [PATCH] fix: Toolbar spacing and colors

---
 src/app.postcss                               | 10 +++----
 src/lib/components/FloatingToolbar.svelte     |  2 +-
 src/lib/components/Navbar.svelte              |  2 +-
 src/lib/components/PanZoomToolbar.svelte      |  4 +--
 src/lib/components/SyncRoughToolbar.svelte    | 28 +++++++++++--------
 .../components/VersionSecurityToolbar.svelte  |  8 +++---
 src/lib/components/View.svelte                | 18 +++++++++++-
 src/lib/components/ui/button/button.svelte    |  8 +++---
 src/lib/components/ui/switch/switch.svelte    |  2 +-
 src/lib/components/ui/toggle/toggle.svelte    |  6 ++--
 10 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index bdafba24..e773040c 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -12,14 +12,14 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 240 10% 91%;
+    --primary-foreground: 255 20% 15%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 340 100% 44%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 72.22% 50.59%;
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
@@ -40,7 +40,7 @@
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 340 100% 44%;
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
diff --git a/src/lib/components/FloatingToolbar.svelte b/src/lib/components/FloatingToolbar.svelte
index efcf8fcc..c2e3f645 100644
--- a/src/lib/components/FloatingToolbar.svelte
+++ b/src/lib/components/FloatingToolbar.svelte
@@ -8,6 +8,6 @@
   let { children }: Props = $props();
 </script>
 
-<div class="flex items-center justify-between gap-2 rounded-2xl bg-muted p-2">
+<div class="flex h-12 items-center justify-between gap-2 rounded-2xl bg-muted p-3">
   {@render children()}
 </div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 03abf091..e4add60c 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -89,7 +89,7 @@
   </div>
 {/if}
 
-<nav class="z-50 flex p-4 px-6">
+<nav class="z-50 flex p-6">
   <div class="flex flex-1 items-center gap-4">
     <Button variant="link" size="icon" href="/">
       <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
diff --git a/src/lib/components/PanZoomToolbar.svelte b/src/lib/components/PanZoomToolbar.svelte
index 409148ab..98e86ca2 100644
--- a/src/lib/components/PanZoomToolbar.svelte
+++ b/src/lib/components/PanZoomToolbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PanZoomState } from '$/util/panZoom';
-  import ExpandIcon from '~icons/material-symbols/arrow-range';
+  import ExpandIcon from '~icons/material-symbols/open-in-full-rounded';
   import ArrowsToCircleIcon from '~icons/material-symbols/screenshot-frame-2';
   import MagnifyingGlassPlusIcon from '~icons/material-symbols/zoom-in';
   import MagnifyingGlassMinusIcon from '~icons/material-symbols/zoom-out';
@@ -24,6 +24,6 @@
   </Button>
   <Separator orientation="vertical" />
   <Button variant="ghost" size="icon" title="Full Screen">
-    <ExpandIcon class="-rotate-45" />
+    <ExpandIcon />
   </Button>
 </FloatingToolbar>
diff --git a/src/lib/components/SyncRoughToolbar.svelte b/src/lib/components/SyncRoughToolbar.svelte
index 75ce738a..226eae16 100644
--- a/src/lib/components/SyncRoughToolbar.svelte
+++ b/src/lib/components/SyncRoughToolbar.svelte
@@ -4,11 +4,15 @@
   import { slide } from 'svelte/transition';
   import SyncIcon from '~icons/fa6-solid/arrows-rotate';
   import FloatingToolbar from './FloatingToolbar.svelte';
+  import { Button } from './ui/button';
+  import { Separator } from './ui/separator';
   import { Switch } from './ui/switch';
 </script>
 
 <FloatingToolbar>
   <label class="label flex cursor-pointer items-center gap-2" for="rough">
+    <span>Hand-Drawn</span>
+
     <Switch
       bind:checked={$inputStateStore.rough}
       onclick={() => {
@@ -16,22 +20,24 @@
           syncDiagram();
         }
       }}
-      name="rough" />
-    <span>Hand drawn</span>
+      id="rough" />
   </label>
 
+  <Separator orientation="vertical" />
+
   <label class="label flex cursor-pointer items-center gap-2" for="autoSync">
-    <Switch bind:checked={$inputStateStore.autoSync} name="autoSync" />
-    <span> Auto sync</span>
+    <span>Auto-Sync</span>
+    <Switch bind:checked={$inputStateStore.autoSync} id="autoSync" />
   </label>
 
   {#if !$stateStore.autoSync}
-    <button
-      transition:slide={{ axis: 'x' }}
-      class="btn btn-secondary btn-xs ml-2"
-      title="Sync Diagram ({cmdKey} + Enter)"
-      aria-label="Sync Diagram"
-      data-cy="sync"
-      onclick={syncDiagram}><SyncIcon /></button>
+    <div transition:slide={{ axis: 'x' }}>
+      <Button
+        size="icon"
+        title="Sync Diagram ({cmdKey} + Enter)"
+        aria-label="Sync Diagram"
+        data-cy="sync"
+        onclick={syncDiagram}><SyncIcon /></Button>
+    </div>
   {/if}
 </FloatingToolbar>
diff --git a/src/lib/components/VersionSecurityToolbar.svelte b/src/lib/components/VersionSecurityToolbar.svelte
index 8f510cf2..522bfff8 100644
--- a/src/lib/components/VersionSecurityToolbar.svelte
+++ b/src/lib/components/VersionSecurityToolbar.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { version } from 'mermaid/package.json';
-  import QuestionCircleIcon from '~icons/fa6-solid/circle-question';
-  import ShieldHalvedIcon from '~icons/fa6-solid/shield-halved';
+  import QuestionCircleIcon from '~icons/material-symbols/help-outline-rounded';
+  import ShieldIcon from '~icons/material-symbols/shield-lock-outline-rounded';
   import FloatingToolbar from './FloatingToolbar.svelte';
   import { Button } from './ui/button';
   import { Separator } from './ui/separator';
 </script>
 
 <FloatingToolbar>
-  <span class="text-sm opacity-50">v{version}</span>
+  <span class="text-sm font-semibold opacity-60">v{version}</span>
   <Button variant="ghost" size="icon" title="Privacy & Security">
-    <ShieldHalvedIcon />
+    <ShieldIcon />
   </Button>
 
   <Separator orientation="vertical" />
diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
index 0476f1f6..3d060c6b 100644
--- a/src/lib/components/View.svelte
+++ b/src/lib/components/View.svelte
@@ -7,6 +7,7 @@
   import { logEvent, saveStatistics } from '$lib/util/stats';
   import { cmdKey } from '$lib/util/util';
   import type { MermaidConfig } from 'mermaid';
+  import { mode } from 'mode-watcher';
   import { onMount } from 'svelte';
   import { Svg2Roughjs } from 'svg2roughjs';
   import SyncIcon from '~icons/fa6-solid/arrows-rotate';
@@ -153,7 +154,12 @@
   </div>
 {/if}
 
-<div id="view" bind:this={view} class="h-full p-2" class:error class:outOfSync>
+<div
+  id="view"
+  bind:this={view}
+  class="grid-bg-{$mode === 'dark' ? 'dark' : 'light'} h-full"
+  class:error
+  class:outOfSync>
   <div id="container" bind:this={container} class="h-full overflow-auto" class:hide></div>
 </div>
 
@@ -174,4 +180,14 @@
   .hide {
     visibility: hidden;
   }
+
+  .grid-bg-light {
+    background-size: 30px 30px;
+    background-image: radial-gradient(circle, #e4e4e789 2px, rgba(0, 0, 0, 0) 2px);
+  }
+
+  .grid-bg-dark {
+    background-size: 30px 30px;
+    background-image: radial-gradient(circle, #46464646 2px, rgba(0, 0, 0, 0) 2px);
+  }
 </style>
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 895760a0..a9182a98 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -4,22 +4,22 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const buttonVariants = tv({
-    base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0',
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
         outline:
           'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-primary hover:text-primary-foreground',
         link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-9 px-4 py-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9'
+        icon: 'size-8'
       }
     },
     defaultVariants: {
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
index 88e3d139..647c090f 100644
--- a/src/lib/components/ui/switch/switch.svelte
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -14,7 +14,7 @@
   bind:ref
   bind:checked
   class={cn(
-    'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-input',
+    'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-primary/50',
     className
   )}
   {...restProps}>
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
index d19df9d2..c104be72 100644
--- a/src/lib/components/ui/toggle/toggle.svelte
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -2,12 +2,12 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const toggleVariants = tv({
-    base: 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    base: 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-primary data-[state=on]:text-primary-foreground inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0',
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm'
+          'border-input hover:bg-primary/80 hover:text-primary-foreground border bg-transparent'
       },
       size: {
         default: 'h-9 min-w-9 px-3',
@@ -27,8 +27,8 @@
 </script>
 
 <script lang="ts">
-  import { Toggle as TogglePrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { Toggle as TogglePrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),