rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Brief 5 of unify-glass-panel-surfaces convoy. Deletes the legacy
.card class from styles/globals.css and migrates all consumers
(actual count: 7, not 8 as the brief had estimated — one of the
suspected sites was already on a different pattern) to
.glass-panel rounded-3xl p-{4|6}.

A single panel vocabulary across the app — .glass-panel for body
content, .glass-panel-strong for floating chrome/popovers,
.page-header-glass for full-bleed top strips — is the convoy's
success metric. .card predated the gradient-border system and was
the only remaining "opaque solid panel" pattern in user-facing pages.

Consumers migrated:
  - pages/settings.js × 2 (p-4 and p-6 cards)
  - pages/profile.js × 3 (avatar card, stats card, activity card)
  - pages/community/collections.js × 1
  - components/CollectionsPageView.js × 1

Each migration:
  - Replaces `card` with `glass-panel rounded-3xl` in the className.
  - 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 needed this back).
  - Drops hover:shadow-{lg,xl} Tailwind overrides on the 2 community
    sites; the .glass-panel corner-light gradient is the new
    affordance.

CSS change in styles/globals.css:
  - Removed the `.card { @apply rounded-3xl shadow-lg p-6
    transition-all duration-300; background-color:
    var(--bg-primary); border: 1px solid var(--border); }` rule.
  - Added a documentation comment in its place explaining the
    retirement and pointing future consumers at the right alternative.

Verification:
  - rg "className=[\"'\`]card\b" pages/ components/ --type js
    returns 0 matches.
  - rg "^\.card \{" styles/ returns 0 matches.
  - npm run lint passes (1 pre-existing warning unrelated).
  - npm run test:run: 113/113 tests pass.

Acceptance criteria from
.convoys/unify-glass-panel-surfaces/brief-5-retire-card-class.md
all met. No escape-hatch sites needed; all 7 migrations were clean.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu 2026-06-04 15:30:29 -05:00 committed by GitHub
parent 78f954f652
commit 87a71f2068
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/CollectionsPageView.js
View file

@ -122,7 +122,7 @@ export default function CollectionsPageView(props) {
{sortedCollections.map(collection => (
<div
key={collection.id}
className="card hover:shadow-xl transition-all duration-300 cursor-pointer group"
className="glass-panel rounded-3xl p-6 transition-all duration-300 cursor-pointer group"
onClick={() => router.push(`/collection/${collection.slug || collection.id}`)}
>
{/* Thumbnail Section */}

2
pages/community/collections.js
View file

@ -262,7 +262,7 @@ export default function CommunityCollections() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{sortedCollections.map(collection => (
<Link key={collection.id} href={`/collection/${collection.slug || collection.id}`}>
<div className="card group cursor-pointer hover:shadow-lg transition-all duration-200">
<div className="glass-panel rounded-3xl p-6 group cursor-pointer transition-all duration-200">
<CollectionThumbnail collection={collection} />
<div className="space-y-3">

6
pages/profile.js
View file

@ -291,7 +291,7 @@ export default function Profile() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Profile Card */}
<div className="lg:col-span-1">
<div className="card p-6 text-center">
<div className="glass-panel rounded-3xl p-6 text-center transition-all duration-300">
{/* Avatar */}
<div className="mb-6">
<div className="relative inline-block">
@ -398,7 +398,7 @@ export default function Profile() {
</div>
{/* Stats Card */}
<div className="card p-6 mt-6">
<div className="glass-panel rounded-3xl p-6 mt-6 transition-all duration-300">
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
List Stats
</h3>
@ -433,7 +433,7 @@ export default function Profile() {
{/* Profile Form */}
<div className="lg:col-span-2">
<div className="card p-6">
<div className="glass-panel rounded-3xl p-6 transition-all duration-300">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
Profile Information

4
pages/settings.js
View file

@ -267,7 +267,7 @@ export default function Settings() {
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Sidebar Navigation */}
<div className="lg:col-span-1">
<div className="card p-4">
<div className="glass-panel rounded-3xl p-4 transition-all duration-300">
<nav className="space-y-2">
{sections.map(section => (
<button
@ -287,7 +287,7 @@ export default function Settings() {
{/* Settings Content */}
<div className="lg:col-span-3">
<div className="card p-6">
<div className="glass-panel rounded-3xl p-6 transition-all duration-300">
{/* Account Settings */}
{activeSection === 'account' && (
<div>

11
styles/globals.css
View file

@ -754,11 +754,12 @@ body {
color: var(--input-placeholder);
}
.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
(PR sequence following PR #119). 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. */
/* ============================================================
.glass-panel — canonical "content card" utility for body