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

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
This commit is contained in:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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