mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 04:51:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhance the navigation header appearance using Tailwind CSS theme

Browse Source 
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
This commit is contained in:
mukimovd 2025-05-01 22:38:48 +00:00
parent 1ea6cec608
commit 427ac70c27
2 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/layout/NavHeader.tsx
View File

@ -3,7 +3,6 @@ import { useTheme } from "@/hooks/use-theme";
import { Search, Moon, Sun, Menu } from "lucide-react"; import { Search, Moon, Sun, Menu } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { theme as themeStyles } from "@/lib/theme";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -16,23 +15,23 @@ export function NavHeader() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return ( 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 justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
<div className="flex items-center space-x-4"> <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 Tercul
</Link> </Link>
<nav className="hidden md:flex items-center space-x-6"> <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 Explore
</Link> </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 Authors
</Link> </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 Collections
</Link> </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 Blog
</Link> </Link>
</nav> </nav>
@ -42,7 +41,7 @@ export function NavHeader() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" 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" /> <Search className="h-5 w-5" />
<span className="sr-only">Search</span> <span className="sr-only">Search</span>
@ -54,7 +53,7 @@ export function NavHeader() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" 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' ? ( {theme === 'dark' ? (
<Moon className="h-5 w-5" /> <Moon className="h-5 w-5" />
@ -77,11 +76,11 @@ export function NavHeader() {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </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"> <Link href="/profile">
<Button <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> <span>Sign In</span>
</Button> </Button>
@ -90,7 +89,7 @@ export function NavHeader() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" 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)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
> >
<Menu className="h-5 w-5" /> <Menu className="h-5 w-5" />
@ -100,18 +99,18 @@ export function NavHeader() {
</div> </div>
{mobileMenuOpen && ( {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"> <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 Explore
</Link> </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 Authors
</Link> </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 Collections
</Link> </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 Blog
</Link> </Link>
</nav> </nav>

1
client/src/lib/theme.ts
View File

@ -1 +0,0 @@
null