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

19
ui/src/components/NewIssueDialog.tsx
View File

@@ -33,6 +33,7 @@ import {
Calendar,
} from "lucide-react";
import { cn } from "../lib/utils";
import { issueStatusText, issueStatusTextDefault, priorityColor, priorityColorDefault } from "../lib/status-colors";
import { MarkdownEditor, type MarkdownEditorRef } from "./MarkdownEditor";
import { AgentIcon } from "./AgentIconPicker";
import type { Project, Agent } from "@paperclip/shared";
@@ -68,18 +69,18 @@ function clearDraft() {
}
const statuses = [
{ value: "backlog", label: "Backlog", color: "text-muted-foreground" },
{ value: "todo", label: "Todo", color: "text-blue-400" },
{ value: "in_progress", label: "In Progress", color: "text-yellow-400" },
{ value: "in_review", label: "In Review", color: "text-violet-400" },
{ value: "done", label: "Done", color: "text-green-400" },
{ value: "backlog", label: "Backlog", color: issueStatusText.backlog ?? issueStatusTextDefault },
{ value: "todo", label: "Todo", color: issueStatusText.todo ?? issueStatusTextDefault },
{ value: "in_progress", label: "In Progress", color: issueStatusText.in_progress ?? issueStatusTextDefault },
{ value: "in_review", label: "In Review", color: issueStatusText.in_review ?? issueStatusTextDefault },
{ value: "done", label: "Done", color: issueStatusText.done ?? issueStatusTextDefault },
];
const priorities = [
{ value: "critical", label: "Critical", icon: AlertTriangle, color: "text-red-400" },
{ value: "high", label: "High", icon: ArrowUp, color: "text-orange-400" },
{ value: "medium", label: "Medium", icon: Minus, color: "text-yellow-400" },
{ value: "low", label: "Low", icon: ArrowDown, color: "text-blue-400" },
{ value: "critical", label: "Critical", icon: AlertTriangle, color: priorityColor.critical ?? priorityColorDefault },
{ value: "high", label: "High", icon: ArrowUp, color: priorityColor.high ?? priorityColorDefault },
{ value: "medium", label: "Medium", icon: Minus, color: priorityColor.medium ?? priorityColorDefault },
{ value: "low", label: "Low", icon: ArrowDown, color: priorityColor.low ?? priorityColorDefault },
];
export function NewIssueDialog() {