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/vets/+page.svelte
+12 -12
View File
@@ -1,7 +1,7 @@
<script lang="ts">
let { data } = $props();
const vetList = $derived(data.vets);
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';
</script>
<svelte:head><title>Vets — Admin</title></svelte:head>
@@ -9,15 +9,15 @@
<div>
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">Vet Management</h1>
<a href="/admin/vets/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">+ Add Vet</a>
<a href="/admin/vets/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors">+ Add Vet</a>
</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">
<form method="GET" class="flex gap-3">
<input type="text" name="q" value={data.q} placeholder="Search by name or clinic..." class={inputClass} />
<button type="submit" class="px-5 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors whitespace-nowrap cursor-pointer">Search</button>
<button type="submit" class="px-5 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors whitespace-nowrap cursor-pointer">Search</button>
{#if data.q}
<a href="/admin/vets" class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors whitespace-nowrap">Clear</a>
<a href="/admin/vets" class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap">Clear</a>
{/if}
</form>
</div>
@@ -30,10 +30,10 @@
<p class="text-sm font-medium">{data.q ? 'No vets match your search' : 'No vets yet'}</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">Clinic</th>
<th class="px-6 py-3 font-semibold text-gray-600">Phone</th>
@@ -43,12 +43,12 @@
</thead>
<tbody>
{#each vetList as vet}
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
<td class="px-6 py-4"><a href="/admin/vets/{vet.id}" class="font-medium text-teal-brand hover:text-teal-dark">{vet.name}</a></td>
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
<td class="px-6 py-4"><a href="/admin/vets/{vet.id}" class="font-medium text-primary hover:text-primary-dark">{vet.name}</a></td>
<td class="px-6 py-4 text-gray-600">{vet.clinic ?? '—'}</td>
<td class="px-6 py-4 text-gray-600">{#if vet.phone}<a href="tel:{vet.phone}" class="hover:text-teal-brand">{vet.phone}</a>{:else}—{/if}</td>
<td class="px-6 py-4 text-gray-600">{#if vet.email}<a href="mailto:{vet.email}" class="hover:text-teal-brand">{vet.email}</a>{:else}—{/if}</td>
<td class="px-6 py-4 text-right"><a href="/admin/vets/{vet.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a></td>
<td class="px-6 py-4 text-gray-600">{#if vet.phone}<a href="tel:{vet.phone}" class="hover:text-primary">{vet.phone}</a>{:else}—{/if}</td>
<td class="px-6 py-4 text-gray-600">{#if vet.email}<a href="mailto:{vet.email}" class="hover:text-primary">{vet.email}</a>{:else}—{/if}</td>
<td class="px-6 py-4 text-right"><a href="/admin/vets/{vet.id}" class="text-sm font-medium text-primary hover:text-primary-dark">Edit</a></td>
</tr>
{/each}
</tbody>