feat: optimize status tags (#829)

packages/webapp/src/components/Aside/Aside.tsx

@@ -1,5 +1,6 @@
 import { Button, Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 import { Box, BoxProps, Group } from '../Layout';
 import { Icon } from '../Icon';
 import styles from './Aside.module.scss';
@@ -21,6 +22,7 @@ export function Aside({
   classNames,
   className
 }: AsideProps) {
+  const isDarkMode = useIsDarkMode();
   const handleClose = () => {
     onClose && onClose();
   };
@@ -32,7 +34,7 @@ export function Aside({
           <Button
             aria-label="Close"
             className={Classes.DIALOG_CLOSE_BUTTON}
-            icon={<Icon icon={'smallCross'} color={'#000'} />}
+            icon={<Icon icon={'smallCross'} color={isDarkMode ? '#fff' : '#000'} />}
             minimal={true}
             onClick={handleClose}
           />

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss

@@ -4,12 +4,14 @@
   --item-active-border: #88abdb;
   --item-label-text: #252a33;
   --item-date-text: #5c7080;
+  --item-border-hover: #c0c0c0;
   
   :global(.bp4-dark) & {
-    --item-background: var(--color-dark-gray4);
+    --item-background: var(--color-dark-gray3);
     --item-border: rgba(255, 255, 255, 0.2);
     --item-date-text: var(--color-light-gray1);
     --item-label-text: var(--color-light-gray4);    
+    --item-border-hover: rgba(255, 255, 255, 0.45);
   }
   background: var(--item-background);
   border-radius: 5px;
@@ -27,7 +29,7 @@
     }
   }
   &:hover:not(.active) {
-    border-color: #c0c0c0;
+    border-color: var(--item-border-hover);
   }
 }
 

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx

@@ -27,6 +27,7 @@ import {
 } from '../withBankingActions';
 import { withBanking } from '../withBanking';
 import { MatchingReconcileTransactionForm } from './MatchingReconcileTransactionAside/MatchingReconcileTransactionForm';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 import styles from './CategorizeTransactionAside.module.scss';
 
 const initialValues = {
@@ -119,8 +120,7 @@ const MatchingBankTransactionFormContent = R.compose(
   withBanking(({ openReconcileMatchingTransaction }) => ({
     openReconcileMatchingTransaction,
   })),
-)(
+)(({
-  ({
   // #withBanking
   openReconcileMatchingTransaction,
 }) => {
@@ -178,8 +178,7 @@ const MatchingBankTransactionFormContent = R.compose(
       {!openReconcileMatchingTransaction && <MatchTransactionFooter />}
     </>
   );
-  },
+});
-);
 
 function MatchingBankTransactionContent() {
   return (
@@ -302,8 +301,7 @@ interface MatchTransctionFooterProps extends WithBankingActionsProps {}
  * Renders the match transactions footer.
  * @returns {React.ReactNode}
  */
-const MatchTransactionFooter = R.compose(withBankingActions)(
+const MatchTransactionFooter = R.compose(withBankingActions)(({
-  ({
   closeMatchingTransactionAside,
   openReconcileMatchingTransaction,
 }: MatchTransctionFooterProps) => {
@@ -311,6 +309,7 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
   const totalPending = useGetPendingAmountMatched();
   const showReconcileLink = useIsShowReconcileTransactionLink();
   const submitDisabled = totalPending !== 0;
+  const isDarkMode = useIsDarkMode();
 
   const handleCancelBtnClick = () => {
     closeMatchingTransactionAside();
@@ -337,7 +336,11 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
             </AnchorButton>
           )}
           <Text
-              style={{ fontSize: 14, marginLeft: 'auto', color: '#404854' }}
+            style={{
+              fontSize: 14,
+              marginLeft: 'auto',
+              color: isDarkMode ? 'var(--color-light-gray1)' : '#404854',
+            }}
             tagName="span"
           >
             Pending <FormatNumber value={totalPending} currency={'USD'} />
@@ -362,7 +365,6 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
       </Box>
     </Box>
   );
-  },
+});
-);
 
 MatchTransactionFooter.displayName = 'MatchTransactionFooter';

packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx

@@ -7,7 +7,6 @@ import {
   MenuItem,
   MenuDivider,
   Tag,
-  ProgressBar,
 } from '@blueprintjs/core';
 import clsx from 'classnames';
 import {
@@ -21,7 +20,6 @@ import {
 import {
   formattedAmount,
   safeCallback,
-  calculateStatus,
 } from '@/utils';
 import {
   BillAction,
@@ -108,42 +106,35 @@ export function StatusAccessor(bill) {
     <div className={'status-accessor'}>
       <Choose>
         <Choose.When condition={bill.is_fully_paid && bill.is_open}>
-          <span className={'fully-paid-icon'}>
+          <Tag round intent={Intent.SUCCESS}>
-            <Icon icon="small-tick" iconSize={18} />
-          </span>
-          <span class="fully-paid-text">
             <T id={'paid'} />
-          </span>
+          </Tag>
         </Choose.When>
+
         <Choose.When condition={bill.is_open}>
           <Choose>
             <Choose.When condition={bill.is_overdue}>
-              <span className={'overdue-status'}>
+              <Tag round intent={Intent.DANGER}>
                 {intl.get('overdue_by', { overdue: bill.overdue_days })}
-              </span>
+              </Tag>
             </Choose.When>
             <Choose.Otherwise>
-              <span className={'due-status'}>
+              <Tag round intent={Intent.WARNING}>
                 {intl.get('due_in', { due: bill.remaining_days })}
-              </span>
+              </Tag>
             </Choose.Otherwise>
           </Choose>
           <If condition={bill.is_partially_paid}>
-            <span className="partial-paid">
+            <Tag round intent={Intent.PRIMARY}>
               {intl.get('day_partially_paid', {
                 due: formattedAmount(bill.due_amount, bill.currency_code),
               })}
-            </span>
+            </Tag>
-            <ProgressBar
-              animate={false}
-              stripes={false}
-              intent={Intent.PRIMARY}
-              value={calculateStatus(bill.balance, bill.amount)}
-            />
           </If>
         </Choose.When>
+
         <Choose.Otherwise>
-          <Tag minimal={true} round={true}>
+          <Tag round>
             <T id={'draft'} />
           </Tag>
         </Choose.Otherwise>

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx

@@ -81,19 +81,19 @@ export function StatusAccessor(creditNote) {
     <div>
       <Choose>
         <Choose.When condition={creditNote.is_open}>
-          <Tag minimal={true} intent={Intent.WARNING} round={true}>
+          <Tag intent={Intent.WARNING} round>
             <T id={'open'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_closed}>
-          <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+          <Tag intent={Intent.SUCCESS} round>
             <T id={'closed'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_draft}>
-          <Tag minimal={true} round={true}>
+          <Tag round>
             <T id={'draft'} />
           </Tag>
         </Choose.When>

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx

@@ -80,19 +80,19 @@ export function StatusAccessor(creditNote) {
     <div>
       <Choose>
         <Choose.When condition={creditNote.is_open}>
-          <Tag intent={Intent.WARNING} minimal={true} round={true}>
+          <Tag intent={Intent.WARNING} round>
             <T id={'open'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_closed}>
-          <Tag intent={Intent.SUCCESS} minimal={true} round={true}>
+          <Tag intent={Intent.SUCCESS} round>
             <T id={'closed'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_draft}>
-          <Tag intent={Intent.NONE} minimal={true} round={true}>
+          <Tag intent={Intent.NONE} round>
             <T id={'draft'} />
           </Tag>
         </Choose.When>

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx

@@ -6,7 +6,6 @@ import {
   Menu,
   MenuItem,
   MenuDivider,
-  ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
@@ -20,7 +19,7 @@ import {
   Icon,
   Can,
 } from '@/components';
-import { formattedAmount, safeCallback, calculateStatus } from '@/utils';
+import { formattedAmount, safeCallback } from '@/utils';
 import {
   SaleInvoiceAction,
   PaymentReceiveAction,
@@ -31,44 +30,36 @@ export function InvoiceStatus({ invoice }) {
   return (
     <Choose>
       <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
-        <span className={'fully-paid-icon'}>
+        <Tag intent={Intent.SUCCESS} round>
-          <Icon icon="small-tick" iconSize={18} />
-        </span>
-        <span class="fully-paid-text">
           <T id={'paid'} />
-        </span>
+        </Tag>
       </Choose.When>
 
       <Choose.When condition={invoice.is_delivered}>
         <Choose>
           <Choose.When condition={invoice.is_overdue}>
-            <span className={'overdue-status'}>
+            <Tag intent={Intent.DANGER} round>
               {intl.get('overdue_by', { overdue: invoice.overdue_days })}
-            </span>
+            </Tag>
           </Choose.When>
           <Choose.Otherwise>
-            <span className={'due-status'}>
+            <Tag intent={Intent.WARNING} round>
               {intl.get('due_in', { due: invoice.remaining_days })}
-            </span>
+            </Tag>
           </Choose.Otherwise>
         </Choose>
 
         <If condition={invoice.is_partially_paid}>
-          <span class="partial-paid">
+          <Tag intent={Intent.PRIMARY} round>
             {intl.get('day_partially_paid', {
               due: formattedAmount(invoice.due_amount, invoice.currency_code),
             })}
-          </span>
+          </Tag>
-          <ProgressBar
-            animate={false}
-            stripes={false}
-            intent={Intent.PRIMARY}
-            value={calculateStatus(invoice.balance_amount, invoice.balance)}
-          />
         </If>
       </Choose.When>
+
       <Choose.Otherwise>
-        <Tag minimal={true} round={true}>
+        <Tag round>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx

@@ -96,13 +96,13 @@ export function StatusAccessor(receipt) {
   return (
     <Choose>
       <Choose.When condition={receipt.is_closed}>
-        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+        <Tag intent={Intent.SUCCESS} round>
           <T id={'closed'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING} round={true}>
+        <Tag intent={Intent.WARNING} round>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>

packages/webapp/src/style/_variables.scss

@@ -572,7 +572,7 @@ body.bp4-dark  {
 
   // Aside
   --color-aside-background: #fff;
-  --color-aside-background: var(--color-dark-gray2);
+  --color-aside-background: var(--color-dark-gray1);
 
   --color-aside-title-background: #fff;
   --color-aside-title-background: var(--color-dark-gray1);