refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive #117

Merged

varutasu merged 1 commit from design-sweep-pass into main

2026-06-04 15:06:22 -04:00

varutasu commented

2026-06-04 13:56:02 -04:00

(Migrated from github.com)

Summary

Site-wide design sweep following the floating chrome + corner-border-light system shipped in #116. Three classes of finding addressed:

Broken Tailwind token classes (HIGH — pages literally rendered unstyled). The Decks/DeckBuilder cluster relied on classes like `bg-bg-secondary`, `text-text-primary`, `border-border`, `bg-accent-ember`, `focus:ring-accent-ember`, `hover:bg-accent-ember-dark` — none of which exist in `tailwind.config.js`. Replaced throughout with inline `style={{ ... CSS vars ... }}` + `
Duplicative / raw page searches — replaced bespoke `` search controls with the `` primitive (clear button, ember focus ring, system rounded corners) across `my-cards`, `community/collections`, `CardsPageView`, `CollectionPageView`, `DeckBuilderCardBrowser`. Kept page-specific filter searches (distinct from the global TopSearchBar command palette).
Square corners + stale palette in shared views — sweeping `rounded-lg` → `rounded-xl`, `hover:bg-gray-50` → `nav-item-hover`, `focus:ring-purple-500` → ember; killing dark-mode-invisible `bg-white` dropdowns; retiring the leftover `from-blue-500 to-purple-600` SYSTEM-badge gradient in favour of ember↔flame.

Also fixed the `dark:*` Tailwind modifiers on `settings.js` / `profile.js` alerts (no-op under `[data-theme]` theming) and moved `settings.js` sidebar nav onto the system `nav-item` / `nav-item-active` / `nav-item-hover` utilities.

19 files touched, +1378 / -1169.

Touched files

Pages

`pages/decks.js` (rewritten)
`pages/deck/[id].js` (header + stats sidebar + group-by + card list)
`pages/deck-builder.js` (loading spinner)
`pages/my-cards.js` (search → SearchBar + filter wrapper → glass-panel chip)
`pages/community/collections.js` (search → SearchBar + tag chips)
`pages/settings.js` (sidebar nav + alert banner)
`pages/profile.js` (alert banner)

Components

`components/DeckBuilderView.js`
`components/DeckBuilderCardBrowser.js` (full rewrite, integrated SearchBar)
`components/DeckBuilderDeckList.js` (full rewrite, Button primitive)
`components/DeckBuilderStatsBar.js`
`components/ManaSymbols.js`, `components/ManaSymbolSettings.js`
`components/CardsPageView.js` (search + Load More)
`components/CollectionPageView.js` (10 buttons + 4 filter selects + view-mode toggle + SYSTEM badge + tooltip + search-results dropdown + various badges)
`components/CollectionsPageView.js` (SYSTEM badge + tooltip)
`components/ShareModal.js` (user-search dropdown, email-invite card, social-share buttons)
`components/CardItem.js` (bulk-select checkbox ring)
`components/Layout.js` (profile-menu dropdown rows)

Test plan

`npm run build` — green (Next 16 + Turbopack)
`npm run lint` — 0 errors, 1 unrelated pre-existing warning
`npm run test:run` — 113/113 pass (no test changes needed)
Visual check of preview deploy: confirm `/decks`, `/deck-builder`, `/deck/[id]` are no longer transparent/unstyled
Visual check: `/collection/[id]` action buttons + filter selects use rounded-xl + ember rings, search-results dropdown is glass in dark mode
Visual check: `/my-cards` filter chip is now `glass-panel`, search uses primitive
Visual check: `/settings` sidebar nav uses ember active border (matches global sidebar) and alert banners render correctly in both themes

Follow-ups (deliberately deferred)

The `/decks` deck-card tiles, `/deck/[id]` stats sidebar, and other `glass-panel` instances still use the default `.glass-panel` corner-border pattern. They could be migrated to the same gradient-border light-source treatment that the floating chrome chips use — that's a polish pass, not a correctness fix.
`ShareModal.js` has additional legacy palette (purple avatars, gray-50 share-link input, blue-600 copy button) that this PR didn't address — scoped change to keep the diff focused on dark-mode breakage. Tracked informally; can convoy if needed.

Made with Cursor

## Summary Site-wide design sweep following the floating chrome + corner-border-light system shipped in #116. Three classes of finding addressed: - **Broken Tailwind token classes** (HIGH — pages literally rendered unstyled). The Decks/DeckBuilder cluster relied on classes like \`bg-bg-secondary\`, \`text-text-primary\`, \`border-border\`, \`bg-accent-ember\`, \`focus:ring-accent-ember\`, \`hover:bg-accent-ember-dark\` — none of which exist in \`tailwind.config.js\`. Replaced throughout with inline \`style={{ ... CSS vars ... }}\` + \`<Button>\` / \`<SearchBar>\` primitives + \`glass-panel\` surfaces. - **Duplicative / raw page searches** — replaced bespoke \`<input>\` search controls with the \`<SearchBar>\` primitive (clear button, ember focus ring, system rounded corners) across \`my-cards\`, \`community/collections\`, \`CardsPageView\`, \`CollectionPageView\`, \`DeckBuilderCardBrowser\`. Kept page-specific filter searches (distinct from the global TopSearchBar command palette). - **Square corners + stale palette in shared views** — sweeping \`rounded-lg\` → \`rounded-xl\`, \`hover:bg-gray-50\` → \`nav-item-hover\`, \`focus:ring-purple-500\` → ember; killing dark-mode-invisible \`bg-white\` dropdowns; retiring the leftover \`from-blue-500 to-purple-600\` SYSTEM-badge gradient in favour of ember↔flame. Also fixed the \`dark:*\` Tailwind modifiers on \`settings.js\` / \`profile.js\` alerts (no-op under \`[data-theme]\` theming) and moved \`settings.js\` sidebar nav onto the system \`nav-item\` / \`nav-item-active\` / \`nav-item-hover\` utilities. 19 files touched, +1378 / -1169. ## Touched files **Pages** - \`pages/decks.js\` (rewritten) - \`pages/deck/[id].js\` (header + stats sidebar + group-by + card list) - \`pages/deck-builder.js\` (loading spinner) - \`pages/my-cards.js\` (search → SearchBar + filter wrapper → glass-panel chip) - \`pages/community/collections.js\` (search → SearchBar + tag chips) - \`pages/settings.js\` (sidebar nav + alert banner) - \`pages/profile.js\` (alert banner) **Components** - \`components/DeckBuilderView.js\` - \`components/DeckBuilderCardBrowser.js\` (full rewrite, integrated SearchBar) - \`components/DeckBuilderDeckList.js\` (full rewrite, Button primitive) - \`components/DeckBuilderStatsBar.js\` - \`components/ManaSymbols.js\`, \`components/ManaSymbolSettings.js\` - \`components/CardsPageView.js\` (search + Load More) - \`components/CollectionPageView.js\` (10 buttons + 4 filter selects + view-mode toggle + SYSTEM badge + tooltip + search-results dropdown + various badges) - \`components/CollectionsPageView.js\` (SYSTEM badge + tooltip) - \`components/ShareModal.js\` (user-search dropdown, email-invite card, social-share buttons) - \`components/CardItem.js\` (bulk-select checkbox ring) - \`components/Layout.js\` (profile-menu dropdown rows) ## Test plan - [x] \`npm run build\` — green (Next 16 + Turbopack) - [x] \`npm run lint\` — 0 errors, 1 unrelated pre-existing warning - [x] \`npm run test:run\` — 113/113 pass (no test changes needed) - [ ] Visual check of preview deploy: confirm \`/decks\`, \`/deck-builder\`, \`/deck/[id]\` are no longer transparent/unstyled - [ ] Visual check: \`/collection/[id]\` action buttons + filter selects use rounded-xl + ember rings, search-results dropdown is glass in dark mode - [ ] Visual check: \`/my-cards\` filter chip is now \`glass-panel\`, search uses primitive - [ ] Visual check: \`/settings\` sidebar nav uses ember active border (matches global sidebar) and alert banners render correctly in both themes ## Follow-ups (deliberately deferred) - The \`/decks\` deck-card tiles, \`/deck/[id]\` stats sidebar, and other \`glass-panel\` instances still use the default \`.glass-panel\` corner-border pattern. They could be migrated to the same gradient-border light-source treatment that the floating chrome chips use — that's a polish pass, not a correctness fix. - \`ShareModal.js\` has additional legacy palette (purple avatars, gray-50 share-link input, blue-600 copy button) that this PR didn't address — scoped change to keep the diff focused on dark-mode breakage. Tracked informally; can convoy if needed. Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 13:56:09 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 5:56pm

[vc]: #yEjoSieHgs4w1NATVnlhabSp98sd6oSwdPIAeKnsCd0=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWRlc2lnbi1zd2VlcC1wYXNzLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzJjWkNlTVZ4ekVTOGQ2R1c2MVNXNGl0VEVyU1giLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1kZXNpZ24tc3dlZXAtcGFzcy1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTE3In0= The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/2cZCeMVxzES8d6GW61SW4itTErSX) | [Preview](https://tcg-vault-git-design-sweep-pass-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-design-sweep-pass-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 5:56pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=117" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-04 13:56:14 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-04 13:57:24 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26969760975) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.