chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: replace hardcoded hex values with Tailwind semantic tokens

Browse Source 
3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/MaintenanceFlowDetailPage.tsx
View File

@@ -101,7 +101,7 @@ export default function MaintenanceFlowDetailPage() {
action={(
<button
onClick={() => navigate('/trees?type=maintenance')}
className="rounded-md border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Back to Maintenance Flows
</button>
@@ -148,7 +148,7 @@ export default function MaintenanceFlowDetailPage() {
<div className="flex gap-2">
<button
onClick={() => navigate(`/flows/${id}/edit`)}
className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Settings className="h-3.5 w-3.5" />
Edit Flow
@@ -156,7 +156,7 @@ export default function MaintenanceFlowDetailPage() {
<button
onClick={handleRun}
disabled={isRunning}
className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-70"
className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-70"
>
{isRunning
? <Spinner size="sm" className="h-3.5 w-3.5 border-white border-t-transparent" />
@@ -165,7 +165,7 @@ export default function MaintenanceFlowDetailPage() {
</button>
<button
onClick={() => setShowBatchModal(true)}
className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
>
Batch Launch
</button>
@@ -174,10 +174,10 @@ export default function MaintenanceFlowDetailPage() {
/>
{/* Schedule Panel */}
<div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5">
<div className="rounded-xl border border-border bg-card p-5">
<div className="flex items-center gap-2 mb-3">
<Calendar className="h-4 w-4 text-[#848b9b]" />
<h2 className="font-semibold text-[#e2e5eb]">Schedule</h2>
<Calendar className="h-4 w-4 text-muted-foreground" />
<h2 className="font-semibold text-foreground">Schedule</h2>
</div>
{schedule ? (
<div className="space-y-2 text-[0.875rem]">
@@ -186,39 +186,39 @@ export default function MaintenanceFlowDetailPage() {
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide",
schedule.is_active
? "bg-emerald-500/10 text-emerald-400"
: "bg-muted text-[#848b9b]"
: "bg-muted text-muted-foreground"
)}>
{schedule.is_active
? <CheckCircle className="h-3 w-3" />
: <AlertCircle className="h-3 w-3" />}
{schedule.is_active ? 'Active' : 'Paused'}
</span>
<code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-[#e2e5eb]">
<code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
{schedule.cron_expression}
</code>
<span className="text-[#848b9b]">({schedule.timezone})</span>
<span className="text-muted-foreground">({schedule.timezone})</span>
</div>
{schedule.next_run_at && (
<p className="text-[#848b9b]">
<p className="text-muted-foreground">
Next run: {new Date(schedule.next_run_at).toLocaleString()}
</p>
)}
</div>
) : (
<p className="text-[0.875rem] text-[#848b9b]">
<p className="text-[0.875rem] text-muted-foreground">
No schedule configured. Sessions can still be launched manually via Batch Launch.
</p>
)}
</div>
{/* Run History */}
<div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5">
<div className="rounded-xl border border-border bg-card p-5">
<div className="flex items-center gap-2 mb-4">
<Clock className="h-4 w-4 text-[#848b9b]" />
<h2 className="font-semibold text-[#e2e5eb]">Run History</h2>
<Clock className="h-4 w-4 text-muted-foreground" />
<h2 className="font-semibold text-foreground">Run History</h2>
</div>
{batches.length === 0 ? (
<p className="text-[0.875rem] text-[#848b9b]">No runs yet. Launch a batch to get started.</p>
<p className="text-[0.875rem] text-muted-foreground">No runs yet. Launch a batch to get started.</p>
) : (
<div className="space-y-2">
{batches.map(([batchKey, batchSessions]) => {
@@ -253,25 +253,25 @@ export default function MaintenanceFlowDetailPage() {
<button
key={batchKey}
onClick={handleRowClick}
className="w-full flex items-center justify-between rounded-lg border border-[#1e2130] px-4 py-3 hover:bg-accent transition-colors text-left"
className="w-full flex items-center justify-between rounded-lg border border-border px-4 py-3 hover:bg-accent transition-colors text-left"
>
<div>
<div className="flex items-center gap-2">
{isActive && (
<span className="inline-block h-2 w-2 rounded-full bg-amber-400 animate-pulse" />
)}
<p className="text-[0.875rem] font-medium text-[#e2e5eb]">
<p className="text-[0.875rem] font-medium text-foreground">
{isSingleRun ? 'Manual run' : `${total} target${total !== 1 ? 's' : ''}`}
</p>
</div>
<div className="flex items-center gap-2 mt-0.5">
{date && (
<p className="text-[0.8125rem] text-[#848b9b]">
<p className="text-[0.8125rem] text-muted-foreground">
{new Date(date).toLocaleDateString()}
</p>
)}
{outcomeParts.length > 0 && (
<p className="text-[0.8125rem] text-[#848b9b]">
<p className="text-[0.8125rem] text-muted-foreground">
· {outcomeParts.join(' · ')}
</p>
)}
@@ -290,13 +290,13 @@ export default function MaintenanceFlowDetailPage() {
/>
))}
{extraDots > 0 && (
<span className="ml-1 text-[0.6875rem] text-[#848b9b]">+{extraDots}</span>
<span className="ml-1 text-[0.6875rem] text-muted-foreground">+{extraDots}</span>
)}
</div>
)}
<span className={cn(
"font-sans text-xs text-[0.75rem] uppercase tracking-wide",
isActive ? "text-amber-400" : completed === total ? "text-emerald-400" : "text-[#848b9b]"
isActive ? "text-amber-400" : completed === total ? "text-emerald-400" : "text-muted-foreground"
)}>
{isActive ? 'In Progress' : `${completed}/${total}`}
</span>