feat: style the invoice payment preview

This commit is contained in:
Ahmed Bouhuolia
2024-10-22 14:36:53 +02:00
parent c0481f67ad
commit 03e6372f14
3 changed files with 10 additions and 4 deletions

View File

@@ -137,7 +137,7 @@ export function InvoicePaymentPage({
</Group> </Group>
<Stack spacing={6}> <Stack spacing={6}>
<h1 className={styles.bigTitle}> <h1 className={clsx(styles.bigTitle, classNames?.bigTitle)}>
{organizationName} Sent an Invoice for {total} {organizationName} Sent an Invoice for {total}
</h1> </h1>
<Group spacing={10}> <Group spacing={10}>

View File

@@ -23,7 +23,7 @@ const withInvoiceMailReceiptPreviewConnected = <P extends Object>(
// organizationAddress: mergedBrandingState, // organizationAddress: mergedBrandingState,
}; };
return ( return (
<Box px={4} py={8}> <Box px={4} pt={8} pb={16}>
<Component {...(props as P)} {...mergedProps} /> <Component {...(props as P)} {...mergedProps} />
</Box> </Box>
); );

View File

@@ -9,7 +9,6 @@ import { useElementCustomizeContext } from '@/containers/ElementCustomize/Elemen
import { InvoiceCustomizeFormValues } from './types'; import { InvoiceCustomizeFormValues } from './types';
import { Box } from '@/components'; import { Box } from '@/components';
const withInvoicePaymentPreviewPageProps = <P extends Object>( const withInvoicePaymentPreviewPageProps = <P extends Object>(
Component: React.ComponentType<P>, Component: React.ComponentType<P>,
) => { ) => {
@@ -26,13 +25,20 @@ const withInvoicePaymentPreviewPageProps = <P extends Object>(
primaryColor: mergedBrandingState?.primaryColor, primaryColor: mergedBrandingState?.primaryColor,
}; };
return ( return (
<Box px={4} py={8}> <Box px={4} pt={8} pb={16}>
<Component <Component
{...(props as P)} {...(props as P)}
{...mergedProps} {...mergedProps}
classNames={{ classNames={{
root: css` root: css`
margin: 0 auto; 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;
`, `,
}} }}
/> />