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

34
src/pages/Events.js
View File

@@ -30,7 +30,7 @@ const Events = () => {
if (!rsvpStatus) return null;
const config = {
yes: { label: 'Going', className: 'bg-[#81B29A] text-white' },
yes: { label: 'Going', className: 'bg-var(--green-light) text-white' },
no: { label: 'Not Going', className: 'bg-gray-400 text-white' },
maybe: { label: 'Maybe', className: 'bg-orange-100 text-orange-700' }
};
@@ -46,67 +46,67 @@ const Events = () => {
};
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-12">
<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" }}>
Upcoming Events
</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 and RSVP to our community events.
</p>
</div>
{loading ? (
<div className="text-center py-20">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
</div>
) : events.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
{events.map((event) => (
<Link to={`/events/${event.id}`} key={event.id}>
<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"
data-testid={`event-card-${event.id}`}
>
<div className="flex justify-between items-start mb-4">
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
<Calendar className="h-6 w-6 text-[#664fa3]" />
<div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
<Calendar className="h-6 w-6 text-var(--purple-lavender)" />
</div>
{getRSVPBadge(event.user_rsvp_status)}
</div>
<h3 className="text-xl font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
{event.title}
</h3>
{event.description && (
<p className="text-[#664fa3] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) mb-4 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" }}>
{new Date(event.start_at).toLocaleDateString()} at{' '}
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</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>
<div className="flex items-center gap-2 text-[#664fa3]">
<div className="flex items-center gap-2 text-var(--purple-lavender)">
<Users className="h-4 w-4" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.rsvp_count || 0} attending</span>
</div>
</div>
<div className="mt-6 flex items-center text-[#ff9e77] font-medium">
<div className="mt-6 flex items-center text-var(--orange-light) font-medium">
View Details
<ArrowRight className="ml-2 h-4 w-4" />
</div>
@@ -116,11 +116,11 @@ const Events = () => {
</div>
) : (
<div className="text-center py-20">
<Calendar 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" }}>
<Calendar 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 Events Available
</h3>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
There are no upcoming events at the moment. Check back later!
</p>
</div>