🛠️ Create shared UI styles for buttons & inputs

src/components/navbar.svelte

@@ -57,7 +57,7 @@
         <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>

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} />

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

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
+      <button class={buttonStyles} on:click={() => (showAll = true)}>
-        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"
+        <div class="flex items-center space-x-2 relative">
-        on:click={() => (showAll = true)}
-      >
           <ArrowDown size={16} strokeWidth={2} />
           <span>Load All SVGs</span>
           <span class="opacity-70">
             ({filteredSvgs.length - 30} more)
           </span>
+        </div>
       </button>
     </div>
   {/if}

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';