feat: optimize status tags

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,67 +120,65 @@ const MatchingBankTransactionFormContent = R.compose(
   withBanking(({ openReconcileMatchingTransaction }) => ({
     openReconcileMatchingTransaction,
   })),
-)(
-  ({
-    // #withBanking
-    openReconcileMatchingTransaction,
-  }) => {
-    const {
-      isMatchingTransactionsFetching,
-      isMatchingTransactionsSuccess,
-      matches,
-    } = useMatchingTransactionBoot();
-    const [pending, setPending] = useState<null | {
-      refId: number;
-      refType: string;
-    }>(null);
+)(({
+  // #withBanking
+  openReconcileMatchingTransaction,
+}) => {
+  const {
+    isMatchingTransactionsFetching,
+    isMatchingTransactionsSuccess,
+    matches,
+  } = useMatchingTransactionBoot();
+  const [pending, setPending] = useState<null | {
+    refId: number;
+    refType: string;
+  }>(null);
 
-    const { setFieldValue } = useFormikContext();
+  const { setFieldValue } = useFormikContext();
 
-    // This effect is responsible for automatically marking a transaction as matched
-    // when the matching process is successful and not currently fetching.
-    useEffect(() => {
-      if (
-        pending &&
-        isMatchingTransactionsSuccess &&
-        !isMatchingTransactionsFetching
-      ) {
-        const foundMatch = matches?.find(
-          (m) =>
-            m.referenceType === pending?.refType &&
-            m.referenceId === pending?.refId,
-        );
-        if (foundMatch) {
-          setFieldValue(`matched.${pending.refType}-${pending.refId}`, true);
-        }
-        setPending(null);
+  // This effect is responsible for automatically marking a transaction as matched
+  // when the matching process is successful and not currently fetching.
+  useEffect(() => {
+    if (
+      pending &&
+      isMatchingTransactionsSuccess &&
+      !isMatchingTransactionsFetching
+    ) {
+      const foundMatch = matches?.find(
+        (m) =>
+          m.referenceType === pending?.refType &&
+          m.referenceId === pending?.refId,
+      );
+      if (foundMatch) {
+        setFieldValue(`matched.${pending.refType}-${pending.refId}`, true);
       }
-    }, [
-      isMatchingTransactionsFetching,
-      isMatchingTransactionsSuccess,
-      matches,
-      pending,
-      setFieldValue,
-    ]);
+      setPending(null);
+    }
+  }, [
+    isMatchingTransactionsFetching,
+    isMatchingTransactionsSuccess,
+    matches,
+    pending,
+    setFieldValue,
+  ]);
 
-    const handleReconcileFormSubmitSuccess = (payload) => {
-      setPending({ refId: payload.id, refType: payload.type });
-    };
+  const handleReconcileFormSubmitSuccess = (payload) => {
+    setPending({ refId: payload.id, refType: payload.type });
+  };
 
-    return (
-      <>
-        <MatchingBankTransactionContent />
+  return (
+    <>
+      <MatchingBankTransactionContent />
 
-        {openReconcileMatchingTransaction && (
-          <MatchingReconcileTransactionForm
-            onSubmitSuccess={handleReconcileFormSubmitSuccess}
-          />
-        )}
-        {!openReconcileMatchingTransaction && <MatchTransactionFooter />}
-      </>
-    );
-  },
-);
+      {openReconcileMatchingTransaction && (
+        <MatchingReconcileTransactionForm
+          onSubmitSuccess={handleReconcileFormSubmitSuccess}
+        />
+      )}
+      {!openReconcileMatchingTransaction && <MatchTransactionFooter />}
+    </>
+  );
+});
 
 function MatchingBankTransactionContent() {
   return (
@@ -296,73 +295,76 @@ function MatchTransactionField({
   );
 }
 
-interface MatchTransctionFooterProps extends WithBankingActionsProps {}
+interface MatchTransctionFooterProps extends WithBankingActionsProps { }
 
 /**
  * Renders the match transactions footer.
  * @returns {React.ReactNode}
  */
-const MatchTransactionFooter = R.compose(withBankingActions)(
-  ({
-    closeMatchingTransactionAside,
-    openReconcileMatchingTransaction,
-  }: MatchTransctionFooterProps) => {
-    const { submitForm, isSubmitting } = useFormikContext();
-    const totalPending = useGetPendingAmountMatched();
-    const showReconcileLink = useIsShowReconcileTransactionLink();
-    const submitDisabled = totalPending !== 0;
+const MatchTransactionFooter = R.compose(withBankingActions)(({
+  closeMatchingTransactionAside,
+  openReconcileMatchingTransaction,
+}: MatchTransctionFooterProps) => {
+  const { submitForm, isSubmitting } = useFormikContext();
+  const totalPending = useGetPendingAmountMatched();
+  const showReconcileLink = useIsShowReconcileTransactionLink();
+  const submitDisabled = totalPending !== 0;
+  const isDarkMode = useIsDarkMode();
 
-    const handleCancelBtnClick = () => {
-      closeMatchingTransactionAside();
-    };
-    const handleSubmitBtnClick = () => {
-      submitForm();
-    };
-    const handleReconcileTransaction = () => {
-      openReconcileMatchingTransaction(totalPending);
-    };
+  const handleCancelBtnClick = () => {
+    closeMatchingTransactionAside();
+  };
+  const handleSubmitBtnClick = () => {
+    submitForm();
+  };
+  const handleReconcileTransaction = () => {
+    openReconcileMatchingTransaction(totalPending);
+  };
 
-    return (
-      <Box className={styles.footer}>
-        <Box className={styles.footerTotal}>
-          <Group position={'apart'}>
-            {showReconcileLink && (
-              <AnchorButton
-                small
-                minimal
-                intent={Intent.PRIMARY}
-                onClick={handleReconcileTransaction}
-              >
-                Add Reconcile Transaction +
-              </AnchorButton>
-            )}
-            <Text
-              style={{ fontSize: 14, marginLeft: 'auto', color: '#404854' }}
-              tagName="span"
-            >
-              Pending <FormatNumber value={totalPending} currency={'USD'} />
-            </Text>
-          </Group>
-        </Box>
-
-        <Box className={styles.footerActions}>
-          <Group spacing={10}>
-            <Button
+  return (
+    <Box className={styles.footer}>
+      <Box className={styles.footerTotal}>
+        <Group position={'apart'}>
+          {showReconcileLink && (
+            <AnchorButton
+              small
+              minimal
               intent={Intent.PRIMARY}
-              style={{ minWidth: 85 }}
-              onClick={handleSubmitBtnClick}
-              loading={isSubmitting}
-              disabled={submitDisabled}
+              onClick={handleReconcileTransaction}
             >
-              Match
-            </Button>
-
-            <Button onClick={handleCancelBtnClick}>Cancel</Button>
-          </Group>
-        </Box>
+              Add Reconcile Transaction +
+            </AnchorButton>
+          )}
+          <Text
+            style={{
+              fontSize: 14,
+              marginLeft: 'auto',
+              color: isDarkMode ? 'var(--color-light-gray1)' : '#404854',
+            }}
+            tagName="span"
+          >
+            Pending <FormatNumber value={totalPending} currency={'USD'} />
+          </Text>
+        </Group>
       </Box>
-    );
-  },
-);
+
+      <Box className={styles.footerActions}>
+        <Group spacing={10}>
+          <Button
+            intent={Intent.PRIMARY}
+            style={{ minWidth: 85 }}
+            onClick={handleSubmitBtnClick}
+            loading={isSubmitting}
+            disabled={submitDisabled}
+          >
+            Match
+          </Button>
+
+          <Button onClick={handleCancelBtnClick}>Cancel</Button>
+        </Group>
+      </Box>
+    </Box>
+  );
+});
 
 MatchTransactionFooter.displayName = 'MatchTransactionFooter';