refactor(styles): retire .card; migrate 7 consumers to .glass-panel (Brief 5) #122

Merged

varutasu merged 1 commit from brief-5-retire-card-class into main

2026-06-04 16:30:29 -04:00

varutasu commented

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

(Migrated from github.com)

Summary

Brief 5 of unify-glass-panel-surfaces. Deletes the legacy .card class from styles/globals.css and migrates all 7 consumers (the brief estimated 8; one suspected site turned out to be on a different pattern) to .glass-panel rounded-3xl p-{4|6}.

A single panel vocabulary — .glass-panel / .glass-panel-strong / .page-header-glass — across the app is the convoy's success metric. .card predated the gradient-border system and was the last "opaque solid panel" pattern in user-facing pages.

Files changed

styles/globals.css — delete the .card { ... } rule; replace with a documentation comment pointing future consumers at the right alternative.
pages/settings.js — 2 swaps (p-4 + p-6 cards).
pages/profile.js — 3 swaps (avatar card, stats card, activity card).
pages/community/collections.js — 1 swap.
components/CollectionsPageView.js — 1 swap.

Net diff: +13 / -12.

Migration pattern

- <div className="card p-6 text-center">
+ <div className="glass-panel rounded-3xl p-6 text-center transition-all duration-300">

Each migration:

Replaces standalone card token with glass-panel rounded-3xl.
Preserves sibling Tailwind tokens (p-4 / p-6 / text-center / mt-6 / group / cursor-pointer).
Adds transition-all duration-{200|300} explicitly where the legacy class baked it in (5 of 7 sites; the 2 community sites already wrote it).
Drops hover:shadow-{lg,xl} Tailwind overrides on the 2 community sites — the .glass-panel corner-light gradient is the new hover affordance.

CSS change

-.card {
-  @apply rounded-3xl shadow-lg p-6 transition-all duration-300;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border);
-}
+/* .card retired by Brief 5 of unify-glass-panel-surfaces convoy.
+   All 7 prior consumers migrated to .glass-panel rounded-3xl. Use
+   .glass-panel (subtle corner-light tier, per PR #118) for content
+   panels going forward; use .glass-panel-strong for elevated chrome
+   and floating popovers; use .page-header-glass for full-bleed
+   page-top strips. */

Acceptance criteria

styles/globals.css no longer contains a .card { ... } rule block.
Zero className=".*\\bcard\\b.*" references in pages/ or components/ (verified by ripgrep: 0 matches; the remaining card-grid-* / card-item-container matches are unrelated CardItem CSS classes).
Each migrated consumer renders with .glass-panel rounded-3xl and its original padding.
transition-all duration-{200|300} preserved where the legacy class baked it in.
hover:shadow-{lg,xl} dropped on community sites per the brief.
No escape-hatch sites needed.
npm run lint passes (1 pre-existing unrelated warning).
npm run test:run: 113/113 tests pass.

Test plan

Visit /profile in light + dark; verify all 3 cards (avatar, stats, activity) render with corner catch-lights.
Visit /settings in light + dark; verify both panels render correctly.
Visit /community/collections in light + dark; verify list-tile cards render with hover affordance (corner-light gradient replaces the dropped hover:shadow-lg).
Vercel preview's Screenshot diff job will fire; expected visual diff on profile / settings / community pages.

Convoy: .convoys/unify-glass-panel-surfaces.md
Brief: .convoys/unify-glass-panel-surfaces/brief-5-retire-card-class.md
Architect plan: PR #119 (merged)

Made with Cursor

