fix(dashboard): remove decorative AI-style artifacts and use theme status colors

Merged
IZ
5d ago
+177-266

Summary

Release of three dashboard commits from staging, cherry-picked onto main with -x provenance:

  • 76f51ac21 fix(dashboard): remove decorative stripes, glows, pulses and hover scaling
  • 5d3e778b6 fix(dashboard): show warnings and errors as neutral cards instead of tinted callouts
  • 909e1fbe3 refactor(dashboard): use theme status tokens instead of raw palette colors

The dashboard had picked up several generic decorative patterns that made it look templated: colored left stripes on cards such as the tracking-blocked notice and Web Vitals score, a purple glow on the error and 404 pages, a pulsing dot in a static chart tooltip, border plus fill plus ring on selected flag options, gradient swatches that grew on hover, tinted warning and error boxes, dashed empty states, uppercase labels and blur on opaque table headers. These now use plain cards and borders, and status colors still carry meaning through icons and the theme's success, warning and destructive tokens. Raw Tailwind status colors were replaced with those tokens, so both themes stay consistent.

Kept on purpose: grey quote lines, icons in tinted tiles, the gradient group icon and categorical palettes such as device and flag types.

Side fix: the selected flag group swatch now outlines in its own color, because the old ringColor style was not a real CSS property.

Notes

  • Five native buttons that these edits touched now use the shared Button, as the dashboard policy lint requires for changed lines.
  • Toasts for success, error and warning keep a status-colored border on the normal opaque background instead of a tinted fill.
  • billing/page.tsx and billing/history/page.tsx are not included. Another session owns them.

Verification

  • bunx tsc --noEmit for apps/dashboard and packages/ui, bun run lint:policies and Biome on every changed file passed on staging.
  • The three commits applied to main without conflicts, and imports, removed maps and theme tokens resolve in the main-based tree.
  • Not checked in a browser. The local pre-push test hook was skipped with approval because it failed on another session's uncommitted packages/ai test, which is not part of this branch. CI on this PR is the test gate.

Summary by cubic

Removes decorative AI-style artifacts from the dashboard and replaces raw status colors with theme tokens so both light and dark modes stay consistent.

  • Warning, error, and success callouts are now neutral cards with a plain border; the colored icon keeps the status readable.
  • Replaces raw Tailwind palette colors like text-amber-500 and bg-green-500/10 with success, warning, and destructive theme tokens.
  • Removes decorative stripes, glows, pulses, gradient swatches that scale on hover, dashed empty states, uppercase labels, and backdrop blur on opaque table headers.
  • Selected flag group swatches now outline in their own color because the old ringColor style was not a real CSS property.
  • Five touched native buttons now use the shared Button component per dashboard policy.
  • Keeps grey quote lines, icons in tinted tiles, the gradient group icon, and categorical palettes like device and flag types unchanged.
  • billing/page.tsx and billing/history/page.tsx are not included; another session owns them.

Migration

  • Push this release branch to test the changes in a browser; CI on this PR is the test gate since local pre-push was skipped.