UI audit fixes: mobile nav, toast rollout, semantic color tokens - #51
Merged
Conversation
… 1-3 + polish) Implements the top 3 priorities from the UI audit plus the remaining moderate/polish findings: 1. Mobile - the dashboard header's nav had zero responsive handling (full- width labels in a fixed grid, no breakpoint), and the marketing header hid its nav below `md` with no replacement at all. Both now collapse into a hamburger-triggered Sheet drawer (MobileNav, MarketingMobileNav). 2. Toast adoption - the Sonner toaster was mounted globally but almost never used; every error catch across 9 dashboard pages now fires a toast alongside (or instead of) silent/easy-to-miss inline text, including two suggestion actions (approve/reject/assign) that previously failed with zero feedback at all. 3. Semantic color tokens - added --success/--warning/--info to the theme (globals.css), and migrated ~30 raw Tailwind palette-color usages (bg-emerald-50, text-amber-700, etc.) across 13 files to the new tokens, so dark mode no longer depends on someone remembering a `dark:` override per usage. Left two deliberate exceptions in place with a comment: the Sources panel's 6-color citation-index rotation (not semantic, needs distinct hues) and a tooltip's fixed amber (tooltips render with an inverted foreground/background pair, so the page's normal-contrast --warning token isn't right there). Remaining findings addressed: - Fixed the one genuine icon-only button missing an accessible name (CollapsedPanelRail) - broader audit found the rest already correct - Replaced "Loading..." text with shape-matching Skeleton placeholders across Documents, Knowledge, Knowledge Base, ATO Correspondence, Settings, and Settings > Staff; fixed a knowledge-page bug where the empty state briefly flashed before the real list loaded - Rejecting a knowledge suggestion now goes through the same ConfirmDialog pattern as other destructive actions, instead of firing on click - Deduplicated the copy-pasted document STATUS_VARIANT badge mapping into lib/documents.ts Tooltip coverage and border-radius scale were reassessed and left as-is: self-descriptive buttons don't need tooltips, and a blanket radius rewrite carries real regression risk for a purely cosmetic gain. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
2 participants
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.
Summary
Implements the top 3 priorities from the UI audit, in the order requested, plus the remaining moderate/polish findings:
1. Mobile compatibility
MobileNav.tsx) belowmd.mdwith no replacement at all — every page except Home was unreachable on a phone. Now has the same drawer pattern (MarketingMobileNav.tsx), verified live at 375px width.2. Toast adoption
3. Semantic color tokens
--success/--warning/--infoto the theme (globals.css), migrated ~30 raw Tailwind palette-color usages (bg-emerald-50,text-amber-700, etc.) across 13 files. Two deliberate, commented exceptions left in place: the Sources panel's 6-color citation-index rotation (needs distinct hues, not a single meaning) and one tooltip's fixed amber (tooltips render with an inverted fg/bg pair, so the page's normal-contrast token isn't right there).Remaining findings
aria-label(CollapsedPanelRail) — re-audited the rest and found them already correct.Skeletonplaceholders across 7 pages; fixed a real bug in Knowledge where the empty state flashed before the list loaded.ConfirmDialoglike other destructive actions, instead of firing on click.STATUS_VARIANTmapping intolib/documents.ts.Test plan
npx tsc --noEmitcleannpx eslint .cleandisplay: noneat desktop width/dashboard/*can't render locally)🤖 Generated with Claude Code