## Summary Brief 5 of `unify-glass-panel-surfaces`. Deletes the legacy `.card` class from `styles/globals.css` and migrates all 7 consumers (the brief estimated 8; one suspected site turned out to be on a different pattern) to `.glass-panel rounded-3xl p-{4|6}`. A single panel vocabulary — `.glass-panel` / `.glass-panel-strong` / `.page-header-glass` — across the app is the convoy's success metric. `.card` predated the gradient-border system and was the last "opaque solid panel" pattern in user-facing pages. ## Files changed - `styles/globals.css` — delete the `.card { ... }` rule; replace with a documentation comment pointing future consumers at the right alternative. - `pages/settings.js` — 2 swaps (`p-4` + `p-6` cards). - `pages/profile.js` — 3 swaps (avatar card, stats card, activity card). - `pages/community/collections.js` — 1 swap. - `components/CollectionsPageView.js` — 1 swap. Net diff: **+13 / -12**. ## Migration pattern ```diff - <div className="card p-6 text-center"> + <div className="glass-panel rounded-3xl p-6 text-center transition-all duration-300"> ``` Each migration: - Replaces standalone `card` token with `glass-panel rounded-3xl`. - Preserves sibling Tailwind tokens (`p-4` / `p-6` / `text-center` / `mt-6` / `group` / `cursor-pointer`). - Adds `transition-all duration-{200|300}` explicitly where the legacy class baked it in (5 of 7 sites; the 2 community sites already wrote it). - Drops `hover:shadow-{lg,xl}` Tailwind overrides on the 2 community sites — the `.glass-panel` corner-light gradient is the new hover affordance. ## CSS change ```diff -.card { - @apply rounded-3xl shadow-lg p-6 transition-all duration-300; - background-color: var(--bg-primary); - border: 1px solid var(--border); -} +/* .card retired by Brief 5 of unify-glass-panel-surfaces convoy. + All 7 prior consumers migrated to .glass-panel rounded-3xl. Use + .glass-panel (subtle corner-light tier, per PR #118) for content + panels going forward; use .glass-panel-strong for elevated chrome + and floating popovers; use .page-header-glass for full-bleed + page-top strips. */ ``` ## Acceptance criteria - [x] `styles/globals.css` no longer contains a `.card { ... }` rule block. - [x] Zero `className=".*\\bcard\\b.*"` references in `pages/` or `components/` (verified by ripgrep: 0 matches; the remaining `card-grid-*` / `card-item-container` matches are unrelated CardItem CSS classes). - [x] Each migrated consumer renders with `.glass-panel rounded-3xl` and its original padding. - [x] `transition-all duration-{200|300}` preserved where the legacy class baked it in. - [x] `hover:shadow-{lg,xl}` dropped on community sites per the brief. - [x] No escape-hatch sites needed. - [x] `npm run lint` passes (1 pre-existing unrelated warning). - [x] `npm run test:run`: **113/113 tests pass**. ## Test plan - [ ] Visit `/profile` in light + dark; verify all 3 cards (avatar, stats, activity) render with corner catch-lights. - [ ] Visit `/settings` in light + dark; verify both panels render correctly. - [ ] Visit `/community/collections` in light + dark; verify list-tile cards render with hover affordance (corner-light gradient replaces the dropped `hover:shadow-lg`). - [ ] Vercel preview's `Screenshot diff` job will fire; expected visual diff on profile / settings / community pages. ## Related - Convoy: `.convoys/unify-glass-panel-surfaces.md` - Brief: `.convoys/unify-glass-panel-surfaces/brief-5-retire-card-class.md` - Architect plan: PR #119 (merged) Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 15:14:58 -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 7:15pm

[vc]: #zi7rZvrpnIUq+5e9hiKQw/x5AoAZZoPHXYz46vneGco=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWJyaWVmLTUtcmV0aXJlLWQwODNlZC1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzL3RjZy12YXVsdC90ZUVNQnB1Q0NZU25MMVIyNmRFNTZmU1VtdDZ4IiwicHJldmlld1VybCI6InRjZy12YXVsdC1naXQtYnJpZWYtNS1yZXRpcmUtZDA4M2VkLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMjIifQ== 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/teEMBpuCCYSnL1R26dE56fSUmt6x) | [Preview](https://tcg-vault-git-brief-5-retire-d083ed-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-brief-5-retire-d083ed-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 7:15pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=122" 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 15:15:10 -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 15:16:12 -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/26973851984) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.