Skip to content

[Bug] Standardize status icons and colors app-wide  #62

Description

@a-effort

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: CheckCircle2CircleCheck and AlertTriangleTriangleAlert are deprecated lucide aliases of identical glyphs, so those are just renames with zero pixel change.

Work

Renames

  • CheckCircle2CircleCheckIcon in servers/ServerStatusBadge.tsx:44, prompts/PromptPreviewResult.tsx:42
  • AlertTriangleTriangleAlertIcon in mcp-servers/QueryParameterAuth.tsx:25, dashboard/StatusHeadline.tsx:21
  • mcp-servers/MCPServerForm.tsx:267 — uses CircleAlert in text-neutral-400 as an informational hint beside a field label. That's an alert glyph doing an info job; should be InfoIcon. Semantically wrong independent of this standardization.

Icon swaps

  • Consolidate error onto OctagonXIcon: gateways/CreateServerForm.tsx:114, prompts/PromptForm.tsx:119, servers/TestConnectionPanel.tsx:458, ui/inline-notification.tsx:31, prompts/PromptPreviewResult.tsx:44
  • servers/ServerStatusBadge.tsx: warning AlertCircleTriangleAlertIcon (:54), offline XCircleOctagonXIcon (:49)
  • dashboard/StatusHeadline.tsx:21-22: warning and error are both AlertTriangle, so the two severities render identically. Error → OctagonXIcon.

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.

  • Add semantic --success / --warning tokens (light + dark) alongside the existing --destructive
  • Point dashboard/StatusDot.tsx:13-18 and ui/badge.tsx:17-21 at them
  • Replace the raw palette values at the component sites

Prevent recurrence

  • Export a single status → { icon, tone } lookup and have all call sites consume it.

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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions