andika/membership-fe
3
1
Fork 1
Code Issues 18 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

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

@@ -51,10 +51,10 @@ export default function Bylaws() {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading bylaws...
</p>
</div>
@@ -63,38 +63,38 @@ export default function Bylaws() {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-5xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF Bylaws
</h1>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) 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-white rounded-2xl border-2 border-[#664fa3] mb-6">
<Card className="p-8 bg-background rounded-2xl border-2 border-var(--purple-lavender) mb-6">
<div className="flex items-start gap-4 mb-6">
<div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-4 rounded-xl">
<div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl">
<Scale className="h-8 w-8 text-white" />
</div>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
{currentBylaws.title}
</h2>
<Badge className="bg-[#81B29A] text-white">
<Badge className="bg-var(--green-light) text-white">
<Check className="h-3 w-3 mr-1" />
Current Version
</Badge>
</div>
<div className="flex items-center gap-4 text-[#664fa3] mb-4">
<div className="flex items-center gap-4 text-var(--purple-lavender) 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-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
>
<ExternalLink className="h-5 w-5" />
View Current Bylaws
@@ -115,9 +115,9 @@ export default function Bylaws() {
</div>
</Card>
) : (
<Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb] mb-6">
<Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<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" }}>
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-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center justify-center gap-2"
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"
>
<History className="h-4 w-4" />
{showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
@@ -140,17 +140,17 @@ export default function Bylaws() {
{/* Version History */}
{showHistory && history.length > 1 && (
<div className="space-y-4">
<h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Previous Versions
</h3>
{history.filter(b => !b.is_current).map(bylaws => (
<Card key={bylaws.id} className="p-6 bg-[#f9f7fc] rounded-xl border border-[#ddd8eb]">
<Card key={bylaws.id} className="p-6 bg-var(--lavender-600) rounded-xl border border-var(--neutral-800)">
<div className="flex items-center justify-between">
<div>
<h4 className="text-lg font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
<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-[#664fa3]">
<div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
<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-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center gap-2"
className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View
@@ -172,14 +172,14 @@ export default function Bylaws() {
)}
{/* Information Card */}
<Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
<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-[#664fa3] mt-1" />
<Scale className="h-5 w-5 text-var(--purple-lavender) mt-1" />
<div>
<h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About LOAF Bylaws
</h4>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" 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.

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

@@ -107,11 +107,11 @@ const EventGallery = () => {
const EventCard = ({ event }) => (
<Card
className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
onClick={() => handleEventClick(event)}
>
{/* Thumbnail */}
<div className="relative h-48 mb-4 rounded-xl overflow-hidden bg-[#F8F7FB]">
<div className="relative h-48 mb-4 rounded-xl overflow-hidden bg-var(--lavender-500)">
{event.thumbnail_url ? (
<img
src={event.thumbnail_url}
@@ -120,35 +120,35 @@ const EventGallery = () => {
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<ImageIcon className="h-16 w-16 text-[#ddd8eb]" />
<ImageIcon className="h-16 w-16 text-var(--neutral-800)" />
</div>
)}
<div className="absolute top-3 right-3">
<Badge className="bg-[#664fa3] text-white px-3 py-1 rounded-full">
<Badge className="bg-var(--purple-lavender) text-white px-3 py-1 rounded-full">
{event.gallery_count} {event.gallery_count === 1 ? 'photo' : 'photos'}
</Badge>
</div>
</div>
{/* Event Info */}
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{event.title}
</h3>
{event.description && (
<p className="text-[#664fa3] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) 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-[#664fa3]">
<div className="flex items-center gap-2 text-var(--purple-lavender)">
<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-[#664fa3]">
<div className="flex items-center gap-2 text-var(--purple-lavender)">
<MapPin className="h-4 w-4" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
</div>
@@ -159,16 +159,16 @@ const EventGallery = () => {
// Event Gallery Grid View
if (!selectedEvent) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-7xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender)" 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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
<p className="text-var(--purple-lavender)" 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">
@@ -186,11 +186,11 @@ const EventGallery = () => {
</div>
) : (
<div className="text-center py-20">
<ImageIcon className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<ImageIcon className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
<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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Event photos will appear here once admins upload them.
</p>
</div>
@@ -202,7 +202,7 @@ const EventGallery = () => {
// Individual Event Gallery View
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-7xl mx-auto px-6 py-12">
@@ -210,7 +210,7 @@ const EventGallery = () => {
<Button
onClick={handleBackToEvents}
variant="ghost"
className="mb-6 text-[#664fa3] hover:text-[#422268] hover:bg-[#F8F7FB]"
className="mb-6 text-var(--purple-lavender) hover:text-var(--purple-ink) hover:bg-var(--lavender-500)"
style={{ fontFamily: "'Inter', sans-serif" }}
>
<ArrowLeft className="h-4 w-4 mr-2" />
@@ -219,10 +219,10 @@ const EventGallery = () => {
{/* Event Header */}
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<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-[#664fa3]">
<div className="flex flex-wrap gap-4 text-var(--purple-lavender)">
<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-[#664fa3] text-white px-3 py-1 rounded-full">
<Badge className="bg-var(--purple-lavender) 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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
<p className="text-var(--purple-lavender)" 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">
@@ -272,11 +272,11 @@ const EventGallery = () => {
</div>
) : (
<div className="text-center py-20">
<ImageIcon className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<ImageIcon className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Photos Yet
</h3>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Photos from this event will appear here once uploaded.
</p>
</div>

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

@@ -29,10 +29,10 @@ export default function Financials() {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading financial reports...
</p>
</div>
@@ -41,35 +41,35 @@ export default function Financials() {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-5xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Financial Reports
</h1>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Access annual financial reports and stay informed about LOAF's fiscal responsibility.
</p>
</div>
{/* Reports List */}
{reports.length === 0 ? (
<Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb]">
<TrendingUp className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<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" }}>
No financial reports available yet
</p>
</Card>
) : (
<div className="space-y-6">
{reports.map(report => (
<Card key={report.id} className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-shadow">
<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-[#664fa3] to-[#422268] p-6 rounded-xl text-white min-w-[120px] text-center">
<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">
<DollarSign className="h-8 w-8 mx-auto mb-2" />
<div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
{report.year}
@@ -79,17 +79,17 @@ export default function Financials() {
{/* Report Details */}
<div className="flex-1">
<h3 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{report.title}
</h3>
<div className="flex items-center gap-2 mb-4">
<Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
<Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
{report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
</Badge>
</div>
<Button
onClick={() => window.open(report.document_url, '_blank')}
className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View Report
@@ -103,14 +103,14 @@ export default function Financials() {
{/* Transparency Note */}
{reports.length > 0 && (
<Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
<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-[#664fa3] mt-1" />
<TrendingUp className="h-5 w-5 text-var(--purple-lavender) mt-1" />
<div>
<h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Transparency & Accountability
</h4>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" 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>

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

@@ -124,10 +124,10 @@ export default function MemberCalendar() {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading calendar...
</p>
</div>
@@ -136,15 +136,15 @@ export default function MemberCalendar() {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-7xl mx-auto px-6 py-12">
<div className="mb-8">
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Calendar
</h1>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) 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>
@@ -156,26 +156,26 @@ 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-[#81B29A]"></div>
<span className="text-sm text-[#664fa3]">Going</span>
<div className="w-4 h-4 rounded bg-var(--green-light)"></div>
<span className="text-sm text-var(--purple-lavender)">Going</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[#fb923c]"></div>
<span className="text-sm text-[#664fa3]">Maybe</span>
<div className="w-4 h-4 rounded bg-var(--orange-400)"></div>
<span className="text-sm text-var(--purple-lavender)">Maybe</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[#9ca3af]"></div>
<span className="text-sm text-[#664fa3]">Not Going</span>
<div className="w-4 h-4 rounded bg-var(--slate-400]"></div>
<span className="text-sm text-var(--purple-lavender)">Not Going</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-[#DDD8EB]"></div>
<span className="text-sm text-[#664fa3]">No RSVP</span>
<div className="w-4 h-4 rounded bg-var(--neutral-800)"></div>
<span className="text-sm text-var(--purple-lavender)">No RSVP</span>
</div>
</div>
</div>
</div>
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
<Calendar
localizer={localizer}
events={calendarEvents}
@@ -200,18 +200,17 @@ export default function MemberCalendar() {
<>
<DialogHeader>
<div className="flex items-center gap-3 mb-2">
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
<CalendarIcon className="h-6 w-6 text-[#664fa3]" />
<div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
<CalendarIcon className="h-6 w-6 text-var(--purple-lavender)" />
</div>
{selectedEvent.user_rsvp_status && (
<Badge
className={`px-3 py-1 rounded-full text-sm ${
selectedEvent.user_rsvp_status === 'yes'
? 'bg-[#81B29A] text-white'
: selectedEvent.user_rsvp_status === 'no'
className={`px-3 py-1 rounded-full text-sm ${selectedEvent.user_rsvp_status === 'yes'
? 'bg-var(--green-light) text-white'
: selectedEvent.user_rsvp_status === 'no'
? 'bg-gray-400 text-white'
: 'bg-orange-400 text-white'
}`}
}`}
>
{selectedEvent.user_rsvp_status === 'yes' && 'Going'}
{selectedEvent.user_rsvp_status === 'no' && 'Not Going'}
@@ -219,14 +218,14 @@ export default function MemberCalendar() {
</Badge>
)}
</div>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
{selectedEvent.title}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 mt-4">
<div className="space-y-3">
<div className="flex items-center gap-3 text-[#664fa3]">
<div className="flex items-center gap-3 text-var(--purple-lavender)">
<CalendarIcon className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(selectedEvent.start_at).toLocaleDateString('en-US', {
@@ -237,17 +236,17 @@ export default function MemberCalendar() {
})}
</span>
</div>
<div className="flex items-center gap-3 text-[#664fa3]">
<div className="flex items-center gap-3 text-var(--purple-lavender)">
<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-[#664fa3]">
<div className="flex items-center gap-3 text-var(--purple-lavender)">
<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-[#664fa3]">
<div className="flex items-center gap-3 text-var(--purple-lavender)">
<Users className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedEvent.rsvp_count || 0} {selectedEvent.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -257,18 +256,18 @@ export default function MemberCalendar() {
</div>
{selectedEvent.description && (
<div className="pt-4 border-t border-[#ddd8eb]">
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="pt-4 border-t border-var(--neutral-800)">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About This Event
</h3>
<p className="text-[#664fa3] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedEvent.description}
</p>
</div>
)}
<div className="pt-4 border-t border-[#ddd8eb]">
<h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="pt-4 border-t border-var(--neutral-800)">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Your RSVP
</h3>
<div className="flex gap-3 flex-wrap">
@@ -276,11 +275,10 @@ export default function MemberCalendar() {
onClick={() => handleRSVP('yes')}
disabled={rsvpLoading}
size="sm"
className={`rounded-full px-6 flex items-center gap-2 ${
selectedEvent.user_rsvp_status === 'yes'
? 'bg-[#81B29A] text-white hover:bg-[#66927e]'
: 'bg-[#DDD8EB] text-[#422268] hover:bg-[#c4bed8]'
}`}
className={`rounded-full px-6 flex items-center gap-2 ${selectedEvent.user_rsvp_status === 'yes'
? 'bg-var(--green-light) text-white hover:bg-var(--green-muted)'
: 'bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--neutral-400:)'
}`}
>
<Check className="h-4 w-4" />
I'm Going
@@ -290,11 +288,10 @@ export default function MemberCalendar() {
disabled={rsvpLoading}
size="sm"
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-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9]'
}`}
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)'
}`}
>
<HelpCircle className="h-4 w-4" />
Maybe
@@ -304,11 +301,10 @@ export default function MemberCalendar() {
disabled={rsvpLoading}
size="sm"
variant="outline"
className={`rounded-full px-6 flex items-center gap-2 border-2 ${
selectedEvent.user_rsvp_status === 'no'
? 'border-gray-400 bg-gray-100 text-gray-700'
: 'border-gray-400 text-gray-600 hover:bg-gray-50'
}`}
className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'no'
? 'border-gray-400 bg-gray-100 text-gray-700'
: 'border-gray-400 text-gray-600 hover:bg-gray-50'
}`}
>
<X className="h-4 w-4" />
Can't Attend
@@ -316,8 +312,8 @@ export default function MemberCalendar() {
</div>
</div>
<div className="pt-4 border-t border-[#ddd8eb]">
<h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="pt-4 border-t border-var(--neutral-800)">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Add to Your Calendar
</h3>
<AddToCalendarButton

88
src/pages/members/MemberProfile.js
View File

@@ -191,11 +191,11 @@ const MemberProfile = () => {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<div className="text-center py-20">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
</div>
</div>
</div>
@@ -203,24 +203,24 @@ const MemberProfile = () => {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Member Profile
</h1>
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Enhance your profile with a photo and social media links.
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-8">
{/* Profile Photo Section */}
<Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Profile Photo
</h2>
@@ -231,7 +231,7 @@ const MemberProfile = () => {
<img
src={previewImage}
alt="Profile"
className="w-40 h-40 rounded-full object-cover border-4 border-[#ddd8eb]"
className="w-40 h-40 rounded-full object-cover border-4 border-var(--neutral-800)"
/>
<Button
type="button"
@@ -242,8 +242,8 @@ const MemberProfile = () => {
</Button>
</div>
) : (
<div className="w-40 h-40 rounded-full bg-[#F8F7FB] border-4 border-[#ddd8eb] flex items-center justify-center">
<User className="h-20 w-20 text-[#ddd8eb]" />
<div className="w-40 h-40 rounded-full bg-var(--lavender-500) border-4 border-var(--neutral-800) flex items-center justify-center">
<User className="h-20 w-20 text-var(--neutral-800)" />
</div>
)}
</div>
@@ -260,7 +260,7 @@ const MemberProfile = () => {
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl px-6 py-3 flex items-center gap-2"
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl px-6 py-3 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{uploading ? (
@@ -275,7 +275,7 @@ const MemberProfile = () => {
</>
)}
</Button>
<p className="text-sm text-[#664fa3] mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
JPG, PNG, WebP, or GIF. Max 50MB.
</p>
</div>
@@ -283,15 +283,15 @@ const MemberProfile = () => {
</Card>
{/* Social Media Section */}
<Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Social Media Links
</h2>
<div className="space-y-6">
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Facebook className="h-4 w-4 text-[#1877F2]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Facebook className="h-4 w-4 text-var(--blue-facebook)" />
Facebook Profile URL
</Label>
<Input
@@ -300,14 +300,14 @@ const MemberProfile = () => {
value={formData.social_media_facebook}
onChange={handleInputChange}
placeholder="https://facebook.com/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Instagram className="h-4 w-4 text-[#E4405F]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Instagram className="h-4 w-4 text-var(--red-instagram)" />
Instagram Profile URL
</Label>
<Input
@@ -316,14 +316,14 @@ const MemberProfile = () => {
value={formData.social_media_instagram}
onChange={handleInputChange}
placeholder="https://instagram.com/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Twitter className="h-4 w-4 text-[#1DA1F2]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Twitter className="h-4 w-4 text-var(--blue-twitter)" />
Twitter/X Profile URL
</Label>
<Input
@@ -332,14 +332,14 @@ const MemberProfile = () => {
value={formData.social_media_twitter}
onChange={handleInputChange}
placeholder="https://twitter.com/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Linkedin className="h-4 w-4 text-[#0A66C2]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Linkedin className="h-4 w-4 text-var(--blue-linkedin)" />
LinkedIn Profile URL
</Label>
<Input
@@ -348,7 +348,7 @@ const MemberProfile = () => {
value={formData.social_media_linkedin}
onChange={handleInputChange}
placeholder="https://linkedin.com/in/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
@@ -356,33 +356,33 @@ const MemberProfile = () => {
</Card>
{/* Directory Settings Section */}
<Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Directory Settings
</h2>
<div className="space-y-6">
<div className="flex items-center justify-between p-4 bg-[#F8F7FB] rounded-xl">
<div className="flex items-center justify-between p-4 bg-var(--lavender-500) rounded-xl">
<div className="flex-1">
<Label className="text-[#422268] font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Eye className="h-4 w-4 text-[#664fa3]" />
<Label className="text-var(--purple-ink) font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Eye className="h-4 w-4 text-var(--purple-lavender)" />
Show in Members Directory
</Label>
<p className="text-sm text-[#664fa3] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Allow other members to see your profile in the directory
</p>
</div>
<Switch
checked={formData.show_in_directory}
onCheckedChange={handleSwitchChange}
className="data-[state=checked]:bg-[#664fa3]"
className="data-[state=checked]:bg-var(--purple-lavender)"
/>
</div>
{formData.show_in_directory && (
<>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Directory Email (visible to members)
</Label>
<Input
@@ -391,13 +391,13 @@ const MemberProfile = () => {
value={formData.directory_email}
onChange={handleInputChange}
placeholder="public.email@example.com"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Bio (visible to members)
</Label>
<Textarea
@@ -406,14 +406,14 @@ const MemberProfile = () => {
onChange={handleInputChange}
placeholder="Tell other members about yourself..."
rows={4}
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Directory Address (optional)
</Label>
<Input
@@ -422,13 +422,13 @@ const MemberProfile = () => {
value={formData.directory_address}
onChange={handleInputChange}
placeholder="123 Main St, City, State"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Directory Phone (optional)
</Label>
<Input
@@ -437,14 +437,14 @@ const MemberProfile = () => {
value={formData.directory_phone}
onChange={handleInputChange}
placeholder="(555) 123-4567"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Partner Name (if applicable)
</Label>
<Input
@@ -453,7 +453,7 @@ const MemberProfile = () => {
value={formData.directory_partner_name}
onChange={handleInputChange}
placeholder="Partner's name"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
@@ -467,7 +467,7 @@ const MemberProfile = () => {
<Button
type="submit"
disabled={saving}
className="bg-[#ff9e77] hover:bg-[#ff8c5a] text-white rounded-xl px-8 py-3 text-lg"
className="bg-var(--orange-light) hover:bg-var(--orange-apricot) text-white rounded-xl px-8 py-3 text-lg"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{saving ? (

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

@@ -114,23 +114,23 @@ const MembersDirectory = () => {
const Border = ({ yaxis = false }) => {
return (
yaxis ?
<div className=' border-2 w-full border-[#664FA3] my-24' />
: <div className=' border-2 w-full border-[#664FA3] mb-24' />
<div className=' border-2 w-full border-var(--purple-lavender) my-24' />
: <div className=' border-2 w-full border-var(--purple-lavender) mb-24' />
)
}
const MemberCard = ({ member }) => (
<Card className="p-6 bg-white rounded-3xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
<Card className="p-6 bg-background rounded-3xl border border-var(--neutral-800) hover:shadow-lg transition-all h-full">
{/* Profile Photo */}
<div className="flex justify-center mb-4">
{member.profile_photo_url ? (
<img
src={member.profile_photo_url}
alt={`${member.first_name} ${member.last_name}`}
className="w-32 h-32 rounded-full object-cover border-4 border-[#ddd8eb]"
className="w-32 h-32 rounded-full object-cover border-4 border-var(--neutral-800)"
/>
) : (
<div className="w-32 h-32 rounded-full bg-[#DDD8EB] border-4 border-[#ddd8eb] flex items-center justify-center">
<span className="text-4xl font-semibold text-[#664fa3]" style={{ fontFamily: "'Inter', sans-serif" }}>
<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" }}>
{getInitials(member.first_name, member.last_name)}
</span>
</div>
@@ -138,15 +138,15 @@ const MembersDirectory = () => {
</div>
{/* Name */}
<h3 className="text-2xl font-semibold text-[#422268] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-semibold text-var(--purple-ink) text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
{member.first_name} {member.last_name}
</h3>
{/* Partner Name */}
{member.directory_partner_name && (
<div className="flex items-center justify-center gap-2 mb-4">
<Heart className="h-4 w-4 text-[#ff9e77]" />
<span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Heart className="h-4 w-4 text-var(--orange-light)" />
<span className="text-sm text-var(--purple-lavender)" 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-[#664fa3] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) 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-[#664fa3]" />
<span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Calendar className="h-4 w-4 text-var(--purple-lavender)" />
<span className="text-sm text-var(--purple-lavender)" 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-[#664fa3] flex-shrink-0" />
<Mail className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
<a
href={`mailto:${member.directory_email}`}
className="text-[#664fa3] hover:text-[#422268] truncate"
className="text-var(--purple-lavender) 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-[#664fa3] flex-shrink-0" />
<Phone className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
<a
href={`tel:${member.directory_phone}`}
className="text-[#664fa3] hover:text-[#422268]"
className="text-var(--purple-lavender) 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-[#664fa3] flex-shrink-0 mt-0.5" />
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<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" }}>
{member.directory_address}
</span>
</div>
@@ -212,17 +212,17 @@ const MembersDirectory = () => {
{/* Social Media Links */}
{(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
<div className="pt-4 border-t border-[#ddd8eb]">
<div className="pt-4 border-t border-var(--neutral-800)">
<div className="flex justify-center gap-3">
{member.social_media_facebook && (
<a
href={getSocialMediaLink(member.social_media_facebook)}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="Facebook"
>
<Facebook className="h-5 w-5 text-[#1877F2]" />
<Facebook className="h-5 w-5 text-var(--blue-facebook)" />
</a>
)}
@@ -231,10 +231,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(member.social_media_instagram)}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="Instagram"
>
<Instagram className="h-5 w-5 text-[#E4405F]" />
<Instagram className="h-5 w-5 text-var(--red-instagram)" />
</a>
)}
@@ -243,10 +243,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(member.social_media_twitter)}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="Twitter/X"
>
<Twitter className="h-5 w-5 text-[#1DA1F2]" />
<Twitter className="h-5 w-5 text-var(--blue-twitter)" />
</a>
)}
@@ -255,10 +255,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(member.social_media_linkedin)}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="LinkedIn"
>
<Linkedin className="h-5 w-5 text-[#0A66C2]" />
<Linkedin className="h-5 w-5 text-var(--blue-linkedin)" />
</a>
)}
</div>
@@ -266,10 +266,10 @@ const MembersDirectory = () => {
)}
{/* View Profile Button */}
<div className="pt-4 mt-4 border-t border-[#ddd8eb]">
<div className="pt-4 mt-4 border-t border-var(--neutral-800)">
<Button
onClick={() => handleViewProfile(member.id)}
className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full py-5"
className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full py-5"
>
<UserCircle className="h-4 w-4 mr-2" />
View Full Profile
@@ -279,7 +279,7 @@ const MembersDirectory = () => {
);
return (
<div className="min-h-screen bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB]">
<div className="min-h-screen bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800)">
<Navbar />
<div className="max-w-7xl mx-auto py-12">
@@ -289,29 +289,29 @@ const MembersDirectory = () => {
{/* Header */}
<div className="m-8 mt-14 flex flex-col sm:flex-row justify-between items-center ">
<h1 className="text-4xl md:text-5xl font-bold text-[#422268] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-bold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
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-[#664fa3] font-medium'>{totalMembers}</span>
<span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-var(--purple-lavender) 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-[#664fa3]" />
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
<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-[#664fa3] focus:ring-[#664fa3]"
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)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
{searchQuery && (
<p className="mt-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="mt-3 text-sm text-var(--purple-lavender)" 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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
<p className="text-var(--purple-lavender)" 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">
@@ -335,11 +335,11 @@ const MembersDirectory = () => {
</div>
) : (
<div className="text-center py-20">
<User className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<User className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
<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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{searchQuery
? 'Try adjusting your search query.'
: 'Members who opt in to the directory will appear here.'}
@@ -354,18 +354,18 @@ const MembersDirectory = () => {
{/* Info Card */}
{!loading && members.length > 0 && (
<Card className="mt-12 p-6 bg-[#F8F7FB] border-[#ddd8eb]">
<Card className="mt-12 p-6 bg-var(--lavender-500) border-var(--neutral-800)">
<div className="flex items-start gap-4">
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
<User className="h-6 w-6 text-[#664fa3]" />
<div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
<User className="h-6 w-6 text-var(--purple-lavender)" />
</div>
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" 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-[#ff9e77] hover:underline font-medium">
<a href="/members/profile" className="text-var(--orange-light) hover:underline font-medium">
Edit your profile →
</a>
</p>
@@ -377,17 +377,17 @@ const MembersDirectory = () => {
{/* Profile Detail Dialog */}
<Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
<DialogContent className="sm:max-w-[600px] bg-white rounded-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto">
{selectedMember && (
<>
<DialogHeader>
<DialogTitle className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
{selectedMember.first_name} {selectedMember.last_name}
</DialogTitle>
{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-[#ff9e77]" />
<span className="text-[#664fa3]">Partner: {selectedMember.directory_partner_name}</span>
<Heart className="h-5 w-5 text-var(--orange-light)" />
<span className="text-var(--purple-lavender)">Partner: {selectedMember.directory_partner_name}</span>
</DialogDescription>
)}
</DialogHeader>
@@ -396,10 +396,10 @@ const MembersDirectory = () => {
{/* Bio */}
{selectedMember.directory_bio && (
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About
</h3>
<p className="text-[#664fa3] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedMember.directory_bio}
</p>
</div>
@@ -407,20 +407,20 @@ const MembersDirectory = () => {
{/* Contact Information */}
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Contact Information
</h3>
<div className="space-y-3">
{selectedMember.directory_email && (
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[#F8F7FB]">
<Mail className="h-5 w-5 text-[#664fa3]" />
<div className="p-2 rounded-lg bg-var(--lavender-500)">
<Mail className="h-5 w-5 text-var(--purple-lavender)" />
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<a
href={`mailto:${selectedMember.directory_email}`}
className="text-[#422268] hover:text-[#664fa3] font-medium"
className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{selectedMember.directory_email}
@@ -431,14 +431,14 @@ const MembersDirectory = () => {
{selectedMember.directory_phone && (
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[#F8F7FB]">
<Phone className="h-5 w-5 text-[#664fa3]" />
<div className="p-2 rounded-lg bg-var(--lavender-500)">
<Phone className="h-5 w-5 text-var(--purple-lavender)" />
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
<p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
<a
href={`tel:${selectedMember.directory_phone}`}
className="text-[#422268] hover:text-[#664fa3] font-medium"
className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{selectedMember.directory_phone}
@@ -449,12 +449,12 @@ const MembersDirectory = () => {
{selectedMember.directory_address && (
<div className="flex items-start gap-3">
<div className="p-2 rounded-lg bg-[#F8F7FB]">
<MapPin className="h-5 w-5 text-[#664fa3]" />
<div className="p-2 rounded-lg bg-var(--lavender-500)">
<MapPin className="h-5 w-5 text-var(--purple-lavender)" />
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-var(--purple-lavender) 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>
</div>
@@ -463,12 +463,12 @@ const MembersDirectory = () => {
{selectedMember.directory_dob && (
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[#F8F7FB]">
<Heart className="h-5 w-5 text-[#ff9e77]" />
<div className="p-2 rounded-lg bg-var(--lavender-500)">
<Heart className="h-5 w-5 text-var(--orange-light)" />
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-var(--purple-lavender) 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>
</div>
@@ -480,14 +480,14 @@ const MembersDirectory = () => {
{/* Volunteer Interests */}
{selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Volunteer Interests
</h3>
<div className="flex flex-wrap gap-2">
{selectedMember.volunteer_interests.map((interest, index) => (
<Badge
key={index}
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
>
{interest}
</Badge>
@@ -500,7 +500,7 @@ const MembersDirectory = () => {
{(selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
selectedMember.social_media_twitter || selectedMember.social_media_linkedin) && (
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Connect on Social Media
</h3>
<div className="flex gap-3">
@@ -509,10 +509,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(selectedMember.social_media_facebook)}
target="_blank"
rel="noopener noreferrer"
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="Facebook"
>
<Facebook className="h-6 w-6 text-[#1877F2]" />
<Facebook className="h-6 w-6 text-var(--blue-facebook)" />
</a>
)}
@@ -521,10 +521,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(selectedMember.social_media_instagram)}
target="_blank"
rel="noopener noreferrer"
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="Instagram"
>
<Instagram className="h-6 w-6 text-[#E4405F]" />
<Instagram className="h-6 w-6 text-var(--red-instagram)" />
</a>
)}
@@ -533,10 +533,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(selectedMember.social_media_twitter)}
target="_blank"
rel="noopener noreferrer"
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="Twitter/X"
>
<Twitter className="h-6 w-6 text-[#1DA1F2]" />
<Twitter className="h-6 w-6 text-var(--blue-twitter)" />
</a>
)}
@@ -545,10 +545,10 @@ const MembersDirectory = () => {
href={getSocialMediaLink(selectedMember.social_media_linkedin)}
target="_blank"
rel="noopener noreferrer"
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
title="LinkedIn"
>
<Linkedin className="h-6 w-6 text-[#0A66C2]" />
<Linkedin className="h-6 w-6 text-var(--blue-linkedin)" />
</a>
)}
</div>
@@ -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-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" 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-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
>
First Page
</Button>
<Button
onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
disabled={currentPage === 1}
className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
>
Previous
</Button>
@@ -593,8 +593,8 @@ const MembersDirectory = () => {
onClick={() => setCurrentPage(pageNumber)}
className={
isActive
? "bg-[#664fa3] text-white hover:bg-[#422268] rounded-full"
: "bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full"
? "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"
}
>
{pageNumber}
@@ -605,14 +605,14 @@ const MembersDirectory = () => {
<Button
onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
disabled={currentPage === totalPages}
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
>
Next
</Button>
<Button
onClick={() => setCurrentPage(totalPages)}
disabled={currentPage === totalPages}
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
>
Last Page
</Button>

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

@@ -83,10 +83,10 @@ export default function NewsletterArchive() {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading newsletters...
</p>
</div>
@@ -95,16 +95,16 @@ export default function NewsletterArchive() {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-7xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Newsletter Archive
</h1>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) 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-[#664fa3]" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-var(--purple-lavender)" />
<Input
type="text"
placeholder="Search newsletters..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10 border-[#ddd8eb] focus:border-[#664fa3]"
className="pl-10 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
onClick={clearFilter}
variant={selectedYear === null ? "default" : "outline"}
size="sm"
className={selectedYear === null ? "bg-[#664fa3] text-white" : "border-[#664fa3] text-[#664fa3]"}
className={selectedYear === null ? "bg-var(--purple-lavender) text-white" : "border-var(--purple-lavender) text-var(--purple-lavender)"}
>
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-[#664fa3] text-white" : "border-[#664fa3] text-[#664fa3]"}
className={selectedYear === year ? "bg-var(--purple-lavender) text-white" : "border-var(--purple-lavender) text-var(--purple-lavender)"}
>
{year}
</Button>
@@ -149,9 +149,9 @@ export default function NewsletterArchive() {
{/* Newsletter List */}
{filteredNewsletters.length === 0 ? (
<Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb]">
<FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<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" }}>
No newsletters found
</p>
</Card>
@@ -159,37 +159,37 @@ export default function NewsletterArchive() {
<div className="space-y-8">
{sortedYears.map(year => (
<div key={year}>
<h2 className="text-2xl font-semibold text-[#422268] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Calendar className="h-6 w-6" />
{year}
</h2>
<div className="grid md:grid-cols-2 gap-6">
{groupedNewsletters[year].map(newsletter => (
<Card key={newsletter.id} className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-shadow">
<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-[#DDD8EB]/20 p-3 rounded-lg flex-shrink-0">
<FileText className="h-6 w-6 text-[#664fa3]" />
<div className="bg-var(--neutral-800)/20 p-3 rounded-lg flex-shrink-0">
<FileText className="h-6 w-6 text-var(--purple-lavender)" />
</div>
<div className="flex-1 min-w-0">
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<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-[#664fa3] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{newsletter.description}
</p>
)}
<div className="flex items-center gap-3 mb-4">
<Badge className="bg-[#DDD8EB] text-[#422268] hover:bg-[#DDD8EB]">
<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-[#664fa3] text-[#664fa3]">
<Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
{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-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center justify-center gap-2"
className="w-full bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center justify-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View Newsletter