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

fix: replace hardcoded colors with CSS variables in branching components

Browse Source 
All semantic colors now use design system tokens:
- #34d399 → text-success / bg-success-dim
- #f87171 → text-danger / bg-danger-dim
- #eab308 → text-warning / bg-warning-dim
- yellow-400 → text-warning / bg-warning-dim / border-warning
- #ea580c → hover:bg-accent-hover
- red-400 → text-danger / bg-danger-dim

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-24 21:05:02 +00:00
parent bdbc2d9bf5
commit 029d31ba0b
6 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/pages/DevBranchingPage.tsx
View File

@@ -364,7 +364,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
<button
type="button"
onClick={() => { toast.success('Saved (mock)'); setIsEditing(false) }}
className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-[#ea580c] transition-colors"
className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent-hover transition-colors"
>
Save
</button>
@@ -392,7 +392,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
disabled={!activeOutput}
className={cn(
'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
copied ? 'border-[#34d399] text-[#34d399]' : 'text-secondary hover:bg-elevated hover:text-primary'
copied ? 'border-success text-success' : 'text-secondary hover:bg-elevated hover:text-primary'
)}
>
{copied ? <Check size={12} /> : <Copy size={12} />}
@@ -501,7 +501,7 @@ export default function DevBranchingPage() {
<button
type="button"
onClick={() => setShowHandoff(true)}
className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-[#ea580c] transition-colors"
className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover transition-colors"
>
Open Handoff Modal
</button>

4
frontend/src/pages/SessionQueuePage.tsx
View File

@@ -33,9 +33,9 @@ export default function SessionQueuePage() {
<div key={item.handoff_id} className="bg-card border border-default rounded-lg p-4 flex items-center justify-between hover:border-hover transition-colors">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
{item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-red-400" /> : <Pause size={14} className="text-yellow-400" />}
{item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-danger" /> : <Pause size={14} className="text-warning" />}
<span className="text-sm font-medium text-heading">{item.problem_summary || 'Untitled session'}</span>
{item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-red-400/10 text-red-400">Elevated</span>}
{item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-danger-dim text-danger">Elevated</span>}
</div>
{item.engineer_notes && <p className="text-xs text-secondary">{item.engineer_notes}</p>}
<div className="flex items-center gap-2 mt-1 text-xs text-muted">