From dba937883334b35642eaacc8b5d59bb8f31b0668 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 24 Jan 2024 11:41:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20new=20badges=20&=20accessi?=
 =?UTF-8?q?bility=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navbar.svelte  |  2 +-
 src/components/svgCard.svelte | 26 +++++++-------------------
 src/ui/styles.ts              |  3 +++
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index 9b3df11..f900fce 100644
--- a/src/components/navbar.svelte
+++ b/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>
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index 828a40c..0e44495 100644
--- a/src/components/svgCard.svelte
+++ b/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">
diff --git a/src/ui/styles.ts b/src/ui/styles.ts
index d0accae..d3440ca 100644
--- a/src/ui/styles.ts
+++ b/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';