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 setup */
|
||||||
@page {
|
@page {
|
||||||
margin: 0.5in;
|
margin: 0.3in;
|
||||||
size: letter;
|
size: letter;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -151,116 +151,116 @@ export default function CheckoutSuccessPage() {
|
|||||||
.print-receipt {
|
.print-receipt {
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0.25rem !important;
|
padding: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Aggressive spacing compression */
|
/* Aggressive spacing compression */
|
||||||
.p-8, .px-8, .py-8 {
|
.p-8, .px-8, .py-8 {
|
||||||
padding: 0.5rem !important;
|
padding: 0.3rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-6, .px-6, .py-6 {
|
.p-6, .px-6, .py-6 {
|
||||||
padding: 0.5rem !important;
|
padding: 0.3rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-5 {
|
.p-5 {
|
||||||
padding: 0.5rem !important;
|
padding: 0.3rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-8, .mb-6 {
|
.mb-8, .mb-6 {
|
||||||
margin-bottom: 0.25rem !important;
|
margin-bottom: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-8, .mt-6 {
|
.mt-8, .mt-6 {
|
||||||
margin-top: 0.25rem !important;
|
margin-top: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-4 {
|
.mb-4 {
|
||||||
margin-bottom: 0.2rem !important;
|
margin-bottom: 0.1rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
margin-top: 0.2rem !important;
|
margin-top: 0.1rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-2 {
|
.mb-2 {
|
||||||
margin-bottom: 0.15rem !important;
|
margin-bottom: 0.08rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Spacing between elements */
|
/* Spacing between elements */
|
||||||
.space-y-1 > * + * {
|
.space-y-1 > * + * {
|
||||||
margin-top: 0.1rem !important;
|
margin-top: 0.08rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-y-3 > * + * {
|
.space-y-3 > * + * {
|
||||||
margin-top: 0.2rem !important;
|
margin-top: 0.1rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-y-4 > * + * {
|
.space-y-4 > * + * {
|
||||||
margin-top: 0.25rem !important;
|
margin-top: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-3 {
|
.gap-3 {
|
||||||
gap: 0.25rem !important;
|
gap: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-5 {
|
.gap-5 {
|
||||||
gap: 0.25rem !important;
|
gap: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Font size optimization */
|
/* Font size optimization */
|
||||||
.text-4xl {
|
.text-4xl {
|
||||||
font-size: 1.25rem !important;
|
font-size: 1.1rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
.text-3xl {
|
||||||
font-size: 1.125rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-2xl {
|
|
||||||
font-size: 1rem !important;
|
font-size: 1rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-xl {
|
.text-2xl {
|
||||||
font-size: 0.95rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-lg {
|
|
||||||
font-size: 0.9rem !important;
|
font-size: 0.9rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-base {
|
.text-xl {
|
||||||
font-size: 0.875rem !important;
|
font-size: 0.85rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-sm {
|
.text-lg {
|
||||||
font-size: 0.8rem !important;
|
font-size: 0.8rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-xs {
|
.text-base {
|
||||||
|
font-size: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-sm {
|
||||||
font-size: 0.7rem !important;
|
font-size: 0.7rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-xs {
|
||||||
|
font-size: 0.65rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Line height compression */
|
/* Line height compression */
|
||||||
* {
|
* {
|
||||||
line-height: 1.3 !important;
|
line-height: 1.2 !important;
|
||||||
animation: none !important;
|
animation: none !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
line-height: 1.2 !important;
|
line-height: 1.15 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo sizing */
|
/* Logo sizing */
|
||||||
.print-logo {
|
.print-logo {
|
||||||
max-width: 100px !important;
|
max-width: 80px !important;
|
||||||
margin-bottom: 0.25rem !important;
|
margin-bottom: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Compact grid layouts */
|
/* Compact grid layouts */
|
||||||
.grid {
|
.grid {
|
||||||
gap: 0.25rem !important;
|
gap: 0.15rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Metadata grid - keep 2 columns but more compact */
|
/* Metadata grid - keep 2 columns but more compact */
|
||||||
@ -273,6 +273,22 @@ export default function CheckoutSuccessPage() {
|
|||||||
.md\\:col-span-2 {
|
.md\\:col-span-2 {
|
||||||
grid-column: span 1 !important;
|
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>
|
`}</style>
|
||||||
|
|
||||||
@ -435,6 +451,7 @@ export default function CheckoutSuccessPage() {
|
|||||||
<RechartsPortfolioPieChart
|
<RechartsPortfolioPieChart
|
||||||
projects={orderDetails.order.portfolio.projects}
|
projects={orderDetails.order.portfolio.projects}
|
||||||
totalTons={order.tons}
|
totalTons={order.tons}
|
||||||
|
size={280}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -3,6 +3,8 @@ export default {
|
|||||||
content: [
|
content: [
|
||||||
'./index.html',
|
'./index.html',
|
||||||
'./src/**/*.{js,ts,jsx,tsx}',
|
'./src/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'./app/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'./components/**/*.{js,ts,jsx,tsx}',
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
@ -41,7 +43,7 @@ export default {
|
|||||||
safelist: [
|
safelist: [
|
||||||
// Colors
|
// 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
|
// Modern Maritime Admin Colors
|
||||||
'bg-deep-sea-blue',
|
'bg-deep-sea-blue',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user