fix: navbar color fix

gitcoinco · Dec 6, 2024 · 076fe67 · 076fe67
1 parent 3e8b0de
commit 076fe67
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;