From eebe98f43bb5882b8ab36400f9f6326d0573d6cb Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 6 Aug 2025 16:15:28 +0200 Subject: [PATCH] wip --- .../InventoryItemDetailsTable.tsx | 2 +- .../PaymentMadeFormFooterRight.tsx | 4 +- .../CreditNoteFormFooterRight.tsx | 4 +- .../EstimateForm/EstimateFormFooterRight.tsx | 4 +- .../SendMailViewPreviewTabs.tsx | 60 +++++++++---------- .../InvoiceForm/InvoiceFormFooterRight.tsx | 4 +- .../InvoiceForm/InvoiceFormHeader.module.scss | 7 ++- .../PaymentReceiveFormFootetRight.tsx | 4 +- .../ReceiptForm/ReceiptFormFooterRight.tsx | 4 +- .../src/style/components/BigAmount.scss | 2 +- 10 files changed, 54 insertions(+), 41 deletions(-) diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx index 41d16ea1c..b33e81db2 100644 --- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx +++ b/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 { diff --git a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx index a903889c5..ca1acb70e 100644 --- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx +++ b/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); `; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx index faffbcb04..a78515935 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx +++ b/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); `; diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx index 0ea997f55..e5ce71441 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx +++ b/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); `; diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx index ff1fd05d2..bfc775ec1 100644 --- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewTabs.tsx +++ b/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; - --x-color-tab-text: rgba(255, 255,255, 0.6); - - overflow: hidden; - flex: 1 1; - display: flex; - flex-direction: column; - - .bp4-tab-list { - padding: 0 20px; - background: var(--x-color-background); - border-bottom: 1px solid var(--x-color-border); - } - .bp4-tab { - line-height: 40px; - } - .bp4-tab:not([aria-selected='true']) { - color: var(--x-color-tab-text); - } - .bp4-tab-indicator-wrapper .bp4-tab-indicator { - height: 2px; - } - .bp4-tab-panel { - margin: 0; - overflow: auto; - } - `} + .bp4-tab-list { + padding: 0 20px; + background: var(--x-color-background); + border-bottom: 1px solid var(--x-color-border); + } + .bp4-tab { + line-height: 40px; + } + .bp4-tab:not([aria-selected='true']) { + color: var(--x-color-tab-text); + } + .bp4-tab-indicator-wrapper .bp4-tab-indicator { + height: 2px; + } + .bp4-tab-panel { + margin: 0; + overflow: auto; + } + `} > {children} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx index b22c66861..fa14c97cc 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx +++ b/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); `; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss index 6c0610e71..976efcfbd 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss +++ b/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); - --color-invoice-form-header-border: rgba(255, 255, 255, 0.1); - + :global(.bp4-dark) & { + --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); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx index b687401d1..2fc35ea22 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx +++ b/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); `; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx index d7a6e9d1e..c44b61793 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx +++ b/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); `; diff --git a/packages/webapp/src/style/components/BigAmount.scss b/packages/webapp/src/style/components/BigAmount.scss index 50eaab67f..2beb54fec 100644 --- a/packages/webapp/src/style/components/BigAmount.scss +++ b/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); }