From 6617f06987295f82139181351616b2c571241842 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 31 Oct 2025 18:46:27 +0100
Subject: [PATCH] Preserve colorful styling in print while fixing layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove aggressive black/white print styling
- Keep original gradients, colors, and visual design
- Maintain layout optimizations (spacing, sizing, page breaks)
- Update portfolio table with colorful gradient header
- Fix label overlap by showing styled table in print
- Optimize spacing and font sizes for better page fit

Result: Beautiful colored receipt that fits properly on pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/CarbonImpactComparison.tsx    |  22 ++--
 src/components/RechartsPortfolioPieChart.tsx |  22 ++--
 src/pages/CheckoutSuccess.tsx                | 124 +++++--------------
 3 files changed, 51 insertions(+), 117 deletions(-)

diff --git a/src/components/CarbonImpactComparison.tsx b/src/components/CarbonImpactComparison.tsx
index 7e191ed..5fb1fd1 100644
--- a/src/components/CarbonImpactComparison.tsx
+++ b/src/components/CarbonImpactComparison.tsx
@@ -81,34 +81,34 @@ function ComparisonCard({ comparison, index }: ComparisonCardProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay: index * 0.1, duration: 0.5 }}
-      className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20 hover:border-emerald-400/50 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20 print:bg-white print:border-2 print:border-black print:backdrop-blur-none"
+      className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20 hover:border-emerald-400/50 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20"
     >
       {/* Icon */}
       <div className="mb-4 flex items-center justify-center">
-        <div className="bg-emerald-500/20 p-3 rounded-full print:bg-gray-100 print:border print:border-black">
-          <Icon className="w-8 h-8 text-emerald-400 print:text-black" />
+        <div className="bg-emerald-500/20 p-3 rounded-full">
+          <Icon className="w-8 h-8 text-emerald-400" />
         </div>
       </div>
 
       {/* Value */}
       <div className="text-center mb-2">
-        <div className="text-3xl font-bold text-white print:text-black">
+        <div className="text-3xl font-bold text-white">
           <AnimatedCounter value={comparison.value} />
         </div>
-        <div className="text-sm text-emerald-300 mt-1 print:text-black print:font-semibold">{comparison.unit}</div>
+        <div className="text-sm text-emerald-300 mt-1">{comparison.unit}</div>
       </div>
 
       {/* Label */}
       <div className="text-center">
-        <p className="text-sm text-white/90 font-medium print:text-black">{comparison.label}</p>
+        <p className="text-sm text-white/90 font-medium">{comparison.label}</p>
         {comparison.description && (
-          <p className="text-xs text-white/60 mt-2 print:text-gray-700">{comparison.description}</p>
+          <p className="text-xs text-white/60 mt-2">{comparison.description}</p>
         )}
       </div>
 
       {/* Source */}
       <div className="text-center mt-4">
-        <span className="text-xs text-white/50 italic print:text-gray-600">Source: {comparison.source}</span>
+        <span className="text-xs text-white/50 italic">Source: {comparison.source}</span>
       </div>
     </motion.div>
   );
