From 03e6372f141529df905b9bc3d27ae7d86a574939 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 22 Oct 2024 14:36:53 +0200
Subject: [PATCH] feat: style the invoice payment preview

---
 .../src/containers/PaymentPortal/PaymentPage.tsx       |  2 +-
 .../InvoiceCustomizeMailReceiptPreview.tsx             |  2 +-
 .../InvoiceCustomizePaymentPreview.tsx                 | 10 ++++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx
index 3227708f0..64f57a93c 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx
@@ -137,7 +137,7 @@ export function InvoicePaymentPage({
           </Group>
 
           <Stack spacing={6}>
-            <h1 className={styles.bigTitle}>
+            <h1 className={clsx(styles.bigTitle, classNames?.bigTitle)}>
               {organizationName} Sent an Invoice for {total}
             </h1>
             <Group spacing={10}>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx
index 63b6cebc1..9037c3638 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx
@@ -23,7 +23,7 @@ const withInvoiceMailReceiptPreviewConnected = <P extends Object>(
       // organizationAddress: mergedBrandingState,
     };
     return (
-      <Box px={4} py={8}>
+      <Box px={4} pt={8} pb={16}>
         <Component {...(props as P)} {...mergedProps} />
       </Box>
     );
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx
index 0b1afdf4b..46e510435 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePaymentPreview.tsx
@@ -9,7 +9,6 @@ import { useElementCustomizeContext } from '@/containers/ElementCustomize/Elemen
 import { InvoiceCustomizeFormValues } from './types';
 import { Box } from '@/components';
 
-
 const withInvoicePaymentPreviewPageProps = <P extends Object>(
   Component: React.ComponentType<P>,
 ) => {
@@ -26,13 +25,20 @@ const withInvoicePaymentPreviewPageProps = <P extends Object>(
       primaryColor: mergedBrandingState?.primaryColor,
     };
     return (
-      <Box px={4} py={8}>
+      <Box px={4} pt={8} pb={16}>
         <Component
           {...(props as P)}
           {...mergedProps}
           classNames={{
             root: css`
               margin: 0 auto;
+              border-radius: 5px !important;
+              transform: scale(0.9);
+              transform-origin: top;
+              boxshadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important;
+            `,
+            bigTitle: css`
+              color: #333 !important;
             `,
           }}
         />