From 427ac70c27c79a8dba7a2a8dec3d703262d92f12 Mon Sep 17 00:00:00 2001
From: mukimovd <41473651-mukimovd@users.noreply.replit.com>
Date: Thu, 1 May 2025 22:38:48 +0000
Subject: [PATCH] Enhance the navigation header appearance using Tailwind CSS
 theme

Removes custom theme styles and applies Tailwind CSS theme classes to NavHeader.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/a5b1f5ac-8eda-45e5-b094-ec4681f669ee.jpg
---
 client/src/components/layout/NavHeader.tsx | 33 +++++++++++-----------
 client/src/lib/theme.ts                    |  1 -
 2 files changed, 16 insertions(+), 18 deletions(-)
 delete mode 100644 client/src/lib/theme.ts

diff --git a/client/src/components/layout/NavHeader.tsx b/client/src/components/layout/NavHeader.tsx
index 7727ed3..b782a80 100644
--- a/client/src/components/layout/NavHeader.tsx
+++ b/client/src/components/layout/NavHeader.tsx
@@ -3,7 +3,6 @@ import { useTheme } from "@/hooks/use-theme";
 import { Search, Moon, Sun, Menu } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { theme as themeStyles } from "@/lib/theme";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,23 +15,23 @@ export function NavHeader() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className={`navigation-header border-b ${themeStyles.border.muted} bg-background dark:bg-background sticky top-0 z-10 shadow-sm`}>
+    <header className="navigation-header border-b border-border/30 bg-background dark:bg-background sticky top-0 z-10 shadow-sm">
       <div className="flex items-center justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
         <div className="flex items-center space-x-4">
-          <Link href="/" className={`font-serif text-2xl font-semibold tracking-tight ${themeStyles.text.heading}`}>
+          <Link href="/" className="font-serif text-2xl font-semibold tracking-tight text-primary dark:text-primary-foreground">
             Tercul
           </Link>
           <nav className="hidden md:flex items-center space-x-6">
-            <Link href="/explore" className={themeStyles.nav.link}>
+            <Link href="/explore" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
               Explore
             </Link>
-            <Link href="/authors" className={themeStyles.nav.link}>
+            <Link href="/authors" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
               Authors
             </Link>
-            <Link href="/collections" className={themeStyles.nav.link}>
+            <Link href="/collections" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
               Collections
             </Link>
-            <Link href="/blog" className={themeStyles.nav.link}>
+            <Link href="/blog" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
               Blog
             </Link>
           </nav>
@@ -42,7 +41,7 @@ export function NavHeader() {
             <Button 
               variant="ghost" 
               size="icon"
-              className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
+              className="p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20"
             >
               <Search className="h-5 w-5" />
               <span className="sr-only">Search</span>
@@ -54,7 +53,7 @@ export function NavHeader() {
               <Button 
                 variant="ghost" 
                 size="icon"
-                className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
+                className="p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20"
               >
                 {theme === 'dark' ? (
                   <Moon className="h-5 w-5" />
@@ -77,11 +76,11 @@ export function NavHeader() {
             </DropdownMenuContent>
           </DropdownMenu>
           
-          <div className="h-6 w-px bg-sage/20 dark:bg-sage/20 mx-1"></div>
+          <div className="h-6 w-px bg-accent/20 dark:bg-accent/20 mx-1"></div>
           
           <Link href="/profile">
             <Button
-              className="btn-feedback flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-sage/20 dark:bg-sage/20 text-navy dark:text-cream/90 hover:bg-sage/30 dark:hover:bg-sage/30 transition-colors"
+              className="flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-accent/20 dark:bg-accent/20 text-foreground dark:text-foreground/90 hover:bg-accent/30 dark:hover:bg-accent/30 transition-colors"
             >
               <span>Sign In</span>
             </Button>
@@ -90,7 +89,7 @@ export function NavHeader() {
           <Button 
             variant="ghost" 
             size="icon"
-            className="md:hidden btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
+            className="md:hidden p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20"
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           >
             <Menu className="h-5 w-5" />
@@ -100,18 +99,18 @@ export function NavHeader() {
       </div>
       
       {mobileMenuOpen && (
-        <div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20">
+        <div className="md:hidden px-4 py-3 bg-background dark:bg-background border-t border-border/30 dark:border-border/30">
           <nav className="flex flex-col space-y-3">
-            <Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/explore" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
               Explore
             </Link>
-            <Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/authors" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
               Authors
             </Link>
-            <Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/collections" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
               Collections
             </Link>
-            <Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/blog" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
               Blog
             </Link>
           </nav>
diff --git a/client/src/lib/theme.ts b/client/src/lib/theme.ts
deleted file mode 100644
index ec747fa..0000000
--- a/client/src/lib/theme.ts
+++ /dev/null
@@ -1 +0,0 @@
-null
\ No newline at end of file