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

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

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

46
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-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading bylaws...
</p>
</div>
@@ -63,30 +63,30 @@ 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-primary 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-muted-foreground 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-muted-foreground 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-muted-foreground to-primary 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-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
{currentBylaws.title}
</h2>
<Badge className="bg-[#81B29A] text-white">
@@ -94,7 +94,7 @@ export default function Bylaws() {
Current Version
</Badge>
</div>
<div className="flex items-center gap-4 text-[#664fa3] mb-4">
<div className="flex items-center gap-4 text-muted-foreground 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-muted-foreground text-white hover:bg-[#533a82] 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-chart-6 mb-6">
<Scale className="h-16 w-16 text-chart-6 mx-auto mb-4" />
<p className="text-muted-foreground 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-chart-6 text-muted-foreground hover:bg-muted 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-primary 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-[#f9f7fc] rounded-xl border border-chart-6">
<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-primary 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-muted-foreground">
<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-muted-foreground text-muted-foreground hover:bg-muted 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-[#f9f7fc] border border-chart-6">
<div className="flex items-start gap-3">
<Scale className="h-5 w-5 text-[#664fa3] mt-1" />
<Scale className="h-5 w-5 text-muted-foreground mt-1" />
<div>
<h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="font-semibold text-primary 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-muted-foreground" 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-chart-6 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-chart-7">
{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-chart-6" />
</div>
)}
<div className="absolute top-3 right-3">
<Badge className="bg-[#664fa3] text-white px-3 py-1 rounded-full">
<Badge className="bg-muted-foreground 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-primary 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-muted-foreground 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-muted-foreground">
<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-muted-foreground">
<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-primary 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-muted-foreground" 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-muted-foreground" 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-chart-6 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-primary 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-muted-foreground" 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-muted-foreground hover:text-primary hover:bg-chart-7"
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-primary 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-muted-foreground">
<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-muted-foreground 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-muted-foreground" 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-chart-6 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Photos Yet
</h3>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-muted-foreground" 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-muted-foreground" 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-primary 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-muted-foreground 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-chart-6">
<TrendingUp className="h-16 w-16 text-chart-6 mx-auto mb-4" />
<p className="text-muted-foreground 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-chart-6 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-muted-foreground to-primary 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-primary 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-muted-foreground text-muted-foreground">
{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-muted-foreground text-white hover:bg-[#533a82] 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-[#f9f7fc] border border-chart-6">
<div className="flex items-start gap-3">
<TrendingUp className="h-5 w-5 text-[#664fa3] mt-1" />
<TrendingUp className="h-5 w-5 text-muted-foreground mt-1" />
<div>
<h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="font-semibold text-primary 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-muted-foreground" 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>

86
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-muted-foreground" 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-primary 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-muted-foreground 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,25 +157,25 @@ 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>
<span className="text-sm text-muted-foreground">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>
<span className="text-sm text-muted-foreground">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>
<span className="text-sm text-muted-foreground">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-chart-6"></div>
<span className="text-sm text-muted-foreground">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-chart-6 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-chart-6/20 p-3 rounded-lg">
<CalendarIcon className="h-6 w-6 text-muted-foreground" />
</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-[#81B29A] 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-primary" 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-muted-foreground">
<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-muted-foreground">
<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-muted-foreground">
<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-muted-foreground">
<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-chart-6">
<h3 className="text-lg font-semibold text-primary 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-muted-foreground 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-chart-6">
<h3 className="text-lg font-semibold text-primary 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-[#81B29A] text-white hover:bg-[#66927e]'
: 'bg-chart-6 text-primary hover:bg-[#c4bed8]'
}`}
>
<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-muted-foreground text-muted-foreground hover:bg-muted'
}`}
>
<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-chart-6">
<h3 className="text-lg font-semibold text-primary mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Add to Your Calendar
</h3>
<AddToCalendarButton

80
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-muted-foreground" 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-primary 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-muted-foreground" 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-chart-6 rounded-2xl">
<h2 className="text-2xl font-semibold text-primary 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-chart-6"
/>
<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-chart-7 border-4 border-chart-6 flex items-center justify-center">
<User className="h-20 w-20 text-chart-6" />
</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-muted-foreground hover:bg-primary 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-muted-foreground mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
JPG, PNG, WebP, or GIF. Max 50MB.
</p>
</div>
@@ -283,14 +283,14 @@ 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-chart-6 rounded-2xl">
<h2 className="text-2xl font-semibold text-primary 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" }}>
<Label className="flex items-center gap-2 text-primary mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Facebook className="h-4 w-4 text-[#1877F2]" />
Facebook Profile URL
</Label>
@@ -300,13 +300,13 @@ 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
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" }}>
<Label className="flex items-center gap-2 text-primary mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Instagram className="h-4 w-4 text-[#E4405F]" />
Instagram Profile URL
</Label>
@@ -316,13 +316,13 @@ 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
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" }}>
<Label className="flex items-center gap-2 text-primary mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Twitter className="h-4 w-4 text-[#1DA1F2]" />
Twitter/X Profile URL
</Label>
@@ -332,13 +332,13 @@ 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
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" }}>
<Label className="flex items-center gap-2 text-primary mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Linkedin className="h-4 w-4 text-[#0A66C2]" />
LinkedIn Profile URL
</Label>
@@ -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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
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-chart-6 rounded-2xl">
<h2 className="text-2xl font-semibold text-primary 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-chart-7 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-primary font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Eye className="h-4 w-4 text-muted-foreground" />
Show in Members Directory
</Label>
<p className="text-sm text-[#664fa3] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-muted-foreground 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-muted-foreground"
/>
</div>
{formData.show_in_directory && (
<>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-primary 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-primary 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
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-primary 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-primary 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-primary 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-chart-6 rounded-xl focus:border-muted-foreground focus:ring-muted-foreground"
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-accent hover:bg-[#ff8c5a] text-white rounded-xl px-8 py-3 text-lg"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{saving ? (

156
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-muted-foreground my-24' />
: <div className=' border-2 w-full border-muted-foreground 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-chart-6 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-chart-6"
/>
) : (
<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-chart-6 border-4 border-chart-6 flex items-center justify-center">
<span className="text-4xl font-semibold text-muted-foreground" 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-primary 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-accent" />
<span className="text-sm text-muted-foreground" 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-muted-foreground 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-muted-foreground" />
<span className="text-sm text-muted-foreground" 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-muted-foreground flex-shrink-0" />
<a
href={`mailto:${member.directory_email}`}
className="text-[#664fa3] hover:text-[#422268] truncate"
className="text-muted-foreground hover:text-primary 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-muted-foreground flex-shrink-0" />
<a
href={`tel:${member.directory_phone}`}
className="text-[#664fa3] hover:text-[#422268]"
className="text-muted-foreground hover:text-primary"
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-muted-foreground flex-shrink-0 mt-0.5" />
<span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{member.directory_address}
</span>
</div>
@@ -212,14 +212,14 @@ 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-chart-6">
<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-chart-7 hover:bg-chart-6 transition-colors"
title="Facebook"
>
<Facebook className="h-5 w-5 text-[#1877F2]" />
@@ -231,7 +231,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="Instagram"
>
<Instagram className="h-5 w-5 text-[#E4405F]" />
@@ -243,7 +243,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="Twitter/X"
>
<Twitter className="h-5 w-5 text-[#1DA1F2]" />
@@ -255,7 +255,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="LinkedIn"
>
<Linkedin className="h-5 w-5 text-[#0A66C2]" />
@@ -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-chart-6">
<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-chart-6 text-primary hover:bg-muted-foreground 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-[#F9FAFB] to-chart-6">
<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-primary 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-muted-foreground 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-muted-foreground" />
<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-muted-foreground focus:ring-muted-foreground"
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-muted-foreground" 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-muted-foreground" 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-chart-6 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-primary 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-muted-foreground" 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-chart-7 border-chart-6">
<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-chart-6/20 p-3 rounded-lg">
<User className="h-6 w-6 text-muted-foreground" />
</div>
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-lg font-semibold text-primary 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-muted-foreground" 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-accent 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-primary" 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-accent" />
<span className="text-muted-foreground">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-primary mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About
</h3>
<p className="text-[#664fa3] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-muted-foreground 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-primary 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-chart-7">
<Mail className="h-5 w-5 text-muted-foreground" />
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-xs text-muted-foreground 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-primary hover:text-muted-foreground 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-chart-7">
<Phone className="h-5 w-5 text-muted-foreground" />
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
<p className="text-xs text-muted-foreground 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-primary hover:text-muted-foreground 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-chart-7">
<MapPin className="h-5 w-5 text-muted-foreground" />
</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-muted-foreground mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
<p className="text-primary 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-chart-7">
<Heart className="h-5 w-5 text-accent" />
</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-muted-foreground mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
<p className="text-primary 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-primary 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-chart-6 text-primary hover:bg-muted-foreground 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-primary mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
Connect on Social Media
</h3>
<div className="flex gap-3">
@@ -509,7 +509,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="Facebook"
>
<Facebook className="h-6 w-6 text-[#1877F2]" />
@@ -521,7 +521,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="Instagram"
>
<Instagram className="h-6 w-6 text-[#E4405F]" />
@@ -533,7 +533,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="Twitter/X"
>
<Twitter className="h-6 w-6 text-[#1DA1F2]" />
@@ -545,7 +545,7 @@ 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-chart-7 hover:bg-chart-6 transition-colors"
title="LinkedIn"
>
<Linkedin className="h-6 w-6 text-[#0A66C2]" />
@@ -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-muted-foreground" 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-chart-6 rounded-full text-primary hover:bg-muted-foreground 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-chart-6 rounded-full text-primary hover:bg-muted-foreground 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-muted-foreground text-white hover:bg-primary rounded-full"
: "bg-chart-6 text-primary hover:bg-muted-foreground 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-chart-6 text-primary hover:bg-muted-foreground 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-chart-6 text-primary hover:bg-muted-foreground 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-muted-foreground" 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-primary 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-muted-foreground 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-muted-foreground" />
<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-chart-6 focus:border-muted-foreground"
/>
</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-muted-foreground text-white" : "border-muted-foreground text-muted-foreground"}
>
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-muted-foreground text-white" : "border-muted-foreground text-muted-foreground"}
>
{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-chart-6">
<FileText className="h-16 w-16 text-chart-6 mx-auto mb-4" />
<p className="text-muted-foreground 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-primary 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-chart-6 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-chart-6/20 p-3 rounded-lg flex-shrink-0">
<FileText className="h-6 w-6 text-muted-foreground" />
</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-primary 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-muted-foreground 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-chart-6 text-primary hover:bg-chart-6">
{formatDate(newsletter.published_date)}
</Badge>
<Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
<Badge variant="outline" className="border-muted-foreground text-muted-foreground">
{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-muted-foreground text-white hover:bg-[#533a82] rounded-full flex items-center justify-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View Newsletter