wip

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx

@@ -61,7 +61,7 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
   --color-table-border: #ececec;
   --color-report-table-border: var(--color-dark-gray4);
   --color-table-total-border: #ddd;
-  --color-table-total-border: var(--color-dark-gray4);;
+  --color-table-total-border: var(--color-dark-gray4);
 
   .table {
     .tbody {

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

@@ -42,8 +42,10 @@ export function PaymentMadeFormFooterRight() {
 
 const PaymentMadeTotalLines = styled(TotalLines)`
   --x-color-text: #555;
-  --x-color-text: var(--color-light-gray4);
 
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
   width: 100%;
   color: var(--x-color-text);
 `;

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx

@@ -51,8 +51,10 @@ export function CreditNoteFormFooterRight() {
 
 const CreditNoteTotalLines = styled(TotalLines)`
   --x-color-text: #555555;
-  --x-color-text: var(--color-light-gray4);
 
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
   width: 100%;
   color: var(--x-color-text);
 `;

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx

@@ -43,8 +43,10 @@ export function EstimateFormFooterRight() {
 
 const EstimateTotalLines = styled(TotalLines)`
   --x-color-text: #555;
-  --x-color-text: var(--color-light-gray4);
 
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
   width: 100%;
   color: var(--x-color-text);
 `;

packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx

@@ -13,39 +13,39 @@ export function SendMailViewPreviewTabs({
       id={'preview'}
       defaultSelectedTabId={'payment-page'}
       className={css`
-          --x-color-background: var(--color-white);
+        --x-color-background: var(--color-white);
+        --x-color-border: #dcdcdd;
+        --x-color-tab-text: #5f6b7c;
+
+        .bp4-dark & {
           --x-color-background: var(--color-dark-gray2);
-
-          --x-color-border: #dcdcdd;
           --x-color-border: rgba(255, 255, 255, 0.2);
+          --x-color-tab-text: rgba(255, 255, 255, 0.6);
+        }
+        overflow: hidden;
+        flex: 1 1;
+        display: flex;
+        flex-direction: column;
 
-          --x-color-tab-text: #5f6b7c;
+        .bp4-tab-list {
-          --x-color-tab-text: rgba(255, 255,255, 0.6);
+          padding: 0 20px;
-
+          background: var(--x-color-background);
-          overflow: hidden;
+          border-bottom: 1px solid var(--x-color-border);
-          flex: 1 1;
+        }
-          display: flex;
+        .bp4-tab {
-          flex-direction: column;
+          line-height: 40px;
-
+        }
-          .bp4-tab-list {
+        .bp4-tab:not([aria-selected='true']) {
-            padding: 0 20px;
+          color: var(--x-color-tab-text);
-            background: var(--x-color-background);
+        }
-            border-bottom: 1px solid var(--x-color-border);
+        .bp4-tab-indicator-wrapper .bp4-tab-indicator {
-          }
+          height: 2px;
-          .bp4-tab {
+        }
-            line-height: 40px;
+        .bp4-tab-panel {
-          }
+          margin: 0;
-          .bp4-tab:not([aria-selected='true']) {
+          overflow: auto;
-            color: var(--x-color-tab-text);
+        }
-          }
+      `}
-          .bp4-tab-indicator-wrapper .bp4-tab-indicator {
-            height: 2px;
-          }
-          .bp4-tab-panel {
-            margin: 0;
-            overflow: auto;
-          }
-        `}
     >
       {children}
     </Tabs>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx

@@ -83,8 +83,10 @@ export function InvoiceFormFooterRight() {
 
 const InvoiceTotalLines = styled(TotalLines)`
   --x-color-text: #555;
-  --x-color-text: var(--color-light-gray4);
 
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
   width: 100%;
   color: var(--x-color-text);
 `;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss

@@ -2,9 +2,10 @@
   --color-invoice-form-header-background: #fff;
   --color-invoice-form-header-border: #d2dce2;
 
-  --color-invoice-form-header-background: var(--color-dark-gray1);
+  :global(.bp4-dark) & {
-  --color-invoice-form-header-border: rgba(255, 255, 255, 0.1);
+    --color-invoice-form-header-background: var(--color-dark-gray1);
-
+    --color-invoice-form-header-border: rgba(255, 255, 255, 0.1);
+  }    
   border-bottom: 1px solid var(--color-invoice-form-header-border);
   background-color: var(--color-invoice-form-header-background);
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx

@@ -41,8 +41,10 @@ export function PaymentReceiveFormFootetRight() {
 
 const PaymentReceiveTotalLines = styled(TotalLines)`
   --x-color-text: #555;
-  --x-color-text: var(--color-light-gray4);
 
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
   width: 100%;
   color: var(--x-color-text);
 `;

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx

@@ -67,8 +67,10 @@ export function ReceiptFormFooterRight() {
 
 const ReceiptTotalLines = styled(TotalLines)`
   --x-color-text: #555;
-  --x-color-text: var(--color-light-gray4);
 
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
   width: 100%;
   color: var(--x-color-text);
 `;

packages/webapp/src/style/components/BigAmount.scss

@@ -3,7 +3,7 @@
   --x-color-amount-text: #343463;
   --x-color-label-text: #5d6f90;
 
-  :global(.bp4-dark) & {
+  :global(.bp4-dark)w & {
     --x-color-label-text: var(--color-light-gray1);
     --x-color-amount-text: var(--color-light-gray2);
   }