This commit is contained in:
2026-01-12 20:37:38 -06:00
parent 7694532d53
commit 9c2d516f9d
74 changed files with 1842 additions and 1842 deletions

View File

@@ -46,7 +46,7 @@ const PublicNavbar = () => {
const getDesktopLinkClasses = (path) => {
const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
if (isActive(path)) {
return `${baseClasses} text-var(--orange-light) hover:text-var(--orange-coral) `;
return `${baseClasses} text-[var(--orange-light)] hover:text-[var(--orange-coral)] `;
}
return `${baseClasses} text-white hover:opacity-80`;
};
@@ -55,18 +55,18 @@ const PublicNavbar = () => {
const getMobileLinkClasses = (path) => {
const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
if (isActive(path)) {
return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
return `${baseClasses} bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)]`;
}
return `${baseClasses} text-white hover:bg-var(--purple-deep)`;
return `${baseClasses} text-white hover:bg-[var(--purple-deep)]`;
};
// Active and inactive link styles for mobile sub-items (About Us)
const getMobileSubLinkClasses = (path) => {
const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
if (isActive(path)) {
return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
return `${baseClasses} bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)]`;
}
return `${baseClasses} text-var(--neutral-800) hover:bg-var(--purple-deep) hover:text-white`;
return `${baseClasses} text-[var(--neutral-800)] hover:bg-[var(--purple-deep)] hover:text-white`;
};
return (
@@ -74,7 +74,7 @@ const PublicNavbar = () => {
{/* Top Header - Auth Actions */}
<div className='sticky top-0 inset-x-0 z-50'>
<header className="bg-gradient-to-r flex-wrap from-var(--purple-amethyst) to-var(--purple-deep) px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<header className="bg-gradient-to-r flex-wrap from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<div className='flex gap-4 sm:gap-6'>
<button
@@ -96,7 +96,7 @@ const PublicNavbar = () => {
</div>
<Link to="/donate">
<Button
className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -105,7 +105,7 @@ const PublicNavbar = () => {
</header>
{/* Main Header - Navigation */}
<header className=" bg-var(--purple-lavender) px-[20px] py-2 flex justify-between items-center">
<header className=" bg-[var(--purple-lavender)] px-[20px] py-2 flex justify-between items-center">
<Link to="/">
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
@@ -113,7 +113,7 @@ const PublicNavbar = () => {
{/* Mobile Menu Button */}
<button
onClick={() => setIsMobileMenuOpen(true)}
className="lg:hidden p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
className="lg:hidden p-2 text-white hover:bg-[var(--purple-deep)] rounded-md transition-colors"
aria-label="Open menu"
>
<Menu className="size-14" />
@@ -132,7 +132,7 @@ const PublicNavbar = () => {
<DropdownMenuTrigger asChild>
<button
className={`${isAboutActive()
? "text-var(--orange-light) hover:text-var(--orange-coral)"
? "text-[var(--orange-light)] hover:text-[var(--orange-coral)]"
: "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
About Us
@@ -141,19 +141,19 @@ const PublicNavbar = () => {
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
<Link to="/about/history" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
<Link to="/about/board" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Board of Directors
</Link>
@@ -204,15 +204,15 @@ const PublicNavbar = () => {
/>
{/* Drawer */}
<div className="fixed right-0 top-0 h-full w-[280px] bg-var(--purple-lavender) shadow-xl overflow-y-auto">
<div className="fixed right-0 top-0 h-full w-[280px] bg-[var(--purple-lavender)] shadow-xl overflow-y-auto">
{/* Header */}
<div className="flex justify-between items-center p-6 border-b border-var(--purple-deep)">
<div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
<span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Menu
</span>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
className="p-2 text-white hover:bg-[var(--purple-deep)] rounded-md transition-colors"
aria-label="Close menu"
>
<X className="h-5 w-5" />
@@ -233,7 +233,7 @@ const PublicNavbar = () => {
{/* About Us Section */}
<div className="space-y-2">
<p
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-var(--orange-light)' : 'text-white'}`}
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[var(--orange-light)]' : 'text-white'}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
About Us
@@ -303,13 +303,13 @@ const PublicNavbar = () => {
</Link>
{/* Auth Actions */}
<div className="pt-4 border-t border-var(--purple-deep) space-y-2">
<div className="pt-4 border-t border-[var(--purple-deep)] space-y-2">
<button
onClick={() => {
handleAuthAction();
setIsMobileMenuOpen(false);
}}
className="w-full text-left text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
className="w-full text-left text-white text-base font-medium hover:bg-[var(--purple-deep)] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{user ? 'Logout' : 'Login'}
@@ -318,7 +318,7 @@ const PublicNavbar = () => {
<Link
to="/register"
onClick={() => setIsMobileMenuOpen(false)}
className="block text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
className="block text-white text-base font-medium hover:bg-[var(--purple-deep)] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Register
@@ -329,7 +329,7 @@ const PublicNavbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full"
>
<Button className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-6 py-3 text-base font-semibold">
<Button className="w-full bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-[25px] px-6 py-3 text-base font-semibold">
Donate
</Button>
</Link>