From 7955e6150d7f86087697c7b8c7c2cee2b05c57ae Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Thu, 4 Jun 2026 14:14:33 -0500
Subject: [PATCH] refactor(styles): retire .card; migrate 7 consumers to
 .glass-panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/CollectionsPageView.js |  2 +-
 pages/community/collections.js    |  2 +-
 pages/profile.js                  |  6 +++---
 pages/settings.js                 |  4 ++--
 styles/globals.css                | 11 ++++++-----
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/CollectionsPageView.js b/components/CollectionsPageView.js
index 50821ea..98e7319 100644
--- a/components/CollectionsPageView.js
+++ b/components/CollectionsPageView.js
@@ -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 */}
diff --git a/pages/community/collections.js b/pages/community/collections.js
index 4773197..508e6e0 100644
--- a/pages/community/collections.js
+++ b/pages/community/collections.js
@@ -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">
diff --git a/pages/profile.js b/pages/profile.js
index 0f1d168..5f46b61 100644
--- a/pages/profile.js
+++ b/pages/profile.js
@@ -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
diff --git a/pages/settings.js b/pages/settings.js
index ea85588..65ee315 100644
--- a/pages/settings.js
+++ b/pages/settings.js
@@ -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>
diff --git a/styles/globals.css b/styles/globals.css
index f1c8176..0b49d92 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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