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

Refactor color scheme in member-related pages to use brand colors instead of CSS variables for consistency and improved readability

Browse Source
This commit is contained in:
kayela
2026-01-13 22:01:33 -06:00
parent 30d32d8823
commit e04d39fe17
61 changed files with 731 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/members/Bylaws.js
View File

@@ -54,7 +54,7 @@ export default function Bylaws() {
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading bylaws...
</p>
</div>
@@ -72,16 +72,16 @@ export default function Bylaws() {
<h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF Bylaws
</h1>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Review the official governing bylaws and policies of the LOAF community.
</p>
</div>
{/* Current Bylaws */}
{currentBylaws ? (
<Card className="p-8 bg-background rounded-2xl border-2 border-[var(--purple-lavender)] mb-6">
<Card className="p-8 bg-background rounded-2xl border-2 border-brand-purple mb-6">
<div className="flex items-start gap-4 mb-6">
<div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-4 rounded-xl">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl">
<Scale className="h-8 w-8 text-white" />
</div>
<div className="flex-1">
@@ -94,7 +94,7 @@ export default function Bylaws() {
Current Version
</Badge>
</div>
<div className="flex items-center gap-4 text-[var(--purple-lavender)] mb-4">
<div className="flex items-center gap-4 text-brand-purple mb-4">
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Version: <strong>{currentBylaws.version}</strong>
</span>
@@ -106,7 +106,7 @@ export default function Bylaws() {
<Button
onClick={() => window.open(currentBylaws.document_url, '_blank')}
size="lg"
className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
>
<ExternalLink className="h-5 w-5" />
View Current Bylaws
@@ -117,7 +117,7 @@ export default function Bylaws() {
) : (
<Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)] mb-6">
<Scale className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
<p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No current bylaws document available
</p>
</Card>
@@ -129,7 +129,7 @@ export default function Bylaws() {
<Button
onClick={() => setShowHistory(!showHistory)}
variant="outline"
className="w-full border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full flex items-center justify-center gap-2"
className="w-full border-[var(--neutral-800)] text-brand-purple hover:bg-[var(--lavender-300)] rounded-full flex items-center justify-center gap-2"
>
<History className="h-4 w-4" />
{showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
@@ -150,7 +150,7 @@ export default function Bylaws() {
<h4 className="text-lg font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{bylaws.title}
</h4>
<div className="flex items-center gap-3 text-sm text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-sm text-brand-purple ">
<span>Version {bylaws.version}</span>
<span>•</span>
<span>Effective {formatDate(bylaws.effective_date)}</span>
@@ -160,7 +160,7 @@ export default function Bylaws() {
onClick={() => window.open(bylaws.document_url, '_blank')}
variant="outline"
size="sm"
className="border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full flex items-center gap-2"
className="border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full flex items-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View
@@ -174,12 +174,12 @@ export default function Bylaws() {
{/* Information Card */}
<Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
<div className="flex items-start gap-3">
<Scale className="h-5 w-5 text-[var(--purple-lavender)] mt-1" />
<Scale className="h-5 w-5 text-brand-purple mt-1" />
<div>
<h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About LOAF Bylaws
</h4>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The bylaws serve as the governing document for LOAF, outlining the organization's structure,
membership requirements, officer responsibilities, and operational procedures. All members are
encouraged to familiarize themselves with these guidelines.

24
src/pages/members/EventGallery.js
View File

@@ -124,7 +124,7 @@ const EventGallery = () => {
</div>
)}
<div className="absolute top-3 right-3">
<Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1 rounded-full">
<Badge className="bg-brand-purple text-white px-3 py-1 rounded-full">
{event.gallery_count} {event.gallery_count === 1 ? 'photo' : 'photos'}
</Badge>
</div>
@@ -136,19 +136,19 @@ const EventGallery = () => {
</h3>
{event.description && (
<p className="text-[var(--purple-lavender)] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.description}
</p>
)}
<div className="space-y-2 text-sm">
<div className="flex items-center gap-2 text-[var(--purple-lavender)]">
<div className="flex items-center gap-2 text-brand-purple ">
<Calendar className="h-4 w-4" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{moment(event.start_at).format('MMMM D, YYYY')}
</span>
</div>
<div className="flex items-center gap-2 text-[var(--purple-lavender)]">
<div className="flex items-center gap-2 text-brand-purple ">
<MapPin className="h-4 w-4" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
</div>
@@ -168,7 +168,7 @@ const EventGallery = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Gallery
</h1>
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Browse photos from past LOAF events.
</p>
</div>
@@ -176,7 +176,7 @@ const EventGallery = () => {
{/* Events Grid */}
{loading ? (
<div className="text-center py-20">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
</div>
) : events.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -190,7 +190,7 @@ const EventGallery = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Event Galleries Yet
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Event photos will appear here once admins upload them.
</p>
</div>
@@ -210,7 +210,7 @@ const EventGallery = () => {
<Button
onClick={handleBackToEvents}
variant="ghost"
className="mb-6 text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-500)]"
className="mb-6 text-brand-purple hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-500)]"
style={{ fontFamily: "'Inter', sans-serif" }}
>
<ArrowLeft className="h-4 w-4 mr-2" />
@@ -222,7 +222,7 @@ const EventGallery = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
{selectedEvent.title}
</h1>
<div className="flex flex-wrap gap-4 text-[var(--purple-lavender)]">
<div className="flex flex-wrap gap-4 text-brand-purple ">
<div className="flex items-center gap-2">
<Calendar className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -233,7 +233,7 @@ const EventGallery = () => {
<MapPin className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
</div>
<Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1 rounded-full">
<Badge className="bg-brand-purple text-white px-3 py-1 rounded-full">
{selectedEvent.gallery_count} {selectedEvent.gallery_count === 1 ? 'photo' : 'photos'}
</Badge>
</div>
@@ -242,7 +242,7 @@ const EventGallery = () => {
{/* Gallery Grid */}
{galleryLoading ? (
<div className="text-center py-20">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
</div>
) : galleryImages.length > 0 ? (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@@ -276,7 +276,7 @@ const EventGallery = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Photos Yet
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Photos from this event will appear here once uploaded.
</p>
</div>

16
src/pages/members/Financials.js
View File

@@ -32,7 +32,7 @@ export default function Financials() {
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading financial reports...
</p>
</div>
@@ -50,7 +50,7 @@ export default function Financials() {
<h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Financial Reports
</h1>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Access annual financial reports and stay informed about LOAF's fiscal responsibility.
</p>
</div>
@@ -59,7 +59,7 @@ export default function Financials() {
{reports.length === 0 ? (
<Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
<TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
<p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No financial reports available yet
</p>
</Card>
@@ -69,7 +69,7 @@ export default function Financials() {
<Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
<div className="flex items-center gap-6">
{/* Year Badge */}
<div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
<DollarSign className="h-8 w-8 mx-auto mb-2" />
<div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
{report.year}
@@ -83,13 +83,13 @@ export default function Financials() {
{report.title}
</h3>
<div className="flex items-center gap-2 mb-4">
<Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
<Badge variant="outline" className="border-brand-purple text-brand-purple ">
{report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
</Badge>
</div>
<Button
onClick={() => window.open(report.document_url, '_blank')}
className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View Report
@@ -105,12 +105,12 @@ export default function Financials() {
{reports.length > 0 && (
<Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
<div className="flex items-start gap-3">
<TrendingUp className="h-5 w-5 text-[var(--purple-lavender)] mt-1" />
<TrendingUp className="h-5 w-5 text-brand-purple mt-1" />
<div>
<h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Transparency & Accountability
</h4>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is committed to financial transparency. These reports provide detailed information about our
revenue, expenses, and how member contributions support our community programs and operations.
</p>

26
src/pages/members/MemberCalendar.js
View File

@@ -127,7 +127,7 @@ export default function MemberCalendar() {
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading calendar...
</p>
</div>
@@ -144,7 +144,7 @@ export default function MemberCalendar() {
<h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Calendar
</h1>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage your event RSVPs. Click on any event to see details and update your RSVP.
</p>
@@ -157,19 +157,19 @@ export default function MemberCalendar() {
<div className="flex gap-4 ml-auto">
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[var(--green-light)]"></div>
<span className="text-sm text-[var(--purple-lavender)]">Going</span>
<span className="text-sm text-brand-purple ">Going</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[var(--orange-400)]"></div>
<span className="text-sm text-[var(--purple-lavender)]">Maybe</span>
<span className="text-sm text-brand-purple ">Maybe</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[var(--slate-400)]"></div>
<span className="text-sm text-[var(--purple-lavender)]">Not Going</span>
<span className="text-sm text-brand-purple ">Not Going</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[var(--neutral-800)]"></div>
<span className="text-sm text-[var(--purple-lavender)]">No RSVP</span>
<span className="text-sm text-brand-purple ">No RSVP</span>
</div>
</div>
</div>
@@ -201,7 +201,7 @@ export default function MemberCalendar() {
<DialogHeader>
<div className="flex items-center gap-3 mb-2">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
<CalendarIcon className="h-6 w-6 text-[var(--purple-lavender)]" />
<CalendarIcon className="h-6 w-6 text-brand-purple " />
</div>
{selectedEvent.user_rsvp_status && (
<Badge
@@ -225,7 +225,7 @@ export default function MemberCalendar() {
<div className="space-y-4 mt-4">
<div className="space-y-3">
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<CalendarIcon className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(selectedEvent.start_at).toLocaleDateString('en-US', {
@@ -236,17 +236,17 @@ export default function MemberCalendar() {
})}
</span>
</div>
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<Clock className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(selectedEvent.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(selectedEvent.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</span>
</div>
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<MapPin className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
</div>
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<Users className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedEvent.rsvp_count || 0} {selectedEvent.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -260,7 +260,7 @@ export default function MemberCalendar() {
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About This Event
</h3>
<p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedEvent.description}
</p>
</div>
@@ -290,7 +290,7 @@ export default function MemberCalendar() {
variant="outline"
className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'maybe'
? 'border-orange-400 bg-orange-100 text-orange-700'
: 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
: 'border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)]'
}`}
>
<HelpCircle className="h-4 w-4" />

82
src/pages/members/MembersDirectory.js
View File

@@ -114,8 +114,8 @@ const MembersDirectory = () => {
const Border = ({ yaxis = false }) => {
return (
yaxis ?
<div className=' border-2 w-full border-[var(--purple-lavender)] my-24' />
: <div className=' border-2 w-full border-[var(--purple-lavender)] mb-24' />
<div className=' border-2 w-full border-brand-purple my-24' />
: <div className=' border-2 w-full border-brand-purple mb-24' />
)
}
const MemberCard = ({ member }) => (
@@ -130,7 +130,7 @@ const MembersDirectory = () => {
/>
) : (
<div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
<span className="text-4xl font-semibold text-[var(--purple-lavender)]" style={{ fontFamily: "'Inter', sans-serif" }}>
<span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
{getInitials(member.first_name, member.last_name)}
</span>
</div>
@@ -146,7 +146,7 @@ const MembersDirectory = () => {
{member.directory_partner_name && (
<div className="flex items-center justify-center gap-2 mb-4">
<Heart className="h-4 w-4 text-[var(--orange-light)]" />
<span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Partner: {member.directory_partner_name}
</span>
</div>
@@ -154,7 +154,7 @@ const MembersDirectory = () => {
{/* Bio */}
{member.directory_bio && (
<p className="text-[var(--purple-lavender)] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{member.directory_bio}
</p>
)}
@@ -162,8 +162,8 @@ const MembersDirectory = () => {
{/* Member Since */}
{member.created_at && (
<div className="flex items-center justify-center gap-2 mb-4">
<Calendar className="h-4 w-4 text-[var(--purple-lavender)]" />
<span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Calendar className="h-4 w-4 text-brand-purple " />
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Member since {new Date(member.created_at).toLocaleDateString('en-US', {
month: 'long',
year: 'numeric'
@@ -176,10 +176,10 @@ const MembersDirectory = () => {
<div className="space-y-3 mb-4">
{member.directory_email && (
<div className="flex items-center gap-2 text-sm">
<Mail className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
<Mail className="h-4 w-4 text-brand-purple flex-shrink-0" />
<a
href={`mailto:${member.directory_email}`}
className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] truncate"
className="text-brand-purple hover:text-[var(--purple-ink)] truncate"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{member.directory_email}
@@ -189,10 +189,10 @@ const MembersDirectory = () => {
{member.directory_phone && (
<div className="flex items-center gap-2 text-sm">
<Phone className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
<Phone className="h-4 w-4 text-brand-purple flex-shrink-0" />
<a
href={`tel:${member.directory_phone}`}
className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)]"
className="text-brand-purple hover:text-[var(--purple-ink)]"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{member.directory_phone}
@@ -202,8 +202,8 @@ const MembersDirectory = () => {
{member.directory_address && (
<div className="flex items-start gap-2 text-sm">
<MapPin className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<MapPin className="h-4 w-4 text-brand-purple flex-shrink-0 mt-0.5" />
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{member.directory_address}
</span>
</div>
@@ -269,7 +269,7 @@ const MembersDirectory = () => {
<div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
<Button
onClick={() => handleViewProfile(member.id)}
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full py-5"
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white rounded-full py-5"
>
<UserCircle className="h-4 w-4 mr-2" />
View Full Profile
@@ -293,25 +293,25 @@ const MembersDirectory = () => {
LOAF Members
</h1>
<p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[var(--purple-lavender)] font-medium'>{totalMembers}</span>
<span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-brand-purple font-medium'>{totalMembers}</span>
</p>
</div>
{/* Search Bar */}
<div className="mb-24 mx-10">
<div className="relative w-full ">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
<Input
type="text"
placeholder="Search by name or bio..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-brand-purple focus:ring-brand-purple "
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
{searchQuery && (
<p className="mt-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="mt-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
</p>
)}
@@ -325,7 +325,7 @@ const MembersDirectory = () => {
{/* Members Grid */}
{loading ? (
<div className="text-center py-20">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
</div>
) : filteredMembers.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -339,7 +339,7 @@ const MembersDirectory = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
{searchQuery ? 'No Members Found' : 'No Members in Directory'}
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery
? 'Try adjusting your search query.'
: 'Members who opt in to the directory will appear here.'}
@@ -357,13 +357,13 @@ const MembersDirectory = () => {
<Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
<div className="flex items-start gap-4">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
<User className="h-6 w-6 text-[var(--purple-lavender)]" />
<User className="h-6 w-6 text-brand-purple " />
</div>
<div>
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Want to appear in the directory?
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
<a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
Edit your profile →
@@ -387,7 +387,7 @@ const MembersDirectory = () => {
{selectedMember.directory_partner_name && (
<DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
<span className="text-[var(--purple-lavender)]">Partner: {selectedMember.directory_partner_name}</span>
<span className="text-brand-purple ">Partner: {selectedMember.directory_partner_name}</span>
</DialogDescription>
)}
</DialogHeader>
@@ -399,7 +399,7 @@ const MembersDirectory = () => {
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About
</h3>
<p className="text-[var(--purple-lavender)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedMember.directory_bio}
</p>
</div>
@@ -414,13 +414,13 @@ const MembersDirectory = () => {
{selectedMember.directory_email && (
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
<Mail className="h-5 w-5 text-[var(--purple-lavender)]" />
<Mail className="h-5 w-5 text-brand-purple " />
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<a
href={`mailto:${selectedMember.directory_email}`}
className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
className="text-[var(--purple-ink)] hover:text-brand-purple font-medium"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{selectedMember.directory_email}
@@ -432,13 +432,13 @@ const MembersDirectory = () => {
{selectedMember.directory_phone && (
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
<Phone className="h-5 w-5 text-[var(--purple-lavender)]" />
<Phone className="h-5 w-5 text-brand-purple " />
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
<a
href={`tel:${selectedMember.directory_phone}`}
className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
className="text-[var(--purple-ink)] hover:text-brand-purple font-medium"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{selectedMember.directory_phone}
@@ -450,10 +450,10 @@ const MembersDirectory = () => {
{selectedMember.directory_address && (
<div className="flex items-start gap-3">
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
<MapPin className="h-5 w-5 text-[var(--purple-lavender)]" />
<MapPin className="h-5 w-5 text-brand-purple " />
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedMember.directory_address}
</p>
@@ -467,7 +467,7 @@ const MembersDirectory = () => {
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
<p className="text-xs text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{formatDate(selectedMember.directory_dob)}
</p>
@@ -487,7 +487,7 @@ const MembersDirectory = () => {
{selectedMember.volunteer_interests.map((interest, index) => (
<Badge
key={index}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white"
>
{interest}
</Badge>
@@ -565,21 +565,21 @@ const MembersDirectory = () => {
{/* Pagination */}
{!loading && filteredMembers.length > 0 && (
<div className="mt-10 flex flex-col items-center gap-4 pb-12">
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
</p>
<div className="flex flex-wrap items-center justify-center gap-2">
<Button
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white"
>
First Page
</Button>
<Button
onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
disabled={currentPage === 1}
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white"
>
Previous
</Button>
@@ -593,8 +593,8 @@ const MembersDirectory = () => {
onClick={() => setCurrentPage(pageNumber)}
className={
isActive
? "bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
: "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
? "bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full"
: "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white rounded-full"
}
>
{pageNumber}
@@ -605,14 +605,14 @@ const MembersDirectory = () => {
<Button
onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
disabled={currentPage === totalPages}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple rounded-full hover:text-white"
>
Next
</Button>
<Button
onClick={() => setCurrentPage(totalPages)}
disabled={currentPage === totalPages}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple rounded-full hover:text-white"
>
Last Page
</Button>

22
src/pages/members/NewsletterArchive.js
View File

@@ -86,7 +86,7 @@ export default function NewsletterArchive() {
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading newsletters...
</p>
</div>
@@ -104,7 +104,7 @@ export default function NewsletterArchive() {
<h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Newsletter Archive
</h1>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Browse past monthly newsletters and stay informed about LOAF community updates.
</p>
@@ -112,13 +112,13 @@ export default function NewsletterArchive() {
<div className="flex gap-4 flex-wrap items-center">
{/* Search */}
<div className="relative flex-1 min-w-[300px]">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--purple-lavender)]" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
<Input
type="text"
placeholder="Search newsletters..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
onClick={clearFilter}
variant={selectedYear === null ? "default" : "outline"}
size="sm"
className={selectedYear === null ? "bg-[var(--purple-lavender)] text-white" : "border-[var(--purple-lavender)] text-[var(--purple-lavender)]"}
className={selectedYear === null ? "bg-brand-purple text-white" : "border-brand-purple text-brand-purple "}
>
All Years
</Button>
@@ -138,7 +138,7 @@ export default function NewsletterArchive() {
onClick={() => handleYearFilter(year)}
variant={selectedYear === year ? "default" : "outline"}
size="sm"
className={selectedYear === year ? "bg-[var(--purple-lavender)] text-white" : "border-[var(--purple-lavender)] text-[var(--purple-lavender)]"}
className={selectedYear === year ? "bg-brand-purple text-white" : "border-brand-purple text-brand-purple "}
>
{year}
</Button>
@@ -151,7 +151,7 @@ export default function NewsletterArchive() {
{filteredNewsletters.length === 0 ? (
<Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
<FileText className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
<p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No newsletters found
</p>
</Card>
@@ -168,14 +168,14 @@ export default function NewsletterArchive() {
<Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
<div className="flex items-start gap-4">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg flex-shrink-0">
<FileText className="h-6 w-6 text-[var(--purple-lavender)]" />
<FileText className="h-6 w-6 text-brand-purple " />
</div>
<div className="flex-1 min-w-0">
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{newsletter.title}
</h3>
{newsletter.description && (
<p className="text-[var(--purple-lavender)] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{newsletter.description}
</p>
)}
@@ -183,13 +183,13 @@ export default function NewsletterArchive() {
<Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]">
{formatDate(newsletter.published_date)}
</Badge>
<Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
<Badge variant="outline" className="border-brand-purple text-brand-purple ">
{newsletter.document_type === 'google_docs' ? 'Google Docs' : newsletter.document_type.toUpperCase()}
</Badge>
</div>
<Button
onClick={() => window.open(newsletter.document_url, '_blank')}
className="w-full bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center justify-center gap-2"
className="w-full bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center justify-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View Newsletter