Merge pull request #880 from bigcapitalhq/fix-dark-mode-bank-transaction-drawer

fix: darkmode bank transaction drawer

packages/webapp/src/components/Table/index.tsx

@@ -24,11 +24,19 @@ export const TD = styled.td`
 export const TRDarkSingleLine = styled(TR)`
   ${TD} {
     border-bottom: 1px solid #000;
+
+    .bp4-dark & {
+      border-bottom-color: var(--color-dark-gray5);
+    }
   }
 `;
 
 export const TRDarkDoubleLines = styled(TR)`
   ${TD} {
     border-bottom: 3px double #000;
+
+    .bp4-dark & {
+      border-bottom-color: var(--color-dark-gray5);
+    }
   }
 `;

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>

packages/webapp/src/style/components/Drawers/CashflowTransactionDrawer.scss

@@ -13,37 +13,6 @@
     }
   }
 
-  .table {
-    .thead .th {
-      background: transparent;
-      color: #222222;
-      border-bottom: 1px solid #000000;
-      border-top: 1px solid #000000;
-      padding: 0.5rem;
-    }
-
-    .tbody .tr .td {
-      background: transparent;
-      padding: 0.5rem 0.5rem;
-      border-bottom: 0;
-    }
-
-    .tbody .tr:last-child .td {
-      border-bottom: 1px solid #d2dce2;
-    }
-
-    .thead,
-    .tbody {
-      .tr .td,
-      .tr .th {
-        &.credit,
-        &.debit {
-          text-align: right;
-        }
-      }
-    }
-  }
-
   &__content {
     &-header {
       margin-bottom: 35px;
@@ -86,9 +55,17 @@
 
       &--subtotal {
         border-bottom: 1px solid #000;
+
+        .bp4-dark & {
+          border-bottom-color: var(--color-dark-gray5);
+        }
       }
       &--total {
         border-bottom: 3px double #000;
+
+        .bp4-dark & {
+          border-bottom-color: var(--color-dark-gray5);
+        }
       }
       &--subtotal,
       &--total {