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 (Brief 5) #122

Merged
varutasu merged 1 commit from brief-5-retire-card-class into main 2026-06-04 16:30:29 -04:00
Conversation 3 Commits 1 Files changed 5 +13 -12
5 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 7955e6150d - Show all commits

2
components/CollectionsPageView.js
View file

@ -122,7 +122,7 @@ export default function CollectionsPageView(props) {
{sortedCollections.map(collection => ( {sortedCollections.map(collection => (
<div <div
key={collection.id} 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}`)} onClick={() => router.push(`/collection/${collection.slug || collection.id}`)}
> >
{/* Thumbnail Section */} {/* 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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{sortedCollections.map(collection => ( {sortedCollections.map(collection => (
<Link key={collection.id} href={`/collection/${collection.slug || collection.id}`}> <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} /> <CollectionThumbnail collection={collection} />
<div className="space-y-3"> <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"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Profile Card */} {/* Profile Card */}
<div className="lg:col-span-1"> <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 */} {/* Avatar */}
<div className="mb-6"> <div className="mb-6">
<div className="relative inline-block"> <div className="relative inline-block">
@ -398,7 +398,7 @@ export default function Profile() {
</div> </div>
{/* Stats Card */} {/* 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)' }}> <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
List Stats List Stats
</h3> </h3>
@ -433,7 +433,7 @@ export default function Profile() {
{/* Profile Form */} {/* Profile Form */}
<div className="lg:col-span-2"> <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"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}> <h3 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
Profile Information 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"> <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Sidebar Navigation */} {/* Sidebar Navigation */}
<div className="lg:col-span-1"> <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"> <nav className="space-y-2">
{sections.map(section => ( {sections.map(section => (
<button <button
@ -287,7 +287,7 @@ export default function Settings() {
{/* Settings Content */} {/* Settings Content */}
<div className="lg:col-span-3"> <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 */} {/* Account Settings */}
{activeSection === 'account' && ( {activeSection === 'account' && (
<div> <div>

11
styles/globals.css
View file

@ -754,11 +754,12 @@ body {
color: var(--input-placeholder); color: var(--input-placeholder);
} }
.card { /* .card retired by Brief 5 of unify-glass-panel-surfaces convoy
@apply rounded-3xl shadow-lg p-6 transition-all duration-300; (PR sequence following PR #119). All 7 prior consumers migrated to
background-color: var(--bg-primary); .glass-panel rounded-3xl. Use .glass-panel (subtle corner-light
border: 1px solid var(--border); 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 .glass-panel — canonical "content card" utility for body