🎨 Design improvements

src/components/svgs/downloadSvg.svelte

@@ -118,7 +118,7 @@
       </Dialog.Header>
       <div
         class={cn(
-          "flex h-full flex-col space-y-2 pt-4 pb-0.5",
+          "flex h-full flex-col space-y-2 pt-2 pb-0.5",
           "md:flex-row md:items-center md:justify-center md:space-y-0 md:space-x-2",
         )}
       >
@@ -130,6 +130,7 @@
               class="my-4 h-8"
             />
             <Button
+              class="justify-start"
               title="Download logo"
               variant="outline"
               onclick={() => {
@@ -151,6 +152,7 @@
               class="my-4 h-10"
             />
             <Button
+              class="justify-start"
               title="Logo with light & dark variants"
               variant="outline"
               onclick={() => {
@@ -167,6 +169,7 @@
             </Button>
 
             <Button
+              class="justify-start"
               title="Download light variant"
               variant="outline"
               onclick={() => {
@@ -181,6 +184,7 @@
             </Button>
 
             <Button
+              class="justify-start"
               title="Download dark variant"
               variant="outline"
               onclick={() => {
@@ -204,6 +208,7 @@
               class="my-4 h-8"
             />
             <Button
+              class="justify-start"
               title="Download Wordmark logo"
               variant="outline"
               onclick={() => {
@@ -229,6 +234,7 @@
               class="my-4 h-10"
             />
             <Button
+              class="justify-start"
               title="Download Wordmark light variant"
               variant="outline"
               onclick={() => {
@@ -247,6 +253,7 @@
             </Button>
 
             <Button
+              class="justify-start"
               title="Download Wordmark light variant"
               variant="outline"
               onclick={() => {
@@ -261,6 +268,7 @@
             </Button>
 
             <Button
+              class="justify-start"
               title="Download Wordmark dark variant"
               variant="outline"
               onclick={() => {

src/components/ui/dialog/dialog-content.svelte

@@ -27,7 +27,7 @@
     bind:ref
     data-slot="dialog-content"
     class={cn(
-      "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg dark:border-neutral-800 dark:bg-neutral-900",
+      "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-2 rounded-lg border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg dark:border-neutral-800 dark:bg-neutral-900",
       className,
     )}
     {...restProps}

src/components/ui/dialog/dialog-header.svelte

@@ -14,7 +14,7 @@
 <div
   bind:this={ref}
   data-slot="dialog-header"
-  class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+  class={cn("mb-2 flex flex-col gap-1 text-center sm:text-left", className)}
   {...restProps}
 >
   {@render children?.()}

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
   import { ModeWatcher } from "mode-watcher";
   import Sidebar from "@/components/layout/sidebar.svelte";
   import ViewTransitions from "@/components/viewTransitions.svelte";
+  import Sonner from "@/components/ui/sonner/sonner.svelte";
 
   // SSR Data:
   let { data, children }: LayoutProps = $props();
@@ -18,6 +19,7 @@
 
 <ModeWatcher />
 <ViewTransitions />
+<Sonner />
 <Header githubStars={data?.stars} />
 <Sidebar>
   {@render children?.()}