refactor(admin): migrate AdminDashboard onto shared ui layer (#1 #2)#104
Merged
Conversation
…rd, tokens) Audit items #1 and #2. Presentational only: no data fetching, state, handlers, endpoint calls, or admin behavior changed. - Added components/ui/StatCard.jsx and components/ui/Sparkline.jsx (token-colored charting primitive). Admin now imports the shared layer; the local StatCard and Sparkline definitions are deleted. - Replaced all 16 hand-rolled card strings (rounded-xl border-gray-100 shadow-sm): 14 div-based shells now use the canonical flat Card (ADR 0015); the one <a> link card cannot be a div Card, so its classes were aligned to the flat spec (rounded, gray-200 border, no shadow). Zero rounded-xl/shadow-sm card strings remain. - Replaced hardcoded brand hex with tokens: Sparkline default and call sites use colors.blue / colors.green; the recharts grid stroke uses var(--mm-color-gray-200), matching the existing var(--mm-color-blue) bar fill. - Dropped the phantom var(--mm-font-heading) (defined nowhere). It resolved to the inherited font, so the StatCard number stays Roboto and the page h1 stays Playfair via the global h1 rule. No visual change from the drop. Scope note: raw Tailwind gray text utilities are left as-is. The mm-design gray token values are identical to Tailwind's gray scale, so these are not a color drift; converting them to inline var() styles would add inline styles for zero visual change. Full <Card> adoption for the remaining <a> link card is a follow-up. Admin runtime visuals are not covered by tests (the build is the automated gate); visual QA on deploy is the operator's. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fifth PR of the Phase 18 consolidation program. The risky one. Presentational only: no data fetching, state, handlers, endpoint calls, or admin behavior changed.
Changes
components/ui/StatCard.jsxandcomponents/ui/Sparkline.jsx(token-colored charting primitive). Admin imports the shared layer; localStatCard/Sparklinedefinitions deleted.Card(ADR 0015); the one<a>link card (cannot be a div Card) had its classes aligned to the flat spec. Zerorounded-xl border-gray-100 shadow-smremain.colors.blue/colors.green; recharts grid stroke usesvar(--mm-color-gray-200)(matching the existingvar(--mm-color-blue)bar fill).--mm-font-headingdropped: it was defined nowhere and resolved to the inherited font, so the drop is visually identical (StatCard number stays Roboto; page h1 stays Playfair via the global rule).Scope note
Raw Tailwind gray text utilities are left as-is: mm-design gray token values are identical to Tailwind's gray scale, so they are not color drift; converting them to inline
var()would add inline styles for zero visual change.Gates
npm run build: green (structurally validates the JSX / Card tag balance)npm test -- --run: 248 passed🤖 Generated with Claude Code