andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
This commit is contained in:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Navbar.js
View File

@@ -26,7 +26,7 @@ const Navbar = () => {
return (
<>
{/* Top Header - Member Actions (Desktop Only) */}
<header className="hidden lg:flex bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
<header className="hidden lg:flex bg-gradient-to-r from-var(--purple-amethyst) to-var(--purple-deep) px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
{user && (
<span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
Welcome, {user.first_name}
@@ -53,7 +53,7 @@ const Navbar = () => {
</button>
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -62,7 +62,7 @@ const Navbar = () => {
</header>
{/* Main Header - Member Navigation */}
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<header className="bg-var(--purple-lavender) px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<Link to="/dashboard">
<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>
@@ -84,21 +84,21 @@ const Navbar = () => {
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] 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: "'Poppins', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] 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: "'Poppins', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] 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: "'Poppins', sans-serif" }}>
Board of Directors
</Link>
@@ -149,21 +149,21 @@ const Navbar = () => {
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/members/newsletters" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/members/newsletters" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Newsletters
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/members/financials" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/members/financials" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Financials
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/members/bylaws" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/members/bylaws" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Bylaws
</Link>
@@ -183,7 +183,7 @@ const Navbar = () => {
{/* Mobile Hamburger Button */}
<button
onClick={() => setIsMobileMenuOpen(true)}
className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
className="lg:hidden p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
aria-label="Open menu"
>
<Menu className="h-6 w-6" />
@@ -200,7 +200,7 @@ const Navbar = () => {
/>
{/* Drawer */}
<div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[#664fa3] to-[#48286e] shadow-2xl flex flex-col">
<div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-var(--purple-lavender) to-var(--purple-deep) shadow-2xl flex flex-col">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-white/20">
<div className="flex items-center gap-3">
@@ -211,7 +211,7 @@ const Navbar = () => {
</div>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
className="p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
aria-label="Close menu"
>
<X className="h-6 w-6" />
@@ -236,7 +236,7 @@ const Navbar = () => {
<Link
to="/"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Home
@@ -250,7 +250,7 @@ const Navbar = () => {
<Link
to="/about/history"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
History
@@ -258,7 +258,7 @@ const Navbar = () => {
<Link
to="/about/mission-values"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Mission and Values
@@ -266,7 +266,7 @@ const Navbar = () => {
<Link
to="/about/board"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Board of Directors
@@ -276,7 +276,7 @@ const Navbar = () => {
<Link
to="/dashboard"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Dashboard
@@ -285,7 +285,7 @@ const Navbar = () => {
<Link
to="/events"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
data-testid="mobile-events-nav-button"
>
@@ -295,7 +295,7 @@ const Navbar = () => {
<Link
to="/members/calendar"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Calendar
@@ -304,7 +304,7 @@ const Navbar = () => {
<Link
to="/members/directory"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Directory
@@ -313,7 +313,7 @@ const Navbar = () => {
<Link
to="/members/gallery"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Gallery
@@ -327,7 +327,7 @@ const Navbar = () => {
<Link
to="/members/newsletters"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Newsletters
@@ -335,7 +335,7 @@ const Navbar = () => {
<Link
to="/members/financials"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Financials
@@ -343,7 +343,7 @@ const Navbar = () => {
<Link
to="/members/bylaws"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Bylaws
@@ -353,7 +353,7 @@ const Navbar = () => {
<Link
to="/profile"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
data-testid="mobile-profile-nav-button"
>
@@ -370,7 +370,7 @@ const Navbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
>
<Button
className="w-full bg-white/20 hover:bg-white/30 text-white rounded-lg"
className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Admin Panel
@@ -383,7 +383,7 @@ const Navbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
>
<Button
className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-lg font-semibold"
className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-lg font-semibold"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -396,7 +396,7 @@ const Navbar = () => {
handleLogout();
}}
variant="outline"
className="w-full border-2 border-white/30 text-white hover:bg-white/10 rounded-lg"
className="w-full border-2 border-white/30 text-white hover:bg-background/10 rounded-lg"
style={{ fontFamily: "'Poppins', sans-serif" }}
data-testid="mobile-logout-button"
>