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

32
src/pages/BoardOfDirectors.js
View File

@@ -22,10 +22,10 @@ const BoardOfDirectors = () => {
const DirectorCards = ({ title, members }) => {
return (
<section className=" w-full">
<div className="mx-auto bg-white rounded-3xl p-10 shadow-lg h-full">
<div className="mx-auto bg-background rounded-3xl p-10 shadow-lg h-full">
{title && (
<h2
className="text-2xl sm:text-4xl font-bold text-[#48286e] text-center mb-8"
className="text-2xl sm:text-4xl font-bold text-var(--purple-deep) text-center mb-8"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
{title}
@@ -43,10 +43,10 @@ const BoardOfDirectors = () => {
<Card
key={`${name}-${index}`}
style={{ fontFamily: "'Poppins', sans-serif" }}
className="bg-[#eeebf4] text-[#48286e] text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
className="bg-var(--lavender-200) text-var(--purple-deep) text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
>
<div className="min-h-16">
<p className="text-xl font-bold text-[#48286e]">
<p className="text-xl font-bold text-var(--purple-deep)">
{name}
</p>
@@ -66,14 +66,14 @@ const BoardOfDirectors = () => {
};
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
<main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] pt-8 sm:pt-10 md:pt-12">
<main className="bg-gradient-to-b from-var(--neutral-100:) to-var(--neutral-800) pt-8 sm:pt-10 md:pt-12">
{/* Hero Section */}
<section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
<div className="max-w-5xl mx-auto text-center px-8">
<h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-[#48286e] font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-var(--purple-deep) font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF Board of Directors 2025
</h1>
@@ -81,11 +81,11 @@ const BoardOfDirectors = () => {
</section>
{/* Contact Info */}
<section className="flex justify-center mt-4 mb-8">
<div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-[#664fa3] to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
<div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
<p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
For any questions or inquiries please email us at{' '}
<a href="mailto:info@loaftx.org" className="text-[#c5b4e3] underline font-bold hover:text-white transition-colors">
<a href="mailto:info@loaftx.org" className="text-var(--neutral-500) underline font-bold hover:text-white transition-colors">
info@loaftx.org
</a>
</p>
@@ -102,22 +102,22 @@ const BoardOfDirectors = () => {
</section>
{/* Join the Board Section */}
<section className="py-12 bg-white mt-12 ">
<section className="py-12 bg-background mt-12 ">
{/* content containter */}
<div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
<h2 className="text-xl mx-auto sm:text-2xl md:text-4xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
<h2 className="text-xl mx-auto sm:text-2xl md:text-4xl font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
Join the Board of Directors
</h2>
<p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Our elections take place at our December holiday social. Here are some things to know if you are thinking about serving on the Board of Directors.
</p>
{/* card */}
<Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
<ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Card className="bg-var(--lavender-200) p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
<ol className="list-decimal list-inside space-y-4 text-lg text-var(--purple-deep)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<li>
Nominations are due by November 1. Nomination Form:{' '}
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
className="text-var(--purple-lavender) underline hover:text-var(--purple-deep) transition-colors">
Click Here
</a>
</li>
@@ -139,7 +139,7 @@ const BoardOfDirectors = () => {
href="https://loaftx.org/bylaws/"
target="_blank"
rel="noopener noreferrer"
className="text-[#48286e] underline"
className="text-var(--purple-deep) underline"
>
https://loaftx.org/bylaws/
</a>