fix: darkmode bank transaction drawer

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

@@ -31,13 +31,25 @@
 .asideContent{
   background: #F6F7F9;
   height: 335px;
+
+  :global(.bp4-dark) & {
+    background: var(--color-dark-gray2);
+  }
 }
 
 .asideRoot {
   flex: 1 1 0;
   box-shadow: 0 0 0 1px rgba(17,20,24,.1),0 1px 1px rgba(17,20,24,.2),0 2px 6px rgba(17,20,24,.2);
+
+  :global(.bp4-dark) & {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),0 1px 1px rgba(255, 255, 255, 0.2),0 2px 6px rgba(255, 255, 255, 0.2);
+  }
 }
 
 .asideFooter {
   background: #F6F7F9; 
+
+  :global(.bp4-dark) & {
+    background: var(--color-dark-gray2);
+  }
 }

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.tsx

@@ -5,6 +5,7 @@ import { CommercialDocEntriesTable } from '@/components';
 
 import { useCashflowTransactionColumns } from './utils';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { TableStyle } from '@/constants';
 
 /**
  * Cashflow transaction drawer table.
@@ -15,5 +16,11 @@ export default function CashflowTransactionDrawerTable() {
     cashflowTransaction: { transactions },
   } = useCashflowTransactionDrawerContext();
 
-  return <CommercialDocEntriesTable columns={columns} data={transactions} />;
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={transactions}
+      styleName={TableStyle.Constrant}
+    />
+  );
 }

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.tsx

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import { DrawerBody } from '@/components';
-
 import InvoiceDetail from './InvoiceDetail';
 import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
 

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -130,7 +130,8 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
           name={'payment_date'}
           {...momentFormatter('YYYY/MM/DD')}
           popoverProps={{ position: Position.BOTTOM, minimal: true }}
-          inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
+          inputProps={{ leftIcon: <Icon icon={'date-range'} /> }}
+          fill
           fastField
         />
       </FFormGroup>