From 3b2dc0b79dbed64cf2c49a8e6e09e548cd885b27 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 15 Jan 2025 11:40:10 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=8D=EF=B8=8F=20Update=20warning=20message?=
 =?UTF-8?q?=20+=20add=20message=20to=20copy=20svg=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/copySvg.svelte         |  8 ++++++++
 src/components/warning.svelte         | 12 ++++++------
 src/ui/popover/popover-content.svelte |  2 +-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/copySvg.svelte b/src/components/copySvg.svelte
index 4f3ecaa..526319d 100644
--- a/src/components/copySvg.svelte
+++ b/src/components/copySvg.svelte
@@ -309,5 +309,13 @@
         </section>
       </Tabs.Content>
     </Tabs.Root>
+    <div
+      class="mt-1 flex w-full items-center text-center text-[12px] 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>
+    </div>
   </Popover.Content>
 </Popover.Root>
diff --git a/src/components/warning.svelte b/src/components/warning.svelte
index 8a7b9a3..dd3e224 100644
--- a/src/components/warning.svelte
+++ b/src/components/warning.svelte
@@ -5,28 +5,28 @@
   import { cn } from '@/utils/cn';
 
   let warning = false;
-  let warningName = 'svgl_warning_message';
+  let warningName = 'svgl_warn_message';
   const initialValue = browser ? window.localStorage.getItem(warningName) : true;
 </script>
 
 {#if !warning && !initialValue}
   <div
-    class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100/60 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300 border-b border-neutral-200 dark:border-neutral-800"
+    class="flex w-full flex-col items-center justify-between space-x-0 space-y-2 border-b border-neutral-200 bg-neutral-100/60 px-3 py-2 text-neutral-700 dark:border-neutral-800 dark:bg-neutral-800/40 dark:text-neutral-300 md:flex-row md:space-x-2 md:space-y-0"
   >
     <div class="flex items-center space-x-2">
       <AlertTriangleIcon
         size={18}
         strokeWidth={2}
-        class="mr-1 flex-shrink-0 text-yellow-600 dark:text-yellow-500 animate-pulse"
+        class="mr-1 flex-shrink-0 animate-pulse text-yellow-600 dark:text-yellow-500"
       />
       <p>
         All SVGs include links to the respective products or companies that own them. <strong
-          >Please contact the owner directly if you intend to use their logo.</strong
+          >Please contact the owner directly if you need to use their logo.</strong
         >
-        If you are the owner of an SVG and prefer it not to be displayed here,
+        If you are the owner of an SVG and would like it removed,
         <a
           target="_blank"
-          class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
+          class="underline decoration-neutral-500 decoration-dotted underline-offset-4"
           href="https://github.com/pheralb/svgl/issues/new">create an issue</a
         > on GitHub.
       </p>
diff --git a/src/ui/popover/popover-content.svelte b/src/ui/popover/popover-content.svelte
index d6e3f76..796ce56 100644
--- a/src/ui/popover/popover-content.svelte
+++ b/src/ui/popover/popover-content.svelte
@@ -21,7 +21,7 @@
   {sideOffset}
   {...$$restProps}
   class={cn(
-    'z-50 w-auto rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
+    'z-50 w-auto max-w-96 rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
     className
   )}
 >