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

Refactor Members Directory and Newsletter Archive styles to use new color palette

Browse Source 
- Updated color classes in MembersDirectory.js to use new color variables for borders, backgrounds, and text.
- Enhanced visual consistency by replacing hardcoded colors with Tailwind CSS color utilities.
- Modified NewsletterArchive.js to align with the new design system, ensuring a cohesive look across components.
- Added new color variables in tailwind.config.js for better maintainability and scalability.
This commit is contained in:
kayela
2026-01-07 11:36:07 -06:00
parent a93e2aa863
commit 4ba44d8997
79 changed files with 2152 additions and 2033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/PublicNavbar.js
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-[#ff9e77] hover:text-[#ff8c64] `;
return `${baseClasses} text-accent hover:text-[#ff8c64] `;
}
return `${baseClasses} text-white hover:opacity-80`;
};
@@ -55,7 +55,7 @@ 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-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
return `${baseClasses} bg-accent hover:bg-[#ff8c64] text-[#48286e]`;
}
return `${baseClasses} text-white hover:bg-[#48286e]`;
};
@@ -64,9 +64,9 @@ const PublicNavbar = () => {
const getMobileSubLinkClasses = (path) => {
const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
return `${baseClasses} bg-accent hover:bg-[#ff8c64] text-[#48286e]`;
}
return `${baseClasses} text-[#ddd8eb] hover:bg-[#48286e] hover:text-white`;
return `${baseClasses} text-chart-6 hover:bg-[#48286e] hover:text-white`;
};
return (
@@ -96,7 +96,7 @@ const PublicNavbar = () => {
</div>
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
className="bg-accent hover:bg-[#ff8c64] text-[#48286e] 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-[#664fa3] px-[20px] py-2 flex justify-between items-center">
<header className=" bg-muted-foreground 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>
@@ -132,28 +132,28 @@ const PublicNavbar = () => {
<DropdownMenuTrigger asChild>
<button
className={`${isAboutActive()
? "text-[#ff9e77] hover:text-[#ff8c64]"
? "text-accent hover:text-[#ff8c64]"
: "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
<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-[#48286e] hover:bg-muted 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-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted 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-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Board of Directors
</Link>
@@ -204,7 +204,7 @@ const PublicNavbar = () => {
/>
{/* Drawer */}
<div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
<div className="fixed right-0 top-0 h-full w-[280px] bg-muted-foreground shadow-xl overflow-y-auto">
{/* Header */}
<div className="flex justify-between items-center p-6 border-b border-[#48286e]">
<span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -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-[#ff9e77]' : 'text-white'}`}
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-accent' : 'text-white'}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
About Us
@@ -329,7 +329,7 @@ const PublicNavbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full"
>
<Button className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
<Button className="w-full bg-accent hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
Donate
</Button>
</Link>