From 49e1927e7e5e6fa5e745ccdcf392eb08defd64ec Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 24 Jan 2024 11:01:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Create=20shared=20UI=20?=
 =?UTF-8?q?styles=20for=20buttons=20&=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navbar.svelte   |  4 ++--
 src/components/notFound.svelte |  7 ++++---
 src/components/search.svelte   |  3 ++-
 src/routes/+page.svelte        | 18 +++++++++---------
 src/ui/styles.ts               |  5 +++++
 5 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 src/ui/styles.ts

diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index b700af0..9b3df11 100644
--- a/src/components/navbar.svelte
+++ b/src/components/navbar.svelte
@@ -50,14 +50,14 @@
     'backdrop-blur-md opacity-95'
   )}
 >
-<!-- Se le puso un aria-label al href="/" -->
+  <!-- Se le puso un aria-label al href="/" -->
   <div class="flex items-center justify-between mx-auto">
     <div class="flex items-center space-x-2">
       <a href="/" aria-label="Go to the SVGL v4.0 home page">
         <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
-          <p class="text-neutral-400 hidden md:block font-mono">v4.0</p>
+          <p class="text-neutral-400 hidden md:block font-mono">v4.1</p>
         </div>
       </a>
     </div>
diff --git a/src/components/notFound.svelte b/src/components/notFound.svelte
index 1d315a4..2995d5c 100644
--- a/src/components/notFound.svelte
+++ b/src/components/notFound.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { buttonStyles } from '@/ui/styles';
   export let notFoundTerm: string;
   import { PackageOpen, ArrowUpRight } from 'lucide-svelte';
 </script>
@@ -11,15 +12,15 @@
     <a
       href="https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started"
       target="_blank"
-      class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
+      class={buttonStyles}
     >
       <span>Submit logo</span>
       <ArrowUpRight size={16} />
     </a>
     <a
-      href="https://github.com/pheralb/svgl/issues/new"
+      href="https://github.com/pheralb/svgl/issues/new?assignees=pheralb&labels=request&projects=&template=request-svg-.md&title=%5BRequest%5D%3A"
       target="_blank"
-      class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
+      class={buttonStyles}
     >
       <span>Request SVG</span>
       <ArrowUpRight size={16} />
diff --git a/src/components/search.svelte b/src/components/search.svelte
index 3cd7eaf..d28dcd2 100644
--- a/src/components/search.svelte
+++ b/src/components/search.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { inputStyles } from '@/ui/styles';
   import { Command, SearchIcon } from 'lucide-svelte';
   export let searchTerm: string;
   export let placeholder: string = 'Search...';
@@ -36,7 +37,7 @@
       type="text"
       {placeholder}
       autocomplete="off"
-      class="w-full border-b border-neutral-300 bg-white p-3 px-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700"
+      class={inputStyles}
       bind:value={searchTerm}
       on:input
       use:focusInput
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 28a8372..f6b541a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,6 +15,7 @@
 
   // Icons:
   import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
+  import { buttonStyles } from '@/ui/styles';
 
   let sorted: boolean = false;
   let isFirstLoad: boolean = true;
@@ -117,15 +118,14 @@
   </Grid>
   {#if filteredSvgs.length > 30 && !showAll}
     <div class="flex items-center justify-center mt-4">
-      <button
-        class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
-        on:click={() => (showAll = true)}
-      >
-        <ArrowDown size={16} strokeWidth={2} />
-        <span>Load All SVGs</span>
-        <span class="opacity-70">
-          ({filteredSvgs.length - 30} more)
-        </span>
+      <button class={buttonStyles} on:click={() => (showAll = true)}>
+        <div class="flex items-center space-x-2 relative">
+          <ArrowDown size={16} strokeWidth={2} />
+          <span>Load All SVGs</span>
+          <span class="opacity-70">
+            ({filteredSvgs.length - 30} more)
+          </span>
+        </div>
       </button>
     </div>
   {/if}
diff --git a/src/ui/styles.ts b/src/ui/styles.ts
new file mode 100644
index 0000000..d0accae
--- /dev/null
+++ b/src/ui/styles.ts
@@ -0,0 +1,5 @@
+export const buttonStyles =
+  'flex items-center space-x-2 relative h-10 overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-transparent px-4 text-neutral-950 dark:text-white hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-700 transition-colors duration-200';
+
+export const inputStyles =
+  'w-full border-b border-neutral-300 bg-white p-3 px-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700';