From 2f7965093eae3e138a1f7d6d318cacf47dfba967 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 18 Dec 2023 10:23:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Update=20warning=20message.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/warning.svelte | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/warning.svelte b/src/components/warning.svelte
index 6568e4a..f99c874 100644
--- a/src/components/warning.svelte
+++ b/src/components/warning.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AlertTriangleIcon } from 'lucide-svelte';
+  import { AlertTriangleIcon, Check } from 'lucide-svelte';
   import { browser } from '$app/environment';
 
   let warning = false;
@@ -8,26 +8,30 @@
 
 {#if !warning && !initialValue}
   <div
-    class="flex items-center md:flex-row flex-col md:space-x-2 space-x-0 p-3 bg-neutral-100 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
+    class="flex items-center 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 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
   >
-    <AlertTriangleIcon size={18} strokeWidth={2} class="mr-2 text-yellow-500" />
+    <AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" />
     <p>
-      Each svg provides the link to the product or company that owns it, <strong>please contact them</strong> if you are going to use their logo. If you are the owner
-      of an svg and do not want it to appear here, please
+      Each svg provides the link to the product or company that owns it, <strong
+        >please contact them</strong
+      >
+      if you are going to use their logo. If you are the owner of an svg and do not want it to appear
+      here, please
       <a
         target="_blank"
-        class="underline underline-offset-2"
+        class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
         href="https://github.com/pheralb/svgl/issues/new">create an issue</a
       > on Github.
     </p>
     <button
-      class="ml-auto flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      class="ml-auto transition-colors flex items-center space-x-1 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 bg-neutral-200/50 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
       on:click={() => {
         localStorage.setItem('warning', 'true');
         warning = true;
       }}
     >
-      Accept
+      <Check size={14} strokeWidth={2} />
+      <span>Accept</span>
     </button>
   </div>
 {/if}