aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): standardize status/priority colors and improve text legibility

Browse Source 
Create shared status-colors.ts module as single source of truth for all
status and priority color definitions. Replace hardcoded color classes in
StatusIcon, StatusBadge, PriorityIcon, NewIssueDialog, Agents, AgentDetail,
and DesignGuide. Fix inconsistent hues (in_progress was yellow in StatusIcon
but indigo in StatusBadge, blocked was red vs amber). Bump identifier text
from text-xs to text-sm and improve MetricCard label legibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-23 19:52:43 -06:00
parent f484d454c5
commit ab9828ae95
11 changed files with 198 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/StatusBadge.tsx
View File

@@ -1,39 +1,12 @@
import { cn } from "../lib/utils";
const statusColors: Record<string, string> = {
active: "bg-green-900/50 text-green-300",
running: "bg-cyan-900/50 text-cyan-300",
paused: "bg-orange-900/50 text-orange-300",
idle: "bg-yellow-900/50 text-yellow-300",
archived: "bg-neutral-800 text-neutral-400",
planned: "bg-neutral-800 text-neutral-400",
achieved: "bg-green-900/50 text-green-300",
completed: "bg-green-900/50 text-green-300",
failed: "bg-red-900/50 text-red-300",
timed_out: "bg-orange-900/50 text-orange-300",
succeeded: "bg-green-900/50 text-green-300",
error: "bg-red-900/50 text-red-300",
pending_approval: "bg-amber-900/50 text-amber-300",
backlog: "bg-neutral-800 text-neutral-400",
todo: "bg-blue-900/50 text-blue-300",
in_progress: "bg-indigo-900/50 text-indigo-300",
in_review: "bg-violet-900/50 text-violet-300",
blocked: "bg-amber-900/50 text-amber-300",
done: "bg-green-900/50 text-green-300",
terminated: "bg-red-900/50 text-red-300",
cancelled: "bg-neutral-800 text-neutral-500",
pending: "bg-yellow-900/50 text-yellow-300",
revision_requested: "bg-amber-900/50 text-amber-300",
approved: "bg-green-900/50 text-green-300",
rejected: "bg-red-900/50 text-red-300",
};
import { statusBadge, statusBadgeDefault } from "../lib/status-colors";
export function StatusBadge({ status }: { status: string }) {
return (
<span
className={cn(
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
statusColors[status] ?? "bg-neutral-800 text-neutral-400"
statusBadge[status] ?? statusBadgeDefault
)}
>
{status.replace("_", " ")}