feat: style tweaks in the public payment page

packages/server/src/services/Sales/JournalPosterService.ts

@@ -1,8 +1,8 @@
+import { Knex } from 'knex';
 import { Service, Inject } from 'typedi';
 import JournalPoster from '@/services/Accounting/JournalPoster';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import JournalCommands from '@/services/Accounting/JournalCommands';
-import Knex from 'knex';
 
 @Service()
 export default class JournalPosterService {

packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss

@@ -3,23 +3,31 @@
   height: 50px;
   width :50px;
   border-radius: 50px;
-  background-color: #fff;
+  background-color: #dfdfdf;
-  background: #dfdfdf;
+  background-image: url('https://pbs.twimg.com/profile_images/1381635804397703182/x5chIdsO_400x400.png');
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border: 1px solid #e8e8e8;
+}
+
+.rootBodyPage {
+  background: #181a30;
 }
 
 .root {
-  border-radius: 8px;
+  border-radius: 10px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   width: 600px;
   margin: 40px auto;
-  color: #000;
+  color: #222;
   background-color: #fff;
 }
 
 .bigTitle{
   margin: 0;
   font-weight: 500;
-  color: #111;
+  color: #222;
   font-size: 26px;
 }
 
@@ -28,16 +36,17 @@
 }
 
 .invoiceNumber {
-  font-size: 18px;
+  font-size: 16px;
   color: #333;
+  font-weight: 600;
 }
 
 .body {
-  padding: 30px;
+  padding: 30px 26px;
 }
 
 .footer{
-  padding: 20px 30px;
+  padding: 20px 26px;
   background-color: #FAFAFA;
   border-top: 1px solid #DCE0E5;
   border-radius: 0 0 8px 8px;
@@ -50,7 +59,7 @@
   font-weight: 600;
 }
 .totals {
-
+  color: #000;
 }
 
 .totalItem {
@@ -64,6 +73,10 @@
   }
 }
 
+.footerButtons{
+  margin-top: 20px;
+}
+
 .footerButton{
   height: 40px;
   line-height: 40px;
@@ -84,5 +97,6 @@
 }
 
 .buyNote{
+  margin-top: 16px;
   font-size: 12px;
 }

packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx

@@ -9,8 +9,9 @@ export function PaymentPortal() {
 
   return (
     <Box className={styles.root}>
-      <Stack className={styles.body}>
+      <Stack spacing={0} className={styles.body}>
-        <Group spacing={8}>
+        <Stack>
+          <Group spacing={10}>
             <Box className={styles.companyLogoWrap}></Box>
             <Text>{sharableLinkMeta?.companyName}</Text>
           </Group>
@@ -26,7 +27,9 @@ export function PaymentPortal() {
           </Stack>
 
           <Stack spacing={2}>
-          <Box className={styles.customerName}>{sharableLinkMeta?.customerName}</Box>
+            <Box className={styles.customerName}>
+              {sharableLinkMeta?.customerName}
+            </Box>
             <Box>Bigcapital Technology, Inc.</Box>
             <Box>131 Continental Dr Suite 305 Newark,</Box>
             <Box>Delaware 19713</Box>
@@ -56,7 +59,7 @@ export function PaymentPortal() {
 
             <Group
               position={'apart'}
-            className={clsx(styles.totalItem, styles.borderBottomDark)}
+              className={clsx(styles.totalItem, styles.borderBottomGray)}
             >
               <Text>Paid Amount (-)</Text>
               <Text>{sharableLinkMeta?.paymentAmountFormatted}</Text>
@@ -72,8 +75,9 @@ export function PaymentPortal() {
               </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>

packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx

@@ -3,6 +3,7 @@ import {
   GetSharableLinkMetaResponse,
   useGetSharableLinkMeta,
 } from '@/hooks/query/payment-link';
+import { Spinner } from '@blueprintjs/core';
 
 interface PaymentPortalContextType {
   sharableLinkMeta: GetSharableLinkMetaResponse | undefined;
@@ -29,6 +30,9 @@ export const PaymentPortalBoot: React.FC<PaymentPortalBootProps> = ({
     sharableLinkMeta,
     isSharableLinkMetaLoading,
   };
+  if (isSharableLinkMetaLoading) {
+    return <Spinner size={20} />;
+  }
 
   return (
     <PaymentPortalContext.Provider value={value}>

packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx

@@ -1,13 +1,17 @@
 import { useParams } from 'react-router-dom';
 import { PaymentPortal } from './PaymentPortal';
 import { PaymentPortalBoot } from './PaymentPortalBoot';
+import BodyClassName from 'react-body-classname';
+import styles from './PaymentPortal.module.scss';
 
 export default function PaymentPortalPage() {
   const { linkId } = useParams<{ linkId: string }>();
 
   return (
+    <BodyClassName className={styles.rootBodyPage}>
       <PaymentPortalBoot linkId={linkId}>
         <PaymentPortal />
       </PaymentPortalBoot>
+    </BodyClassName>
   );
 }