fix: mathcing bank transaction styling

packages/webapp/src/components/AppShell/AppShell.module.scss

@@ -1,14 +1,22 @@
+:root {
+  --aside-topbar-offset: 60px;
+}
 
 .main{
   flex: 1 0;
+  height: inherit;  
+  overflow: auto;
 }
 
 .aside{
   width: 500px;
   height: 100dvh;
   border-left: 1px solid rgba(17, 20, 24, 0.15);
+  height: inherit;
+  overflow: auto;
 }
 
 .root {
   display: flex;
+  height: calc(100dvh - var(--aside-topbar-offset));
 }

packages/webapp/src/components/Aside/Aside.module.scss

@@ -7,4 +7,5 @@
   min-height: 40px;
   padding: 5px 5px 5px 15px;
   z-index: 0;
+  font-weight: 600;
 }

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

@@ -1,14 +1,21 @@
 
+.root {
+  position: relative;
+  padding-bottom: 110px;
+}
 
 .transaction {
   
 }
 
 .matchBar{
-  padding: 12px 18px;
+  padding: 12px 14px;
   background: #fff;
   border-bottom: 1px solid #E1E2E9; 
-  border-top: 1px solid #E1E2E9; 
+  
+  &:not(:first-of-type) {
+    border-top: 1px solid #E1E2E9; 
+  }
 }
 
 .matchBarTitle {
@@ -18,14 +25,17 @@
 
 .footer {
   background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
 }
 
 .footerActions {
   padding: 14px 16px;
-  border-top: 1px solid #E1E2E9;
+  border-top: 1px solid #d8d9d9;
 }
 
 .footerTotal {
   padding: 8px 16px;
-  border: 1px solid #E1E2E9;
+  border-top: 1px solid #d8d9d9;
 }

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

@@ -3,20 +3,33 @@
   background: #fff;
   border-radius: 5px;
   border: 1px solid #D6DBE3;
-  padding: 12px 16px;
+  padding: 10px 16px;
   cursor: pointer;
 
   &.active{
     border-color: #88ABDB;
+    box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2);
   }
 
+  &:hover:not(.active){
+    border-color: #c0c0c0;
+  }
 }
 
-
 .checkbox:global(.bp4-control.bp4-checkbox){
   margin: 0;
 }
 .checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
   border-color: #CBCBCB;
 }
+.checkbox:global(.bp4-control.bp4-checkbox) :global .bp4-control-indicator{
+  margin-right: 4px;
+  margin-left: 0;
+  height: 16px;
+  width: 16px;
+}
 
+.label {
+  color: #10161A;
+  font-size: 15px;
+}

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

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { isEmpty } from 'lodash';
+import * as R from 'ramda';
 import { AnchorButton, Button, Intent, Tag, Text } from '@blueprintjs/core';
 import { AppToaster, Box, Group, Stack } from '@/components';
 import {
@@ -12,6 +13,10 @@ import { FastField, FastFieldProps, Form, Formik } from 'formik';
 import { useMatchTransaction } from '@/hooks/query/bank-rules';
 import { MatchingTransactionFormValues } from './types';
 import { transformToReq } from './utils';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../withBankingActions';
 
 const initialValues = {
   matched: {},
@@ -60,7 +65,7 @@ export function MatchingBankTransaction() {
 
 function MatchingBankTransactionContent() {
   return (
-    <Box>
+    <Box className={styles.root}>
       <PerfectMatchingTransactions />
       <GoodMatchingTransactions />
       <MatchTransactionFooter />
@@ -84,13 +89,13 @@ function PerfectMatchingTransactions() {
       <Box className={styles.matchBar}>
         <Group spacing={6}>
           <h2 className={styles.matchBarTitle}>Perfect Matchines</h2>
-          <Tag minimal intent={Intent.SUCCESS}>
+          <Tag minimal round intent={Intent.SUCCESS}>
             2
           </Tag>
         </Group>
       </Box>
 
-      <Stack spacing={9} style={{ padding: 15 }}>
+      <Stack spacing={9} style={{ padding: '12px 15px' }}>
         {matchingTransactions.map((match, index) => (
           <MatchTransactionField
             key={index}
@@ -127,7 +132,7 @@ function GoodMatchingTransactions() {
         </Stack>
       </Box>
 
-      <Stack spacing={9} style={{ padding: 15 }}>
+      <Stack spacing={9} style={{ padding: '12px 15px' }}>
         {matchingTransactions.map((match, index) => (
           <MatchTransaction
             key={index}
@@ -171,34 +176,44 @@ export function CategorizeBankTransactionContent() {
   return <h1>Categorizing</h1>;
 }
 
+interface MatchTransctionFooterProps extends WithBankingActionsProps {}
+
 /**
  * Renders the match transactions footer.
  * @returns {React.ReactNode}
  */
-function MatchTransactionFooter() {
+const MatchTransactionFooter = R.compose(withBankingActions)(
-  return (
+  ({ closeMatchingTransactionAside }: MatchTransctionFooterProps) => {
-    <Box className={styles.footer}>
+    const handleCancelBtnClick = () => {
-      <Box className={styles.footerTotal}>
+      closeMatchingTransactionAside();
-        <Group position={'apart'}>
+    };
-          <AnchorButton small minimal intent={Intent.PRIMARY}>
+    return (
-            Add Reconcile Transaction +
+      <Box className={styles.footer}>
-          </AnchorButton>
+        <Box className={styles.footerTotal}>
-          <Text style={{ fontSize: 13 }}>Pending $10,000</Text>
+          <Group position={'apart'}>
-        </Group>
+            <AnchorButton small minimal intent={Intent.PRIMARY}>
-      </Box>
+              Add Reconcile Transaction +
+            </AnchorButton>
+            <Text style={{ fontSize: 13 }}>Pending $10,000</Text>
+          </Group>
+        </Box>
 
-      <Box className={styles.footerActions}>
+        <Box className={styles.footerActions}>
-        <Group spacing={10}>
+          <Group spacing={10}>
-          <Button
+            <Button
-            intent={Intent.PRIMARY}
+              intent={Intent.PRIMARY}
-            style={{ minWidth: 85 }}
+              style={{ minWidth: 85 }}
-            type="submit"
+              type="submit"
-          >
+            >
-            Match
+              Match
-          </Button>
+            </Button>
-          <Button>Cancel</Button>
+
-        </Group>
+            <Button onClick={handleCancelBtnClick}>Cancel</Button>
+          </Group>
+        </Box>
       </Box>
-    </Box>
+    );
-  );
+  },
-}
+);
+
+MatchTransactionFooter.displayName = 'MatchTransactionFooter';