From 9297e20604f21aa1a16a3aed400ccc5521cf444c Mon Sep 17 00:00:00 2001 From: Usman Baig Date: Thu, 26 Mar 2026 22:45:35 +0100 Subject: [PATCH] fix: increase card field height and font size for larger card brand logos --- components/checkout/PaymentForm.tsx | 2 +- lib/mollie.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx index b3d5b5f..838b99f 100644 --- a/components/checkout/PaymentForm.tsx +++ b/components/checkout/PaymentForm.tsx @@ -18,7 +18,7 @@ interface PaymentFormProps { const inputClass = 'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors' const mollieFieldBase = - 'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange' + 'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-3 h-[48px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange' export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) { const router = useRouter() diff --git a/lib/mollie.ts b/lib/mollie.ts index b56e85f..9b1f66f 100644 --- a/lib/mollie.ts +++ b/lib/mollie.ts @@ -29,7 +29,7 @@ const MOLLIE_PROFILE_ID = process.env.NEXT_PUBLIC_MOLLIE_PROFILE_ID || '' export const MOLLIE_FIELD_STYLES = { base: { color: '#ffffff', - fontSize: '14px', + fontSize: '15px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontWeight: '400', letterSpacing: '0.025em',