Restore original header styling and lighter brand green color
Revert header border and active link styling to match original design, changing from a dark tab with a bottom strip to a lighter green rounded button. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: e5c27f64-57c1-4202-8921-6ea967029393 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/uF5SuUn Replit-Helium-Checkpoint-Created: true
This commit is contained in:
@@ -112,7 +112,7 @@ export function Header() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="bg-white sticky top-0 z-50 shadow-sm relative border-b-4 border-[#14573A]">
|
<header className="bg-white sticky top-0 z-50 shadow-sm relative">
|
||||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
<div className="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link href="/" className="flex items-center shrink-0">
|
<Link href="/" className="flex items-center shrink-0">
|
||||||
@@ -120,12 +120,12 @@ export function Header() {
|
|||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Desktop nav */}
|
{/* Desktop nav */}
|
||||||
<nav className="hidden lg:flex items-stretch self-stretch gap-1 flex-1 justify-center">
|
<nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
className={`px-4 flex items-center text-sm font-medium transition-colors ${
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
isActive("/")
|
isActive("/")
|
||||||
? "bg-[#14573A] text-white font-bold rounded-t-lg"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground hover:text-primary"
|
: "text-foreground hover:text-primary"
|
||||||
}`}
|
}`}
|
||||||
data-testid="nav-home"
|
data-testid="nav-home"
|
||||||
@@ -135,9 +135,9 @@ export function Header() {
|
|||||||
|
|
||||||
<Link
|
<Link
|
||||||
href="/waqf"
|
href="/waqf"
|
||||||
className={`px-4 flex items-center text-sm font-medium transition-colors ${
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
isActive("/waqf")
|
isActive("/waqf")
|
||||||
? "bg-[#14573A] text-white font-bold rounded-t-lg"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground hover:text-primary"
|
: "text-foreground hover:text-primary"
|
||||||
}`}
|
}`}
|
||||||
data-testid="nav-waqf"
|
data-testid="nav-waqf"
|
||||||
@@ -147,9 +147,9 @@ export function Header() {
|
|||||||
|
|
||||||
<Link
|
<Link
|
||||||
href="/opportunities"
|
href="/opportunities"
|
||||||
className={`px-4 flex items-center gap-1 text-sm transition-colors ${
|
className={`px-4 py-2 rounded-lg inline-flex items-center gap-1 text-sm transition-colors ${
|
||||||
isActive("/opportunities")
|
isActive("/opportunities")
|
||||||
? "bg-[#14573A] text-white font-bold rounded-t-lg"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground font-medium hover:text-primary"
|
: "text-foreground font-medium hover:text-primary"
|
||||||
}`}
|
}`}
|
||||||
data-testid="nav-opportunities"
|
data-testid="nav-opportunities"
|
||||||
@@ -162,7 +162,7 @@ export function Header() {
|
|||||||
ref={servicesTriggerRef}
|
ref={servicesTriggerRef}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setServicesOpen((v) => !v)}
|
onClick={() => setServicesOpen((v) => !v)}
|
||||||
className={`px-3 flex items-center gap-1 text-sm font-medium transition-colors ${
|
className={`px-3 py-2 inline-flex items-center gap-1 text-sm font-medium transition-colors ${
|
||||||
servicesOpen ? "text-primary" : "text-foreground hover:text-primary"
|
servicesOpen ? "text-primary" : "text-foreground hover:text-primary"
|
||||||
}`}
|
}`}
|
||||||
data-testid="nav-services"
|
data-testid="nav-services"
|
||||||
@@ -180,7 +180,7 @@ export function Header() {
|
|||||||
ref={aboutTriggerRef}
|
ref={aboutTriggerRef}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setAboutOpen((v) => !v)}
|
onClick={() => setAboutOpen((v) => !v)}
|
||||||
className={`px-3 flex items-center gap-1 text-sm font-medium transition-colors ${
|
className={`px-3 py-2 inline-flex items-center gap-1 text-sm font-medium transition-colors ${
|
||||||
aboutOpen || location.startsWith("/about")
|
aboutOpen || location.startsWith("/about")
|
||||||
? "text-primary"
|
? "text-primary"
|
||||||
: "text-foreground hover:text-primary"
|
: "text-foreground hover:text-primary"
|
||||||
@@ -198,9 +198,9 @@ export function Header() {
|
|||||||
|
|
||||||
<Link
|
<Link
|
||||||
href="/baraem"
|
href="/baraem"
|
||||||
className={`px-4 flex items-center text-sm font-medium transition-colors ${
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
isActive("/baraem")
|
isActive("/baraem")
|
||||||
? "bg-[#14573A] text-white font-bold rounded-t-lg"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground hover:text-primary"
|
: "text-foreground hover:text-primary"
|
||||||
}`}
|
}`}
|
||||||
data-testid="nav-baraem"
|
data-testid="nav-baraem"
|
||||||
@@ -369,7 +369,7 @@ export function Header() {
|
|||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
||||||
isActive("/")
|
isActive("/")
|
||||||
? "bg-[#14573A] text-white font-bold"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground font-medium"
|
: "text-foreground font-medium"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -380,7 +380,7 @@ export function Header() {
|
|||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
||||||
isActive("/waqf")
|
isActive("/waqf")
|
||||||
? "bg-[#14573A] text-white font-bold"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground font-medium"
|
: "text-foreground font-medium"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -391,7 +391,7 @@ export function Header() {
|
|||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
||||||
isActive("/opportunities")
|
isActive("/opportunities")
|
||||||
? "bg-[#14573A] text-white font-bold"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground font-medium"
|
: "text-foreground font-medium"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -447,7 +447,7 @@ export function Header() {
|
|||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
|
||||||
isActive("/baraem")
|
isActive("/baraem")
|
||||||
? "bg-[#14573A] text-white font-bold"
|
? "bg-primary text-primary-foreground font-bold"
|
||||||
: "text-foreground font-medium"
|
: "text-foreground font-medium"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Reference in New Issue
Block a user