From b39f8b052d87ed1e0b36c04b827ebe9b85cb1256 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sun, 27 Jul 2025 21:36:40 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Fix=20Card=20Detail=20Page=20Lig?=
 =?UTF-8?q?ht=20Theme=20Issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 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! 🌞
---
 pages/card/[id].js |  9 +++++++--
 styles/globals.css | 21 +++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/pages/card/[id].js b/pages/card/[id].js
index b414513..b458d16 100644
--- a/pages/card/[id].js
+++ b/pages/card/[id].js
@@ -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>
   );
 } 
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index fe66f9c..6bc069b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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;