From 81cbbb2b8c20fc54ab94778c806500be76c36500 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 25 Feb 2025 15:10:43 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improve=20download=20SVG=20dialog?=
 =?UTF-8?q?=20with=20footer=20and=20fix=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/downloadSvg.svelte | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/downloadSvg.svelte b/src/components/downloadSvg.svelte
index cc8323d..01408e3 100644
--- a/src/components/downloadSvg.svelte
+++ b/src/components/downloadSvg.svelte
@@ -11,7 +11,8 @@
     DialogContent,
     DialogHeader,
     DialogTitle,
-    DialogDescription
+    DialogDescription,
+    DialogFooter
   } from '@/ui/dialog';
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
@@ -104,14 +105,13 @@
     </DialogTrigger>
     <DialogContent class="max-w-[630px]">
       <DialogHeader>
-        <DialogTitle>Download {svgInfo.title}</DialogTitle>
+        <DialogTitle>Download {svgInfo.title} SVG</DialogTitle>
         <DialogDescription>This logo has multiple options to download:</DialogDescription>
       </DialogHeader>
-
       <div
         class={cn(
-          'flex flex-col space-y-2 mt-4 h-full',
-          'md:space-y-0 md:flex-row md:space-x-2 md:items-center md:justify-center'
+          'flex h-full flex-col space-y-2 pb-0.5 pt-4',
+          'md:flex-row md:items-center md:justify-center md:space-x-2 md:space-y-0'
         )}
       >
         {#if typeof svgInfo.route === 'string'}
@@ -119,7 +119,7 @@
             <img
               src={isDarkTheme() ? svgInfo.route : svgInfo.route}
               alt={svgInfo.title}
-              class="h-8 my-4"
+              class="my-4 h-8"
             />
             <button
               title="Download logo"
@@ -140,7 +140,7 @@
             <img
               src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
               alt={svgInfo.title}
-              class="h-10 my-4"
+              class="my-4 h-10"
             />
             <button
               title="Logo with light & dark variants"
@@ -193,7 +193,7 @@
             <img
               src={isDarkTheme() ? svgInfo.wordmark : svgInfo.wordmark}
               alt={svgInfo.title}
-              class="h-8 my-4"
+              class="my-4 h-8"
             />
             <button
               title="Download Wordmark logo"
@@ -216,7 +216,7 @@
             <img
               src={isDarkTheme() ? svgInfo.wordmark.dark : svgInfo.wordmark.light}
               alt={svgInfo.title}
-              class="h-10 my-4"
+              class="my-4 h-10"
             />
             <button
               title="Download Wordmark light variant"
@@ -266,6 +266,12 @@
           </div>
         {/if}
       </div>
+      <DialogFooter class="mt-3 text-xs text-neutral-600 dark:text-neutral-400">
+        <p>
+          Remember to request permission from the creators for the use of the SVG. Modification is
+          not allowed.
+        </p>
+      </DialogFooter>
     </DialogContent>
   </Dialog>
 {/if}