feat: wip styling invoice customize

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss

@@ -1,5 +1,6 @@
 .root {
   flex: 1;
+  background: #fff;
 }
 
 .mainFields{
@@ -17,3 +18,7 @@
   border-top: 1px solid #d9d9d9;
   flex-flow: row-reverse;
 }
+
+.showCompanyLogoField:global(.bp4-large){
+  font-size: 14px;
+}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.module.scss

@@ -0,0 +1,3 @@
+.showCompanyLogoField{
+  font-size: 14px;
+}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx

@@ -1,4 +1,5 @@
-import { Box, FFormGroup, FSwitch, Stack } from '@/components';
+// @ts-nocheck
+import { FFormGroup, FSwitch, Stack } from '@/components';
 import { FColorInput } from './FColorField';
 import styles from './InvoiceCustomizeFields.module.scss';
 import { Classes } from '@blueprintjs/core';
@@ -6,21 +7,25 @@ import { Classes } from '@blueprintjs/core';
 export function InvoiceCustomizeGeneralField() {
   return (
     <Stack style={{ padding: 20, flex: '1 1 auto' }}>
-      <Stack>
+      <Stack spacing={0}>
-        <h2>General Branding</h2>
+        <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
         <p className={Classes.TEXT_MUTED}>
           Set your invoice details to be automatically applied every time
you
           create a new invoice.
         </p>
       </Stack>
 
+      <Stack spacing={0}>
         <FFormGroup
           name={'primaryColor'}
           label={'Primary Color'}
           inline
           className={styles.fieldGroup}
         >
-        <FColorInput name={'primaryColor'} />
+          <FColorInput
+            name={'primaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+          />
         </FFormGroup>
 
         <FFormGroup
@@ -29,16 +34,21 @@ export function InvoiceCustomizeGeneralField() {
           inline
           className={styles.fieldGroup}
         >
-        <FColorInput name={'secondaryColor'} />
+          <FColorInput
+            name={'secondaryColor'}
+            inputProps={{ style: { maxWidth: 120 } }}
+          />
         </FFormGroup>
 
         <FFormGroup name={'showLogo'} label={'Logo'}>
           <FSwitch
             name={'showLogo'}
             label={'Display company logo in the paper'}
+            className={styles.showCompanyLogoField}
             large
           />
         </FFormGroup>
       </Stack>
+    </Stack>
   );
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss

@@ -5,7 +5,7 @@
   box-shadow: 0 1px 0 rgba(17, 20, 24, .15);
   display: flex;
   flex: 0 0 auto;
-  min-height: 40px;
+  min-height: 55px;
   padding: 5px 5px 5px 20px;
   position: relative;
   background-color: #fff;
@@ -14,6 +14,6 @@
 
 .title{
   margin: 0;
-  font-size: 19px;
+  font-size: 20px;
   font-weight: 500;
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx

@@ -3,7 +3,7 @@ import { PaperTemplate } from './PaperTemplate';
 
 export function InvoiceCustomizePreviewContent() {
   return (
-    <Box style={{ padding: 20, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
+    <Box style={{ padding: 24, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
       <PaperTemplate />
     </Box>
   );

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss

@@ -2,16 +2,19 @@
 .root {
   border-radius: 5px;
   background-color: #fff;
-  box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.15);
+  color: #000;
-  padding: 22px;
+  box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
+  padding: 22px 30px;
   position: relative;
 }
 
 .bigTitle{
   font-size: 60px;
   margin: 0;
-  LINE-HEIGHT: 1;
+  line-height: 1;
-  MARGIN-BOTTOM: 20px;
+  margin-bottom: 20px;
+  font-weight: 500;
+  color: #333;
 }
 
 .details {
@@ -23,10 +26,11 @@
 .detail {
   display: flex;
   flex-direction: row;
-    gap: 10px;
+  gap: 12px;
 }
 .detailLabel {
   min-width: 120px;
+  color: #333;
 }
 
 .addressRoot{
@@ -42,7 +46,7 @@
   flex: 1;
 }
 
-.table :global {
+.table {
   margin-top: 40px;
   width: 100%;
   border-collapse: collapse;
@@ -51,6 +55,18 @@
   thead th{
     font-weight: 400;
     border-bottom: 1px solid #000;
+    padding: 5px 10px;
+
+    &.rate,
+    &.total{
+      text-align: right;
+    }
+    &:first-of-type{
+      padding-left: 0;
+    }
+    &:last-of-type{
+      padding-right: 0;
+    }
   }
 
   tbody{
@@ -59,8 +75,20 @@
 
     }
     td{
-      border: 1px solid #F6F6F6;
+      border-bottom: 1px solid #F6F6F6;
-      padding: 10px 0;
+      padding: 12px 10px;
+
+      &:first-of-type{
+        padding-left: 0;
+      }
+      &:last-of-type{
+        padding-right: 0;
+      }
+
+      &.rate,
+      &.total{
+        text-align: right;
+      }
     }
   }
 }
@@ -78,6 +106,13 @@
 .totalsItemLabel{
   min-width: 160px;
 }
+.totalsItemAmount{
+  flex: 1 1 auto;
+  text-align: right;
+}
+.totalBottomBordered {
+  border-bottom: 1px solid #000;
+}
 
 .logoWrap{
   height: 120px;
@@ -85,21 +120,24 @@
   position: absolute;
   right: 20px;
   top: 20px;
+  border-radius: 5px;
+  overflow: hidden;
 
   img{
     max-width: 100%;
   }
 }
 
-
 .footer{
 
 }
 
 .paragraph{
   margin-bottom: 20px;  
+  font-size: 12px;
 }
 
 .paragraphLabel{
-  color: #333333;
+  margin-bottom: 2px;
+  color: #666;
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx

@@ -1,3 +1,4 @@
+import clsx from 'classnames';
 import styles from './PaperTemplate.module.scss';
 
 export function PaperTemplate() {
@@ -7,7 +8,10 @@ export function PaperTemplate() {
         <h1 className={styles.bigTitle}>Invoice</h1>
 
         <div className={styles.logoWrap}>
-          <img alt="" src="https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png" />
+          <img
+            alt=""
+            src="https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png"
+          />
         </div>
       </div>
 
@@ -30,7 +34,7 @@ export function PaperTemplate() {
 
       <div className={styles.addressRoot}>
         <div className={styles.addressBillTo}>
-          Bigcapital Technology, Inc. <br />
+          <strong>Bigcapital Technology, Inc.</strong> <br />
           131 Continental Dr Suite 305 Newark,
           <br />
           Delaware 19713
@@ -43,7 +47,7 @@ export function PaperTemplate() {
         </div>
 
         <div className={styles.addressFrom}>
-          Billed To <br />
+          <strong>Billed To</strong> <br />
           Bigcapital Technology, Inc. <br />
           131 Continental Dr Suite 305 Newark,
           <br />
@@ -62,17 +66,17 @@ export function PaperTemplate() {
           <tr>
             <th>Item</th>
             <th>Description</th>
-            <th>Rate</th>
+            <th className={styles.rate}>Rate</th>
-            <th>Total</th>
+            <th className={styles.total}>Total</th>
           </tr>
         </thead>
 
-        <tbody>
+        <tbody className={styles.tableBody}>
           <tr>
             <td>Simply dummy text</td>
             <td>Simply dummy text of the printing and typesetting</td>
-            <td>1 X $100,00</td>
+            <td className={styles.rate}>1 X $100,00</td>
-            <td>$100,00</td>
+            <td className={styles.total}>$100,00</td>
           </tr>
         </tbody>
       </table>
@@ -81,37 +85,37 @@ export function PaperTemplate() {
         <div className={styles.totals}>
           <div className={styles.totalsItem}>
             <div className={styles.totalsItemLabel}>Sub Total</div>
-            <div>630.00</div>
+            <div className={styles.totalsItemAmount}>630.00</div>
           </div>
 
           <div className={styles.totalsItem}>
             <div className={styles.totalsItemLabel}>Discount</div>
-            <div>0.00</div>
+            <div className={styles.totalsItemAmount}>0.00</div>
           </div>
 
           <div className={styles.totalsItem}>
             <div className={styles.totalsItemLabel}>Sample Tax1 (4.70%)</div>
-            <div>11.75</div>
+            <div className={styles.totalsItemAmount}>11.75</div>
           </div>
 
           <div className={styles.totalsItem}>
             <div className={styles.totalsItemLabel}>Sample Tax2 (7.00%)</div>
-            <div>21.00</div>
+            <div className={styles.totalsItemAmount}>21.00</div>
           </div>
 
-          <div className={styles.totalsItem}>
+          <div className={clsx(styles.totalsItem, styles.totalBottomBordered)}>
             <div className={styles.totalsItemLabel}>Total</div>
-            <div>$662.75</div>
+            <div className={styles.totalsItemAmount}>$662.75</div>
           </div>
 
           <div className={styles.totalsItem}>
             <div className={styles.totalsItemLabel}>Payment Made</div>
-            <div>100.00</div>
+            <div className={styles.totalsItemAmount}>100.00</div>
           </div>
 
-          <div className={styles.totalsItem}>
+          <div className={clsx(styles.totalsItem, styles.totalBottomBordered)}>
             <div className={styles.totalsItemLabel}>Balance Due</div>
-            <div className={styles.totalsItemLabel}>$562.75</div>
+            <div className={styles.totalsItemAmount}>$562.75</div>
           </div>
         </div>
       </div>