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/admin/volunteers/+page.svelte
+7 -7
View File
@@ -39,11 +39,11 @@
<span class="text-sm text-gray-500">{data.total} total</span>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<select
value={data.status}
onchange={(e) => handleFilterChange(e.currentTarget.value)}
class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand"
class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary"
>
{#each statusOptions as opt}
<option value={opt.value}>{opt.label}</option>
@@ -56,10 +56,10 @@
<p class="text-sm font-medium">No volunteer applications found.</p>
</div>
{:else}
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<table class="w-full text-sm text-left">
<thead>
<tr class="border-b border-gray-soft bg-gray-50">
<tr class="border-b border-gray-200 bg-gray-50">
<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
<th class="px-6 py-3 font-semibold text-gray-600">Phone</th>
@@ -70,14 +70,14 @@
</thead>
<tbody>
{#each data.volunteers as vol}
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 font-medium text-gray-900">{vol.applicantName}</td>
<td class="px-6 py-4 text-gray-600"><a href="mailto:{vol.email}" class="hover:text-teal-brand">{vol.email}</a></td>
<td class="px-6 py-4 text-gray-600"><a href="mailto:{vol.email}" class="hover:text-primary">{vol.email}</a></td>
<td class="px-6 py-4 text-gray-600">{vol.phone ?? '—'}</td>
<td class="px-6 py-4"><StatusBadge status={vol.status} /></td>
<td class="px-6 py-4 text-gray-500 text-xs">{formatDate(vol.createdAt)}</td>
<td class="px-6 py-4 text-right">
<a href="/admin/volunteers/{vol.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">View</a>
<a href="/admin/volunteers/{vol.id}" class="text-sm font-medium text-primary hover:text-primary-dark">View</a>
</td>
</tr>
{/each}
src/routes/admin/volunteers/[id]/+page.svelte
+8 -8
View File
@@ -34,7 +34,7 @@
});
const statusOptions = ['pending', 'reviewing', 'approved', 'denied', 'withdrawn'];
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
</script>
@@ -57,17 +57,17 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Applicant Information</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="text-xs text-gray-400 uppercase tracking-wide">Email</p>
<p class="text-sm mt-1"><a href="mailto:{app.applicantEmail}" class="text-teal-brand hover:text-teal-dark">{app.applicantEmail}</a></p>
<p class="text-sm mt-1"><a href="mailto:{app.applicantEmail}" class="text-primary hover:text-primary-dark">{app.applicantEmail}</a></p>
</div>
{#if app.applicantPhone}
<div>
<p class="text-xs text-gray-400 uppercase tracking-wide">Phone</p>
<p class="text-sm mt-1"><a href="tel:{app.applicantPhone}" class="text-teal-brand hover:text-teal-dark">{app.applicantPhone}</a></p>
<p class="text-sm mt-1"><a href="tel:{app.applicantPhone}" class="text-primary hover:text-primary-dark">{app.applicantPhone}</a></p>
</div>
{/if}
<div>
@@ -78,11 +78,11 @@
</div>
{#if formDataEntries.length > 0}
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Application Details</h2>
<dl class="space-y-4">
{#each formDataEntries as [key, value]}
<div class="border-b border-gray-soft pb-3 last:border-0 last:pb-0">
<div class="border-b border-gray-200 pb-3 last:border-0 last:pb-0">
<dt class="text-xs text-gray-400 uppercase tracking-wide">{formatFieldLabel(key)}</dt>
<dd class="text-sm text-gray-900 mt-1 whitespace-pre-wrap">
{#if typeof value === 'boolean'}{value ? 'Yes' : 'No'}
@@ -97,7 +97,7 @@
</div>
<div>
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Update Status</h2>
{#if showSuccess}
<div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2">
@@ -114,7 +114,7 @@
{/each}
</select>
</div>
<button type="submit" disabled={submitting} class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
<button type="submit" disabled={submitting} class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
{submitting ? 'Saving...' : 'Save Status'}
</button>
</form>