feat: style the banking service

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

@@ -20,4 +20,5 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
+  background-color: #fff;
 }

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx

@@ -106,6 +106,10 @@ const DashboardConstrantTable = styled(DataTable)`
     .thead {
       .th {
         background: #fff;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 13px;
       }
     }
 

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -120,6 +120,10 @@ const DashboardConstrantTable = styled(DataTable)`
     .thead {
       .th {
         background: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 13px;i
+        font-weight: 500;
       }
     }
 

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_utils.tsx

@@ -55,14 +55,17 @@ export function useUncategorizedTransactionsColumns() {
         Header: 'Date',
         accessor: 'formatted_date',
         width: 110,
+        textOverview: true,
       },
       {
         Header: 'Description',
         accessor: descriptionAccessor,
+        textOverview: true,
       },
       {
         Header: 'Payee',
         accessor: 'payee',
+        textOverview: true,
       },
       {
         Header: 'Recognize',
@@ -72,6 +75,7 @@ export function useUncategorizedTransactionsColumns() {
       {
         Header: 'Rule',
         accessor: 'bank_rule_name',
+        textOverview: true,
       },
       {
         Header: 'Deposit',

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx

@@ -1,11 +1,10 @@
 // @ts-nocheck
 import styled from 'styled-components';
-import { DrawerBody } from '@/components';
 import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
 import { CategorizeTransactionForm } from './CategorizeTransactionForm';
 import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
 
-export function CategorizeTransactionContent({}) {
+export function CategorizeTransactionContent() {
   const { uncategorizedTransactionId } = useCategorizeTransactionTabsBoot();
 
   return (
@@ -19,7 +18,8 @@ export function CategorizeTransactionContent({}) {
   );
 }
 
-const CategorizeTransactionDrawerBody = styled(DrawerBody)`
+const CategorizeTransactionDrawerBody = styled.div`
-  padding: 20px;
+  display: flex;
-  background-color: #fff;
+  flex-direction: column;
+  flex: 1 1 auto;
 `;

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionForm.tsx

@@ -63,18 +63,16 @@ function CategorizeTransactionFormRoot({
   };
 
   return (
-    <DivRoot>
+    <Formik
-      <Formik
+      validationSchema={CreateCategorizeTransactionSchema}
-        validationSchema={CreateCategorizeTransactionSchema}
+      initialValues={initialValues}
-        initialValues={initialValues}
+      onSubmit={handleFormSubmit}
-        onSubmit={handleFormSubmit}
+    >
-      >
+      <FormRoot>
-        <Form>
+        <CategorizeTransactionFormContent />
-          <CategorizeTransactionFormContent />
+        <CategorizeTransactionFormFooter />
-          <CategorizeTransactionFormFooter />
+      </FormRoot>
-        </Form>
+    </Formik>
-      </Formik>
-    </DivRoot>
   );
 }
 
@@ -82,7 +80,11 @@ export const CategorizeTransactionForm = compose(withBankingActions)(
   CategorizeTransactionFormRoot,
 );
 
-const DivRoot = styled.div`
+const FormRoot = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
   .bp4-form-group .bp4-form-content {
     flex: 1 0;
   }

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormContent.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FormGroup } from '@blueprintjs/core';
-import { FFormGroup, FSelect, } from '@/components';
+import { Box, FFormGroup, FSelect } from '@/components';
 import { getAddMoneyInOptions, getAddMoneyOutOptions } from '@/constants';
 import { useFormikContext } from 'formik';
 import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';
@@ -25,7 +25,7 @@ export function CategorizeTransactionFormContent() {
     : MoneyOutOptions;
 
   return (
-    <>
+    <Box style={{ flex: 1, margin: 20 }}>
       <FormGroup label={'Amount'} inline>
         <Title>{uncategorizedTransaction.formatted_amount}</Title>
       </FormGroup>
@@ -42,7 +42,7 @@ export function CategorizeTransactionFormContent() {
       </FFormGroup>
 
       <CategorizeTransactionFormSubContent />
-    </>
+    </Box>
   );
 }
 

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as R from 'ramda';
-import { Button, Classes, Intent } from '@blueprintjs/core';
+import { Button, Intent } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import styled from 'styled-components';
 import { Group } from '@/components';
@@ -18,26 +18,24 @@ function CategorizeTransactionFormFooterRoot({
 
   return (
     <Root>
-      <div className={Classes.DRAWER_FOOTER}>
+      <Group spacing={10}>
-        <Group spacing={10}>
+        <Button
-          <Button
+          intent={Intent.PRIMARY}
-            intent={Intent.PRIMARY}
+          style={{ minWidth: '85px' }}
-            style={{ minWidth: '75px' }}
+          loading={isSubmitting}
-            loading={isSubmitting}
+          type="submit"
-            type="submit"
+        >
-          >
+          Save
-            Save
+        </Button>
-          </Button>
 
-          <Button
+        <Button
-            disabled={isSubmitting}
+          disabled={isSubmitting}
-            onClick={handleClose}
+          onClick={handleClose}
-            style={{ minWidth: '75px' }}
+          style={{ minWidth: '75px' }}
-          >
+        >
-            Close
+          Close
-          </Button>
+        </Button>
-        </Group>
+      </Group>
-      </div>
     </Root>
   );
 }
@@ -47,9 +45,6 @@ export const CategorizeTransactionFormFooter = R.compose(withBankingActions)(
 );
 
 const Root = styled.div`
-  // position: absolute;
+  border-top: 1px solid #c7d5db;
-  // bottom: 0;
+  padding: 14px 20px;
-  // left: 0;
-  // right: 0;
-  // background: #fff;
 `;