Preserve colorful styling in print while fixing layout
All checks were successful
Build and Push Docker Images / docker (push) Successful in 1m7s
All checks were successful
Build and Push Docker Images / docker (push) Successful in 1m7s
- 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>
This commit is contained in:
Matt
parent
109f350ee8
commit
6617f06987
@ -81,34 +81,34 @@ function ComparisonCard({ comparison, index }: ComparisonCardProps) {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
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 */}
|
{/* Icon */}
|
||||||
<div className="mb-4 flex items-center justify-center">
|
<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">
|
<div className="bg-emerald-500/20 p-3 rounded-full">
|
||||||
<Icon className="w-8 h-8 text-emerald-400 print:text-black" />
|
<Icon className="w-8 h-8 text-emerald-400" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Value */}
|
{/* Value */}
|
||||||
<div className="text-center mb-2">
|
<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} />
|
<AnimatedCounter value={comparison.value} />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Label */}
|
{/* Label */}
|
||||||
<div className="text-center">
|
<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 && (
|
{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>
|
</div>
|
||||||
|
|
||||||
{/* Source */}
|
{/* Source */}
|
||||||
<div className="text-center mt-4">
|
<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>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
@ -142,8 +142,8 @@ export function CarbonImpactComparison({
|
|||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
className="text-center mb-8 print:mb-4"
|
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>
|
<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-black print:text-sm">{subtitleText}</p>
|
<p className="text-white/80 text-sm md:text-base print:text-sm">{subtitleText}</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Comparison Cards Grid */}
|
{/* Comparison Cards Grid */}
|
||||||
@ -164,7 +164,7 @@ export function CarbonImpactComparison({
|
|||||||
transition={{ delay: 0.5, duration: 0.5 }}
|
transition={{ delay: 0.5, duration: 0.5 }}
|
||||||
className="text-center mt-6 print:mt-3"
|
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
|
Equivalencies calculated using EPA 2024, DEFRA 2024, and IMO 2024 verified conversion
|
||||||
factors.
|
factors.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -138,24 +138,24 @@ export function RechartsPortfolioPieChart({
|
|||||||
|
|
||||||
{/* Print-optimized table (visible only in print) */}
|
{/* Print-optimized table (visible only in print) */}
|
||||||
<div className="hidden print:block w-full mb-6">
|
<div className="hidden print:block w-full mb-6">
|
||||||
<h3 className="text-lg font-bold mb-4 text-center">Portfolio Distribution</h3>
|
<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">
|
<p className="text-center mb-4 text-lg font-semibold text-emerald-700">
|
||||||
Total: {totalTons} tons CO₂
|
Total: {totalTons} tons CO₂
|
||||||
</p>
|
</p>
|
||||||
<table className="w-full border-collapse border-2 border-black">
|
<table className="w-full border-collapse shadow-md rounded-lg overflow-hidden">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="bg-gray-100">
|
<tr className="bg-gradient-to-r from-cyan-500 to-blue-500 text-white">
|
||||||
<th className="border-2 border-black px-4 py-2 text-left font-bold">Project Name</th>
|
<th className="border border-blue-400 px-4 py-3 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 border-blue-400 px-4 py-3 text-center font-bold">Percentage</th>
|
||||||
<th className="border-2 border-black px-4 py-2 text-right font-bold">Tons CO₂</th>
|
<th className="border border-blue-400 px-4 py-3 text-right font-bold">Tons CO₂</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{chartData.map((item, index) => (
|
{chartData.map((item, index) => (
|
||||||
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
<tr key={index} className={index % 2 === 0 ? 'bg-slate-50' : 'bg-white'}>
|
||||||
<td className="border-2 border-black px-4 py-2">{item.name}</td>
|
<td className="border border-slate-200 px-4 py-2 text-slate-800">{item.name}</td>
|
||||||
<td className="border-2 border-black px-4 py-2 text-center">{item.percentage.toFixed(1)}%</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-2 border-black px-4 py-2 text-right">{item.tons}</td>
|
<td className="border border-slate-200 px-4 py-2 text-right text-slate-800 font-medium">{item.tons}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@ -126,44 +126,11 @@ export default function CheckoutSuccess({
|
|||||||
{/* Print-specific styles */}
|
{/* Print-specific styles */}
|
||||||
<style>{`
|
<style>{`
|
||||||
@media print {
|
@media print {
|
||||||
/* Reset and Base Styles */
|
|
||||||
body {
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide non-print elements */
|
/* Hide non-print elements */
|
||||||
.no-print {
|
.no-print {
|
||||||
display: none !important;
|
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 */
|
/* Page breaks */
|
||||||
.print-page-break {
|
.print-page-break {
|
||||||
page-break-after: always !important;
|
page-break-after: always !important;
|
||||||
@ -176,83 +143,50 @@ export default function CheckoutSuccess({
|
|||||||
size: letter;
|
size: letter;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header section with logo */
|
/* Main container - optimize for print */
|
||||||
.print-logo {
|
.print-receipt {
|
||||||
max-width: 150px !important;
|
max-width: 100% !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0.5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Order details section - two column layout */
|
/* Optimize spacing for print */
|
||||||
.order-details-grid {
|
.px-8, .p-8 {
|
||||||
display: grid !important;
|
padding-left: 0.75rem !important;
|
||||||
grid-template-columns: 1fr 1fr !important;
|
padding-right: 0.75rem !important;
|
||||||
gap: 0.5rem !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Optimize spacing */
|
.py-6, .py-8, .p-8 {
|
||||||
.px-8 {
|
padding-top: 0.5rem !important;
|
||||||
padding-left: 1rem !important;
|
padding-bottom: 0.5rem !important;
|
||||||
padding-right: 1rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-6, .py-8 {
|
|
||||||
padding-top: 0.75rem !important;
|
|
||||||
padding-bottom: 0.75rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-8 {
|
|
||||||
padding: 1rem !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-6, .mb-8 {
|
.mb-6, .mb-8 {
|
||||||
margin-bottom: 0.5rem !important;
|
margin-bottom: 0.5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Font size optimization */
|
.mt-6, .mt-8 {
|
||||||
.text-3xl, .text-4xl {
|
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;
|
font-size: 1.5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-2xl {
|
/* Logo sizing */
|
||||||
font-size: 1.25rem !important;
|
.print-logo {
|
||||||
|
max-width: 120px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-xl {
|
/* Disable animations for print */
|
||||||
font-size: 1.125rem !important;
|
* {
|
||||||
}
|
animation: none !important;
|
||||||
|
transition: none !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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user