From b3f670ef52f77ac2cfd223415ebb9b55d50797a0 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Tue, 9 Apr 2024 19:23:28 +0400
Subject: [PATCH] Refactor code to use Tailwind color names

This commit includes both a typo fix in the `icons.ts` file, and substituting hard-coded color hex codes with corresponding Tailwind color palette names.
---
 src/components/ui/blocks/TabNav.astro | 2 +-
 src/components/ui/icons/icons.ts      | 2 +-
 src/components/ui/links/NavLink.astro | 2 +-
 src/pages/products/[...slug].astro    | 6 +++---
 tailwind.config.mjs                   | 1 +
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/blocks/TabNav.astro b/src/components/ui/blocks/TabNav.astro
index 6a9eff4..d6f6210 100644
--- a/src/components/ui/blocks/TabNav.astro
+++ b/src/components/ui/blocks/TabNav.astro
@@ -43,7 +43,7 @@ Example:
     <span class="ms-6 grow">
       <!-- Heading of the tab, changes color when active -->
       <span
-        class="block text-lg font-bold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
+        class="block text-lg font-bold text-neutral-800 hs-tab-active:text-orange-400 dark:text-neutral-200 dark:hs-tab-active:text-orange-300"
         >{heading}</span
       >
       <!-- Content of the tab, changes color when active -->
diff --git a/src/components/ui/icons/icons.ts b/src/components/ui/icons/icons.ts
index ac6bef2..1d1eb74 100644
--- a/src/components/ui/icons/icons.ts
+++ b/src/components/ui/icons/icons.ts
@@ -203,7 +203,7 @@ export const Icons = {
       },
     ],
     class:
-      "w-4.5 h-4.5 tarnsition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1",
+      "w-4.5 h-4.5 transition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1",
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
diff --git a/src/components/ui/links/NavLink.astro b/src/components/ui/links/NavLink.astro
index e1c5411..46d1999 100644
--- a/src/components/ui/links/NavLink.astro
+++ b/src/components/ui/links/NavLink.astro
@@ -45,7 +45,7 @@ If URL is '/' (home page), assign ID as 'home'
         "hover:text-neutral-500",
         "dark:hover:text-neutral-500"
       );
-      nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
+      nav.classList.add("text-orange-400", "dark:text-orange-300");
       nav.setAttribute("aria-current", "page");
     }
   });
diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index 5e640a9..5779038 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -269,7 +269,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
           changeHeadingStyle(
             btn,
             ["text-neutral-800", "dark:text-neutral-200"],
-            ["text-[#fa5a15]", "dark:text-[#fb713b]"],
+            ["text-orange-400", "dark:text-orange-300"],
           );
         }
       }
@@ -292,7 +292,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
 
         changeHeadingStyle(
           button,
-          ["text-[#fa5a15]", "dark:text-[#fb713b]"],
+          ["text-orange-400", "dark:text-orange-300"],
           ["text-neutral-800", "dark:text-neutral-200"],
         );
       }
@@ -314,7 +314,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
       if (tabButtons.length > 0) {
         changeHeadingStyle(
           tabButtons[0],
-          ["text-[#fa5a15]", "dark:text-[#fb713b]"],
+          ["text-orange-400", "dark:text-orange-300"],
           [],
         );
       }
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 5233e7a..f510dfe 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -55,6 +55,7 @@ export default {
       },
       zinc: {
         200: "#e4e4e7",
+        400: "#a1a1aa",
         500: "#71717a",
         600: "#52525b",
         700: "#3f3f46",