🎨 Add new badges & accessibility improvements

src/components/navbar.svelte

@@ -53,7 +53,7 @@
   <!-- 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">
+      <a href="/" aria-label="Go to the SVGL v4.1 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>

src/components/svgCard.svelte

@@ -28,6 +28,7 @@
   import { onMount } from 'svelte';
   import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard';
   import { insertSVG as figmaInsertSVG } from '@/figma/insert-svg';
+  import { badgeStyles } from '@/ui/styles';
 
   // Props:
   export let svgInfo: iSVG;
@@ -186,34 +187,21 @@
       />
     {/if}
     <!-- Title -->
-    <!-- Aqui se modifico el text-neutral a 400 -->
-    <div class="mb-3 flex flex-col items-center justify-center">
+    <div class="mb-3 flex flex-col space-y-1 items-center justify-center">
       <p class="truncate text-[15px] font-medium text-balance text-center select-all">
         {svgInfo.title}
       </p>
-      <div class="flex flex-wrap justify-center">
+      <div class="flex items-center space-x-1 justify-center">
         {#if Array.isArray(svgInfo.category)}
           {#each svgInfo.category.sort() as c, index}
-            <a
-              href={`/directory/${c.toLowerCase()}`}
-              class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
-            >
-            {#if index < svgInfo.category.length - 1}
-              <span class="text-neutral-500">.</span>
-            {/if}
+            <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c} </a>
           {/each}
         {:else}
-          <a
-            href={`/directory/${svgInfo.category.toLowerCase()}`}
-            class="text-sm lowercase text-neutral-500 hover:underline font-mono"
-            >{svgInfo.category}</a
-          >
+          <a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}>
+            {svgInfo.category}
+          </a>
         {/if}
       </div>
-      <a
-        href={`/directory/${svgInfo.category.toLowerCase()}`}
-        class="text-sm lowercase text-neutral-400 hover:underline font-mono">{svgInfo.category}</a
-      >
     </div>
     <!-- Actions -->
     <div class="flex items-center space-x-1">

src/ui/styles.ts

@@ -3,3 +3,6 @@ export const buttonStyles =
 
 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';
+
+export const badgeStyles =
+  'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline';