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

13
ui/src/components/StatusIcon.tsx
View File

@@ -1,18 +1,9 @@
import { useState } from "react";
import { cn } from "../lib/utils";
import { issueStatusIcon, issueStatusIconDefault } from "../lib/status-colors";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
const statusColors: Record<string, string> = {
backlog: "text-muted-foreground border-muted-foreground",
todo: "text-blue-400 border-blue-400",
in_progress: "text-yellow-400 border-yellow-400",
in_review: "text-violet-400 border-violet-400",
done: "text-green-400 border-green-400",
cancelled: "text-neutral-500 border-neutral-500",
blocked: "text-red-400 border-red-400",
};
const allStatuses = ["backlog", "todo", "in_progress", "in_review", "done", "cancelled", "blocked"];
function statusLabel(status: string): string {
@@ -28,7 +19,7 @@ interface StatusIconProps {
export function StatusIcon({ status, onChange, className, showLabel }: StatusIconProps) {
const [open, setOpen] = useState(false);
const colorClass = statusColors[status] ?? "text-muted-foreground border-muted-foreground";
const colorClass = issueStatusIcon[status] ?? issueStatusIconDefault;
const isDone = status === "done";
const circle = (