Summary
Status icons and colors have drifted across the app. Five different glyphs currently mean "error." Success and warning each have two names, info has two, and the color values behind them are unmanaged: there are no --success / --warning CSS tokens at all.
Suggested approach: standardize on the four-status set in src/components/ui/sonner.tsx:19-23.
success: <CircleCheckIcon />
info: <InfoIcon />
warning: <TriangleAlertIcon />
error: <OctagonXIcon />
Current state
| role |
glyphs in use today |
# files |
| success |
CircleCheck, CheckCircle2 |
6 |
| warning |
TriangleAlert, AlertTriangle, AlertCircle |
7 |
| error |
OctagonX, CircleAlert, AlertCircle, XCircle, AlertTriangle |
6 |
| info |
Info / InfoIcon, CircleAlert |
5 |
Success and warning look worse than they are: CheckCircle2→CircleCheck and AlertTriangle→TriangleAlert are deprecated lucide aliases of identical glyphs, so those are just renames with zero pixel change.
Work
Renames
Icon swaps
Colors
There are zero --success / --warning tokens in src/index.css; only --destructive exists. Consequences today: success is both green-500 and emerald-500; warning is yellow-300, yellow-600, and yellow-500; error is both destructive and red-500.
Prevent recurrence
Notes
- No test file references any icon by name: tests assert on roles and labels. So this refactor won't break tests, but tests also won't catch a wrong glyph. Verify visually.
- All target icons already ship in the installed
lucide-react ^1.8.0; no dependency work.
Files touched
ui/sonner.tsx (reference, no change), ui/inline-notification.tsx, ui/badge.tsx, dashboard/StatusDot.tsx, dashboard/StatusHeadline.tsx, servers/ServerStatusBadge.tsx, servers/TestConnectionPanel.tsx, servers/ServersTable.tsx, prompts/PromptForm.tsx, prompts/PromptPreviewResult.tsx, mcp-servers/MCPServerForm.tsx, mcp-servers/AdvancedSettings.tsx, mcp-servers/QueryParameterAuth.tsx, gateways/CreateServerForm.tsx, gateways/SourceSelection.tsx, server-catalog/CatalogResults.tsx, auth/AuthSuccessPanel.tsx, pages/CreateServer.tsx
Summary
Status icons and colors have drifted across the app. Five different glyphs currently mean "error." Success and warning each have two names, info has two, and the color values behind them are unmanaged: there are no
--success/--warningCSS tokens at all.Suggested approach: standardize on the four-status set in
src/components/ui/sonner.tsx:19-23.Current state
CircleCheck,CheckCircle2TriangleAlert,AlertTriangle,AlertCircleOctagonX,CircleAlert,AlertCircle,XCircle,AlertTriangleInfo/InfoIcon,CircleAlertSuccess and warning look worse than they are:
CheckCircle2→CircleCheckandAlertTriangle→TriangleAlertare deprecated lucide aliases of identical glyphs, so those are just renames with zero pixel change.Work
Renames
CheckCircle2→CircleCheckIconinservers/ServerStatusBadge.tsx:44,prompts/PromptPreviewResult.tsx:42AlertTriangle→TriangleAlertIconinmcp-servers/QueryParameterAuth.tsx:25,dashboard/StatusHeadline.tsx:21mcp-servers/MCPServerForm.tsx:267— usesCircleAlertintext-neutral-400as an informational hint beside a field label. That's an alert glyph doing an info job; should beInfoIcon. Semantically wrong independent of this standardization.Icon swaps
OctagonXIcon:gateways/CreateServerForm.tsx:114,prompts/PromptForm.tsx:119,servers/TestConnectionPanel.tsx:458,ui/inline-notification.tsx:31,prompts/PromptPreviewResult.tsx:44servers/ServerStatusBadge.tsx: warningAlertCircle→TriangleAlertIcon(:54), offlineXCircle→OctagonXIcon(:49)dashboard/StatusHeadline.tsx:21-22: warning and error are bothAlertTriangle, so the two severities render identically. Error →OctagonXIcon.Colors
There are zero
--success/--warningtokens insrc/index.css; only--destructiveexists. Consequences today: success is bothgreen-500andemerald-500; warning isyellow-300,yellow-600, andyellow-500; error is bothdestructiveandred-500.--success/--warningtokens (light + dark) alongside the existing--destructivedashboard/StatusDot.tsx:13-18andui/badge.tsx:17-21at themPrevent recurrence
{ icon, tone }lookup and have all call sites consume it.Notes
lucide-react ^1.8.0; no dependency work.Files touched
ui/sonner.tsx(reference, no change),ui/inline-notification.tsx,ui/badge.tsx,dashboard/StatusDot.tsx,dashboard/StatusHeadline.tsx,servers/ServerStatusBadge.tsx,servers/TestConnectionPanel.tsx,servers/ServersTable.tsx,prompts/PromptForm.tsx,prompts/PromptPreviewResult.tsx,mcp-servers/MCPServerForm.tsx,mcp-servers/AdvancedSettings.tsx,mcp-servers/QueryParameterAuth.tsx,gateways/CreateServerForm.tsx,gateways/SourceSelection.tsx,server-catalog/CatalogResults.tsx,auth/AuthSuccessPanel.tsx,pages/CreateServer.tsx