diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
index bce3d1991..a4b356f42 100644
--- a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx
@@ -13,10 +13,10 @@ import {
Position,
} from '@blueprintjs/core';
import {
- DashboardActionsBar,
Icon,
Can,
FormattedMessage as T,
+ DrawerActionsBar,
} from '@/components';
import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
@@ -72,7 +72,7 @@ function AccountDrawerActionBar({
};
return (
-
+
)}
-
+
);
}
export default compose(
diff --git a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
index edaf98c3b..4323be445 100644
--- a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
@@ -27,6 +27,7 @@ import {
Can,
Icon,
FormattedMessage as T,
+ DrawerActionsBar,
} from '@/components';
import { CustomerMoreMenuItem } from './utils';
import {
@@ -91,7 +92,7 @@ function CustomerDetailsActionsBar({
};
return (
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
index 086df3472..30fcea77d 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.tsx
@@ -42,4 +42,6 @@ export default function InvoiceGLEntriesTable() {
const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)``;
-const InvoiceGLEntriesRoot = styled(Card)``;
+const InvoiceGLEntriesRoot = styled(Card)`
+
+`;
diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
index 6303e707c..73f870ca6 100644
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
@@ -16,10 +16,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import {
- DashboardActionsBar,
Icon,
FormattedMessage as T,
Can,
+ DrawerActionsBar,
} from '@/components';
import { ItemDetailActionsMoreBtn } from './ItemDetailActionsMoreBtn';
@@ -53,7 +53,7 @@ function ItemDetailActionsBar({
};
return (
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
index 8e70ff369..9607b73db 100644
--- a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
@@ -17,10 +17,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDrawerActions from '@/containers/Drawer/withDrawerActions';
import {
- DashboardActionsBar,
Can,
Icon,
FormattedMessage as T,
+ DrawerActionsBar,
} from '@/components';
import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
import { compose } from '@/utils';
@@ -52,7 +52,7 @@ function PaymentMadeDetailActionsBar({
};
return (
-
+
+
-
+
);
}
diff --git a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
index d6839dab3..581df1d29 100644
--- a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
@@ -24,8 +24,8 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
import {
Can,
Icon,
- DashboardActionsBar,
FormattedMessage as T,
+ DrawerActionsBar,
} from '@/components';
import { VendorMoreMenuItem } from './utils';
import {
@@ -80,7 +80,7 @@ function VendorDetailsActionsBar({
};
return (
-
+
-
+
);
}
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
index 8fd643511..e6f04a463 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss
@@ -1,5 +1,5 @@
.root {
- background: #fff;
+ background: var(--color-element-customize-background);
}
.mainFields{
@@ -15,7 +15,7 @@
.footerActions{
padding: 10px 16px;
- border-top: 1px solid #d9d9d9;
+ border-top: 1px solid var(--color-element-customize-divider);
flex-flow: row-reverse;
}
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
index 9d4dd1f36..10c697bd1 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss
@@ -2,13 +2,13 @@
.root {
align-items: center;
border-radius: 0;
- box-shadow: 0 1px 0 rgba(17, 20, 24, .15);
+ box-shadow: 0 1px 0 var(--color-element-customize-divider);
display: flex;
flex: 0 0 auto;
min-height: 55px;
padding: 5px 5px 5px 20px;
position: relative;
- background-color: #fff;
+ background-color: var(--color-element-customize-header-background);
z-index: 1;
}
@@ -16,5 +16,5 @@
margin: 0;
font-size: 20px;
font-weight: 500;
- color: #666;
+ color: var(--color-element-customize-header-title-text);
}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
index 1800ca78f..417e0e487 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx
@@ -1,6 +1,7 @@
import { Button, Classes } from '@blueprintjs/core';
import { Group, Icon } from '@/components';
import styles from './ElementCustomizeHeader.module.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
interface ElementCustomizeHeaderProps {
label?: string;
@@ -15,6 +16,8 @@ export function ElementCustomizeHeader({
onClose,
children,
}: ElementCustomizeHeaderProps) {
+ const isDarkmode = useIsDarkMode();
+
const handleClose = () => {
onClose && onClose();
};
@@ -25,7 +28,7 @@ export function ElementCustomizeHeader({
}
+ icon={
}
minimal={true}
onClick={handleClose}
style={{ marginLeft: 'auto' }}
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
index 975d820b0..8abe06730 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx
@@ -15,7 +15,11 @@ function ElementCustomizePreviewRoot({ closeDrawer }) {
return (
+
{PaperTemplate}
);
diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
index 73229611d..ffb3e0175 100644
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss
@@ -8,7 +8,7 @@
.content{
padding: 5px;
flex: 1;
- border-right: 1px solid #E1E1E1;
+ border-right: 1px solid var(--color-element-customize-divider);
}
.tabsList{
diff --git a/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss b/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
index dd74e7b72..81053a047 100644
--- a/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
+++ b/packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.module.scss
@@ -1,10 +1,16 @@
.root {
+ --x-border-color: #E1E1E1;
+ --x-border-color: rgba(225, 225, 225, 0.15);
+ --x-color-placeholder-text: #738091;
+ --x-color-placeholder-text: rgba(225, 225, 225, 0.65);
+
min-height: 120px;
height: 120px;
padding: 10px;
- border: 1px solid;
display: flex;
- border: 1px solid #E1E1E1;
+ border-style: solid;
+ border-color: var(--x-border-color);
+ border-width: 1px;;
position: relative;
display: flex;
justify-content: center;
@@ -25,7 +31,7 @@
}
.contentPrePreview {
- color: #738091;
+ color: var(--x-color-placeholder-text);
font-size: 13px;
height: 100%;
justify-content: center;
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
index 0eb41999e..c162f653b 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
@@ -8,10 +8,7 @@ import {
TotalLineBorderStyle,
TotalLineTextStyle,
} from '@/components';
-import {
- useExpenseSubtotalFormatted,
- useExpenseTotalFormatted,
-} from './utils';
+import { useExpenseSubtotalFormatted, useExpenseTotalFormatted } from './utils';
export function ExpenseFormFooterRight() {
const totalFormatted = useExpenseTotalFormatted();
@@ -34,6 +31,9 @@ export function ExpenseFormFooterRight() {
}
const ExpensesTotalLines = styled(TotalLines)`
+ --x-color-text: #555555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
index b5c4ffb69..5ad0a7898 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
@@ -3,7 +3,11 @@ import React from 'react';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage } from 'formik';
-import { CustomersSelect, FInputGroup, FormattedMessage as T } from '@/components';
+import {
+ CustomersSelect,
+ FInputGroup,
+ FormattedMessage as T,
+} from '@/components';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import {
@@ -14,8 +18,8 @@ import {
} from '@/utils';
import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
import {
- CurrencySelectList,
FFormGroup,
+ FSelect,
AccountsSelect,
FieldRequiredHint,
Hint,
@@ -75,30 +79,24 @@ export default function ExpenseFormHeader() {
/>
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- className={classNames(
- 'form-group--select-list',
- 'form-group--currency',
- Classes.FILL,
- )}
- intent={inputIntent({ error, touched })}
- helperText={}
- inline={true}
- >
- {
- form.setFieldValue('currency_code', currencyItem.currency_code);
- }}
- defaultSelectText={value}
- />
-
- )}
-
+ }
+ className={classNames(Classes.FILL)}
+ inline={true}
+ fastField={true}
+ >
+
+
{/* ----------- Exchange rate ----------- */}
,
...restProps
}) {
-
const filterRenderer = (item, { handleClick, modifiers, query }) => {
return (
- {({ form: { setFieldValue }, field: { value } }) => (
-
- {
- setFieldValue('filterByOption', item.key);
- }}
- className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
- {...restProps}
- />
-
- )}
-
+
+
+
);
}
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
index 6566a2773..404fb3ef0 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
@@ -69,6 +69,14 @@ export default function GeneralLedgerTable({ companyName }) {
}
const GeneralLedgerDataTable = styled(ReportDataTable)`
+ --color-table-text-color: var(--color-light-gray1);
+ --color-table-total-text-color: #000;
+ --color-table-total-text-color: var(--color-light-gray4);
+ --color-table-border-color: #ececec;
+ --color-table-border-color: var(--color-dark-gray4);
+ --color-table-total-border-color: #ddd;
+ --color-table-total-border-color: var(--color-dark-gray4);
+
.tbody {
.tr .td {
padding-top: 0.2rem;
@@ -80,10 +88,10 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
}
}
.tr:not(.no-results) .td:not(:first-of-type) {
- border-left: 1px solid #ececec;
+ border-left: 1px solid var(--color-table-border-color);
}
.tr:last-child .td {
- border-bottom: 1px solid #ececec;
+ border-bottom: 1px solid var(--color-table-border-color);
}
.tr.row_type {
&--ACCOUNT {
@@ -100,7 +108,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
&--OPENING_BALANCE,
&--CLOSING_BALANCE {
.td {
- color: #000;
+ color: var(--color-table-total-text-color);
}
.date {
font-weight: 500;
@@ -118,7 +126,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
font-weight: 500;
}
.td {
- border-top: 1px solid #ddd;
+ border-top: 1px solid var(--color-table-total-border-color);
}
}
}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
index 16a65e16d..41d16ea1c 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
@@ -56,6 +56,13 @@ export function InventoryItemDetailsTable({
}
const InventoryItemDetailsDataTable = styled(ReportDataTable)`
+ --color-table-text: var(--color-light-gray1);
+ --color-table-total-text: var(--color-light-gray4);
+ --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);;
+
.table {
.tbody {
.tr .td {
@@ -64,20 +71,17 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
}
.tr:not(.no-results) .td:not(:first-of-type) {
- border-left: 1px solid #ececec;
+ border-left: 1px solid var(--color-report-table-border);
}
-
.tr:last-child .td {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid var(--color-table-total-border);
}
-
.tr.row_type {
&--ITEM {
.td {
&.transaction_type {
border-left-color: transparent;
}
-
&.date {
.cell-inner {
white-space: nowrap;
@@ -86,7 +90,7 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
}
}
&:not(:first-child).is-expanded .td {
- border-top: 1px solid #ddd;
+ border-top: 1px solid var(--color-table-total-border);
}
}
@@ -94,6 +98,10 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
&--OPENING_ENTRY,
&--CLOSING_ENTRY {
font-weight: 500;
+
+ .td {
+ color: var(--color-table-total-text);
+ }
}
&--ITEM {
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
index 104d66386..63196f0f0 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
@@ -65,14 +65,20 @@ export function JournalTable({ companyName }) {
}
const JournalDataTable = styled(ReportDataTable)`
+ --color-table-text-color: var(--color-light-gray1);
+ --color-table-total-text-color: var(--color-light-gray4);
+ --color-table-border-color: var(--color-dark-gray4);
+ --color-table-total-border-color: #dbdbdb;
+ --color-table-total-border-color: var(--color-table-border-color);
+
.table {
.tbody {
.tr:not(.no-results) .td {
padding: 0.3rem 0.4rem;
- color: #000;
+ color: var(--color-table-text-color);
border-bottom-color: transparent;
+ border-left: 1px solid var(--color-table-border-color);
min-height: 28px;
- border-left: 1px solid #ececec;
&:first-of-type {
border-left: 0;
@@ -80,11 +86,12 @@ const JournalDataTable = styled(ReportDataTable)`
}
.tr:not(.no-results):last-child {
.td {
- border-bottom: 1px solid #dbdbdb;
+ border-bottom: 1px solid var(--color-table-total-border-color);
}
}
.tr.row_type--TOTAL{
font-weight: 600;
+ color: var(--color-table-total-text-color);
}
.tr:not(.no-results) {
height: 28px;
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
index 7abef5dc4..79d6accf2 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
@@ -55,13 +55,16 @@ export default function ProfitLossSheetTable({
}
const ProfitLossDataTable = styled(ReportDataTable)`
+ --color-table-text-color: var(--color-light-gray1);
+ --color-table-total-text-color: var(--color-light-gray4);
+
.table {
.tbody .tr {
.td {
- border-bottom: 0;
+ border-bottom-width: 0;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
- color: #252A31;
+ color: var(--color-table-text-color);
}
&.is-expanded {
.td:not(.name) .cell-inner {
@@ -71,12 +74,14 @@ const ProfitLossDataTable = styled(ReportDataTable)`
&.row_type--TOTAL {
.td {
font-weight: 500;
- border-top: 1px solid #bbb;
- color: #000;
+ border-top-width: 1px;
+ border-top-style: solid;
+ color: var(--color-table-total-text-color);
}
}
&:last-of-type .td {
- border-bottom: 3px double #000;
+ border-bottom-width: 3px;
+ border-bottom-style: double;
}
}
}
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
index bbfb5260b..28659d404 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
@@ -52,16 +52,31 @@ const PurchasesByItemsSheet = styled(FinancialSheet)`
`;
const PurchasesByItemsDataTable = styled(ReportDataTable)`
+ --x-table-total-border-bottom-color: #000;
+ --x-table-total-border-top-color: #bbb;
+ --x-table-total-border-bottom-color: var(
+ --color-datatable-constrant-cell-border
+ );
+ --x-table-total-border-top-color: var(
+ --color-datatable-constrant-cell-border
+ );
+
.table {
.tbody {
.tr .td {
+ border-bottom-width: 0;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
.tr.row_type--TOTAL .td {
- border-top: 1px solid #bbb;
+ border-top-width: 1px;
font-weight: 500;
- border-bottom: 3px double #000;
+ border-top-width: 1px;
+ border-top-style: solid;
+ border-top-color: var(--x-table-total-border-top-color);
+ border-bottom-style: double;
+ border-bottom-width: 3px;
+ border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
index a3e439707..8e3d8cc32 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
@@ -52,17 +52,31 @@ const SalesByItemsSheet = styled(FinancialSheet)`
`;
const SalesByItemsDataTable = styled(ReportDataTable)`
+ --x-table-total-border-bottom-color: #000;
+ --x-table-total-border-top-color: #bbb;
+ --x-table-total-border-bottom-color: var(
+ --color-datatable-constrant-cell-border
+ );
+ --x-table-total-border-top-color: var(
+ --color-datatable-constrant-cell-border
+ );
+
.table {
.tbody {
.tr .td {
- border-bottom: 0;
+ border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--TOTAL .td {
- border-top: 1px solid #bbb;
+ border-top-width: 1px;
font-weight: 500;
- border-bottom: 3px double #000;
+ border-top-width: 1px;
+ border-top-style: solid;
+ border-top-color: var(--x-table-total-border-top-color);
+ border-bottom-style: double;
+ border-bottom-width: 3px;
+ border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}
diff --git a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
index 8abf29b35..cca387d4e 100644
--- a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
@@ -1,8 +1,12 @@
// @ts-nocheck
import React from 'react';
-import { FormGroup } from '@blueprintjs/core';
-import { FastField } from 'formik';
-import { Row, Col, ListSelect, FormattedMessage as T } from '@/components';
+import {
+ Row,
+ Col,
+ FSelect,
+ FormattedMessage as T,
+ FFormGroup,
+} from '@/components';
import { displayColumnsByOptions } from './constants';
/**
@@ -14,29 +18,22 @@ export default function SelectsListColumnsBy(props) {
return (
-
- {({ form, field: { value }, meta: { error, touched } }) => (
- }
- className="form-group-display-columns-by form-group--select-list bp4-fill"
- inline={false}
- {...formGroupProps}
- >
- {
- form.setFieldValue('displayColumnsType', item.key);
- }}
- popoverProps={{ minimal: true }}
- {...selectListProps}
- />
-
- )}
-
+ }
+ inline={false}
+ {...formGroupProps}
+ >
+
+
);
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
index d3c630bb5..dff5a9f4f 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
@@ -48,20 +48,24 @@ export default function TrialBalanceSheetTable({ companyName }) {
}
const TrialBalanceDataTable = styled(ReportDataTable)`
+ --color-table-text-color: var(--color-light-gray1);
+ --color-table-total-text-color: var(--color-light-gray4);
+
.table {
.tbody {
.tr .td {
- border-bottom: 0;
+ border-bottom-width: 0;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
- }
- .balance.td {
- border-top-color: #000;
+ color: var(--color-table-text-color);
}
.tr.row_type--TOTAL .td {
- border-top: 1px solid #bbb;
font-weight: 500;
- border-bottom: 3px double #000;
+ color: var(--color-table-total-text-color);
+ border-top-width: 1px;
+ border-top-style: solid;
+ border-bottom-width: 3px;
+ border-bottom-style: double;
}
}
}
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
index dc2ac5561..0c7a6e069 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
@@ -44,21 +44,34 @@ export default function VendorsBalanceSummaryTable({
const VendorBalanceFinancialSheet = styled(FinancialSheet)``;
const VendorBalanceDataTable = styled(ReportDataTable)`
+ --x-table-total-border-bottom-color: #333;
+ --x-table-total-border-top-color: #bbb;
+ --x-table-total-border-bottom-color: var(
+ --color-datatable-constrant-cell-border
+ );
+ --x-table-total-border-top-color: var(
+ --color-datatable-constrant-cell-border
+ );
+
.table {
.tbody {
.tr:not(.no-results) {
.td {
- border-bottom: 0;
+ border-bottom-width: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
-
&.row_type--TOTAL {
- font-weight: 500;
-
.td {
- border-top: 1px solid #bbb;
- border-bottom: 3px double #333;
+ font-weight: 500;
+ border-top-width: 1px;
+ font-weight: 500;
+ border-top-width: 1px;
+ border-top-style: solid;
+ border-top-color: var(--x-table-total-border-top-color);
+ border-bottom-style: double;
+ border-bottom-width: 3px;
+ border-bottom-color: var(--x-table-total-border-bottom-color);
}
}
}
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
index 6131da6b1..35d0c4ea7 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
@@ -60,19 +60,23 @@ export default function VendorsTransactionsTable({
}
const VendorsTransactionsDataTable = styled(DataTable)`
+ --color-table-border-left-color: #ececec;
+ --color-table-customer-border-color: #ddd;
+ --color-table-border-left-color: var(--color-dark-gray4);
+ --color-table-customer-border-color: var(--color-dark-gray4);
+
.table {
.tbody {
.tr .td {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
- .tr:not(.no-results) .td {
- border-left: 1px solid #ececec;
+ .tr:not(.no-results) .td:not(:first-of-type) {
+ border-left: 1px solid var(--color-table-border-left-color);
}
.tr:last-child .td {
- border-bottom: 1px solid #e0e0e0;
+ border-bottom-width: 1px;
}
-
.tr.row_type {
&--VENDOR {
.td {
@@ -81,7 +85,7 @@ const VendorsTransactionsDataTable = styled(DataTable)`
}
}
&:not(:first-child).is-expanded .td {
- border-top: 1px solid #ddd;
+ border-top: 1px solid var(--color-table-customer-border-color);
}
}
&--OPENING_BALANCE,
@@ -95,12 +99,12 @@ const VendorsTransactionsDataTable = styled(DataTable)`
}
}
&:not(:first-child).is-expanded .td {
- border-top: 1px solid #ddd;
+ border-top: 1px solid var(--color-table-customer-border-color);
}
}
&--VENDOR:last-child {
.td {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid var(--color-table-customer-border-color);
}
}
}
diff --git a/packages/webapp/src/containers/Import/ImportDropzone.module.css b/packages/webapp/src/containers/Import/ImportDropzone.module.css
index 1644fb37a..ca5008c96 100644
--- a/packages/webapp/src/containers/Import/ImportDropzone.module.css
+++ b/packages/webapp/src/containers/Import/ImportDropzone.module.css
@@ -1,32 +1,35 @@
.root {
-
+ --color-import-dropzone-title-text: #5F6B7C;
+ --color-import-dropzone-subtitle-text: #8F99A8;
+ --color-import-dropzone-hint-text: #8F99A8;
+
+ --color-import-dropzone-title-text: var(--color-light-gray2);
+ --color-import-dropzone-subtitle-text: var(--color-light-gray1);
+ --color-import-dropzone-hint-text: rgba(255, 255, 255, 0.4);
}
.title{
- color: #5F6B7C;
+ color: var(--color-import-dropzone-title-text);
font-weight: 600;
}
-
.iconWrap{
color: #8F99A8;
}
.subtitle {
- color: #8F99A8;
+ color: var(--color-import-dropzone-subtitle-text);
}
.dropzoneContent{
text-align: center;
margin: auto;
}
-
.buttons-wrap {
margin-top: 12px;
}
-
.dropzoneHint{
display: flex;
font-size: 12px;
margin-top: 6px;
- color: #8F99A8;
+ color: var(--color-import-dropzone-hint-text);
justify-content: space-between;
}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Import/ImportDropzone.tsx b/packages/webapp/src/containers/Import/ImportDropzone.tsx
index 43ff50b8c..d19a8b879 100644
--- a/packages/webapp/src/containers/Import/ImportDropzone.tsx
+++ b/packages/webapp/src/containers/Import/ImportDropzone.tsx
@@ -9,7 +9,7 @@ export function ImportDropzone() {
const { hideAlerts } = useAlertsManager();
return (
-
+
{({ form }) => (
+ />
);
}
diff --git a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
index 75a7172b9..89ad30966 100644
--- a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
+++ b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
@@ -1,4 +1,4 @@
-import { FCheckbox, Group } from '@/components';
+import { Group } from '@/components';
import { useUncontrolled } from '@/hooks/useUncontrolled';
import { Checkbox, Text } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
diff --git a/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx b/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
index 3fd8d2c1a..7d928192d 100644
--- a/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
+++ b/packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
import { Button, Classes, Intent, Text } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FFormGroup, Group, Stack } from '@/components';
@@ -5,6 +6,7 @@ import { FColorInput } from '@/components/Forms/FColorInput';
import { CompanyLogoUpload } from '@/containers/ElementCustomize/components/CompanyLogoUpload';
import { PreferencesBrandingFormValues } from './_types';
import styles from './PreferencesBranding.module.scss';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
export function PreferencesBrandingFormContent() {
return (
@@ -31,9 +33,15 @@ export function PreferencesBrandingFormContent() {
export function PreferencesBrandingFormFooter() {
const { isSubmitting } = useFormikContext();
+ const isDarkMode = useIsDarkMode();
return (
-
+
diff --git a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
index 649ffa557..315d4ab9d 100644
--- a/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesCreditNotesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
+ --x-color-border: #e0e7ea;
+ --x-color-border: rgba(255, 255, 255, 0.25);
+
padding-top: 16px;
- border-top: 1px solid #e0e7ea;
+ border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
index 7e17acc10..678627ddf 100644
--- a/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
+ --x-color-border: #e0e7ea;
+ --x-color-border: rgba(255, 255, 255, 0.25);
+
padding-top: 16px;
- border-top: 1px solid #e0e7ea;
+ border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
index a1949d5f0..3f8cee7c2 100644
--- a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
@@ -271,8 +271,11 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
+ --x-color-border: #e0e7ea;
+ --x-color-border: rgba(255, 255, 255, 0.15);
+
padding-top: 16px;
- border-top: 1px solid #e0e7ea;
+ border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
index 9237c58e8..c4e861e91 100644
--- a/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
+ --x-color-border: #e0e7ea;
+ --x-color-border: rgba(255, 255, 255, 0.25);
+
padding-top: 16px;
- border-top: 1px solid #e0e7ea;
+ border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {
diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
index 6f44ba44d..2b380aa15 100644
--- a/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
+++ b/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
@@ -24,11 +24,13 @@ import {
import { DRAWERS } from '@/constants/drawers';
import { MoreIcon } from '@/icons/More';
import { STRIPE_PRICING_LINK } from './constants';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
export function StripePaymentMethod() {
const { openDialog } = useDialogActions();
const { openDrawer } = useDrawerActions();
const { openAlert } = useAlertActions();
+ const isDarkMode = useIsDarkMode();
const { paymentMethodsState } = usePaymentMethodsBoot();
const stripeState = paymentMethodsState?.stripe;
@@ -63,8 +65,9 @@ export function StripePaymentMethod() {
-
-
+
{isStripeEnabled && (
diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
index 0fa2d7511..b1bc38352 100644
--- a/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
+++ b/packages/webapp/src/containers/Preferences/PaymentMethods/dialogs/StripePreSetupDialog/StripePreSetupDialogContent.tsx
@@ -92,5 +92,5 @@ const PaymentFeatureIcon = styled('span')`
position: absolute;
left: 12px;
top: 2px;
- color: #0052cc;
+ color: var(--color-primary);
`;
diff --git a/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx b/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
index 25e8b5eb1..34304aa83 100644
--- a/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
+++ b/packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx
@@ -1,15 +1,18 @@
// @ts-nocheck
+import { useIsDarkMode } from '@/hooks/useDarkMode';
import ContentLoader from 'react-content-loader';
export default function PreferencesPageLoader(props) {
+ const isDarkmode = useIsDarkMode();
+
return (
diff --git a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
index 42836de51..b72673a5d 100644
--- a/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx
@@ -60,8 +60,11 @@ export function PreferencesReceiptsForm({ isSubmitting }) {
}
const CardFooterActions = styled.div`
+ --x-color-border: #e0e7ea;
+ --x-color-border: rgba(255, 255, 255, 0.25);
+
padding-top: 16px;
- border-top: 1px solid #e0e7ea;
+ border-top: 1px solid var(--x-color-border);
margin-top: 30px;
.bp4-button {
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx
index 293e63818..caf5e611c 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx
@@ -79,6 +79,9 @@ export function BillFormFooterRight() {
}
const BillTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
index 5448139b3..33b1da575 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx
@@ -46,6 +46,9 @@ export function VendorCreditNoteFormFooterRight() {
}
const VendorCreditNoteTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
index 5f1de27df..a903889c5 100644
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormFooterRight.tsx
@@ -41,6 +41,9 @@ export function PaymentMadeFormFooterRight() {
}
const PaymentMadeTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ 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 e6b381283..faffbcb04 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterRight.tsx
@@ -50,6 +50,9 @@ export function CreditNoteFormFooterRight() {
}
const CreditNoteTotalLines = styled(TotalLines)`
+ --x-color-text: #555555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
index 9a3f450e1..115417b0d 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
@@ -4,19 +4,30 @@ import intl from 'react-intl-universal';
import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
import { Group, PageFormBigNumber } from '@/components';
import { useCreditNoteTotalFormatted } from './utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Credit note header.
*/
function CreditNoteFormHeader() {
+ const isDarkMode = useIsDarkMode();
+
return (
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
index dcc117900..6652ce3ae 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
@@ -37,7 +37,7 @@ import {
} from './utils';
import { PageForm } from '@/components/PageForm';
-/**6
+/**
* Estimate form.
*/
function EstimateForm({
@@ -70,18 +70,18 @@ function EstimateForm({
...(!isEmpty(estimate)
? { ...transformToEditForm(estimate) }
: {
- ...defaultEstimate,
- // If the auto-increment mode is enabled, take the next estimate
- // number from the settings.
- ...(estimateAutoIncrementMode && {
- estimate_number: estimateNumber,
- }),
- entries: orderingLinesIndexes(defaultEstimate.entries),
- currency_code: base_currency,
- terms_conditions: defaultTo(estimateTermsConditions, ''),
- note: defaultTo(estimateCustomerNotes, ''),
- pdf_template_id: saleEstimateState?.defaultTemplateId,
+ ...defaultEstimate,
+ // If the auto-increment mode is enabled, take the next estimate
+ // number from the settings.
+ ...(estimateAutoIncrementMode && {
+ estimate_number: estimateNumber,
}),
+ entries: orderingLinesIndexes(defaultEstimate.entries),
+ currency_code: base_currency,
+ terms_conditions: defaultTo(estimateTermsConditions, ''),
+ note: defaultTo(estimateCustomerNotes, ''),
+ pdf_template_id: saleEstimateState?.defaultTemplateId,
+ }),
};
// Handles form submit.
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
index c3ff4d13d..0ea997f55 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterRight.tsx
@@ -42,6 +42,9 @@ export function EstimateFormFooterRight() {
}
const EstimateTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
index a8d924784..1a622a2c7 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
@@ -5,16 +5,27 @@ import intl from 'react-intl-universal';
import EstimateFormHeaderFields from './EstimateFormHeaderFields';
import { Group, PageFormBigNumber } from '@/components';
import { useEstimateTotalFormatted } from './utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
// Estimate form top header.
function EstimateFormHeader() {
+ const isDarkMode = useIsDarkMode();
+
return (
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
index 6cd0672b8..fffa42e10 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx
@@ -7,6 +7,7 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useDrawerActions } from '@/hooks/state';
import { useSendEstimateFormatArgsOptions } from './hooks';
import { useSendMailItems } from '../SendMailViewDrawer/hooks';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
export function EstimateSendMailFields() {
@@ -41,6 +42,7 @@ function EstimateSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
+ const isDarkmode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -50,7 +52,9 @@ function EstimateSendMailFooter() {
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
index 98a9c6584..cf701411a 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewHeader.tsx
@@ -3,6 +3,7 @@ import { x } from '@xstyled/emotion';
import { Group, Icon } from '@/components';
import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useDrawerActions } from '@/hooks/state';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
interface SendMailViewHeaderProps {
label?: string;
@@ -16,6 +17,7 @@ export function SendMailViewHeader({
}: SendMailViewHeaderProps) {
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
+ const isDarkmode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -24,14 +26,19 @@ export function SendMailViewHeader({
{label && (
-
+
{label}
)}
@@ -39,7 +46,7 @@ export function SendMailViewHeader({
}
+ icon={}
minimal={true}
onClick={handleClose}
style={{ marginLeft: 'auto' }}
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
index 4615f11fc..c7b2eb479 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewLayout.tsx
@@ -1,4 +1,5 @@
import { Group, Stack } from '@/components';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
import React from 'react';
interface SendMailViewLayoutProps {
@@ -12,23 +13,32 @@ export function SendMailViewLayout({
fields,
preview,
}: SendMailViewLayoutProps) {
+ const isDarkMode = useIsDarkMode();
+
return (
{header}
{fields}
-
+
{preview}
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
index c9df847d7..ad9d6e420 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewMessageField.tsx
@@ -7,6 +7,7 @@ import { FormGroupProps, TextAreaProps } from '@blueprintjs-formik/core';
import { css } from '@emotion/css';
import { FFormGroup, FSelect, FTextArea, Group, Stack } from '@/components';
import { InvoiceSendMailFormValues } from '../../Invoices/InvoiceSendMailDrawer/_types';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
interface SendMailViewMessageFieldProps {
argsOptions?: Array;
@@ -22,6 +23,7 @@ export function SendMailViewMessageField({
}: SendMailViewMessageFieldProps) {
const textareaRef = useRef(null);
const { setFieldValue } = useFormikContext();
+ const isDarkmode = useIsDarkMode();
const handleTextareaChange = useCallback(
(item: SelectOptionProps) => {
@@ -58,7 +60,7 @@ export function SendMailViewMessageField({
diff --git a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
index c33c9fb68..51a4c1ee1 100644
--- a/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/SendMailViewDrawer/SendMailViewPreviewHeader.tsx
@@ -1,6 +1,7 @@
import { useMemo } from 'react';
import { x } from '@xstyled/emotion';
import { Box, Group, Stack } from '@/components';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
interface SendViewPreviewHeaderProps {
companyName?: string;
@@ -22,11 +23,14 @@ export function SendViewPreviewHeader({
[from],
);
const formattedToAddresses = useMemo(() => formatAddresses(to || []), [to]);
+ const isDarkmode = useIsDarkMode();
return (
- Set your company logo and branding colors to be automatically applied to your invoices.
+ Set your company logo and branding colors to be automatically applied
+ to your invoices.
@@ -106,15 +108,7 @@ function InvoiceCustomizePaymentManage() {
};
return (
-
+
Accept payment methods
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
index 7fddc6a48..cd583a3f1 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx
@@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import { Tabs, TabsProps } from '@blueprintjs/core';
-interface InvoiceCustomizeTabsProps extends TabsProps {}
+interface InvoiceCustomizeTabsProps extends TabsProps { }
export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
return (
@@ -14,14 +14,14 @@ export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
.bp4-tab-list {
padding: 0 20px;
- background: #fff;
- border-bottom: 1px solid #dcdcdd;
+ background: var(--color-element-customize-header-tabs-background);
+ border-bottom: 1px solid var(--color-element-customize-divider);
}
.bp4-tab {
line-height: 40px;
}
.bp4-tab:not([aria-selected='true']) {
- color: #5f6b7c;
+ color: var(--color-ekement-customize-header-tabs-text);
}
.bp4-tab-indicator-wrapper .bp4-tab-indicator {
height: 2px;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
index dd9ece2b3..6439743be 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/Overlay.module.scss
@@ -2,10 +2,14 @@
.root {
position: relative;
+
+ &.visible {
+ opacity: 0.4;
- &.visible::before{
- background: rgba(255, 255, 255, 0.75);
- z-index: 2;
+ &::before {
+ background: transparent;
+ z-index: 2;
+ }
}
&::before{
content: "";
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
index 36f533909..f0507cc70 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
@@ -7,6 +7,7 @@ import {
FInputGroup,
TotalLinePrimitive,
} from '@/components';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
const inputGroupCss = css`
& .bp4-input {
@@ -26,12 +27,19 @@ interface AdjustmentTotalLineProps {
export function AdjustmentTotalLine({
adjustmentAmount,
}: AdjustmentTotalLineProps) {
+ const isDarkMode = useIsDarkMode();
+
return (
{adjustmentAmount}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
index a2a1d84dc..da5d09127 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
@@ -8,6 +8,7 @@ import {
TotalLinePrimitive,
} from '@/components';
import { Button } from '@blueprintjs/core';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
const inputGroupCss = css`
& .bp4-input {
@@ -48,9 +49,18 @@ export function DiscountTotalLine({
{ text: '%', value: 'percentage', label: 'Percentage' },
];
+ const isDarkMode = useIsDarkMode();
+
return (
-
+
{discountAmount}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
index 5038c081a..73e94a073 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
@@ -23,12 +23,14 @@ import {
import { PageForm } from '@/components/PageForm';
import { MoreIcon } from '@/icons/More';
import { DRAWERS } from '@/constants/drawers';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Invoice floating actions bar.
*/
export default function InvoiceFloatingActions() {
const history = useHistory();
+ const isDarkMode = useIsDarkMode();
const { openDrawer } = useDrawerActions();
// Formik context.
@@ -245,7 +247,7 @@ export default function InvoiceFloatingActions() {
}
>
- } />
+ } />
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
index 52a24805f..b22c66861 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx
@@ -82,6 +82,9 @@ export function InvoiceFormFooterRight() {
}
const InvoiceTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ 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
new file mode 100644
index 000000000..6c0610e71
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.module.scss
@@ -0,0 +1,10 @@
+.root {
+ --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);
+
+ 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/Invoices/InvoiceForm/InvoiceFormHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
index ae63a1012..2295241f4 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
import { Group, PageFormBigNumber } from '@/components';
import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
import { useInvoiceTotalFormatted } from './utils';
+import styles from './InvoiceFormHeader.module.scss';
/**
* Invoice form header section.
@@ -13,9 +14,8 @@ function InvoiceFormHeader() {
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
index 86863e1a1..a9c0fa4f2 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
@@ -6,6 +6,7 @@ import { useDrawerActions } from '@/hooks/state';
import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/SendMailViewToAddressField';
import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
export function InvoiceSendMailFields() {
const items = useInvoiceMailItems();
@@ -39,6 +40,7 @@ function InvoiceSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
+ const isDarkMode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -48,7 +50,9 @@ function InvoiceSendMailFooter() {
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
index 7c0541328..f6e99610d 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
@@ -3,17 +3,19 @@ import { x } from '@xstyled/emotion';
import { Box, Group, Stack } from '@/components';
import { useSendInvoiceMailForm, useSendInvoiceMailSubject } from './_hooks';
import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
export function InvoiceSendMailHeaderPreview() {
const mailSubject = useSendInvoiceMailSubject();
const { invoiceMailState } = useInvoiceSendMailBoot();
const toAddresses = useMailHeaderToAddresses();
const fromAddresses = useMailHeaderFromAddresses();
+ const isDarkmode = useIsDarkMode();
return (
{invoiceMailState?.companyName}
- {fromAddresses}
+ {fromAddresses}
-
+
Send to: {invoiceMailState?.customerName} {toAddresses};
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
index 2cee6c9f7..b687401d1 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx
@@ -40,6 +40,9 @@ export function PaymentReceiveFormFootetRight() {
}
const PaymentReceiveTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
index d0596564f..aad641087 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
@@ -7,18 +7,29 @@ import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Payment receive form header.
*/
function PaymentReceiveFormHeader() {
+ const isDarkMode = useIsDarkMode();
+
return (
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
index 00b77ac5e..d6f058f75 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
@@ -1,5 +1,5 @@
// @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
import { Position, ControlGroup } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import * as R from 'ramda';
@@ -23,77 +23,72 @@ export const PaymentReceivePaymentNoField = R.compose(
paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
})),
withDialogActions,
-)(
- ({
- // #withDialogActions
- openDialog,
+)(({
+ // #withDialogActions
+ openDialog,
- // #withSettings
- paymentReceiveAutoIncrement,
- }) => {
- const { values, setFieldValue } = useFormikContext();
+ // #withSettings
+ paymentReceiveAutoIncrement,
+}) => {
+ const { values, setFieldValue } = useFormikContext();
- // Handle click open payment receive number dialog.
- const handleClickOpenDialog = () => {
- openDialog('payment-receive-number-form');
- };
- // Handle payment number field blur.
- const handlePaymentNoBlur = (event) => {
- const newValue = event.target.value;
+ // Handle click open payment receive number dialog.
+ const handleClickOpenDialog = () => {
+ openDialog('payment-receive-number-form');
+ };
+ // Handle payment number field blur.
+ const handlePaymentNoBlur = (event) => {
+ const newValue = event.target.value;
- // Show the confirmation dialog if the value has changed and auto-increment
- // mode is enabled.
- if (
- values.payment_receive_no !== newValue &&
- paymentReceiveAutoIncrement
- ) {
- openDialog('payment-receive-number-form', {
- initialFormValues: {
- onceManualNumber: newValue,
- incrementMode: 'manual-transaction',
- },
- });
- }
- // Setting the payment number to the form will be manually in case
- // auto-increment is disable.
- if (!paymentReceiveAutoIncrement) {
- setFieldValue('payment_receive_no', newValue);
- setFieldValue('payment_receive_no_manually', newValue);
- }
- };
- return (
- }
- inline={true}
- labelInfo={}
- >
-
- {}}
- />
- ,
- }}
- tooltip={true}
- tooltipProps={{
- content: (
-
- ),
- position: Position.BOTTOM_LEFT,
- }}
- />
-
-
- );
- },
-);
+ // Show the confirmation dialog if the value has changed and auto-increment
+ // mode is enabled.
+ if (values.payment_receive_no !== newValue && paymentReceiveAutoIncrement) {
+ openDialog('payment-receive-number-form', {
+ initialFormValues: {
+ onceManualNumber: newValue,
+ incrementMode: 'manual-transaction',
+ },
+ });
+ }
+ // Setting the payment number to the form will be manually in case
+ // auto-increment is disable.
+ if (!paymentReceiveAutoIncrement) {
+ setFieldValue('payment_receive_no', newValue);
+ setFieldValue('payment_receive_no_manually', newValue);
+ }
+ };
+ return (
+ }
+ inline={true}
+ labelInfo={}
+ >
+
+ {}}
+ />
+ ,
+ }}
+ tooltip={true}
+ tooltipProps={{
+ content: (
+
+ ),
+ position: Position.BOTTOM_LEFT,
+ }}
+ />
+
+
+ );
+});
PaymentReceivePaymentNoField.displayName = 'PaymentReceivePaymentNoField';
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
index 8c442e556..440757512 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx
@@ -8,6 +8,7 @@ import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/S
import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
import { usePaymentReceivedFormatArgsOptions, } from './_hooks';
import { useSendMailItems } from '../../Estimates/SendMailViewDrawer/hooks';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
export function PaymentReceivedSendMailFields() {
const argsOptions = usePaymentReceivedFormatArgsOptions();
@@ -41,6 +42,7 @@ function PaymentReceivedSendMailFooter() {
const { isSubmitting } = useFormikContext();
const { name } = useDrawerContext();
const { closeDrawer } = useDrawerActions();
+ const isDarkMode = useIsDarkMode();
const handleClose = () => {
closeDrawer(name);
@@ -50,7 +52,9 @@ function PaymentReceivedSendMailFooter() {
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
index e4b5043fe..d7a6e9d1e 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx
@@ -66,6 +66,9 @@ export function ReceiptFormFooterRight() {
}
const ReceiptTotalLines = styled(TotalLines)`
+ --x-color-text: #555;
+ --x-color-text: var(--color-light-gray4);
+
width: 100%;
- color: #555555;
+ color: var(--x-color-text);
`;
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
index 997e4f66f..809c5b985 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
import { Group, PageFormBigNumber } from '@/components';
import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
import { useReceiptTotalFormatted } from './utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
/**
* Receipt form header section.
@@ -12,14 +13,24 @@ function ReceiptFormHeader({
// #ownProps
onReceiptNumberChanged,
}) {
+ const isDarkMode = useIsDarkMode();
+
return (
{
closeDrawer(name);
@@ -49,7 +51,9 @@ function ReceiptSendMailFooter() {
diff --git a/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx b/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx
index 40dd1e736..68b3d707a 100644
--- a/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx
+++ b/packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx
@@ -102,6 +102,6 @@ const LockAllAlert = styled(Alert)`
background: transparent;
${AlertDesc} {
- color: #1f3255;
+ // color: #1f3255;
}
`;
diff --git a/packages/webapp/src/containers/TransactionsLocking/components.tsx b/packages/webapp/src/containers/TransactionsLocking/components.tsx
index f7ae32a54..1b52f6535 100644
--- a/packages/webapp/src/containers/TransactionsLocking/components.tsx
+++ b/packages/webapp/src/containers/TransactionsLocking/components.tsx
@@ -83,7 +83,7 @@ export function TransactionLockingSkeletonList() {
* Transactions locking skeleton item.
* @returns {React.JSX}
*/
-export const TransactionLockingItemSkeleton = ({}) => {
+export const TransactionLockingItemSkeleton = ({ }) => {
return (
@@ -329,16 +329,16 @@ const TransactionLockingWrapp = styled.div`
display: flex;
align-items: center;
border-radius: 6px;
- border: 1px solid #c4d2d7;
+ border: 1px solid var(--color-transaction-locking-item-border);
padding: 16px 18px;
margin-bottom: 25px;
- background: #fff;
+ background: var(--color-transaction-locking-item-background);
box-shadow: 0 4px 20px -5px rgb(0 8 36 / 5%);
${(props) =>
props.isEnabled &&
`
- border-color: #fc8483;
+ border-color: var(--color-transaction-locking-item-enabled-border);
${TransLockingIcon} {
color: #ef6d6d;
@@ -364,7 +364,7 @@ const TransLockingItemDesc = styled.p`
`;
const TransLockingIcon = styled.div`
- border: 1px solid #d2dde2;
+ border: 1px solid var(--color-transaction-locking-item-icon-border);
height: 45px;
width: 45px;
text-align: center;
diff --git a/packages/webapp/src/hooks/useDarkMode.ts b/packages/webapp/src/hooks/useDarkMode.ts
new file mode 100644
index 000000000..bc8787d10
--- /dev/null
+++ b/packages/webapp/src/hooks/useDarkMode.ts
@@ -0,0 +1,3 @@
+export const useIsDarkMode = () => {
+ return true;
+};
diff --git a/packages/webapp/src/icons/More.tsx b/packages/webapp/src/icons/More.tsx
index 25445daab..90b84ef98 100644
--- a/packages/webapp/src/icons/More.tsx
+++ b/packages/webapp/src/icons/More.tsx
@@ -18,9 +18,9 @@ export const MoreIcon: React.FC = ({ size = 16, ...props }) => (
{...props}
>
-
-
-
+
+
+
);
diff --git a/packages/webapp/src/icons/StripeLogo.tsx b/packages/webapp/src/icons/StripeLogo.tsx
index d8f5b8418..7f0e118f1 100644
--- a/packages/webapp/src/icons/StripeLogo.tsx
+++ b/packages/webapp/src/icons/StripeLogo.tsx
@@ -22,7 +22,7 @@ export const StripeLogo: React.FC = ({
fillRule="evenodd"
clipRule="evenodd"
d="M69.6155 15.5857C69.6155 10.7127 67.2309 6.86761 62.6732 6.86761C58.0963 6.86761 55.3271 10.7127 55.3271 15.5476C55.3271 21.2771 58.5963 24.1705 63.2886 24.1705C65.5771 24.1705 67.3078 23.6565 68.6155 22.9332V19.1262C67.3078 19.7734 65.8078 20.1731 63.904 20.1731C62.0386 20.1731 60.3848 19.5259 60.1732 17.2798H69.5771C69.5771 17.0323 69.6155 16.0425 69.6155 15.5857ZM60.1155 13.7773C60.1155 11.6264 61.4425 10.7317 62.654 10.7317C63.8271 10.7317 65.0771 11.6264 65.0771 13.7773H60.1155ZM47.904 6.86761C46.0194 6.86761 44.8078 7.74322 44.1348 8.35234L43.8848 7.17217H39.654V29.367L44.4617 28.3582L44.4809 22.9712C45.1732 23.4662 46.1925 24.1705 47.8848 24.1705C51.3271 24.1705 54.4617 21.4294 54.4617 15.3953C54.4425 9.87514 51.2694 6.86761 47.904 6.86761ZM46.7502 19.9827C45.6155 19.9827 44.9425 19.583 44.4809 19.0881L44.4617 12.0261C44.9617 11.4741 45.654 11.0934 46.7502 11.0934C48.5002 11.0934 49.7117 13.035 49.7117 15.5285C49.7117 18.0792 48.5194 19.9827 46.7502 19.9827ZM33.0386 5.74454L37.8655 4.71665V0.852539L33.0386 1.8614V5.74454ZM33.0386 7.1912H37.8655V23.8469H33.0386V7.1912ZM27.8655 8.5998L27.5578 7.1912H23.404V23.8469H28.2117V12.5591C29.3463 11.0934 31.2694 11.3599 31.8655 11.5693V7.1912C31.2502 6.96278 29.0002 6.54401 27.8655 8.5998ZM18.2502 3.0606L13.5578 4.05042L13.5386 19.2975C13.5386 22.1147 15.6732 24.1895 18.5194 24.1895C20.0963 24.1895 21.2502 23.904 21.8848 23.5613V19.6972C21.2694 19.9447 18.2309 20.8203 18.2309 18.0031V11.2457H21.8848V7.1912H18.2309L18.2502 3.0606ZM5.25015 12.0261C5.25015 11.2837 5.86554 10.9982 6.88477 10.9982C8.34631 10.9982 10.1925 11.436 11.654 12.2165V7.74322C10.0578 7.11506 8.48092 6.86761 6.88477 6.86761C2.98092 6.86761 0.384766 8.88532 0.384766 12.2545C0.384766 17.5082 7.69246 16.6706 7.69246 18.9358C7.69246 19.8114 6.92323 20.097 5.8463 20.097C4.25015 20.097 2.21169 19.4498 0.596304 18.5742V23.1045C2.38477 23.8659 4.19246 24.1895 5.8463 24.1895C9.8463 24.1895 12.5963 22.2289 12.5963 18.8216C12.5771 13.1492 5.25015 14.158 5.25015 12.0261Z"
- fill="#0A2540"
+ fill="currentColor"
/>
);
diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss
index 0d6ee076c..ae15825c5 100644
--- a/packages/webapp/src/style/App.scss
+++ b/packages/webapp/src/style/App.scss
@@ -40,6 +40,8 @@
.App {
min-width: 1100px;
+ min-height: 100vh;
+ background-color: $app-bg;
}
// =======
@@ -254,7 +256,7 @@ html[lang^='ar'] {
}
.bp4-drawer {
- border-left: 1px solid #00115e;
+ border-left: 1px solid var(--color-drawer-border-left);
}
.drawer-portal {
diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index 55e071a6f..ade67159e 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -1,14 +1,446 @@
-@import "@blueprintjs/colors/lib/scss/colors";
+@import '@blueprintjs/colors/lib/scss/colors';
@import '@blueprintjs/core/src/common/variables';
$ns: bp4;
-$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
- 0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
+:root {
+ --color-primary: #8abbff;
+ --color-danger: red;
+
+ --color-dark-gray5: #404854;
+ --color-dark-gray4: #383e47;
+ --color-dark-gray3: #2f343c;
+ --color-dark-gray2: #252a31;
+ --color-dark-gray1: #1c2127;
+
+ --color-light-gray1: #d3d8de;
+ --color-light-gray2: #dce0e5;
+ --color-light-gray3: #e5e8eb;
+ --color-light-gray4: #edeff2;
+ --color-light-gray5: #f6f7f9;
+
+ --color-white: #fff;
+ --color-black: #000;
+
+ --color-muted-text: #abb3bf;
+
+ // Alerts
+ --color-alert-default-background: transparent;
+ --color-alert-default-description-text: var(--color-light-gray4);
+ --color-alert-default-title-text: var(--color-light-gray2);
+
+ // Alert danger.
+ --color-alert-danger-background: transparent;
+ --color-alert-danger-border: #2d72d2;
+ --color-alert-danger-description-text: var(--color-light-gray1);
+ --color-alert-danger-title-text: #8abbff;
+
+ // Alert primary
+ --color-alert-primary-background: transparent;
+ --color-alert-primary-border: #2d72d2;
+ --color-alert-primary-title-text: #8abbff;
+ --color-alert-primary-description-text: var(--color-light-gray1);
+
+ // Background
+ --color-ui-background-primary: var(--color-base-sand-0);
+ --color-ui-background-secondary: var(--color-base-sand-10);
+ --color-ui-background-tertiary: var(--color-base-sand-20);
+
+ // Input
+ --color-ui-input-border: #ced4da;
+ --color-ui-input-border: rgba(255, 255, 255, 0.15);
+
+ --color-ui-input-background: rgba(17, 20, 24, 0.3);
+
+ --color-ui-input-group-prepend-background: #e9ecef;
+ --color-ui-input-group-prepend-color: #495057;
+ --color-ui-input-group-prepend-border: #ced4da;
+
+ --color-ui-input-group-prepend-background: var(--color-dark-gray3);
+ --color-ui-input-group-prepend-color: rgba(255, 255, 255, 0.6);
+ --color-ui-input-group-prepend-border: rgba(255, 255, 255, 0.15);
+
+ --color-ui-html-select-background: #fff;
+ --color-ui-html-select-border: #ced4da;
+
+ --color-ui-menu-select-item-hover-background: #edeff2;
+ --color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
+ --color-ui-menu-select-item-active-background: var(--color-primary);
+
+ // # Splash screen.
+ --color-splash-screen-background: #fff;
+ --color-splash-screen-background: var(--color-dark-gray1);
+
+ // # Sidebar.
+ --color-sidebar-toggle: #6b8193;
+ --color-sidebar-toggle: rgba(255, 255, 255, 0.5);
+ --color-sidebar-background: var(--color-dark-gray3);
+ --color-sidebar-text: var(--color-white);
+ --color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
+ --color-sidebar-menu-item-text: #ffff;
+ --color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
+ --color-sidebar-menu-item-text-hover: #fff;
+ --color-sidebar-menu-item-active-background: var(--color-dark-gray5);
+ --color-sidebar-menu-item-active-text: #fff;
+ --color-sidebar-menu-item-focus-background: #01143e;
+ --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
+
+ // Sidebar overlay.
+ --color-sidebar-overlay-background: var(--color-dark-gray5);
+ --color-sidebar-overlay-hover-background: var(--color-dark-gray3);
+ --color-sidebar-overlay-item-text: var(--color-white);
+ --color-sidebar-overlay-item-hover-text: var(--color-white);
+ --color-sidebar-overlay-divider-background: rgba(255, 255, 255, 0.15);
+ --color-sidebar-overlay-label-text: rgba(255, 255, 255, 0.5);
+ --color-sidebar-overlay-label-border: var(
+ --color-sidebar-overlay-divider-background
+ );
+ --color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
+}
+
+.bp4-dark :root {
+ --color-primary: #8abbff;
+ --color-danger: red;
+
+ --color-dark-gray5: #404854;
+ --color-dark-gray4: #383e47;
+ --color-dark-gray3: #2f343c;
+ --color-dark-gray2: #252a31;
+ --color-dark-gray1: #1c2127;
+
+ --color-light-gray1: #d3d8de;
+ --color-light-gray2: #dce0e5;
+ --color-light-gray3: #e5e8eb;
+ --color-light-gray4: #edeff2;
+ --color-light-gray5: #f6f7f9;
+
+ --color-white: #fff;
+ --color-black: #000;
+
+ --color-muted-text: #abb3bf;
+
+ // Alerts
+ --color-alert-default-background: transparent;
+ --color-alert-default-description-text: var(--color-light-gray4);
+ --color-alert-default-title-text: var(--color-light-gray2);
+
+ --color-alert-danger-background: transparent;
+ --color-alert-danger-border: #2d72d2;
+ --color-alert-danger-description-text: var(--color-light-gray1);
+ --color-alert-danger-title-text: #8abbff;
+
+ --color-alert-primary-background: transparent;
+ --color-alert-primary-border: #2d72d2;
+ --color-alert-primary-title-text: #8abbff;
+ --color-alert-primary-description-text: var(--color-light-gray1);
+
+ // Background
+ --color-ui-background-primary: var(--color-base-sand-0);
+ --color-ui-background-secondary: var(--color-base-sand-10);
+ --color-ui-background-tertiary: var(--color-base-sand-20);
+
+ // Input
+ --color-ui-input-border: #ced4da;
+ --color-ui-input-border: rgba(255, 255, 255, 0.15);
+
+ --color-ui-input-background: rgba(17, 20, 24, 0.3);
+
+ --color-ui-input-group-prepend-background: #e9ecef;
+ --color-ui-input-group-prepend-color: #495057;
+ --color-ui-input-group-prepend-border: #ced4da;
+
+ --color-ui-input-group-prepend-background: var(--color-dark-gray3);
+ --color-ui-input-group-prepend-color: rgba(255, 255, 255, 0.6);
+ --color-ui-input-group-prepend-border: rgba(255, 255, 255, 0.15);
+
+ --color-ui-html-select-background: #fff;
+ --color-ui-html-select-border: #ced4da;
+
+ --color-ui-menu-select-item-hover-background: #edeff2;
+ --color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
+ --color-ui-menu-select-item-active-background: var(--color-primary);
+
+ // Splash screen.
+ --color-splash-screen-background: #fff;
+ --color-splash-screen-background: var(--color-dark-gray1);
+
+ // Main Dashboard.
+ --color-dashboard-insider-background: var(--color-dark-gray1);
+ --color-dashboard-topbar-background: var(--color-dark-gray1);
+ --color-dashboard-topbar-border-color: transparent;
+ --color-dashboard-datatable-background: var(--color-dark-gray1);
+ --color-dashboard-datatable-border: var(--color-dark-gray3);
+
+ // Dashboard error boundary.
+ --color-dashboard-error-boundary-title-text: #2c3a5d;
+ --color-dashboard-error-boundary-description-text: #1f3255;
+
+ --color-dashboard-error-boundary-title-text: rgba(255, 255, 255, 0.75);
+ --color-dashboard-error-boundary-description-text: rgba(255, 255, 255, 0.6);
+ --color-dashboard-error-boundary-logo: #a1afca;
+ --color-dashboard-error-boundary-logo: rgba(255, 255, 255, 0.45);
+
+ --color-dashboard-navbar-background: var(--color-dark-gray1);
+ --color-dashboard-navbar-item-text: var(--color-light-gray3);
+
+ --color-dashboard-navbar-item-hover-text: #32304a;
+ --color-dashboard-navbar-item-hover-background: rgba(167, 182, 194, 0.12);
+
+ --color-dashboard-navbar-item-hover-text: var(--color-light-gray5);
+ --color-dashboard-navbar-item-hover-background: var(--color-dark-gray3);
+
+ --color-dashboard-navbar-item-active-text: #32304a;
+ --color-dashboard-navbar-item-active-background: #a7b6c21f;
+
+ --color-dashboard-navbar-item-active-text: var(--color-light-gray5);
+ --color-dashboard-navbar-item-active-background: var(--color-dark-gray3);
+
+ --color-dashboard-navbar-item-icon: #32304a;
+
+ --color-dashboard-topbar-title-text: var(--color-white);
+
+ --color-dashboard-actionsbar-border: var(--color-dark-gray4);
+ --color-dashboard-actionsbar-divider: rgba(255, 255, 255, 0.2);
+
+ // Datatable
+ --color-datatable-head-background: var(--color-dark-gray3);
+ --color-datatable-head-text: var(--color-white);
+ --color-datatable-head-border: var(--color-dark-gray4);
+ --color-datatable-cell-hover-background: var(--color-dark-gray3);
+ --color-datatable-cell-border: var(--color-dark-gray4);
+ --color-datatable-cell-focus-border: rgba(0, 82, 204, 0.7);
+ --color-datatable-cell-focus-border: var(--color-primary);
+ --color-datatable-no-results-text: #777;
+ --color-datatable-no-results-text: rgba(255, 255, 255, 0.5);
+
+ --color-datatable-caret: rgba(255, 255, 255, 0.25);
+ --color-datatable-caret-hover: rgba(255, 255, 255, 0.25);
+
+ // Sidebar
+ --color-sidebar-toggle: #6b8193;
+ --color-sidebar-toggle: rgba(255, 255, 255, 0.5);
+ --color-sidebar-background: var(--color-dark-gray3);
+ --color-sidebar-text: var(--color-white);
+ --color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
+
+ --color-sidebar-menu-item-text: #ffff;
+
+ --color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
+ --color-sidebar-menu-item-text-hover: #fff;
+
+ --color-sidebar-menu-item-active-background: var(--color-dark-gray5);
+ --color-sidebar-menu-item-active-text: #fff;
+
+ --color-sidebar-menu-item-focus-background: #01143e;
+ --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
+
+ // Sidebar overlay
+ --color-sidebar-overlay-background: var(--color-dark-gray5);
+ --color-sidebar-overlay-hover-background: var(--color-dark-gray3);
+ --color-sidebar-overlay-item-text: var(--color-white);
+ --color-sidebar-overlay-item-hover-text: var(--color-white);
+ --color-sidebar-overlay-divider-background: rgba(255, 255, 255, 0.15);
+ --color-sidebar-overlay-label-text: rgba(255, 255, 255, 0.5);
+ --color-sidebar-overlay-label-border: var(
+ --color-sidebar-overlay-divider-background
+ );
+ --color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
+
+ --color-financial-report-background: var(--color-dark-gray2);
+
+ --color-datatable-text: var(--color-white);
+
+ --color-datatable-constrant-text: var(--color-light-gray2);
+ --color-datatable-constrant-cell-border: var(--color-dark-gray5);
+
+ --color-datatable-constrant-head-text: var(--color-light-gray2);
+ --color-datatable-constrant-head-border: var(--color-dark-gray5);
+
+ --color-card-background: var(--color-dark-gray4);
+ --color-card-border: #d2dce2;
+ --color-card-border: rgba(255, 255, 255, 0.2);
+
+ // Bank accounts.
+ --color-bank-account-card-background: var(--color-card-background);
+ --color-bank-account-card-text: var(--color-light-gray5);
+ --color-bank-account-card-border: #c8cad0;
+ --color-bank-account-card-border: rgba(255, 255, 255, 0.2);
+ --color-bank-account-card-hover-border: #0153cc;
+
+ --color-bank-account-card-tag-background: rgb(223, 225, 230);
+ --color-bank-account-card-tag-background: rgba(255, 255, 255, 0.2);
+
+ --color-bank-account-code-text: rgb(23, 43, 77);
+ --color-bank-account-code-text: var(--color-muted-text);
+
+ --color-bank-transactions-details-bar-background: var(--color-dark-gray1);
+ --color-bank-transactions-details-bar-text: var(--color-light-gray2);
+ --color-bank-transactions-details-bar-divider: var(--color-dark-gray5);
+
+ --color-bank-transactions-content-background: #fff;
+ --color-bank-transactions-content-background: var(--color-dark-gray1);
+
+ --color-bank-transactions-content-border: #f0f0f0;
+ --color-bank-transactions-content-border: var(--color-dark-gray2);
+
+ // Bank account transactions.
+ --color-bank-transactions-datatable-card-background: var(--color-dark-gray1);
+ --color-bank-transactions-datatable-card-border: #f0f0f0;
+
+ --color-bank-transaction-matching-aside: red;
+ --color-bank-transaction-matching-divider: var(--color-dark-gray4);
+ --color-bank-transaction-matching-aside-header: var(--white);
+ --color-bank-transaction-matching-aside-header: var(--color-dark-gray1);
+ --color-bank-transaction-matching-aside-footer: var(--color-dark-gray1);
+
+ --color-sidebar-preferences-background: var(--color-dark-gray1);
+ --color-sidebar-preferences-border: #c6d0d9;
+ --color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
+
+ // Sidebar preferences.
+ --color-sidebar-preferences-item-background: transparent;
+ --color-sidebar-preferences-item-text: #fff;
+
+ --color-sidebar-preferences-item-hover-background: var(--color-dark-gray4);
+ --color-sidebar-preferences-item-hover-text: #fff;
+
+ --color-preferences-sidebar-head-border: #bbcbd0;
+ --color-preferences-sidebar-head-text: #3b3b4c;
+
+ --color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
+ --color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
+
+ --color-preferences-topbar-background: var(--color-dark-gray1);
+ --color-preferences-topbar-border: var(--color-dark-gray3);
+ --color-preferences-topbar-title: rgba(255, 255, 255, 0.85);
+
+ --color-preferences-content-background: var(--color-dark-gray2);
+
+ // Financial sheet.
+ --color-financial-sheet-card-border: var(--color-dark-gray5);
+ --color-financial-sheet-title-text: var(--color-light-gray1);
+ --color-financial-sheet-type-text: var(--color-light-gray1);
+ --color-financial-sheet-date-text: var(--color-light-gray1);
+ --color-financial-sheet-footer-text: var(--color-light-gray1);
+ --color-financial-sheet-minimal-title-text: var(--color-white);
+
+ // Transaction locking.
+ --color-transaction-locking-item-background: var(--color-dark-gray2);
+ --color-transaction-locking-item-border: var(--color-dark-gray3);
+ --color-transaction-locking-item-icon-border: var(--color-dark-gray5);
+ --color-transaction-locking-item-enabled-border: var(--color-dark-gray5);
+
+ // Reports items.
+ --color-report-section-title-text: var(var(--color-light-gray1));
+ --color-report-item-background: var(--color-dark-gray3);
+ --color-report-item-border: var(--color-dark-gray5);
+ --color-report-item-top-border: var(--color-dark-gray5);
+ --color-report-item-text: var(--color-light-gray2);
+
+ --color-financial-report-drawer-tab-text: var(--color-light-gray3);
+
+ --color-element-customize-header-background: var(--color-dark-gray2);
+ --color-element-customize-header-title-text: var(--color-light-gray4);
+
+ --color-element-customize-background: var(--color-dark-gray2);
+ --color-element-customize-preview-background: var(--color-dark-gray5);
+
+ --color-element-customize-header-tabs-background: var(--color-dark-gray2);
+ --color-ekement-customize-header-tabs-text: #5f6b7c;
+ --color-ekement-customize-header-tabs-text: var(--color-muted-text);
+
+ --color-element-customize-divider: var(--color-dark-gray5);
+
+ // Universal search
+ --color-universal-search-background: var(--color-dark-gray3);
+ --color-universal-search-footer-divider: var(--color-dark-gray4);
+ --color-universal-search-tag-background: #708392;
+ --color-universal-search-tag-background: var(--color-dark-gray4);
+ --color-universal-search-menu-border: #d3dce2;
+ --color-universal-search-menu-border: rgba(255, 255, 255, 0.15);
+
+ --color-datatable-empty-status-title: #2c3a5d;
+ --color-datatable-empty-status-description: #1f3255;
+
+ --color-datatable-empty-status-title: var(--color-light-gray4);
+ --color-datatable-empty-status-description: var(--color-light-gray5);
+
+ --color-content-tab-background: var(--color-dark-gray4);
+
+ --color-content-tab-border: #e1e2e8;
+ --color-content-tab-border: rgba(255, 255, 255, 0.15);
+
+ --color-content-tab-hover-border: rgba(255, 255, 255, 0.3);
+ --color-content-tab-active-border: var(--color-primary);
+
+ --color-content-tab-text: #2f343c;
+ --color-content-tab-text: var(--color-light-gray1);
+
+ --color-content-tab-active-text: #1552c8;
+ --color-content-tab-active-text: var(--color-light-gray1);
+
+ --color-aside-background: #fff;
+ --color-aside-background: var(--color-dark-gray2);
+
+ --color-aside-title-background: #fff;
+ --color-aside-title-background: var(--color-dark-gray1);
+
+ --color-aside-divider: #E1E2E9;
+ --color-aside-divider: var(--color-dark-gray5);
+
+ --color-app-shell-divider: var(--color-dark-gray5);
+
+ --color-select-button-background: #fff;
+ --color-select-button-border: #fff;
+
+ --color-stepper-step-background: #9e9e9e;
+ --color-stepper-step-active-background: rgb(0, 82, 204);
+ --color-stepper-separator: #c5cbd3;
+ --color-stepper-step-text: #fff;
+
+ --color-stepper-step-title-text: #738091;
+ --color-stepper-step-title-active-text: var(--color-primary);
+
+ --color-stepper-step-description-text: #738091;
+ --color-stepper-step-description-active-text: var(--color-primary);
+
+ --color-stepper-step-title-text: var(--color-light-gray1);
+ --color-stepper-step-title-active-text: var(--color-primary);
+
+ --color-stepper-step-description-text: var(--color-light-gray1);
+ --color-stepper-step-description-active-text: var(--color-primary);
+
+ --color-stepper-step-background: var(--color-dark-gray4);
+ --color-stepper-step-active-background: var(--color-dark-gray5);
+ --color-stepper-separator: var(--color-dark-gray4);
+ --color-stepper-step-text: #fff;
+
+ --color-drawer-border-left: var(--color-primary);
+ --color-drawer-border-left: transparent;
+
+ --color-drawer-header-background: #fff;
+ --color-drawer-header-background: transparent;
+
+ --color-drawer-header-border: rgba(255, 255, 255, 0.2);
+
+ --color-drawer-header-text: #354152;
+ --color-drawer-header-text: #fff;
+
+ --color-drawer-insider-background: #fbfbfb;
+ --color-drawer-insider-background: transparent;
+ --color-drawer-tabs-background: #fff;
+ --color-drawer-tabs-background: transparent;
+}
+
+$pt-popover-box-shadow:
+ 0 0 0 1px rgba(16, 22, 26, 0.02),
+ 0 2px 4px rgba(16, 22, 26, 0.1),
+ 0 8px 24px rgba(16, 22, 26, 0.1);
$blue1: #0069ff;
$blue2: #0052ff;
$blue3: rgb(0, 82, 204);
+
$pt-link-color: $blue3;
$pt-intent-primary: $blue1;
$menu-item-color-hover: $light-gray4;
@@ -17,9 +449,19 @@ $menu-item-color-active: $light-gray3;
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,");
$sidebar-zindex: 16;
-$pt-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont,
- Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
- Icons16, sans-serif;
+$pt-font-family:
+ 'Noto Sans',
+ -apple-system,
+ BlinkMacSystemFont,
+ Segoe UI,
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ Open Sans,
+ Helvetica Neue,
+ Icons16,
+ sans-serif;
$button-box-shadow: 0 0 0 !default;
$button-box-shadow-active: 0 0 0 !default;
@@ -30,13 +472,15 @@ $button-background-color-disabled: #e9ecef !default;
$button-background-color: #e6effb !default;
$button-background-color-hover: #cfdcee !default;
-$sidebar-background: #01115e;
-$sidebar-text-color: #fff;
+$app-bg: var(--color-dark-gray1);
+
+$sidebar-background: var(--color-sidebar-background);
+$sidebar-text-color: var(--sidebar-text-color);
$sidebar-width: 100%;
-$sidebar-menu-item-color: rgb(255, 255, 255);
-$sidebar-menu-item-color-active: rgb(255, 255, 255);
+$sidebar-menu-item-color: var(--color-sidebar-menu-item-color);
+$sidebar-menu-item-color-active: var(--color-sidebar-menu-item-active-color);
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
-$sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
+$sidebar-menu-label-color: var(--color-sidebar-menu-label-color);
$sidebar-submenu-item-color: rgba(255, 255, 255, 0.85);
$sidebar-submenu-item-hover-color: rgb(255, 255, 255);
$sidebar-logo-opacity: 0.5;
@@ -55,4 +499,9 @@ $zindex-toast: 40;
$control-checked-background-color: #0069ff !default;
$control-checked-background-color-hover: #0069ff !default;
$control-checked-background-color-active: #0069ff !default;
-$control-box-shadow: inset 0 0 0 1px #666 !default;
\ No newline at end of file
+$control-box-shadow: inset 0 0 0 1px #666 !default;
+
+// Drawer
+$drawer-background-color: $white !default;
+$dark-drawer-background-color: $dark-gray2 !default;
+
diff --git a/packages/webapp/src/style/components/BigAmount.scss b/packages/webapp/src/style/components/BigAmount.scss
index 034b5f6b6..df9f4276a 100644
--- a/packages/webapp/src/style/components/BigAmount.scss
+++ b/packages/webapp/src/style/components/BigAmount.scss
@@ -1,9 +1,15 @@
.big-amount{
+ --x-color-amount-text: #343463;
+ --x-color-label-text: #5d6f90;
+
+ --x-color-label-text: var(--color-light-gray1);
+ --x-color-amount-text: var(--color-light-gray2);
+
text-align: right;
&__label{
- color: #5d6f90;
+ color: var(--x-color-label-text);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
@@ -14,7 +20,7 @@
white-space: nowrap;
font-weight: 500;
margin-top: 6px;
- color: #343463;
+ color: var(--x-color-amount-text);
line-height: 1;
font-size: 34px;
}
diff --git a/packages/webapp/src/style/components/BigcapitalLoading.scss b/packages/webapp/src/style/components/BigcapitalLoading.scss
index c387b5b13..47f776325 100644
--- a/packages/webapp/src/style/components/BigcapitalLoading.scss
+++ b/packages/webapp/src/style/components/BigcapitalLoading.scss
@@ -5,7 +5,7 @@
width: 100%;
position: fixed;
display: flex;
- background: #fff;
+ background: var(--color-splash-screen-background);
z-index: $zindex-dashboard-splash-screen;
.center {
diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss
index a96d7a003..e24ef2d74 100644
--- a/packages/webapp/src/style/components/DataTable/DataTable.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTable.scss
@@ -8,7 +8,7 @@
border-spacing: 0;
min-width: 100%;
display: block;
- color: #101219;
+ // color: #101219;
.thead .thead-inner,
.tbody .tbody-inner {
@@ -20,11 +20,11 @@
.th {
padding: 0.68rem 0.5rem;
- background: #f5f5f5;
+ background: var(--color-datatable-head-background);
font-size: 14px;
- color: #424853;
+ color: var(--color-datatable-head-text);
font-weight: 400;
- border-bottom: 1px solid #d2dde2;
+ border-bottom: 1px solid var(--color-datatable-head-border);
> div {
overflow: hidden;
@@ -61,7 +61,7 @@
&:last-child {
.td {
- border-bottom: 0;
+ border-bottom-width: 0;
}
}
@@ -116,7 +116,7 @@
.inner-resizer {
height: 100%;
width: 1px;
- border-left: 1px solid #e6e6e6;
+ border-left: 1px solid var(--color-datatable-head-border);
margin: 0 auto;
}
@@ -135,12 +135,15 @@
}
}
- .bp4-control.bp4-checkbox input:not(:checked):not(:indeterminate) ~ .bp4-control-indicator{
- box-shadow: inset 0 0 0 1px #C5CBD3;
+ .bp4-control.bp4-checkbox
+ input:not(:checked):not(:indeterminate)
+ ~ .bp4-control-indicator {
+ // box-shadow: inset 0 0 0 1px #c5cbd3;
}
.skeleton {
- animation: skeleton-fade-in 0.3s linear forwards,
+ animation:
+ skeleton-fade-in 0.3s linear forwards,
skeleton-glow 1s linear infinite alternate;
animation-delay: 0s, 0.3s;
@@ -175,15 +178,14 @@
overflow: auto;
.tbody-inner {
- >.loading {
+ > .loading {
padding-top: 40px;
}
}
.tr .td {
- border-bottom: 1px solid #ececec;
+ border-bottom: 1px solid var(--color-datatable-cell-border);
align-items: center;
-
.placeholder {
color: #a0a0a0;
@@ -206,13 +208,13 @@
}
}
&:focus {
- outline: 1px solid rgba(0, 82, 204, 0.7);
+ outline: 1px solid var(--color-datatable-cell-focus-border);
outline-offset: -1px;
}
}
.tr:hover .td {
- background: #f3f7fc;
+ background: var(--color-datatable-cell-hover-background);
}
.tr.is-context-menu-active .td {
@@ -244,10 +246,10 @@
.td {
flex-direction: column;
padding: 18px 20px;
- color: #777;
+ color: var(--color-datatable-no-results-text);
align-items: center;
font-size: 14px;
- border-bottom: 0;
+ border-bottom-width: 0;
&:hover {
background: transparent;
@@ -255,7 +257,7 @@
}
}
- >.loading {
+ > .loading {
padding-top: 50px;
}
}
@@ -276,9 +278,9 @@
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
- border-left: 8px solid #acacac;
+ border-left: 8px solid var(--color-datatable-caret);
display: block;
- transition: all 0.1s cubic-bezier(.4, 1, .75, .9);
+ transition: all 0.1s cubic-bezier(0.4, 1, 0.75, 0.9);
&.is-expanded {
transform: rotate(90deg);
@@ -287,7 +289,7 @@
&:hover {
.expand-arrow {
- border-left-color: #7d8593;
+ border-left-color: var(--color-datatable-caret-hover);
}
}
}
@@ -299,7 +301,6 @@
}
&-size {
-
&--medium {
.tbody .tr {
background-size: red;
@@ -334,7 +335,6 @@
}
&.has-sticky {
-
.thead,
.tfoot {
position: sticky;
@@ -358,9 +358,11 @@
position: sticky;
}
- [data-sticky-last-left-td] {}
+ [data-sticky-last-left-td] {
+ }
- [data-sticky-first-right-td] {}
+ [data-sticky-first-right-td] {
+ }
}
&.has-virtualized-rows {
@@ -378,25 +380,24 @@
.table-constrant,
.table--constrant {
.table {
- color: #000;
-
.thead {
.tr:first-of-type .th {
- border-top: 1px solid #000000;
+ border-top: 1px solid var(--color-datatable-constrant-head-border);
}
}
-
.thead .th {
- background: #fff;
- color: #000;
- border-bottom: 1px solid #000000;
+ background: transparent;
+ color: var(--color-datatable-constrant-head-text);
+ border-bottom: 1px solid var(--color-datatable-constrant-head-border);
padding: 0.5rem;
}
-
+
.tbody .tr .td {
- background: #fff;
+ background: transparent;
padding: 0.5rem 0.5rem;
- border-bottom: 0;
+ border-bottom-width: 0;
+ color: var(--color-datatable-constrant-text);
+ border-color: var(--color-datatable-constrant-cell-border);
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
index 928b44442..458997547 100644
--- a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
+++ b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss
@@ -7,7 +7,7 @@
&_title {
font-size: 20px;
- color: #2c3a5d;
+ color: var(--color-datatable-empty-status-title);
font-weight: 600;
margin-left: auto;
margin-bottom: 10px;
@@ -21,7 +21,7 @@
}
&_desc {
font-size: 16px;
- color: #1f3255;
+ color: var(--color-datatable-empty-status-description);
opacity: 0.8;
line-height: 1.6;
}
diff --git a/packages/webapp/src/style/components/Details.scss b/packages/webapp/src/style/components/Details.scss
index 16495a04d..9341df0a6 100644
--- a/packages/webapp/src/style/components/Details.scss
+++ b/packages/webapp/src/style/components/Details.scss
@@ -1,4 +1,6 @@
.details-menu {
+ --color-detail-item-label: #727983;
+ --color-detail-item-label: rgba(255, 255, 255, 0.65);
&--vertical {
display: flex;
@@ -41,7 +43,7 @@
display: flex;
&__label {
- color: #727983;
+ color: var(--color-detail-item-label);
font-weight: 500;
}
diff --git a/packages/webapp/src/style/components/Drawer.scss b/packages/webapp/src/style/components/Drawer.scss
index 832a3d601..72a190df7 100644
--- a/packages/webapp/src/style/components/Drawer.scss
+++ b/packages/webapp/src/style/components/Drawer.scss
@@ -1,17 +1,19 @@
@import '../_base.scss';
.bp4-drawer {
+
+
.bp4-drawer-header {
margin-bottom: 2px;
- background-color: #FFF;
+ background-color: var(--color-drawer-header-background);
+ box-shadow: 0 1px 0 var(--color-drawer-header-border);
.bp4-heading {
font-weight: 500;
}
-
.bp4-heading,
.bp4-icon {
- color: #354152;
+ color: var(--color-drawer-header-text);
}
}
}
@@ -20,48 +22,47 @@
&__insider{
display: flex;
flex-direction: column;
+ background-color: var(--color-drawer-insider-background);
flex: 1 0 0;
- background-color: #fbfbfb;
}
-
- &__main-tabs{
- .bp4-tabs {
- .bp4-tab-list {
- position: relative;
- background-color: #fff;
+ // &__main-tabs{
+ // .bp4-tabs {
+ // .bp4-tab-list {
+ // position: relative;
+ // background-color: var(--color-drawer-tabs-background);
- &:before {
- content: '';
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 2px;
- background: #e1e2e8;
- }
+ // &:before {
+ // content: '';
+ // position: absolute;
+ // bottom: 0;
+ // width: 100%;
+ // height: 2px;
+ // background: #e1e2e8;
+ // }
- > *:not(:last-child) {
- margin-right: 25px;
- }
+ // > *:not(:last-child) {
+ // margin-right: 25px;
+ // }
- &.bp4-large > .bp4-tab {
- font-size: 15px;
- color: #555;
- margin: 0 0.8rem;
+ // &.bp4-large > .bp4-tab {
+ // font-size: 15px;
+ // color: #555;
+ // margin: 0 0.8rem;
- &[aria-selected='true'],
- &:not([aria-disabled='true']):hover {
- color: $pt-link-color;
- }
- }
- }
+ // &[aria-selected='true'],
+ // &:not([aria-disabled='true']):hover {
+ // color: $pt-link-color;
+ // }
+ // }
+ // }
- .bp4-tab-panel {
- margin-top: 0;
+ // .bp4-tab-panel {
+ // margin-top: 0;
- .card {
- margin: 15px;
- }
- }
- }
- }
+ // .card {
+ // margin: 15px;
+ // }
+ // }
+ // }
+ // }
}
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/Drawers/ItemDrawer.scss b/packages/webapp/src/style/components/Drawers/ItemDrawer.scss
index e39dda44c..c4edc5107 100644
--- a/packages/webapp/src/style/components/Drawers/ItemDrawer.scss
+++ b/packages/webapp/src/style/components/Drawers/ItemDrawer.scss
@@ -24,8 +24,11 @@
}
.details-menu--vertical {
+ --x-border-color: #e2e2e2;
+ --x-border-color: rgba(255, 255, 255, 0.2);
+
padding-bottom: 15px;
- border-bottom: 1px solid #e2e2e2;
+ border-bottom: 1px solid var(--x-border-color);
}
.details-menu--horizantal {
diff --git a/packages/webapp/src/style/components/MaterialProgressBar.scss b/packages/webapp/src/style/components/MaterialProgressBar.scss
index cf8bea94c..634e1c1e3 100644
--- a/packages/webapp/src/style/components/MaterialProgressBar.scss
+++ b/packages/webapp/src/style/components/MaterialProgressBar.scss
@@ -35,7 +35,7 @@ progress[value] {
overflow: hidden;
.indeterminate {
- background-color: #002fff;
+ background-color: var(--color-primary);
&:before {
content: '';
diff --git a/packages/webapp/src/style/components/Menu.scss b/packages/webapp/src/style/components/Menu.scss
index 203d65737..df1075588 100644
--- a/packages/webapp/src/style/components/Menu.scss
+++ b/packages/webapp/src/style/components/Menu.scss
@@ -1,5 +1,7 @@
.bp4-menu-item {
-
+ &:hover{
+ background-color: var(--color-ui-menu-select-item-hover-background);
+ }
.menu-item-space {
width: 6px;
display: inline-block;
diff --git a/packages/webapp/src/style/components/Overlay.scss b/packages/webapp/src/style/components/Overlay.scss
index be474f16e..89a136f4d 100644
--- a/packages/webapp/src/style/components/Overlay.scss
+++ b/packages/webapp/src/style/components/Overlay.scss
@@ -2,5 +2,5 @@
.bp4-overlay-backdrop {
- background-color: rgba(0, 10, 30, 0.7);
+ // background-color: rgba(0, 10, 30, 0.7);
}
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/PageForm.scss b/packages/webapp/src/style/components/PageForm.scss
index f029f5654..9e43cec75 100644
--- a/packages/webapp/src/style/components/PageForm.scss
+++ b/packages/webapp/src/style/components/PageForm.scss
@@ -3,17 +3,34 @@
// > .page-form__content
// > .page-form__floating-actions
.page-form {
+ --color-page-form-background: #fff;
+
+ --color-page-form-header-background: #fff;
+ --color-page-form-header-border: #d2dce2;
+
+ --color-page-form-header-background: var(--color-dark-gray1);
+ --color-page-form-header-border: rgba(255, 255, 255, 0.1);
+
$self: '.page-form';
padding-bottom: 20px;
+
&__floating-actions {
+ --color-page-form-floating-actions-background: #fff;
+ --color-page-form-floating-actions-border: rgb(210, 221, 226);
+ --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
+
+ --color-page-form-floating-actions-background: var(--color-dark-gray1);
+ --color-page-form-floating-actions-border: var(--color-dark-gray5);
+ --color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
+
position: fixed;
bottom: 0;
width: 100%;
- background: #fff;
padding: 14px 18px;
- border-top: 1px solid rgb(210, 221, 226);
- box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+ background: var(--color-page-form-floating-actions-background);
+ border-top: 1px solid var(--color-page-form-floating-actions-border);
+ box-shadow: 0px -1px 4px 0px var(--color-page-form-floating-actions-shadow);
.bp4-button-group{
@@ -43,9 +60,9 @@
}
}
#{$self}__header {
- background-color: #FFF;
+ background-color: var(--color-page-form-header-background);
+ border-bottom: 1px solid var(--color-page-form-header-border);
padding: 25px 32px;
- border-bottom: 1px solid #d2dce2;
.bp4-form-group.bp4-inline label.bp4-label {
font-weight: 500;
diff --git a/packages/webapp/src/style/components/SidebarOverlay.scss b/packages/webapp/src/style/components/SidebarOverlay.scss
index e0deb0bc8..eba3e9454 100644
--- a/packages/webapp/src/style/components/SidebarOverlay.scss
+++ b/packages/webapp/src/style/components/SidebarOverlay.scss
@@ -1,5 +1,5 @@
.sidebar-overlay {
- background: #fff;
+ background: var(--color-sidebar-overlay-background);
height: 100%;
width: 225px;
outline: 0;
@@ -11,7 +11,6 @@
}
.ScrollbarsCustom-Track {
-
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX {
background: rgba(0, 0, 0, 0);
@@ -19,7 +18,6 @@
}
.ScrollbarsCustom-Thumb {
-
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0);
@@ -34,7 +32,6 @@
&:hover {
.ScrollbarsCustom-Thumb {
-
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0.5);
@@ -48,7 +45,7 @@
&__item {
font-size: 15px;
- color: #00102b;
+ color: var(--color-sidebar-overlay-item-text);
a {
color: inherit;
@@ -58,7 +55,8 @@
&:hover,
&:focus {
- background: #f3f3f3;
+ color: var(--color-sidebar-overlay-item-text-hover);
+ background-color: var(--color-sidebar-overlay-hover-background);
}
}
}
@@ -66,7 +64,7 @@
&__divider {
height: 1px;
margin: 6px 0;
- background: #e2e5ec;
+ background: var(--color-sidebar-overlay-divider-background);
}
&__label {
@@ -74,8 +72,8 @@
font-size: 12px;
padding: 14px 20px 10px;
letter-spacing: 1px;
- color: #707a85;
- border-bottom: 1px solid #e2e5ec;
+ color: var(--color-sidebar-overlay-label-text);
+ border-bottom: 1px solid var(--color-sidebar-overlay-label-border);
margin-bottom: 6px;
html[lang^="ar"] & {
@@ -127,6 +125,6 @@
}
.sidebar-overlay-backdrop {
- background-color: rgba(0, 10, 30, 0.15);
+ background-color: var(--color-sidebar-overlay-backdrop);
z-index: 14;
}
\ No newline at end of file
diff --git a/packages/webapp/src/style/components/UniversalSearch.scss b/packages/webapp/src/style/components/UniversalSearch.scss
index e6c0b8689..3f07a8b49 100644
--- a/packages/webapp/src/style/components/UniversalSearch.scss
+++ b/packages/webapp/src/style/components/UniversalSearch.scss
@@ -2,9 +2,10 @@
position: fixed;
filter: blur(0);
opacity: 1;
- background-color: #fff;
+ background-color: var(--color-universal-search-background);
border-radius: 3px;
- box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+ box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
+ 0 4px 8px rgba(16, 22, 26, 0.2),
0 18px 46px 6px rgba(16, 22, 26, 0.2);
left: calc(50% - 250px);
top: 20vh;
@@ -16,7 +17,6 @@
filter: blur(20px);
opacity: 0.2;
}
-
&.bp4-overlay-appear-active,
&.bp4-overlay-enter-active {
filter: blur(0);
@@ -26,12 +26,10 @@
transition-property: filter, opacity;
transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
}
-
&.bp4-overlay-exit {
filter: blur(0);
opacity: 1;
}
-
&.bp4-overlay-exit-active {
filter: blur(20px);
opacity: 0.2;
@@ -61,7 +59,6 @@
line-height: 50px;
font-size: 20px;
}
-
.bp4-input-group.bp4-large .bp4-input:not(:first-child) {
padding-left: 50px !important;
}
@@ -82,7 +79,7 @@
}
.bp4-menu {
- border-top: 1px solid #d3dce2;
+ border-top: 1px solid var(--color-universal-search-menu-border);
max-height: calc(60vh - 20px);
overflow: auto;
@@ -128,7 +125,7 @@
&__footer {
padding: 12px 12px;
- border-top: 1px solid #d3dce2;
+ border-top: 1px solid var(--color-universal-search-footer-divider);
}
&__actions {
@@ -141,9 +138,8 @@
}
.bp4-tag {
- background: #708392;
+ background: var(--color-universal-search-tag-background);
}
-
&--arrows {
.bp4-tag {
padding: 0;
@@ -201,7 +197,3 @@
}
}
}
-
-.universal-search-overlay .bp4-overlay-backdrop {
- background: rgba(0, 10, 30, 0.3);
-}
diff --git a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
index b0c3b1605..5ec199c87 100644
--- a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
+++ b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss
@@ -1,15 +1,13 @@
@import 'src/style/_base.scss';
.sidebar {
- background: $sidebar-background;
- width: $sidebar-width;
- color: $sidebar-text-color;
+ background: var(--color-sidebar-background);
+ width: 100%;
height: 100%;
z-index: $sidebar-zindex;
position: relative;
.ScrollbarsCustom-Track {
-
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX {
background: rgba(0, 0, 0, 0);
@@ -17,7 +15,6 @@
}
.ScrollbarsCustom-Thumb {
-
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0);
@@ -32,10 +29,9 @@
&:hover {
.ScrollbarsCustom-Thumb {
-
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
- background: rgba(255, 255, 255, 0.25);
+ background: var(--color-sidebar-scrollbars-background);
}
}
}
@@ -138,7 +134,7 @@
padding-bottom: 2rem;
.#{$ns}-menu-item {
- color: $sidebar-menu-item-color;
+ color: var(--color-sidebar-menu-item-text);
border-radius: 0;
padding: 8px 20px;
font-size: 15px;
@@ -146,13 +142,12 @@
&:hover,
&.bp4-active {
- background: $sidebar-submenu-item-bg-color;
- color: $sidebar-menu-item-color-active;
+ background: var(--color-sidebar-menu-item-hover-background);
+ color: var(--color-sidebar-menu-item-text-hover);
}
-
&:focus,
&:active {
- background: #01143e;
+ background: var(--color-sidebar-menu-item-focus-background);
}
>.#{$ns}-icon {
@@ -169,7 +164,7 @@
&-labeler {
display: block;
- color: $sidebar-menu-label-color;
+ color: var(--color-sidebar-menu-label-color);
font-size: 11px;
padding: 8px 20px;
margin-top: 4px;
diff --git a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
index 46814703b..9c454e009 100644
--- a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
+++ b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
@@ -2,6 +2,17 @@
// Financial sheet - Drawer header.
// --------------------
.financial-header-drawer {
+ --x-color-background: var(--color-dark-gray1);
+ --x-color-backdrop-background: rgba(2, 9, 19, 0.65);
+
+ --x-color-tabs-border: var(--color-dark-gray2);
+ --x-color-tabs-tab-item-background: var(--color-dark-gray3);
+ --x-color-tabs-indicator-background: var(--color-dark-gray2);
+ --x-color-tabs-indicator-border: var(--color-primary);
+
+ --x-color-footer-background: var(--color-dark-gray3);
+ --x-color-footer-border: var(--color-dark-gray1);
+
padding: 25px 26px 25px;
position: absolute;
top: 101px;
@@ -18,8 +29,11 @@
max-height: 550px;
height: 100%;
padding-bottom: 49px;
- background-color: #fff;
+ &,
+ .bp4-dark & {
+ background-color: var(--x-color-background);
+ }
> form {
display: flex;
flex-direction: column;
@@ -27,7 +41,7 @@
height: 100%;
}
.bp4-drawer-backdrop {
- background-color: rgba(2, 9, 19, 0.65);
+ background-color: var(--x-color-backdrop-background);
}
}
@@ -60,7 +74,7 @@
.bp4-tab-list {
width: 220px;
- border-right: 1px solid #c3cdd5;
+ border-right: 1px solid var(--color-dark-gray2);
padding-top: 10px;
> *:not(:last-child) {
@@ -70,14 +84,14 @@
width: 100%;
.bp4-tab-indicator {
- border-left: 3px solid #0350f8;
- background-color: #edf5ff;
+ border-left: 3px solid var(--x-color-tabs-indicator-border);
+ background-color: var(--x-color-tabs-indicator-background);
border-radius: 0;
}
}
.bp4-tab {
- color: #333;
+ color: var(--color-financial-report-drawer-tab-text);
line-height: 45px;
border-radius: 0;
padding-left: 14px;
@@ -88,8 +102,8 @@
}
&__footer {
- background-color: #ecf0f3;
- border-top: 1px solid #c3cdd5;
+ background-color: var(--x-color-footer-background);
+ border-top: 1px solid var(--x-color-footer-border);
padding: 8px;
padding-left: 230px;
position: absolute;
diff --git a/packages/webapp/src/style/objects/buttons.scss b/packages/webapp/src/style/objects/buttons.scss
index 1dafb416d..aefb1d846 100644
--- a/packages/webapp/src/style/objects/buttons.scss
+++ b/packages/webapp/src/style/objects/buttons.scss
@@ -1,6 +1,9 @@
.bp4-button {
+ --color-button-color: #555;
+ --color-button-color: var(--color-light-gray3);
+
min-width: 32px;
min-height: 32px;
padding-left: 12px;
@@ -12,7 +15,7 @@
}
.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
- color: #555555;
+ color: var(--color-button-color);
box-shadow: 0 0 0 transparent;
&.bp4-small {
diff --git a/packages/webapp/src/style/objects/form.scss b/packages/webapp/src/style/objects/form.scss
index 2d7602922..21b442a58 100644
--- a/packages/webapp/src/style/objects/form.scss
+++ b/packages/webapp/src/style/objects/form.scss
@@ -29,13 +29,16 @@ label.bp4-label {
// Form input.
.#{$ns}-input {
- box-shadow: 0 0 0 transparent;
- border: 1px solid #ced4da;
+ border: 1px solid var(--color-ui-input-border);
border-radius: 2px;
height: 32px;
line-height: 32px;
color: #333;
+ &,
+ .bp4-dark & {
+ box-shadow: 0 0 0 transparent;
+ }
&:focus,
&.bp4-active {
box-shadow: 0 0 0 1px #116cd0;
@@ -102,12 +105,14 @@ label.bp4-label {
border-radius: 2px;
&,
- &:hover {
- background: #fff;
+ &:hover,
+ .bp4-dark &,
+ .bp4-dark &:hover {
box-shadow: none;
- border: 1px solid #ced4da;
+ background-color: var(--color-ui-input-background);
+ border: 1px solid var(--color-ui-input-border);
}
-
+
&:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
border-color: #80bdff;
@@ -123,11 +128,11 @@ label.bp4-label {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
- color: #495057;
+ color: var(--color-ui-input-group-prepend-color);
text-align: center;
white-space: nowrap;
- background-color: #e9ecef;
- border: 1px solid #ced4da;
+ background-color: var(--color-ui-input-group-prepend-background);
+ border: 1px solid var(--color-ui-input-group-prepend-border);
border-radius: 0.25rem;
height: 100%;
@@ -144,7 +149,6 @@ label.bp4-label {
.bp4-input-group {
flex: 1 1 auto;
}
-
.bp4-control-group {
>.input-group-prepend:first-child .input-group-text {
border-top-right-radius: 0;
@@ -295,8 +299,8 @@ label.bp4-label {
color: #495057;
text-align: center;
white-space: nowrap;
- background-color: #e9ecef;
- border: 1px solid #ced4da;
+ background-color: var(--color-ui-input-group-prepend-background);
+ border: 1px solid var(--color-ui-input-group-prepend-border);
border-radius: 0 3px 3px 0;
.bp4-icon {
diff --git a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
index 02a7c0049..7116a4648 100644
--- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
+++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss
@@ -10,23 +10,26 @@ $dashboard-views-bar-height: 44px;
min-height: 60px;
display: flex;
justify-content: space-between;
- background-color: #fff;
- border-bottom: 1px solid #c7d5db;
+ background-color: var(--color-dashboard-topbar-background);
+ border-bottom: 1px solid var(--color-dashboard-topbar-border-color);
&-right,
&-left {
display: flex;
}
- &-actions {}
+ &-actions {
+ }
&-sidebar-toggle {
display: flex;
align-items: center;
margin-left: 2px;
- .#{$ns}-button {
- color: #6b8193;
+ .bp4-button.bp4-minimal {
+ &,
+ .bp4-dark & {
+ color: var(--color-sidebar-toggle);
&,
&:hover,
@@ -38,6 +41,7 @@ $dashboard-views-bar-height: 44px;
}
}
}
+ }
&-navbar {
display: flex;
@@ -126,6 +130,13 @@ $dashboard-views-bar-height: 44px;
background: $light-gray2;
}
+ .bp4-dark & {
+ background: var(--color-dark-gray4);
+
+ &:hover {
+ background: var(--color-dark-gray5);
+ }
+ }
&::before {
background: escape-svg($breadcrumbs-collapsed-icon) center center;
width: 15px;
@@ -155,16 +166,17 @@ $dashboard-views-bar-height: 44px;
}
&__actions-bar {
- border-bottom: 2px solid #e1e2e8;
+ border-bottom: 2px solid var(--color-dashboard-actionsbar-border);
.bp4-navbar-divider {
- border-left-color: rgb(199, 214, 219);
+ border-left-color: var(--color-dashboard-actionsbar-divider);
}
.#{$ns}-navbar {
box-shadow: none;
padding-left: 12px;
padding-right: 12px;
+ background-color: var(--color-dashboard-navbar-background);
&,
&-group {
@@ -177,25 +189,23 @@ $dashboard-views-bar-height: 44px;
}
.#{$ns}-button {
- color: #32304a;
+ color: var(--color-dashboard-navbar-item-text);
padding: 8px 12px;
&:hover {
- background: rgba(167, 182, 194, 0.12);
- color: #32304a;
+ background: var(--color-dashboard-navbar-item-hover-background);
+ color: var(--color-dashboard-navbar-item-hover-text);
}
-
&.bp4-minimal:active,
&.bp4-minimal.bp4-active {
- background: #a7b6c21f;
- color: #32304a;
+ background: var(--color-dashboard-navbar-item-active-background);
+ color: var(--color-dashboard-navbar-item-active-text);
}
- &.bp4-disabled{
+ &.bp4-disabled {
background: transparent;
color: rgba(50, 48, 74, 0.4);
}
&.has-active-filters {
-
&,
&.bp4-active,
&:active {
@@ -204,22 +214,21 @@ $dashboard-views-bar-height: 44px;
}
.#{$ns}-icon {
- color: #32304a;
+ // color: var(--color-dashboard-navbar-item-icon);
}
&.#{$ns}-minimal.#{$ns}-intent-danger {
color: rgb(194, 48, 48);
- &:not(.bp4-disabled)
- &:hover,
+ &:not(.bp4-disabled) &:hover,
&:focus {
background: rgba(219, 55, 55, 0.1);
}
- &.bp4-disabled{
+ &.bp4-disabled {
color: rgb(194, 48, 48, 0.6);
}
}
- &.#{$ns}-minimal.#{$ns}-intent-success{
+ &.#{$ns}-minimal.#{$ns}-intent-success {
color: #1c6e42;
&:hover,
@@ -229,14 +238,14 @@ $dashboard-views-bar-height: 44px;
}
}
- &.#{$ns}-minimal.#{$ns}-intent-warning{
+ &.#{$ns}-minimal.#{$ns}-intent-warning {
color: #cc7e25;
}
- &.#{$ns}-minimal.#{$ns}-intent-primary{
+ &.#{$ns}-minimal.#{$ns}-intent-primary {
color: #223fc5;
-
+
&:hover,
- &:focus{
+ &:focus {
color: #223fc5;
background: rgba(34, 63, 197, 0.08);
}
@@ -273,7 +282,7 @@ $dashboard-views-bar-height: 44px;
.bp4-control.bp4-switch {
margin-bottom: 0;
margin-left: 8px;
- color: #3d3b53;
+ color: var(--color-dashboard-navbar-item-text);
.bp4-control-indicator {
height: 16px;
@@ -284,11 +293,11 @@ $dashboard-views-bar-height: 44px;
box-shadow: 0 0 0;
}
- input~.bp4-control-indicator {
+ input ~ .bp4-control-indicator {
background: rgba(167, 182, 194, 0.55);
}
- input:checked~.bp4-control-indicator {
+ input:checked ~ .bp4-control-indicator {
background: #0069ff;
}
}
@@ -308,12 +317,13 @@ $dashboard-views-bar-height: 44px;
h1 {
font-size: 22px;
- color: #48485c;
+ color: var(--color-dashboard-topbar-title-text);
font-weight: 500;
margin: 0;
}
- h3 {}
+ h3 {
+ }
.button--view-edit {
svg {
@@ -335,9 +345,11 @@ $dashboard-views-bar-height: 44px;
margin-left: 4px;
}
- &__subtitle {}
+ &__subtitle {
+ }
- &__insider {}
+ &__insider {
+ }
&__offline-badge {
display: flex;
@@ -360,7 +372,7 @@ $dashboard-views-bar-height: 44px;
height: 100%;
min-width: 850px;
- .sidebar--mini-sidebar+& {
+ .sidebar--mini-sidebar + & {
margin-left: 50px;
width: calc(100% - 50px);
}
@@ -370,9 +382,9 @@ $dashboard-views-bar-height: 44px;
display: flex;
flex-direction: column;
flex: 1 0 0;
- background-color: #fbfbfb;
+ background-color: var(--color-dashboard-insider-background);
- >.dashboard__loading-indicator {
+ > .dashboard__loading-indicator {
margin-top: auto;
margin-bottom: auto;
}
@@ -402,10 +414,8 @@ $dashboard-views-bar-height: 44px;
.bigcapital-datatable {
.table {
-
.thead,
.tbody {
-
.th.selection,
.td.selection {
padding-left: 16px;
@@ -435,9 +445,9 @@ $dashboard-views-bar-height: 44px;
display: flex;
flex: 1 0 0;
flex-direction: column;
- background: #fff;
+ background: var(--color-dashboard-datatable-background);
margin: 22px 32px;
- border: 1px solid #d2dce2;
+ border: 1px solid var(--color-dashboard-datatable-border);
.bigcapital-datatable {
display: flex;
@@ -460,7 +470,8 @@ $dashboard-views-bar-height: 44px;
}
}
- &__preferences-topbar {}
+ &__preferences-topbar {
+ }
&__footer {
margin-top: auto;
@@ -470,7 +481,7 @@ $dashboard-views-bar-height: 44px;
.footer-links {
text-align: center;
- >div {
+ > div {
font-size: 12px;
margin-right: 20px;
display: inline;
@@ -505,20 +516,18 @@ $dashboard-views-bar-height: 44px;
font-size: 26px;
font-weight: 600;
margin: 0px 0 10px;
- color: #2c3a5d;
+ color: var(--color-dashboard-error-boundary-title-text);
}
-
p {
font-size: 16px;
- color: #1f3255;
+ color: var(--color-dashboard-error-boundary-description-text);
opacity: 0.8;
}
-
.bp4-icon {
margin-top: 6px;
path {
- fill: #a1afca;
+ fill: var(--color-dashboard-error-boundary-logo);
}
}
}
@@ -602,7 +611,9 @@ $dashboard-views-bar-height: 44px;
left: calc(50% - 250px);
z-index: 21;
border-radius: 3px;
- box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+ box-shadow:
+ 0 0 0 1px rgba(16, 22, 26, 0.1),
+ 0 4px 8px rgba(16, 22, 26, 0.2),
0 18px 46px 6px rgba(16, 22, 26, 0.2);
background-color: #fff;
width: 600px;
diff --git a/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss b/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
index 7c551d6b2..8b3f24341 100644
--- a/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
+++ b/packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
@@ -5,7 +5,7 @@
font-weight: 600;
margin-bottom: 1.4rem;
font-size: 18px;
- color: rgb(31, 50, 85);
+ color: var(--color-report-section-title-text);
margin-top: 10px;
}
@@ -19,9 +19,9 @@
min-height: 140px;
margin-bottom: 16px;
margin-left: 16px;
- border: 1px solid #d1dee2;
- border-top: 3px solid #d1dee2;
- background: #fff;
+ border: 1px solid var(--color-report-item-border);
+ border-top: 3px solid var(--color-report-item-top-border);
+ background: var(--color-report-item-background);
padding: 18px;
.title {
@@ -29,7 +29,7 @@
}
.desc {
- color: rgb(31, 50, 85);
+ color: var(--color-report-item-text);
line-height: 1.55;
margin-top: 8px;
margin-bottom: 0;
diff --git a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
index 9b874c463..1eef4adc2 100644
--- a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
+++ b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss
@@ -3,7 +3,6 @@
// General page
//---------------------------------
.preferences-page__inside-content--general {
-
.bp4-form-group {
max-width: 650px;
margin-bottom: 24px;
@@ -11,7 +10,7 @@
.bp4-label {
min-width: 190px;
font-weight: 600;
- color: #38414e;
+ // color: #38414e;
}
.bp4-form-content {
diff --git a/packages/webapp/src/style/pages/Preferences/Page.scss b/packages/webapp/src/style/pages/Preferences/Page.scss
index d0a57ad9a..49621f880 100644
--- a/packages/webapp/src/style/pages/Preferences/Page.scss
+++ b/packages/webapp/src/style/pages/Preferences/Page.scss
@@ -4,7 +4,7 @@
flex-direction: row;
flex: 1 0 0;
min-width: auto;
- background-color: #fbfbfb;
+ background-color: var(--color-preferences-content-background);
}
.dashboard {
&__preferences-content {
diff --git a/packages/webapp/src/style/pages/Preferences/Sidebar.scss b/packages/webapp/src/style/pages/Preferences/Sidebar.scss
index fddf71748..0706f4617 100644
--- a/packages/webapp/src/style/pages/Preferences/Sidebar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Sidebar.scss
@@ -3,8 +3,8 @@
// Preferences sidebar.
// -----------------------------
.preferences-sidebar {
- background: #eaeef6;
- border-right: 1px solid #c6d0d9;
+ background: var(--color-sidebar-preferences-background);
+ border-right: 1px solid var(--color-sidebar-preferences-border);
min-width: 220px;
max-width: 220px;
height: 100%;
@@ -46,11 +46,11 @@
align-items: center;
height: 60px;
padding: 0 22px;
- border-bottom: 1px solid #bbcbd0;
+ border-bottom: 1px solid var(--color-preferences-sidebar-head-border);
h2 {
font-size: 22px;
- color: #3b3b4c;
+ color: var(--color-preferences-sidebar-head-text);
font-weight: 400;
margin: 0;
}
@@ -60,16 +60,23 @@
padding: 0;
background: transparent;
+ &.#{$ns}-menu {
+ &,
+ .bp4-dark & {
+ background: transparent;
+ }
+ }
+
.#{$ns}-menu-item {
padding: 8px 18px;
font-size: 15px;
font-weight: 400;
- color: #333;
+ color: var(--color-sidebar-preferences-item-text);
&:hover,
&.#{$ns}-active {
- background-color: rgba(255, 255, 255, 0.6);
- color: #333;
+ background-color: var(--color-sidebar-preferences-item-hover-background);
+ color: var(--color-sidebar-preferences-item-hover-text);
}
}
}
diff --git a/packages/webapp/src/style/pages/Preferences/Topbar.scss b/packages/webapp/src/style/pages/Preferences/Topbar.scss
index ec766b93c..34bd9d7e6 100644
--- a/packages/webapp/src/style/pages/Preferences/Topbar.scss
+++ b/packages/webapp/src/style/pages/Preferences/Topbar.scss
@@ -3,7 +3,6 @@
// Preferences topbar.
// -----------------------------
.preferences-topbar {
- border-bottom: 1px solid #d2dde2;
min-height: 60px;
flex: 60px 0 0;
padding: 0 0 0 22px;
@@ -11,14 +10,15 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
- background-color: #fff;
+ background-color: var(--color-preferences-topbar-background);
+ border-bottom: 1px solid var(--color-preferences-topbar-border);
&__title {
h2 {
font-size: 22px;
font-weight: 400;
margin: 0;
- color: #48485b;
+ color: var(--color-preferences-topbar-title);
}
}
diff --git a/packages/webapp/src/style/views/filter-dropdown.scss b/packages/webapp/src/style/views/filter-dropdown.scss
index a703fe1de..d299799f5 100644
--- a/packages/webapp/src/style/views/filter-dropdown.scss
+++ b/packages/webapp/src/style/views/filter-dropdown.scss
@@ -29,14 +29,14 @@
.bp4-html-select::after,
.form-group--select-list .bp4-button::after{
margin-right: 6px;
- border-top-color: #c5c5c5;
+ // border-top-color: #c5c5c5;
}
.bp4-html-select,
.bp4-input,
.form-group--select-list .bp4-button{
&:not(:focus){
- border-color: #d3d9de;
+ // border-color: #d3d9de;
}
}