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

9
ui/src/components/PriorityIcon.tsx
View File

@@ -1,14 +1,15 @@
import { useState } from "react";
import { ArrowUp, ArrowDown, Minus, AlertTriangle } from "lucide-react";
import { cn } from "../lib/utils";
import { priorityColor, priorityColorDefault } from "../lib/status-colors";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
const priorityConfig: Record<string, { icon: typeof ArrowUp; color: string; label: string }> = {
critical: { icon: AlertTriangle, color: "text-red-400", label: "Critical" },
high: { icon: ArrowUp, color: "text-orange-400", label: "High" },
medium: { icon: Minus, color: "text-yellow-400", label: "Medium" },
low: { icon: ArrowDown, color: "text-blue-400", label: "Low" },
critical: { icon: AlertTriangle, color: priorityColor.critical ?? priorityColorDefault, label: "Critical" },
high: { icon: ArrowUp, color: priorityColor.high ?? priorityColorDefault, label: "High" },
medium: { icon: Minus, color: priorityColor.medium ?? priorityColorDefault, label: "Medium" },
low: { icon: ArrowDown, color: priorityColor.low ?? priorityColorDefault, label: "Low" },
};
const allPriorities = ["critical", "high", "medium", "low"];