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

20
ui/src/pages/DesignGuide.tsx
View File

@@ -69,6 +69,11 @@ import {
DropdownMenuCheckboxItem,
DropdownMenuShortcut,
} from "@/components/ui/dropdown-menu";
import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@/components/ui/popover";
import {
Sheet,
SheetTrigger,
@@ -110,6 +115,7 @@ import {
import { StatusBadge } from "@/components/StatusBadge";
import { StatusIcon } from "@/components/StatusIcon";
import { PriorityIcon } from "@/components/PriorityIcon";
import { agentStatusDot, agentStatusDotDefault } from "@/lib/status-colors";
import { EntityRow } from "@/components/EntityRow";
import { EmptyState } from "@/components/EmptyState";
import { MetricCard } from "@/components/MetricCard";
@@ -287,8 +293,8 @@ export function DesignGuide() {
<p className="text-xs text-muted-foreground">
Tiny label — text-xs text-muted-foreground
</p>
<p className="text-xs font-mono text-muted-foreground">
Mono identifier — text-xs font-mono text-muted-foreground
<p className="text-sm font-mono text-muted-foreground">
Mono identifier — text-sm font-mono text-muted-foreground
</p>
<p className="text-2xl font-bold">Large stat — text-2xl font-bold</p>
<p className="font-mono text-xs">Log/code text — font-mono text-xs</p>
@@ -435,16 +441,10 @@ export function DesignGuide() {
<SubSection title="Agent status dots">
<div className="flex items-center gap-4 flex-wrap">
{[
["running", "bg-cyan-400 animate-pulse"],
["active", "bg-green-400"],
["paused", "bg-yellow-400"],
["error", "bg-red-400"],
["offline", "bg-neutral-400"],
].map(([label, color]) => (
{(["running", "active", "paused", "error", "archived"] as const).map((label) => (
<div key={label} className="flex items-center gap-2">
<span className="relative flex h-2.5 w-2.5">
<span className={`inline-flex h-full w-full rounded-full ${color}`} />
<span className={`inline-flex h-full w-full rounded-full ${agentStatusDot[label] ?? agentStatusDotDefault}`} />
</span>
<span className="text-xs text-muted-foreground">{label}</span>
</div>