feat: optimize status tags

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'}>
-          <Icon icon="small-tick" iconSize={18} />
-        </span>
-        <span class="fully-paid-text">
+        <Tag intent={Intent.SUCCESS} round>
           <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>
-          <ProgressBar
-            animate={false}
-            stripes={false}
-            intent={Intent.PRIMARY}
-            value={calculateStatus(invoice.balance_amount, invoice.balance)}
-          />
+          </Tag>
         </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>