From 076fe671be830adf2284d6efa0dc44e80d78e56e Mon Sep 17 00:00:00 2001
From: 0xKurt <Kurt@Merbeth.io>
Date: Fri, 6 Dec 2024 14:28:03 +0100
Subject: [PATCH] fix: navbar color fix

---
 src/primitives/Navbar/Navbar.stories.tsx |  2 +-
 src/primitives/Navbar/Navbar.tsx         | 10 ++++++----
 tailwind.config.ts                       |  8 +++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/primitives/Navbar/Navbar.stories.tsx b/src/primitives/Navbar/Navbar.stories.tsx
index 24216944..f7a6444f 100644
--- a/src/primitives/Navbar/Navbar.stories.tsx
+++ b/src/primitives/Navbar/Navbar.stories.tsx
@@ -106,7 +106,7 @@ export const WithCustomSizeAndColor: Story = {
       img: CheckerIcon,
       link: "#",
       size: "w-8",
-      color: "moss-500",
+      color: "#d30000",
     },
     text: {
       text: "Custom Size and Color Navbar",
diff --git a/src/primitives/Navbar/Navbar.tsx b/src/primitives/Navbar/Navbar.tsx
index 0e0d7cce..f7e65e90 100644
--- a/src/primitives/Navbar/Navbar.tsx
+++ b/src/primitives/Navbar/Navbar.tsx
@@ -11,7 +11,7 @@ const navbarVariants = tv({
     base: "top-0 flex h-[64px] w-full shrink-0 flex-col items-center justify-center gap-2 p-[10px_80px]",
     container: "flex w-full items-center justify-between",
     leftSection: "flex items-center gap-4",
-    divider: "h-4 border-r border-grey-700",
+    divider: "h-4 border-r-1.5 border-grey-700",
     text: "font-mono text-lg",
     rightSection: "flex items-center",
   },
@@ -60,7 +60,7 @@ export const Navbar = ({
 
     const LogoComponent = img;
     return (
-      <a href={link || "#"}>
+      <a href={link || "#"} style={{ color: color }}>
         <LogoComponent className={logoClasses} />
       </a>
     );
@@ -81,8 +81,10 @@ export const Navbar = ({
         <div className={leftSection()}>
           {renderLogo(primaryLogo || {})}
           {showDivider && <div className={divider()}></div>}
-          {secondaryLogo && renderLogo(secondaryLogo)}
-          {renderText(text)}
+          <div className="flex items-center gap-2">
+            {secondaryLogo && renderLogo(secondaryLogo)}
+            {renderText(text)}
+          </div>
         </div>
         <div className={rightSection()}>{children}</div>
       </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6c0fe63a..6d7f1f17 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,13 +2,19 @@ import { withTV } from "tailwind-variants/transformer";
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
 
+
+
 import { colors } from "./src/tokens/colors";
 
+
 export default withTV({
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   darkMode: ["class", "[data-mode='dark']"],
   theme: {
     extend: {
+      borderWidth: {
+        "1.5": "1.5px",
+      },
       height: {
         "18": "4.5rem",
       },
@@ -68,4 +74,4 @@ export default withTV({
     },
   },
   plugins: [tailwindcssAnimate],
-}) satisfies Config;
+}) satisfies Config;
\ No newline at end of file