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

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

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

20
src/pages/EventDetails.js
View File

@@ -51,7 +51,7 @@ const EventDetails = () => {
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
</div>
</div>
);
@@ -68,7 +68,7 @@ const EventDetails = () => {
<div className="max-w-4xl mx-auto px-6 py-12">
<button
onClick={() => navigate('/events')}
className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors mb-8"
className="inline-flex items-center text-brand-purple hover:text-[var(--orange-light)] transition-colors mb-8"
data-testid="back-to-events-button"
>
<ArrowLeft className="h-4 w-4 mr-2" />
@@ -79,7 +79,7 @@ const EventDetails = () => {
<div className="mb-8">
<div className="flex items-center gap-4 mb-6">
<div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
<Calendar className="h-10 w-10 text-[var(--purple-lavender)]" />
<Calendar className="h-10 w-10 text-brand-purple " />
</div>
{event.user_rsvp_status && (
<Badge
@@ -102,7 +102,7 @@ const EventDetails = () => {
</h1>
<div className="space-y-4 text-lg">
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<Calendar className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleDateString('en-US', {
@@ -113,18 +113,18 @@ const EventDetails = () => {
})}
</span>
</div>
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<Calendar className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
{new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</span>
</div>
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<MapPin className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
</div>
<div className="flex items-center gap-3 text-[var(--purple-lavender)]">
<div className="flex items-center gap-3 text-brand-purple ">
<Users className="h-5 w-5" />
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -139,7 +139,7 @@ const EventDetails = () => {
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
About This Event
</h2>
<p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.description}
</p>
</div>
@@ -168,7 +168,7 @@ const EventDetails = () => {
variant="outline"
className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${event.user_rsvp_status === 'maybe'
? 'border-orange-400 bg-orange-100 text-orange-700'
: 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
: 'border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)]'
}`}
data-testid="rsvp-maybe-button"
>
@@ -195,7 +195,7 @@ const EventDetails = () => {
<h2 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Add to Your Calendar
</h2>
<p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Never miss this event! Add it to your calendar app for reminders.
</p>
<AddToCalendarButton