@@ -142,8 +142,8 @@ export function CarbonImpactComparison({
         transition={{ duration: 0.5 }}
         className="text-center mb-8 print:mb-4"
       >
-        <h3 className="text-2xl md:text-3xl font-bold text-white mb-2 print:text-black print:text-2xl">{titleText}</h3>
-        <p className="text-white/80 text-sm md:text-base print:text-black print:text-sm">{subtitleText}</p>
+        <h3 className="text-2xl md:text-3xl font-bold text-white mb-2 print:text-2xl">{titleText}</h3>
+        <p className="text-white/80 text-sm md:text-base print:text-sm">{subtitleText}</p>
       </motion.div>
 
       {/* Comparison Cards Grid */}
@@ -164,7 +164,7 @@ export function CarbonImpactComparison({
         transition={{ delay: 0.5, duration: 0.5 }}
         className="text-center mt-6 print:mt-3"
       >
-        <p className="text-xs text-white/50 print:text-gray-600">
+        <p className="text-xs text-white/50">
           Equivalencies calculated using EPA 2024, DEFRA 2024, and IMO 2024 verified conversion
           factors.
         </p>
diff --git a/src/components/RechartsPortfolioPieChart.tsx b/src/components/RechartsPortfolioPieChart.tsx
index 86be9fa..262ee31 100644
--- a/src/components/RechartsPortfolioPieChart.tsx
+++ b/src/components/RechartsPortfolioPieChart.tsx
@@ -138,24 +138,24 @@ export function RechartsPortfolioPieChart({
 
       {/* Print-optimized table (visible only in print) */}
       <div className="hidden print:block w-full mb-6">
-        <h3 className="text-lg font-bold mb-4 text-center">Portfolio Distribution</h3>
-        <p className="text-center mb-4 text-lg font-semibold">
+        <h3 className="text-xl font-bold mb-3 text-center text-slate-800">Portfolio Distribution</h3>
+        <p className="text-center mb-4 text-lg font-semibold text-emerald-700">
           Total: {totalTons} tons CO₂
         </p>
-        <table className="w-full border-collapse border-2 border-black">
+        <table className="w-full border-collapse shadow-md rounded-lg overflow-hidden">
           <thead>
-            <tr className="bg-gray-100">
-              <th className="border-2 border-black px-4 py-2 text-left font-bold">Project Name</th>
-              <th className="border-2 border-black px-4 py-2 text-center font-bold">Percentage</th>
-              <th className="border-2 border-black px-4 py-2 text-right font-bold">Tons CO₂</th>
+            <tr className="bg-gradient-to-r from-cyan-500 to-blue-500 text-white">
+              <th className="border border-blue-400 px-4 py-3 text-left font-bold">Project Name</th>
+              <th className="border border-blue-400 px-4 py-3 text-center font-bold">Percentage</th>
+              <th className="border border-blue-400 px-4 py-3 text-right font-bold">Tons CO₂</th>
             </tr>
           </thead>
           <tbody>
             {chartData.map((item, index) => (
-              <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                <td className="border-2 border-black px-4 py-2">{item.name}</td>
-                <td className="border-2 border-black px-4 py-2 text-center">{item.percentage.toFixed(1)}%</td>
-                <td className="border-2 border-black px-4 py-2 text-right">{item.tons}</td>
+              <tr key={index} className={index % 2 === 0 ? 'bg-slate-50' : 'bg-white'}>
+                <td className="border border-slate-200 px-4 py-2 text-slate-800">{item.name}</td>
+                <td className="border border-slate-200 px-4 py-2 text-center text-emerald-700 font-semibold">{item.percentage.toFixed(1)}%</td>
+                <td className="border border-slate-200 px-4 py-2 text-right text-slate-800 font-medium">{item.tons}</td>
               </tr>
             ))}
           </tbody>
diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx
index 45566b0..512e7e1 100644
--- a/src/pages/CheckoutSuccess.tsx
+++ b/src/pages/CheckoutSuccess.tsx
@@ -126,44 +126,11 @@ export default function CheckoutSuccess({
       {/* Print-specific styles */}
       <style>{`
         @media print {
-          /* Reset and Base Styles */
-          body {
-            background: white !important;
-          }
-
           /* Hide non-print elements */
           .no-print {
             display: none !important;
           }
 
-          /* Main container - full width utilization */
-          .print-receipt {
-            max-width: 100% !important;
-            margin: 0 !important;
-            padding: 10px !important;
-            box-shadow: none !important;
-          }
-
-          /* Remove all decorative elements */
-          * {
-            box-shadow: none !important;
-            border-radius: 0 !important;
-            animation: none !important;
-            transition: none !important;
-          }
-
-          /* Replace gradients with high-contrast borders */
-          [class*="gradient"] {
-            background: white !important;
-            background-image: none !important;
-            border: 2px solid #000 !important;
-          }
-
-          /* High contrast text */
-          h1, h2, h3, h4, h5, h6, p, span, div {
-            color: #000 !important;
-          }
-
           /* Page breaks */
           .print-page-break {
             page-break-after: always !important;
@@ -176,83 +143,50 @@ export default function CheckoutSuccess({
             size: letter;
           }
 
-          /* Header section with logo */
-          .print-logo {
-            max-width: 150px !important;
+          /* Main container - optimize for print */
+          .print-receipt {
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 0.5rem !important;
           }
 
-          /* Order details section - two column layout */
-          .order-details-grid {
-            display: grid !important;
-            grid-template-columns: 1fr 1fr !important;
-            gap: 0.5rem !important;
+          /* Optimize spacing for print */
+          .px-8, .p-8 {
+            padding-left: 0.75rem !important;
+            padding-right: 0.75rem !important;
           }
 
-          /* Optimize spacing */
-          .px-8 {
-            padding-left: 1rem !important;
-            padding-right: 1rem !important;
-          }
-
-          .py-6, .py-8 {
-            padding-top: 0.75rem !important;
-            padding-bottom: 0.75rem !important;
-          }
-
-          .p-8 {
-            padding: 1rem !important;
+          .py-6, .py-8, .p-8 {
+            padding-top: 0.5rem !important;
+            padding-bottom: 0.5rem !important;
           }
 
           .mb-6, .mb-8 {
             margin-bottom: 0.5rem !important;
           }
 
-          /* Font size optimization */
-          .text-3xl, .text-4xl {
+          .mt-6, .mt-8 {
+            margin-top: 0.5rem !important;
+          }
+
+          /* Slightly reduce font sizes for better fit */
+          .text-4xl {
+            font-size: 1.75rem !important;
+          }
+
+          .text-3xl {
             font-size: 1.5rem !important;
           }
 
-          .text-2xl {
-            font-size: 1.25rem !important;
+          /* Logo sizing */
+          .print-logo {
+            max-width: 120px !important;
           }
 
-          .text-xl {
-            font-size: 1.125rem !important;
-          }
-
-          .text-lg {
-            font-size: 1rem !important;
-          }
-
-          /* Remove colored backgrounds, use borders */
-          [class*="bg-emerald"], [class*="bg-green"], [class*="bg-blue"],
-          [class*="bg-cyan"], [class*="bg-teal"], [class*="bg-indigo"],
-          [class*="bg-slate-50"], [class*="bg-blue-50"] {
-            background: white !important;
-            background-color: white !important;
-            border: 1px solid #000 !important;
-          }
-
-          /* Ensure icons remain visible */
-          svg {
-            color: #000 !important;
-          }
-
-          /* Status badges */
-          [class*="bg-green-100"], [class*="bg-yellow-100"] {
-            background: white !important;
-            border: 2px solid #000 !important;
-            color: #000 !important;
-          }
-
-          /* Optimize table spacing if present */
-          table {
-            width: 100% !important;
-          }
-
-          /* Portfolio chart container */
-          .portfolio-chart-container {
-            max-width: 100% !important;
+          /* Disable animations for print */
+          * {
+            animation: none !important;
+            transition: none !important;
           }
         }
       `}</style>