From 1f2a600685ba400aef260d498e8cf62b86242b7e Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 25 Jan 2024 23:13:30 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Main=20alert=20&=20``downloadSvg?=
 =?UTF-8?q?``=20UI=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/downloadSvg.svelte |  8 ++++++--
 src/components/warning.svelte     | 34 +++++++++++++++++--------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/downloadSvg.svelte b/src/components/downloadSvg.svelte
index df979d1..e90cf1d 100644
--- a/src/components/downloadSvg.svelte
+++ b/src/components/downloadSvg.svelte
@@ -14,6 +14,7 @@
     DialogDescription
   } from '@/ui/dialog';
   import { buttonStyles } from '@/ui/styles';
+  import { cn } from '@/utils/cn';
 
   // Props:
   export let svgInfo: iSVG;
@@ -108,13 +109,16 @@
       </DialogHeader>
 
       <div
-        class="flex w-full flex-col md:flex-row items-center justify-center space-y-2 md:space-y-0 md:space-x-2 mt-5"
+        class={cn(
+          'flex flex-col space-y-2 mt-4',
+          'md:space-y-0 md:flex-row md:space-x-4 md:items-center md:justify-center'
+        )}
       >
         <div class={cardDownloadStyles}>
           <img
             src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
             alt={svgInfo.title}
-            class="h-8 my-4"
+            class="h-10 my-4"
           />
           <button
             title="Logo with light & dark variants"
diff --git a/src/components/warning.svelte b/src/components/warning.svelte
index f99c874..c9941fd 100644
--- a/src/components/warning.svelte
+++ b/src/components/warning.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { AlertTriangleIcon, Check } from 'lucide-svelte';
   import { browser } from '$app/environment';
+  import { buttonStyles } from '@/ui/styles';
+  import { cn } from '@/utils/cn';
 
   let warning = false;
   const initialValue = browser ? window.localStorage.getItem('warning') : true;
@@ -8,23 +10,25 @@
 
 {#if !warning && !initialValue}
   <div
-    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"
+    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 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
   >
-    <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
-      <a
-        target="_blank"
-        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>
+    <div class="flex items-center space-x-2">
+      <AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" />
+      <p>
+        All svgs 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-4 decoration-dotted decoration-neutral-500"
+          href="https://github.com/pheralb/svgl/issues/new">create an issue</a
+        > on Github.
+      </p>
+    </div>
     <button
-      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"
+      class={cn(buttonStyles, 'h-10 text-sm')}
       on:click={() => {
         localStorage.setItem('warning', 'true');
         warning = true;