QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 07:10:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: style tweaks in the public payment page

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-19 11:28:40 +02:00
parent 2ebb4595a8
commit 809973730f
5 changed files with 98 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
View File

@@ -9,71 +9,75 @@ export function PaymentPortal() {
return (
<Box className={styles.root}>
<Stack className={styles.body}>
<Group spacing={8}>
<Box className={styles.companyLogoWrap}></Box>
<Text>{sharableLinkMeta?.companyName}</Text>
</Group>
<Stack spacing={6}>
<h1 className={styles.bigTitle}>
{sharableLinkMeta?.companyName} Sent an Invoice for{' '}
{sharableLinkMeta?.totalFormatted}
</h1>
<Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
Invoice due {sharableLinkMeta?.dueDateFormatted}
</Text>
</Stack>
<Stack spacing={2}>
<Box className={styles.customerName}>{sharableLinkMeta?.customerName}</Box>
<Box>Bigcapital Technology, Inc.</Box>
<Box>131 Continental Dr Suite 305 Newark,</Box>
<Box>Delaware 19713</Box>
<Box>United States</Box>
<Box>ahmed@bigcapital.app</Box>
</Stack>
<h2 className={styles.invoiceNumber}>
Invoice {sharableLinkMeta?.invoiceNo}
</h2>
<Stack spacing={0} className={styles.totals}>
<Group
position={'apart'}
className={clsx(styles.totalItem, styles.borderBottomGray)}
>
<Text>Sub Total</Text>
<Text>{sharableLinkMeta?.subtotalFormatted}</Text>
<Stack spacing={0} className={styles.body}>
<Stack>
<Group spacing={10}>
<Box className={styles.companyLogoWrap}></Box>
<Text>{sharableLinkMeta?.companyName}</Text>
</Group>
<Group position={'apart'} className={styles.totalItem}>
<Text>Total</Text>
<Text style={{ fontWeight: 600 }}>
<Stack spacing={6}>
<h1 className={styles.bigTitle}>
{sharableLinkMeta?.companyName} Sent an Invoice for{' '}
{sharableLinkMeta?.totalFormatted}
</h1>
<Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
Invoice due {sharableLinkMeta?.dueDateFormatted}
</Text>
</Group>
</Stack>
<Group
position={'apart'}
className={clsx(styles.totalItem, styles.borderBottomDark)}
>
<Text>Paid Amount (-)</Text>
<Text>{sharableLinkMeta?.paymentAmountFormatted}</Text>
</Group>
<Stack spacing={2}>
<Box className={styles.customerName}>
{sharableLinkMeta?.customerName}
</Box>
<Box>Bigcapital Technology, Inc.</Box>
<Box>131 Continental Dr Suite 305 Newark,</Box>
<Box>Delaware 19713</Box>
<Box>United States</Box>
<Box>ahmed@bigcapital.app</Box>
</Stack>
<Group
position={'apart'}
className={clsx(styles.totalItem, styles.borderBottomDark)}
>
<Text>Due Amount</Text>
<Text style={{ fontWeight: 600 }}>
{sharableLinkMeta?.dueAmountFormatted}
</Text>
</Group>
<h2 className={styles.invoiceNumber}>
Invoice {sharableLinkMeta?.invoiceNo}
</h2>
<Stack spacing={0} className={styles.totals}>
<Group
position={'apart'}
className={clsx(styles.totalItem, styles.borderBottomGray)}
>
<Text>Sub Total</Text>
<Text>{sharableLinkMeta?.subtotalFormatted}</Text>
</Group>
<Group position={'apart'} className={styles.totalItem}>
<Text>Total</Text>
<Text style={{ fontWeight: 600 }}>
{sharableLinkMeta?.totalFormatted}
</Text>
</Group>
<Group
position={'apart'}
className={clsx(styles.totalItem, styles.borderBottomGray)}
>
<Text>Paid Amount (-)</Text>
<Text>{sharableLinkMeta?.paymentAmountFormatted}</Text>
</Group>
<Group
position={'apart'}
className={clsx(styles.totalItem, styles.borderBottomDark)}
>
<Text>Due Amount</Text>
<Text style={{ fontWeight: 600 }}>
{sharableLinkMeta?.dueAmountFormatted}
</Text>
</Group>
</Stack>
</Stack>
<Stack spacing={8}>
<Stack spacing={8} className={styles.footerButtons}>
<Button
minimal
className={clsx(styles.footerButton, styles.downloadInvoiceButton)}
@@ -100,7 +104,7 @@ export function PaymentPortal() {
</Text>
</Stack>
<Stack className={styles.footer}>
<Stack spacing={18} className={styles.footer}>
<Stack spacing={0}>
<Box>
<strong>Bigcapital Technology, Inc.</strong>