justin/fosterflow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: replace non-standard color classes with theme system

Browse Source 
Replace teal-brand→primary, teal-dark→primary-dark, teal-light→primary-light,
gray-soft→gray-200, gray-brand→gray-900 across 53 files. Fixes theming
not applying — colors now use CSS custom properties from org_config.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin
2026-03-26 17:07:22 -05:00
co-authored by Claude Opus 4.6
parent f645a19da1
commit 602f36d558
53 changed files with 603 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(public)/events/+page.svelte
+22 -22
View File
@@ -38,10 +38,10 @@
</svelte:head>
<!-- Hero -->
<section class="bg-teal-brand py-16 text-center text-white">
<section class="bg-primary py-16 text-center text-white">
<div class="mx-auto max-w-4xl px-4">
<h1 class="text-4xl font-bold sm:text-5xl">Events</h1>
<p class="mt-4 text-lg text-teal-light/90">
<p class="mt-4 text-lg text-primary-light/90">
Join us at adoption events, fundraisers, and community gatherings.
</p>
</div>
@@ -50,26 +50,26 @@
<!-- Upcoming Events -->
<section class="bg-warm-bg py-16">
<div class="mx-auto max-w-6xl px-4">
<h2 class="text-center text-3xl font-bold text-gray-brand">Upcoming Events</h2>
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
<h2 class="text-center text-3xl font-bold text-gray-900">Upcoming Events</h2>
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
{#if data.upcomingEvents.length > 0}
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{#each data.upcomingEvents as event}
<article class="flex flex-col overflow-hidden rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md">
<article class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md">
{#if event.imageUrl}
<div class="aspect-video overflow-hidden bg-teal-light">
<div class="aspect-video overflow-hidden bg-primary-light">
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
</div>
{:else}
<div class="flex aspect-video items-center justify-center bg-teal-light">
<svg class="h-16 w-16 text-teal-brand/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<div class="flex aspect-video items-center justify-center bg-primary-light">
<svg class="h-16 w-16 text-primary/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
{/if}
<div class="flex flex-1 flex-col p-6">
<div class="flex items-center gap-2 text-sm text-teal-brand">
<div class="flex items-center gap-2 text-sm text-primary">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
@@ -81,7 +81,7 @@
</svg>
<span>{formatTime(event.startDate)}</span>
</div>
<h3 class="mt-3 text-xl font-bold text-gray-brand">{event.title}</h3>
<h3 class="mt-3 text-xl font-bold text-gray-900">{event.title}</h3>
{#if event.location}
<div class="mt-2 flex items-start gap-2 text-sm text-gray-mid">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -99,18 +99,18 @@
{/each}
</div>
{:else}
<div class="mt-12 rounded-xl border border-gray-soft bg-white p-12 text-center">
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-teal-light">
<svg class="h-10 w-10 text-teal-brand/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<div class="mt-12 rounded-xl border border-gray-200 bg-white p-12 text-center">
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary-light">
<svg class="h-10 w-10 text-primary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-brand">No Upcoming Events</h3>
<h3 class="mt-4 text-xl font-semibold text-gray-900">No Upcoming Events</h3>
<p class="mt-2 text-gray-mid">
Check back soon! {#if facebookUrl}Follow us on Facebook for the latest updates.{/if}
</p>
{#if facebookUrl}
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="mt-6 inline-block rounded-lg bg-teal-brand px-6 py-2.5 font-semibold text-white transition hover:bg-teal-dark">
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="mt-6 inline-block rounded-lg bg-primary px-6 py-2.5 font-semibold text-white transition hover:bg-primary-dark">
Follow Us on Facebook
</a>
{/if}
@@ -123,26 +123,26 @@
{#if data.pastEvents.length > 0}
<section class="bg-white py-16">
<div class="mx-auto max-w-6xl px-4">
<h2 class="text-center text-2xl font-bold text-gray-brand">Past Events</h2>
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
<h2 class="text-center text-2xl font-bold text-gray-900">Past Events</h2>
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{#each data.pastEvents as event}
<div class="flex items-start gap-4 rounded-lg border border-gray-soft bg-warm-bg p-4">
<div class="flex items-start gap-4 rounded-lg border border-gray-200 bg-warm-bg p-4">
{#if event.imageUrl}
<div class="h-16 w-16 shrink-0 overflow-hidden rounded-lg">
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
</div>
{:else}
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-teal-light">
<svg class="h-6 w-6 text-teal-brand/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-primary-light">
<svg class="h-6 w-6 text-primary/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
{/if}
<div class="min-w-0 flex-1">
<p class="text-xs font-medium text-teal-brand">{formatShortDate(event.startDate)}</p>
<h3 class="mt-0.5 truncate font-semibold text-gray-brand">{event.title}</h3>
<p class="text-xs font-medium text-primary">{formatShortDate(event.startDate)}</p>
<h3 class="mt-0.5 truncate font-semibold text-gray-900">{event.title}</h3>
{#if event.location}
<p class="mt-0.5 truncate text-sm text-gray-mid">{event.location}</p>
{/if}