Fix Tailwind configuration and optimize print layout for checkout success page
Some checks failed
Build and Push Docker Images / docker (push) Failing after 2m14s
Some checks failed
Build and Push Docker Images / docker (push) Failing after 2m14s
- Add emerald and cyan to Tailwind safelist pattern to fix gradient rendering - Include app/ and components/ directories in Tailwind content paths - Optimize print layout with compressed spacing, margins, and fonts - Reduce page margins from 0.5in to 0.3in for better content fit - All content now fits on single printed page without cutoff 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt
parent
9aa4dd7a68
commit
b4e155778d
@ -143,7 +143,7 @@ export default function CheckoutSuccessPage() {
|
||||
|
||||
/* Page setup */
|
||||
@page {
|
||||
margin: 0.5in;
|
||||
margin: 0.3in;
|
||||
size: letter;
|
||||
}
|
||||
|
||||
@ -151,116 +151,116 @@ export default function CheckoutSuccessPage() {
|
||||
.print-receipt {
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0.25rem !important;
|
||||
padding: 0.15rem !important;
|
||||
}
|
||||
|
||||
/* Aggressive spacing compression */
|
||||
.p-8, .px-8, .py-8 {
|
||||
padding: 0.5rem !important;
|
||||
padding: 0.3rem !important;
|
||||
}
|
||||
|
||||
.p-6, .px-6, .py-6 {
|
||||
padding: 0.5rem !important;
|
||||
padding: 0.3rem !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 0.5rem !important;
|
||||
padding: 0.3rem !important;
|
||||
}
|
||||
|
||||
.mb-8, .mb-6 {
|
||||
margin-bottom: 0.25rem !important;
|
||||
margin-bottom: 0.15rem !important;
|
||||
}
|
||||
|
||||
.mt-8, .mt-6 {
|
||||
margin-top: 0.25rem !important;
|
||||
margin-top: 0.15rem !important;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 0.2rem !important;
|
||||
margin-bottom: 0.1rem !important;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 0.2rem !important;
|
||||
margin-top: 0.1rem !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.15rem !important;
|
||||
margin-bottom: 0.08rem !important;
|
||||
}
|
||||
|
||||
/* Spacing between elements */
|
||||
.space-y-1 > * + * {
|
||||
margin-top: 0.1rem !important;
|
||||
margin-top: 0.08rem !important;
|
||||
}
|
||||
|
||||
.space-y-3 > * + * {
|
||||
margin-top: 0.2rem !important;
|
||||
margin-top: 0.1rem !important;
|
||||
}
|
||||
|
||||
.space-y-4 > * + * {
|
||||
margin-top: 0.25rem !important;
|
||||
margin-top: 0.15rem !important;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.25rem !important;
|
||||
gap: 0.15rem !important;
|
||||
}
|
||||
|
||||
.gap-5 {
|
||||
gap: 0.25rem !important;
|
||||
gap: 0.15rem !important;
|
||||
}
|
||||
|
||||
/* Font size optimization */
|
||||
.text-4xl {
|
||||
font-size: 1.25rem !important;
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
.text-2xl {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 0.875rem !important;
|
||||
.text-xl {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
.text-lg {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
.text-base {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.65rem !important;
|
||||
}
|
||||
|
||||
/* Line height compression */
|
||||
* {
|
||||
line-height: 1.3 !important;
|
||||
line-height: 1.2 !important;
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1.2 !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
/* Logo sizing */
|
||||
.print-logo {
|
||||
max-width: 100px !important;
|
||||
margin-bottom: 0.25rem !important;
|
||||
max-width: 80px !important;
|
||||
margin-bottom: 0.15rem !important;
|
||||
}
|
||||
|
||||
/* Compact grid layouts */
|
||||
.grid {
|
||||
gap: 0.25rem !important;
|
||||
gap: 0.15rem !important;
|
||||
}
|
||||
|
||||
/* Metadata grid - keep 2 columns but more compact */
|
||||
@ -273,6 +273,22 @@ export default function CheckoutSuccessPage() {
|
||||
.md\\:col-span-2 {
|
||||
grid-column: span 1 !important;
|
||||
}
|
||||
|
||||
/* Reduce rounded corners for print to save space */
|
||||
.rounded-3xl, .rounded-2xl, .rounded-xl {
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
/* Compact the header gradient section */
|
||||
.bg-gradient-to-br {
|
||||
padding-top: 0.3rem !important;
|
||||
padding-bottom: 0.3rem !important;
|
||||
}
|
||||
|
||||
/* Reduce shadow to save ink/space */
|
||||
.shadow-2xl, .shadow-xl, .shadow-lg {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
@ -435,6 +451,7 @@ export default function CheckoutSuccessPage() {
|
||||
<RechartsPortfolioPieChart
|
||||
projects={orderDetails.order.portfolio.projects}
|
||||
totalTons={order.tons}
|
||||
size={280}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@ -3,6 +3,8 @@ export default {
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{js,ts,jsx,tsx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
@ -41,7 +43,7 @@ export default {
|
||||
safelist: [
|
||||
// Colors
|
||||
{
|
||||
pattern: /^(bg|text|border|hover:bg|hover:text)-(blue|gray|green|red|purple|teal|orange|indigo)-(50|100|200|300|400|500|600|700|800|900)/,
|
||||
pattern: /^(bg|text|border|hover:bg|hover:text)-(blue|gray|green|red|purple|teal|orange|indigo|emerald|cyan)-(50|100|200|300|400|500|600|700|800|900)/,
|
||||
},
|
||||
// Modern Maritime Admin Colors
|
||||
'bg-deep-sea-blue',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user