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

Refine the site's color scheme to align with the established design principles

Browse Source 
Updates the CSS variables and NavHeader component to use a darker color palette.

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/7b06014c-8839-481c-adbf-6d13eb92fa3a.jpg
This commit is contained in:
mukimovd 2025-05-01 22:28:00 +00:00
parent 7b8519f768
commit 4fb9ba3751
4 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1746138221623.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 982 KiB

BIN
attached_assets/screenshot-1746138258154.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

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

@ -15,23 +15,23 @@ export function NavHeader() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-dark-bg sticky top-0 z-10 shadow-sm">
<header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-paper 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="text-navy dark:text-sage font-serif text-2xl font-semibold tracking-tight">
<Link href="/" className="text-navy dark:text-cream font-serif text-2xl font-semibold tracking-tight">
Tercul
</Link>
<nav className="hidden md:flex items-center space-x-6">
<Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<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">
Explore
</Link>
<Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<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">
Authors
</Link>
<Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<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">
Collections
</Link>
<Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<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">
Blog
</Link>
</nav>
@ -41,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-navy/10 dark:hover:bg-cream/10"
className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
>
<Search className="h-5 w-5" />
<span className="sr-only">Search</span>
@ -53,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-navy/10 dark:hover:bg-cream/10"
className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
>
{theme === 'dark' ? (
<Moon className="h-5 w-5" />
@ -76,11 +76,11 @@ export function NavHeader() {
</DropdownMenuContent>
</DropdownMenu>
<div className="h-6 w-px bg-sage/20 dark:bg-sage/10 mx-1"></div>
<div className="h-6 w-px bg-sage/20 dark:bg-sage/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-navy/10 dark:bg-cream/10 text-navy dark:text-cream/90 hover:bg-navy/20 dark:hover:bg-cream/20 transition-colors"
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"
>
<span>Sign In</span>
</Button>
@ -89,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-navy/10 dark:hover:bg-cream/10"
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"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
<Menu className="h-5 w-5" />
@ -99,18 +99,18 @@ export function NavHeader() {
</div>
{mobileMenuOpen && (
<div className="md:hidden px-4 py-3 bg-cream dark:bg-dark-bg border-t border-sage/20 dark:border-sage/10">
<div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20">
<nav className="flex flex-col space-y-3">
<Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
Explore
</Link>
<Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
Authors
</Link>
<Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
Collections
</Link>
<Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
<Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
Blog
</Link>
</nav>

94
client/src/index.css
View File

@ -5,83 +5,83 @@
@tailwind utilities;
:root {
--background: 48 33% 97%;
--foreground: 20 14.3% 4.1%;
--background: 180 7% 97%;
--foreground: 0 0% 20%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--muted: 180 7% 94%;
--muted-foreground: 0 0% 45%;
--popover: 48 33% 97%;
--popover-foreground: 20 14.3% 4.1%;
--popover: 180 7% 97%;
--popover-foreground: 0 0% 20%;
--card: 48 33% 97%;
--card-foreground: 20 14.3% 4.1%;
--card: 180 7% 97%;
--card-foreground: 0 0% 20%;
--border: 60 6% 83%;
--input: 60 6% 83%;
--border: 174 10% 80%;
--input: 174 10% 80%;
--primary: 215 40% 23%;
--primary-foreground: 211 100% 99%;
--primary: 174 40% 24%;
--primary-foreground: 0 0% 100%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--secondary: 180 7% 94%;
--secondary-foreground: 0 0% 20%;
--accent: 5 38% 48%;
--accent-foreground: 60 9.1% 97.8%;
--accent: 174 30% 40%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--destructive-foreground: 0 0% 100%;
--ring: 5 38% 48%;
--ring: 174 40% 24%;
--radius: 0.5rem;
/* Custom theme colors */
--cream: 48 33% 97%;
--navy: 215 40% 23%;
--russet: 5 38% 48%;
--sage: 145 10% 50%;
--ink: 0 0% 10%;
--paper: 44 40% 92%;
--cream: 180 7% 97%;
--navy: 174 40% 24%;
--russet: 0 60% 45%;
--sage: 174 30% 35%;
--ink: 0 0% 20%;
--paper: 180 7% 94%;
}
.dark {
--background: 0 0% 7%;
--foreground: 0 0% 98%;
--background: 174 20% 12%;
--foreground: 0 0% 90%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 64%;
--muted: 174 20% 18%;
--muted-foreground: 0 0% 70%;
--popover: 0 0% 12%;
--popover-foreground: 0 0% 98%;
--popover: 174 20% 14%;
--popover-foreground: 0 0% 90%;
--card: 0 0% 12%;
--card-foreground: 0 0% 98%;
--card: 174 20% 14%;
--card-foreground: 0 0% 90%;
--border: 0 0% 20%;
--input: 0 0% 20%;
--border: 174 15% 25%;
--input: 174 15% 25%;
--primary: 215 40% 23%;
--primary-foreground: 211 100% 99%;
--primary: 174 35% 45%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 15%;
--secondary-foreground: 0 0% 98%;
--secondary: 174 20% 20%;
--secondary-foreground: 0 0% 90%;
--accent: 5 38% 48%;
--accent-foreground: 0 0% 98%;
--accent: 174 40% 45%;
--accent-foreground: 0 0% 100%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--destructive-foreground: 0 0% 100%;
--ring: 5 38% 48%;
--ring: 174 40% 45%;
/* Custom theme colors */
--cream: 0 0% 98%;
--navy: 215 40% 60%;
--russet: 5 38% 60%;
--sage: 145 10% 60%;
--cream: 0 0% 90%;
--navy: 174 35% 45%;
--russet: 0 60% 50%;
--sage: 174 30% 40%;
--ink: 0 0% 90%;
--paper: 0 0% 15%;
--paper: 174 20% 16%;
}
/* Content width variables */