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

32
src/pages/admin/AdminEvents.js
View File

@@ -137,7 +137,7 @@ const AdminEvents = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Management
</h1>
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create and manage community events.
</p>
</div>
@@ -174,7 +174,7 @@ const AdminEvents = () => {
value={formData.title}
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
required
className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
@@ -186,7 +186,7 @@ const AdminEvents = () => {
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
rows={4}
className="w-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-lg p-3"
className="w-full border-2 border-[var(--neutral-800)] focus:border-brand-purple rounded-lg p-3"
/>
</div>
@@ -200,7 +200,7 @@ const AdminEvents = () => {
value={formData.start_at}
onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
required
className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
@@ -213,7 +213,7 @@ const AdminEvents = () => {
value={formData.end_at}
onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
required
className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
</div>
@@ -226,7 +226,7 @@ const AdminEvents = () => {
value={formData.location}
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
required
className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
@@ -239,7 +239,7 @@ const AdminEvents = () => {
value={formData.capacity}
onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
placeholder="Leave empty for unlimited"
className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
@@ -249,7 +249,7 @@ const AdminEvents = () => {
id="published"
checked={formData.published}
onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
className="w-4 h-4 text-[var(--purple-lavender)] border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="w-4 h-4 text-brand-purple border-[var(--neutral-800)] rounded focus:ring-brand-purple "
/>
<label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Publish event (make visible to members)
@@ -281,7 +281,7 @@ const AdminEvents = () => {
{/* Events List */}
{loading ? (
<div className="text-center py-20">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
<p className="text-brand-purple " 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">
@@ -294,7 +294,7 @@ const AdminEvents = () => {
{/* Event Header */}
<div className="flex justify-between items-start mb-4">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
<Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
<Calendar className="h-6 w-6 text-brand-purple " />
</div>
<Badge
className={`${event.published
@@ -312,13 +312,13 @@ const AdminEvents = () => {
</h3>
{event.description && (
<p className="text-[var(--purple-lavender)] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.description}
</p>
)}
<div className="space-y-2 mb-4">
<div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Calendar className="h-4 w-4" />
<span>
{new Date(event.start_at).toLocaleDateString()} at{' '}
@@ -328,11 +328,11 @@ const AdminEvents = () => {
})}
</span>
</div>
<div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<MapPin className="h-4 w-4" />
<span className="truncate">{event.location}</span>
</div>
<div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Users className="h-4 w-4" />
<span>{event.rsvp_count || 0} attending</span>
</div>
@@ -358,7 +358,7 @@ const AdminEvents = () => {
onClick={() => togglePublish(event)}
variant="outline"
size="sm"
className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
className="flex-1 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white"
data-testid={`toggle-publish-${event.id}`}
>
{event.published ? (
@@ -402,7 +402,7 @@ const AdminEvents = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Events Yet
</h3>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create your first event to get started!
</p>
<Button