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

🎨 Fix Card Detail Page Light Theme Issues

Browse source 
🐛 Theme Problems Fixed:
- Added proper background styling to ensure theme colors are applied
- Added missing gradient-text classes (gold, flame, ember) for fire theme
- Wrapped entire page in themed background container
- Ensured content tabs section uses theme colors

✨ Improvements:
- Added gradient-text-gold for price displays
- Added gradient-text-flame and gradient-text-ember for consistency
- Proper min-height to cover full viewport
- Background colors now properly inherit theme variables

🎯 Light Theme Fix:
- Text should now be properly dark in light mode
- Backgrounds use theme variables instead of defaults
- All sections properly themed for both light and dark modes

The card detail page should now be fully legible in light theme! 🌞
This commit is contained in:
Randall Stillwell 2025-07-27 21:36:40 -05:00
parent eeee1c1f6b
commit b39f8b052d
2 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
pages/card/[id].js
View file

@ -333,7 +333,8 @@ export default function CardDetail() {
return (
<Layout user={user}>
{/* Hero Section with Card Image and Basic Info */}
<div style={{ backgroundColor: 'var(--bg-primary)', minHeight: '100vh' }}>
{/* Hero Section with Card Image and Basic Info */}
<div
className="relative min-h-96 flex items-center justify-center overflow-hidden"
style={{
@ -487,7 +488,10 @@ export default function CardDetail() {
</div>
{/* Content Tabs */}
<div className="container mx-auto px-6 py-8">
<div
className="container mx-auto px-6 py-8"
style={{ backgroundColor: 'var(--bg-primary)', color: 'var(--text-primary)' }}
>
<div className="flex border-b" style={{ borderColor: 'var(--border)' }}>
{['details', 'price-history', 'purchase'].map((tab) => (
<button
@ -828,6 +832,7 @@ export default function CardDetail() {
</div>
</div>
)}
</div>
</Layout>
);
}

21
styles/globals.css
View file

@ -283,6 +283,27 @@ body {
background-clip: text;
}
.gradient-text-gold {
background: linear-gradient(135deg, #ffab40 0%, #ff6f00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-flame {
background: linear-gradient(135deg, #ff6f00 0%, #d84315 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-ember {
background: linear-gradient(135deg, #d84315 0%, #bf360c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Theme toggle button */
.theme-toggle {
@apply p-2 rounded-2xl transition-all duration-300;