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 }}
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user