From d2242b77447a7e2ebd4ee58b12e97b6918e0b1d2 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 3 Oct 2023 12:11:55 +0200 Subject: [PATCH] WIP --- packages/webapp/src/components/Card/index.tsx | 4 +- .../style.module.scss | 2 +- .../Datatable/DatatableEditable.tsx | 22 +++--- .../components/Dialog/DialogFooterActions.tsx | 2 +- .../src/components/Drawer/DrawerMainTabs.tsx | 10 +-- .../ExchangeRate/ExchangeRateMutedField.tsx | 8 +- .../webapp/src/components/Forms/Select.tsx | 6 +- .../src/components/Menu/MenuItemLabel.tsx | 2 +- .../src/components/PageForm/FormTopbar.tsx | 8 +- .../MakeJournal/MakeJournalFormFooterLeft.tsx | 6 +- .../containers/Authentication/_components.tsx | 7 +- .../AccountTransactionsDetailsBar.tsx | 2 +- .../ItemPaymentTransactions/utils.tsx | 2 +- .../ExpenseForm/ExpenseFormFooterLeft.tsx | 6 +- .../APAgingSummary/APAgingSummaryHeader.tsx | 2 +- .../ARAgingSummary/ARAgingSummaryHeader.tsx | 2 +- .../BalanceSheet/BalanceSheetHeader.tsx | 2 +- .../BalanceSheetHeaderComparisonPanal.tsx | 2 +- .../CustomersBalanceSummaryHeader.tsx | 2 +- .../CustomersTransactionsHeader.tsx | 2 +- .../FinancialStatementsFilter.tsx | 2 +- .../GeneralLedger/GeneralLedgerHeader.tsx | 2 +- .../InventoryItemDetailsHeader.tsx | 2 +- .../InventoryValuationHeader.tsx | 2 +- .../Journal/JournalHeader.tsx | 2 +- .../ProfitLossSheet/ProfitLossSheetHeader.tsx | 2 +- .../ProfitLossSheetHeaderComparisonPanel.tsx | 2 +- .../ProjectProfitabilitySummaryHeader.tsx | 2 +- .../PurchasesByItemsHeader.tsx | 2 +- .../SalesByItems/SalesByItemsHeader.tsx | 2 +- .../SalesTaxLiabilitySummaryHeader.tsx | 2 +- .../SelectDisplayColumnsBy.tsx | 2 +- .../TrialBalanceSheetHeader.tsx | 2 +- .../VendorsBalanceSummaryHeader.tsx | 2 +- .../Branches/BranchesDataTable.tsx | 2 +- .../Preferences/General/GeneralForm.tsx | 4 +- .../RolesForm/RoleFormFloatingActions.tsx | 2 +- .../Users/Roles/RolesForm/components.tsx | 4 +- .../Preferences/Warehouses/components.tsx | 2 +- .../EstimatedExpenseFormDialog/index.tsx | 8 +- ...jectBillableEntriesFormFloatingActions.tsx | 2 +- .../components.tsx | 4 +- .../index.tsx | 10 +-- .../ProjectDetails/ProjectDetailTabs.tsx | 10 +-- .../ProjectTasks/components.tsx | 4 +- .../components/FinancialSection.tsx | 4 +- .../containers/ProjectExpenseForm/index.tsx | 8 +- .../containers/ProjectFormDialog/index.tsx | 8 +- .../ProjectInvoicingFormDialog/index.tsx | 10 +-- .../ProjectTimeEntryFormFields.tsx | 2 +- .../ProjectTimeEntryFormDialog/index.tsx | 10 +-- .../containers/ProjectsLanding/components.tsx | 4 +- .../Bills/BillForm/BillFormFooterLeft.tsx | 6 +- .../Purchases/Bills/BillUniversalSearch.tsx | 2 +- .../VendorCreditNoteFormFooterLeft.tsx | 6 +- .../VendorCreditIUniversalSearchBind.tsx | 2 +- .../PaymentForm/PaymentMadeFormFooterLeft.tsx | 6 +- .../PaymentMadeUniversalSearch.tsx | 2 +- .../CreditNoteFormFooterLeft.tsx | 12 +-- .../CreditNotes/CreditNoteUniversalSearch.tsx | 2 +- .../EstimateForm/EstimateFormFooterLeft.tsx | 12 +-- .../EstimateUniversalSearch.tsx | 2 +- .../InvoiceForm/InvoiceFormActions.tsx | 4 +- .../InvoiceForm/InvoiceFormFooterLeft.tsx | 12 +-- .../Sales/Invoices/InvoiceUniversalSearch.tsx | 2 +- .../PaymentReceiveFormFootetLeft.tsx | 6 +- .../PaymentReceiveUniversalSearch.tsx | 2 +- .../ReceiptForm/ReceiptFormFooterLeft.tsx | 12 +-- .../Sales/Receipts/ReceiptUniversalSearch.tsx | 2 +- .../TransactionsLocking/components.tsx | 4 +- .../containers/UniversalSearch/components.tsx | 2 +- .../WarehouseTransferFormFooterLeft.tsx | 6 +- packages/webapp/src/style/App.scss | 61 +++++++++------ .../webapp/src/style/components/Alert.scss | 6 +- .../src/style/components/CloudSpinner.scss | 4 +- .../style/components/DataTable/DataTable.scss | 16 ++-- .../DataTable/DataTableEditable.scss | 34 ++++---- .../DataTableEmptyStatus.module.scss | 4 +- .../components/DataTable/Pagination.scss | 24 +++--- .../src/style/components/Dialog/Dialog.scss | 2 +- .../webapp/src/style/components/Drawer.scss | 18 ++--- .../components/Drawers/AccountDrawer.scss | 2 +- .../components/Drawers/DrawerTemplate.scss | 4 +- .../Drawers/ViewDetail/ViewDetail.scss | 8 +- .../webapp/src/style/components/Hint.scss | 6 +- .../webapp/src/style/components/Menu.scss | 2 +- .../webapp/src/style/components/Overlay.scss | 2 +- .../webapp/src/style/components/PageForm.scss | 16 ++-- .../src/style/components/SidebarOverlay.scss | 2 +- .../webapp/src/style/components/Toast.scss | 2 +- .../src/style/components/UniversalSearch.scss | 52 ++++++------- .../webapp/src/style/components/dragzone.scss | 2 +- .../style/containers/Dashboard/Sidebar.scss | 28 +++---- .../FinancialStatements/DrawerHeader.scss | 26 +++---- .../webapp/src/style/objects/buttons.scss | 20 ++--- packages/webapp/src/style/objects/form.scss | 78 +++++++++---------- packages/webapp/src/style/objects/switch.scss | 4 +- .../pages/Accounts/AccountFormDialog.scss | 14 ++-- .../webapp/src/style/pages/Accounts/List.scss | 8 +- .../AllocateLandedCostForm.scss | 18 ++--- .../style/pages/BadDebt/BadDebtDialog.scss | 12 +-- .../src/style/pages/Billing/BillingPage.scss | 4 +- .../webapp/src/style/pages/Bills/List.scss | 4 +- .../src/style/pages/Bills/PageForm.scss | 12 +-- .../pages/Branches/BranchFormDialog.scss | 16 ++-- .../pages/CashFlow/CashFlowAccounts/List.scss | 4 +- .../CashFlow/CashflowTransactionForm.scss | 4 +- .../ContactDuplicateDialog.scss | 12 +-- .../src/style/pages/CreditNote/List.scss | 2 +- .../src/style/pages/CreditNote/PageForm.scss | 8 +- .../pages/Currency/CurrencyFormDialog.scss | 14 ++-- .../CustomerOpeningBalance.scss | 8 +- .../src/style/pages/Customers/Form.scss | 36 ++++----- .../src/style/pages/Dashboard/Dashboard.scss | 38 ++++----- .../ExchangeRate/ExchangeRateDialog.scss | 8 +- .../src/style/pages/Expense/PageForm.scss | 12 +-- .../CashFlowStatement.scss | 2 +- .../ContactsBalanceSummary.scss | 2 +- .../InventoryItemDetails.scss | 4 +- .../pages/FinancialStatements/Journal.scss | 2 +- .../NumberFormatDropdown.scss | 14 ++-- .../SalesAndPurchasesSheet.scss | 4 +- .../ItemCategory/ItemCategoryDialog.scss | 14 ++-- .../webapp/src/style/pages/Items/Form.scss | 14 ++-- .../pages/Items/ItemAdjustmentDialog.scss | 14 ++-- .../webapp/src/style/pages/Items/List.scss | 4 +- .../ManualJournal/JournalNumberDialog.scss | 6 +- .../src/style/pages/ManualJournal/List.scss | 6 +- .../pages/ManualJournal/MakeJournal.scss | 8 +- .../NotifyConactViaSMSDialog.scss | 10 +-- .../src/style/pages/PaymentMade/PageForm.scss | 8 +- .../style/pages/PaymentReceive/PageForm.scss | 8 +- .../QuickPaymentReceiveDialog.scss | 8 +- .../style/pages/Preferences/Accounting.scss | 16 ++-- .../style/pages/Preferences/GeneralForm.scss | 6 +- .../style/pages/Preferences/Roles/Form.scss | 12 +-- .../pages/Preferences/SMSIntegration.scss | 4 +- .../src/style/pages/Preferences/Topbar.scss | 4 +- .../src/style/pages/Preferences/Users.scss | 4 +- .../ReconcileCreditNoteForm.scss | 4 +- .../ReconcileVendorCreditForm.scss | 8 +- .../ReferenceNumber/ReferenceNumber.scss | 8 +- .../RefundCreditNote/RefundCreditNote.scss | 8 +- .../RefundVendorCredit.scss | 8 +- .../style/pages/SMSMessage/SMSMessage.scss | 8 +- .../style/pages/SaleEstimate/PageForm.scss | 8 +- .../src/style/pages/SaleInvoice/List.scss | 4 +- .../src/style/pages/SaleInvoice/PageForm.scss | 14 ++-- .../src/style/pages/SaleReceipt/PageForm.scss | 8 +- .../src/style/pages/Setup/Congrats.scss | 2 +- .../src/style/pages/Setup/Initializing.scss | 4 +- .../src/style/pages/Setup/Organization.scss | 20 ++--- .../pages/Setup/PaymentViaVoucherDialog.scss | 6 +- .../pages/Subscription/BillingPlans.scss | 16 ++-- .../TransactionsLockingDialog.scss | 8 +- .../style/pages/Users/InviteFormDialog.scss | 18 ++--- .../src/style/pages/Users/UserFormDialog.scss | 18 ++--- .../VendorOpeningBalance.scss | 8 +- .../webapp/src/style/pages/Vendors/Form.scss | 36 ++++----- .../style/pages/VendorsCreditNote/List.scss | 2 +- .../pages/VendorsCreditNote/PageForm.scss | 8 +- .../pages/WarehouseTransfers/PageForm.scss | 8 +- .../pages/Warehouses/warehouseFormDialog.scss | 14 ++-- .../KeyboardShortcutDialog.scss | 4 +- .../src/style/pages/register-organizaton.scss | 16 ++-- .../webapp/src/style/pages/view-form.scss | 6 +- packages/webapp/src/style/variables.scss | 8 +- .../src/style/views/filter-dropdown.scss | 32 ++++---- 168 files changed, 742 insertions(+), 730 deletions(-) diff --git a/packages/webapp/src/components/Card/index.tsx b/packages/webapp/src/components/Card/index.tsx index 3cda38d67..8bd314db6 100644 --- a/packages/webapp/src/components/Card/index.tsx +++ b/packages/webapp/src/components/Card/index.tsx @@ -18,10 +18,10 @@ export const CardFooterActions = styled.div` border-top: 1px solid #e0e7ea; margin-top: 30px; - .bp3-button { + .bp4-button { min-width: 70px; - + .bp3-button { + + .bp4-button { margin-left: 10px; } } diff --git a/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss b/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss index 15f602aab..28ddc83d0 100644 --- a/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss +++ b/packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss @@ -1,6 +1,6 @@ .menu{ - :global .bp3-heading{ + :global .bp4-heading{ font-weight: 400; opacity: 0.5; font-size: 12px; diff --git a/packages/webapp/src/components/Datatable/DatatableEditable.tsx b/packages/webapp/src/components/Datatable/DatatableEditable.tsx index 300559b30..fc95110d4 100644 --- a/packages/webapp/src/components/Datatable/DatatableEditable.tsx +++ b/packages/webapp/src/components/Datatable/DatatableEditable.tsx @@ -21,7 +21,7 @@ export function DataTableEditable({ } const DatatableEditableRoot = styled.div` - .bp3-form-group { + .bp4-form-group { margin-bottom: 0; } .table { @@ -69,17 +69,17 @@ const DatatableEditableRoot = styled.div` } .tr { &:hover .td, - .bp3-input { + .bp4-input { background-color: transparent; } - .bp3-form-group:not(.bp3-intent-danger) .bp3-input, - .form-group--select-list .bp3-button { + .bp4-form-group:not(.bp4-intent-danger) .bp4-input, + .form-group--select-list .bp4-button { border-color: #ffffff; color: #222; border-radius: 3px; text-align: inherit; } - .bp3-form-group:not(.bp3-intent-danger) .bp3-input { + .bp4-form-group:not(.bp4-intent-danger) .bp4-input { border-radius: 2px; padding-left: 14px; padding-right: 14px; @@ -88,7 +88,7 @@ const DatatableEditableRoot = styled.div` box-shadow: 0 0 0 2px #116cd0; } } - .form-group--select-list .bp3-button { + .form-group--select-list .bp4-button { padding-left: 6px; padding-right: 6px; @@ -97,16 +97,16 @@ const DatatableEditableRoot = styled.div` } } .form-group--select-list, - .bp3-form-group { - &.bp3-intent-danger { - .bp3-button:not(.bp3-minimal), - .bp3-input { + .bp4-form-group { + &.bp4-intent-danger { + .bp4-button:not(.bp4-minimal), + .bp4-input { border-color: #f7b6b6; } } } .td.actions { - .bp3-button { + .bp4-button { color: #80858f; } } diff --git a/packages/webapp/src/components/Dialog/DialogFooterActions.tsx b/packages/webapp/src/components/Dialog/DialogFooterActions.tsx index 8de8439f6..b6e64bb24 100644 --- a/packages/webapp/src/components/Dialog/DialogFooterActions.tsx +++ b/packages/webapp/src/components/Dialog/DialogFooterActions.tsx @@ -35,7 +35,7 @@ const DialogFooterActionsRoot = styled.div` ${(props) => props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'}; - .bp3-button { + .bp4-button { margin-left: 5px; margin-left: 5px; } diff --git a/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx b/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx index ff33a1d79..77ae36811 100644 --- a/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx +++ b/packages/webapp/src/components/Drawer/DrawerMainTabs.tsx @@ -17,8 +17,8 @@ export function DrawerMainTabs({ children, ...restProps }) { } const DrawerMainTabsRoot = styled.div` - .bp3-tabs { - .bp3-tab-list { + .bp4-tabs { + .bp4-tab-list { position: relative; background-color: #fff; padding: 0 15px; @@ -28,7 +28,7 @@ const DrawerMainTabsRoot = styled.div` margin-right: 25px; } - &.bp3-large > .bp3-tab { + &.bp4-large > .bp4-tab { font-size: 15px; color: #7f8596; margin: 0 1rem; @@ -38,13 +38,13 @@ const DrawerMainTabsRoot = styled.div` color: #0052cc; } } - .bp3-tab-indicator-wrapper .bp3-tab-indicator { + .bp4-tab-indicator-wrapper .bp4-tab-indicator { height: 2px; bottom: -2px; } } - .bp3-tab-panel { + .bp4-tab-panel { margin-top: 0; .card { diff --git a/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx b/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx index 77c4489d8..9441f1c9a 100644 --- a/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx +++ b/packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx @@ -60,8 +60,8 @@ export function ExchangeRateMutedField({ } const ExchangeRateFormGroup = styled(FormGroup)` - &.bp3-form-group { - label.bp3-label { + &.bp4-form-group { + label.bp4-label { font-size: 12px; opacity: 0.7; line-height: 1; @@ -79,7 +79,7 @@ const ExchangeRateButton = styled.div` position: relative; padding-right: 28px; - .bp3-button { + .bp4-button { position: absolute; right: 0; } @@ -88,7 +88,7 @@ const ExchangeRateButton = styled.div` const ExchangeRateFormGroupContent = styled.div` padding: 5px 0; - .bp3-form-group { + .bp4-form-group { padding: 2px; margin: 2px 4px !important; } diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx index 6916e115c..205f23f85 100644 --- a/packages/webapp/src/components/Forms/Select.tsx +++ b/packages/webapp/src/components/Forms/Select.tsx @@ -26,7 +26,7 @@ const SelectButton = styled(Button)` position: relative; padding-right: 30px; - &:not(.is-selected):not([class*='bp3-intent-']):not(.bp3-minimal) { + &:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) { color: #5c7080; } &:after { @@ -46,13 +46,13 @@ const SelectButton = styled(Button)` margin-right: 12px; border-radius: 1px; } - &:not([class*='bp3-intent-']):not(.bp3-disabled) { + &:not([class*='bp4-intent-']):not(.bp4-disabled) { &, &:hover { background: #fff; } } - .bp3-intent-danger & { + .bp4-intent-danger & { border-color: #db3737; } `; diff --git a/packages/webapp/src/components/Menu/MenuItemLabel.tsx b/packages/webapp/src/components/Menu/MenuItemLabel.tsx index 5cc880467..9b1fb2d2f 100644 --- a/packages/webapp/src/components/Menu/MenuItemLabel.tsx +++ b/packages/webapp/src/components/Menu/MenuItemLabel.tsx @@ -2,5 +2,5 @@ import React from 'react'; export function MenuItemLabel({ text }) { - return {text}; + return {text}; } diff --git a/packages/webapp/src/components/PageForm/FormTopbar.tsx b/packages/webapp/src/components/PageForm/FormTopbar.tsx index e4108069d..060ecbb55 100644 --- a/packages/webapp/src/components/PageForm/FormTopbar.tsx +++ b/packages/webapp/src/components/PageForm/FormTopbar.tsx @@ -18,16 +18,16 @@ const FormTopBarRoot = styled(Navbar)` height: 35px; padding: 0 20px; - .bp3-navbar-group { + .bp4-navbar-group { height: 35px; } - .bp3-navbar-divider { + .bp4-navbar-divider { border-left-color: #d2dce2; } - .bp3-skeleton { + .bp4-skeleton { max-height: 10px; } - .bp3-button { + .bp4-button { &:hover { background: rgba(167, 182, 194, 0.12); color: #32304a; diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx index 924f569d6..8912f1de8 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx @@ -22,12 +22,12 @@ export function MakeJournalFormFooterLeft() { } const DescriptionFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Authentication/_components.tsx b/packages/webapp/src/containers/Authentication/_components.tsx index 0199ad254..8e2da305c 100644 --- a/packages/webapp/src/containers/Authentication/_components.tsx +++ b/packages/webapp/src/containers/Authentication/_components.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React from 'react'; import styled from 'styled-components'; import { Spinner } from '@blueprintjs/core'; @@ -39,7 +40,7 @@ export const AuthInsiderCopyright = styled.div` color: #666; margin-top: 1.2rem; - .bp3-icon-bigcapital { + .bp4-icon-bigcapital { svg { path { fill: #a3a3a3; @@ -65,11 +66,11 @@ export const AuthFooterLink = styled.p` export const AuthSubmitButton = styled(Button)` margin-top: 20px; - &.bp3-intent-primary { + &.bp4-intent-primary { background-color: #0052cc; &:disabled, - &.bp3-disabled { + &.bp4-disabled { background-color: rgba(0, 82, 204, 0.4); } } diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx index 375dd3736..02a03c3a8 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx @@ -178,7 +178,7 @@ const AccountSwitchItemUpdatedAt = styled.div` `; const AccountSwitchButtonBase = styled(Button)` - .bp3-button-text { + .bp4-button-text { margin-right: 5px; } `; diff --git a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx index 4613a5d26..a2b4f546a 100644 --- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx +++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx @@ -53,7 +53,7 @@ export const ItemManuTransaction = ({ onChange }) => { }; const ItemSwitchButton = styled(Button)` - .bp3-button-text { + .bp4-button-text { display: flex; color: #727983; } diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx index 4104fecb4..e6dc5443d 100644 --- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx @@ -20,12 +20,12 @@ export function ExpenseFormFooterLeft() { ); } const DescriptionFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx index f935a39ee..a16565498 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx @@ -110,7 +110,7 @@ export default compose( )(APAgingSummaryHeader); const APAgingDrawerHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 520px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx index 2dcb33c32..3865f9519 100644 --- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx @@ -116,7 +116,7 @@ export default compose( )(ARAgingSummaryHeader); const ARAgingDrawerHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 520px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx index 310a3c059..d44d24fc5 100644 --- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx @@ -125,7 +125,7 @@ export default compose( )(BalanceSheetHeader); const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 520px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx index dc1896510..3a65b88af 100644 --- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx +++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx @@ -159,7 +159,7 @@ export default function BalanceSheetHeaderComparisonPanal() { } const BalanceSheetComparisonWrap = styled.div` - .bp3-form-group { + .bp4-form-group { margin-bottom: 3px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx index 2ceaf1c1d..a2a32adad 100644 --- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx @@ -100,7 +100,7 @@ export default compose( )(CustomersBalanceSummaryHeader); const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 450px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx index 3f9104d73..3df138303 100644 --- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx @@ -101,7 +101,7 @@ export default compose( )(CustomersTransactionsHeader); const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 450px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx index 5f1847ce5..741b25f7f 100644 --- a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx +++ b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx @@ -47,7 +47,7 @@ export default function FinancialStatementsFilter({ {({ form: { setFieldValue }, field: { value } }) => ( ( } - className="form-group-display-columns-by form-group--select-list bp3-fill" + className="form-group-display-columns-by form-group--select-list bp4-fill" inline={false} {...formGroupProps} > diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx index 092a5e640..7cb170509 100644 --- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx @@ -127,7 +127,7 @@ export default compose( )(TrialBalanceSheetHeader); const TrialBalanceSheetDrawerHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 450px; } `; diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx index c5aef9f42..038af2152 100644 --- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx +++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx @@ -102,7 +102,7 @@ export default compose( )(VendorsBalanceSummaryHeader); const VendorBalanceDrawerHeader = styled(FinancialStatementHeader)` - .bp3-drawer { + .bp4-drawer { max-height: 450px; } `; diff --git a/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx b/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx index 982109f20..efb077055 100644 --- a/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx +++ b/packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx @@ -87,7 +87,7 @@ const BranchesTable = styled(DataTable)` min-height: 38px; .td.td-name { - .bp3-icon { + .bp4-icon { margin: 0; margin-left: 2px; vertical-align: top; diff --git a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx index 23860d3f4..a4eb2e106 100644 --- a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx +++ b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx @@ -221,10 +221,10 @@ const CardFooterActions = styled.div` border-top: 1px solid #e0e7ea; margin-top: 30px; - .bp3-button { + .bp4-button { min-width: 70px; - + .bp3-button { + + .bp4-button { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx index 06e7214f9..3d8e117a6 100644 --- a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx +++ b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx @@ -49,7 +49,7 @@ const RoleFormFloatingActionsRoot = styled.div` border-top: 1px solid #d2dde2; box-shadow: 0px -1px 4px 0px rgb(0 0 0 / 5%); - .bp3-button { + .bp4-button { margin-right: 10px; } `; diff --git a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx index ec00d0b5b..8a1f7325f 100644 --- a/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx +++ b/packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx @@ -374,7 +374,7 @@ export const RolesPermissionList = () => { }; const PermissionCheckbox = styled(Checkbox)` - &.bp3-control.bp3-checkbox .bp3-control-indicator { + &.bp4-control.bp4-checkbox .bp4-control-indicator { border-radius: 2px; border-color: #555; @@ -454,7 +454,7 @@ const ModulePermissionsTableRoot = styled.table` } tr td { - .bp3-control.bp3-inline { + .bp4-control.bp4-inline { margin: 0; } diff --git a/packages/webapp/src/containers/Preferences/Warehouses/components.tsx b/packages/webapp/src/containers/Preferences/Warehouses/components.tsx index 54be5740c..7c46280bd 100644 --- a/packages/webapp/src/containers/Preferences/Warehouses/components.tsx +++ b/packages/webapp/src/containers/Preferences/Warehouses/components.tsx @@ -150,7 +150,7 @@ export const WarehouseTitle = styled.div` font-weight: 500; line-height: 1; - .bp3-icon { + .bp4-icon { margin: 0; margin-left: 2px; vertical-align: top; diff --git a/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx index 9734a8067..b144220a1 100644 --- a/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx +++ b/packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx @@ -40,17 +40,17 @@ function EstimatedExpenseFormDialog({ export default compose(withDialogRedux())(EstimatedExpenseFormDialog); const EstimateExpenseFormDialogRoot = styled(Dialog)` - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx index cb8142e39..93fa70837 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx @@ -48,7 +48,7 @@ function ProjectEntriesFormFloatingActions({ export default compose(withDialogActions)(ProjectEntriesFormFloatingActions); const SaveButton = styled(Button)` - &.bp3-button { + &.bp4-button { margin-left: 0px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx index 21da1a3fd..0705960f0 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx @@ -102,8 +102,8 @@ const BillableEntryFooter = styled.div` `; const BillableEntryButton = styled(Button)` - &.bp3-button.bp3-small, - &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small { + &.bp4-button.bp4-small, + &.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal).bp4-small { font-size: 12px; color: #2172ed; background: transparent; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx index 25cf0d7e4..ae68c61e6 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx @@ -41,18 +41,18 @@ function ProjectBillableEntriesFormDialog({ export default compose(withDialogRedux())(ProjectBillableEntriesFormDialog); const ProjectBillableEntriesFormDialogRoot = styled(Dialog)` - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } } - .bp3-dialog-footer { - .bp3-dialog-footer-actions { + .bp4-dialog-footer { + .bp4-dialog-footer-actions { display: flex; justify-content: flex-start; } diff --git a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx index f0e07a7ce..3dd9f9431 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx @@ -48,8 +48,8 @@ export default function ProjectDetailTabs() { } const ProjectTabsContent = styled.div` - .bp3-tabs { - .bp3-tab-list { + .bp4-tabs { + .bp4-tab-list { padding: 0 20px; background-color: #fff; border-bottom: 1px solid #d2dce2; @@ -58,7 +58,7 @@ const ProjectTabsContent = styled.div` margin-right: 0; } - &.bp3-large > .bp3-tab { + &.bp4-large > .bp4-tab { font-size: 15px; font-weight: 400; color: #7f8596; @@ -69,12 +69,12 @@ const ProjectTabsContent = styled.div` color: #0052cc; } } - .bp3-tab-indicator-wrapper .bp3-tab-indicator { + .bp4-tab-indicator-wrapper .bp4-tab-indicator { height: 2px; bottom: -2px; } } - .bp3-tab-panel { + .bp4-tab-panel { /* margin: 20px 32px; */ /* margin: 20px; */ /* margin-top: 20px; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx index ee108a4ff..742ba5d0d 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx @@ -109,13 +109,13 @@ const TaskTimeFull = styled.div` `; const TaskProgressBar = styled(ProgressBar)` - &.bp3-progress-bar { + &.bp4-progress-bar { display: block; flex-shrink: 0; height: 4px; max-width: 150px; &, - .bp3-progress-meter { + .bp4-progress-meter { border-radius: 4px; } } diff --git a/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx b/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx index 7f733ac0d..321dc3292 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx @@ -76,10 +76,10 @@ export const FinancialCardText = styled.div` color: #7b8195; `; export const FinancialCardProgressBar = styled(ProgressBar)` - &.bp3-progress-bar { + &.bp4-progress-bar { height: 3px; &, - .bp3-progress-meter { + .bp4-progress-meter { border-radius: 0; } } diff --git a/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx index 79c72836d..86a7d6ee2 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx @@ -40,17 +40,17 @@ function ProjectExpenseFormDialog({ export default compose(withDialogRedux())(ProjectExpenseFormDialog); const ProjectExpenseFormDialogRoot = styled(Dialog)` - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx index e21d1577a..fc06bd86a 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx @@ -43,17 +43,17 @@ function ProjectFormDialog({ export default compose(withDialogRedux())(ProjectFormDialog); const ProjectFormDialogRoot = styled(Dialog)` - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 0; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx index 281b46001..9ce252bb4 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx @@ -34,22 +34,22 @@ function ProjectInvoicingFormDialog({ dialogName, payload: {}, isOpen }) { export default compose(withDialogRedux())(ProjectInvoicingFormDialog); const ProjectInvoicingFormDialogRoot = styled(Dialog)` - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; margin-top: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } - label.bp3-control.bp3-checkbox { + label.bp4-control.bp4-checkbox { margin-top: 15px; } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx index f34ba14dc..437da4cda 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx @@ -113,7 +113,7 @@ function ProjectTimeEntryFormFields() { export default ProjectTimeEntryFormFields; const DurationInputGroup = styled(FInputGroup)` - .bp3-input { + .bp4-input { width: 150px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx index 994d0f561..d500954a2 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx @@ -47,18 +47,18 @@ function ProjectTimeEntryFormDialog({ export default compose(withDialogRedux())(ProjectTimeEntryFormDialog); const ProjectTimeEntryFormDialogRoot = styled(Dialog)` - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 0; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } .form-group { &--description { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -68,7 +68,7 @@ const ProjectTimeEntryFormDialogRoot = styled(Dialog)` } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } `; diff --git a/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx b/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx index 5facc30f9..4dcef8cbd 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx @@ -195,13 +195,13 @@ const ProjectStatusTaskAmount = styled.div` `; const ProjectProgressBar = styled(ProgressBar)` - &.bp3-progress-bar { + &.bp4-progress-bar { display: block; flex-shrink: 0; height: 3px; max-width: 110px; &, - .bp3-progress-meter { + .bp4-progress-meter { border-radius: 0; } } diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx index 57b0ca946..77c529b87 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx @@ -22,12 +22,12 @@ export function BillFormFooterLeft() { } const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx index 963216455..b76a7f688 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx @@ -88,7 +88,7 @@ export function BillUniversalSearchItem( text={
{item.text}
- + {item.reference.bill_number}{' '} {item.reference.formatted_bill_date} diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx index 6266d42dd..beb3f4966 100644 --- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx @@ -22,12 +22,12 @@ export function VendorCreditNoteFormFooterLeft() { } const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx index f87f4182b..fa82987e3 100644 --- a/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx +++ b/packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx @@ -74,7 +74,7 @@ export function VendorCreditUniversalSearchItem( text={
{item.text}
- + {item.reference.vendor_credit_number}{' '} {item.reference.formatted_vendor_credit_date} diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx index 8c119e60c..699859923 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx @@ -28,14 +28,14 @@ export function PaymentMadeFormFooterLeft() { } const InternalNoteFormGroup = styled(FFormGroup)` - &.bp3-form-group { + &.bp4-form-group { margin-bottom: 40px; - .bp3-label { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx index baf3f56d2..f1cdc60ce 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx @@ -44,7 +44,7 @@ export function PaymentMadeUniversalSearchItem(
{highlightText(text, query)}
- + {reference.payment_number && ( <> {highlightText(reference.payment_number, query)} diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx index 32735f836..2b86b1319 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx @@ -34,26 +34,26 @@ export function CreditNoteFormFooterLeft() { } const CreditNoteMsgFormGroup = styled(FFormGroup)` - &.bp3-form-group { + &.bp4-form-group { margin-bottom: 40px; - .bp3-label { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } `; const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx index f3b4abffb..2c495f802 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx @@ -73,7 +73,7 @@ export function CreditNoteUniversalSearchItem( text={
{item.text}
- + {item.reference.credit_note_number}{' '} {item.reference.formatted_credit_note_date} diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx index 0c6267117..20968e4b1 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx @@ -34,26 +34,26 @@ export function EstimateFormFooterLeft() { } const EstimateMsgFormGroup = styled(FFormGroup)` - &.bp3-form-group { + &.bp4-form-group { margin-bottom: 40px; - .bp3-label { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } `; const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx index fd69ce7ae..073f33631 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx @@ -76,7 +76,7 @@ export function EstimateUniversalSearchItem( text={
{item.text}
- + {item.reference.estimate_number}{' '} {item.reference.formatted_estimate_date} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx index e185455f9..bf21e0fad 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx @@ -60,7 +60,7 @@ const InclusiveFormGroup = styled(FFormGroup)` margin-bottom: 0; margin-left: auto; - &.bp3-form-group.bp3-inline label.bp3-label { + &.bp4-form-group.bp4-inline label.bp4-label { line-height: 1.25; opacity: 0.6; margin-right: 8px; @@ -68,7 +68,7 @@ const InclusiveFormGroup = styled(FFormGroup)` `; const InclusiveSelect = styled(FSelect)` - .bp3-button { + .bp4-button { padding-right: 24px; } `; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx index 982de7a7e..14ff7d721 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx @@ -35,26 +35,26 @@ export function InvoiceFormFooterLeft() { } const InvoiceMsgFormGroup = styled(FFormGroup)` - &.bp3-form-group { + &.bp4-form-group { margin-bottom: 40px; - .bp3-label { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } `; const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx index d2b9124d4..84a8858e4 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx @@ -80,7 +80,7 @@ export function InvoiceUniversalSearchItem( text={
{highlightText(item.text, query)}
- + {highlightText(item.reference.invoice_no, query)}{' '} {item.reference.formatted_invoice_date} diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx index 8c139e655..2010cdb96 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx @@ -26,12 +26,12 @@ export function PaymentReceiveFormFootetLeft() { } const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx index 34d940e57..1a7eded91 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx @@ -50,7 +50,7 @@ export function PaymentReceiveUniversalSearchItem(
{highlightText(item.text, query)}
- + {highlightText(item.reference.payment_receive_no, query)}{' '} {highlightText(item.reference.formatted_payment_date, query)} diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx index 433217e40..04f797b52 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterLeft.tsx @@ -36,26 +36,26 @@ export function ReceiptFormFooterLeft() { } const ReceiptMsgFormGroup = styled(FFormGroup)` - &.bp3-form-group { + &.bp4-form-group { margin-bottom: 40px; - .bp3-label { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } `; const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx index 698b4304d..ec050da8f 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx @@ -66,7 +66,7 @@ export function ReceiptUniversalSearchItem( text={
{item.text}
- + {item.reference.receipt_number}{' '} {item.reference.formatted_receipt_date} diff --git a/packages/webapp/src/containers/TransactionsLocking/components.tsx b/packages/webapp/src/containers/TransactionsLocking/components.tsx index 63ceeb26c..f7ae32a54 100644 --- a/packages/webapp/src/containers/TransactionsLocking/components.tsx +++ b/packages/webapp/src/containers/TransactionsLocking/components.tsx @@ -372,7 +372,7 @@ const TransLockingIcon = styled.div` border-radius: 8px; color: #93a1ba; - .bp3-icon { + .bp4-icon { position: relative; top: 1px; } @@ -381,7 +381,7 @@ const TransLockingIcon = styled.div` export const TransLockingActions = styled.div` display: flex; - .bp3-divider { + .bp4-divider { margin: 2px; } `; diff --git a/packages/webapp/src/containers/UniversalSearch/components.tsx b/packages/webapp/src/containers/UniversalSearch/components.tsx index c080be0d3..66ac23631 100644 --- a/packages/webapp/src/containers/UniversalSearch/components.tsx +++ b/packages/webapp/src/containers/UniversalSearch/components.tsx @@ -18,7 +18,7 @@ function UniversalSearchItemDetail(item, { handleClick, modifiers, query }) {
{highlightText(item.text, query)}
{item.subText && ( - + {highlightText(item.subText, query)} )} diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx index 0ecb61a79..d42b1be93 100644 --- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx +++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx @@ -22,12 +22,12 @@ export function WarehouseTransferFormFooterLeft() { } const TermsConditsFormGroup = styled(FFormGroup)` - &.bp3-form-group { - .bp3-label { + &.bp4-form-group { + .bp4-label { font-size: 12px; margin-bottom: 12px; } - .bp3-form-content { + .bp4-form-content { margin-left: 10px; } } diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss index 039cc6080..a37a32c1a 100644 --- a/packages/webapp/src/style/App.scss +++ b/packages/webapp/src/style/App.scss @@ -1,7 +1,18 @@ @import './normalize.scss'; - @import './Base.scss'; +$svg-icon-map: ( + '16px/small-minus.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='%23fff'/", + '16px/small-tick.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='%23fff'/", + '16px/chevron-right.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/", + '16px/more.svg': "g fill='%235C7080'%3E%3Ccircle cx='2' cy='8.03' r='2'/%3E%3Ccircle cx='14' cy='8.03' r='2'/%3E%3Ccircle cx='8' cy='8.03' r='2'/%3E%3C/g", +); + +@function svg-icon($inline-svg, $fill-color) { + @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3C"+ map-get($svg-icon-map, $inline-svg) + "%3E%3C/svg%3E") +} + + // Blueprint framework. @import '@blueprintjs/core/src/blueprint.scss'; @import '@blueprintjs/datetime/src/blueprint-datetime.scss'; @@ -51,56 +62,56 @@ body.hide-scrollbar .Pane2 { overflow: hidden; } -.bp3-fill { +.bp4-fill { - .bp3-popover-wrapper, - .bp3-popover-target { + .bp4-popover-wrapper, + .bp4-popover-target { display: block; width: 100%; } - .bp3-button { + .bp4-button { width: 100%; justify-content: start; } } -.bp3-datepicker-caption .bp3-html-select::after { +.bp4-datepicker-caption .bp4-html-select::after { margin-right: 6px; } -.bp3-select-popover .bp3-menu, -.bp3-multi-select-popover .bp3-menu { +.bp4-select-popover .bp4-menu, +.bp4-multi-select-popover .bp4-menu { max-height: 300px; overflow: auto; } -.bp3-form-group .bp3-label { +.bp4-form-group .bp4-label { .hint { - .bp3-popover-wrapper { + .bp4-popover-wrapper { display: inline; } } - &:not(.bp3-inline) .hint .bp3-popover-target { + &:not(.bp4-inline) .hint .bp4-popover-target { display: inline; margin-left: 0; } } -.bp3-popover.bp3-tooltip { +.bp4-popover.bp4-tooltip { max-width: 300px; } -.bp3-timezone-picker { - .bp3-button { +.bp4-timezone-picker { + .bp4-button { [icon='caret-down'] { display: none; } } } -.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter { +.bp4-progress-bar.bp4-intent-primary .bp4-progress-meter { background-color: #0066ff; } @@ -183,7 +194,7 @@ body.hide-scrollbar .Pane2 { .ReactVirtualized__List {} -.bp3-drawer { +.bp4-drawer { box-shadow: 0 0 0; background-color: #fbfbfb; @@ -194,7 +205,7 @@ body.hide-scrollbar .Pane2 { // RTL Icons. html[dir='rtl'] { - .bp3-icon-caret-right { + .bp4-icon-caret-right { transform: scaleX(-1); } } @@ -205,12 +216,12 @@ html[lang^='ar'] { } } -.bp3-popover2 { +.bp4-popover2 { 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); } -.bp3-tooltip2 .bp3-popover2-arrow:before { +.bp4-tooltip2 .bp4-popover2-arrow:before { box-shadow: 0 0 0; } @@ -230,38 +241,38 @@ html[lang^='ar'] { z-index: 9999999; margin: 6px; - .bp3-button { + .bp4-button { border-color: rgba(0, 0, 0, 0.25); color: rgb(25, 32, 37); min-height: 30px; padding-left: 14px; padding-right: 14px; - &+.bp3-button { + &+.bp4-button { margin-left: 8px; } } } - .bp3-dialog { + .bp4-dialog { &-body { &:not(.loading) { margin: 0; } - >.bp3-spinner { + >.bp4-spinner { margin: 20px 0; } } } } -.bp3-drawer { +.bp4-drawer { border-left: 1px solid #00115e; } .drawer-portal { - .bp3-overlay-backdrop { + .bp4-overlay-backdrop { background: rgba(0, 10, 30, 0.05); } } diff --git a/packages/webapp/src/style/components/Alert.scss b/packages/webapp/src/style/components/Alert.scss index 502d5da40..149c7329a 100644 --- a/packages/webapp/src/style/components/Alert.scss +++ b/packages/webapp/src/style/components/Alert.scss @@ -1,6 +1,6 @@ -.bp3-alert{ - .bp3-alert-footer{ - .bp3-button{ +.bp4-alert{ + .bp4-alert-footer{ + .bp4-button{ min-width: 70px; } } diff --git a/packages/webapp/src/style/components/CloudSpinner.scss b/packages/webapp/src/style/components/CloudSpinner.scss index d300db262..f4ab62a0c 100644 --- a/packages/webapp/src/style/components/CloudSpinner.scss +++ b/packages/webapp/src/style/components/CloudSpinner.scss @@ -14,7 +14,7 @@ z-index: 999; } - .bp3-spinner{ + .bp4-spinner{ position: absolute; z-index: 999999; left: 50%; @@ -22,7 +22,7 @@ margin-top: -20px; margin-left: -20px; } - &:not(.is-loading) .bp3-spinner{ + &:not(.is-loading) .bp4-spinner{ display: none; } } diff --git a/packages/webapp/src/style/components/DataTable/DataTable.scss b/packages/webapp/src/style/components/DataTable/DataTable.scss index 2dbd1c1af..ba4defb1c 100644 --- a/packages/webapp/src/style/components/DataTable/DataTable.scss +++ b/packages/webapp/src/style/components/DataTable/DataTable.scss @@ -64,7 +64,7 @@ } } - .bp3-context-menu-popover-target { + .bp4-context-menu-popover-target { z-index: 100; } @@ -96,7 +96,7 @@ border-right: 0; } - .bp3-control { + .bp4-control { margin-bottom: 0; } @@ -124,7 +124,7 @@ } } - .bp3-control.bp3-checkbox .bp3-control-indicator { + .bp4-control.bp4-checkbox .bp4-control-indicator { cursor: auto; &, @@ -134,10 +134,10 @@ } } - .bp3-control.bp3-checkbox { + .bp4-control.bp4-checkbox { - input:checked~.bp3-control-indicator, - input:indeterminate~.bp3-control-indicator { + input:checked~.bp4-control-indicator, + input:indeterminate~.bp4-control-indicator { border-color: #0052ff; } } @@ -198,7 +198,7 @@ text-overflow: ellipsis; } - .bp3-form-group { + .bp4-form-group { width: 100%; } @@ -238,7 +238,7 @@ color: #425361; } - .bp3-icon-more-h-16 { + .bp4-icon-more-h-16 { margin-top: 2px; } } diff --git a/packages/webapp/src/style/components/DataTable/DataTableEditable.scss b/packages/webapp/src/style/components/DataTable/DataTableEditable.scss index d5dc2c865..42b4be560 100644 --- a/packages/webapp/src/style/components/DataTable/DataTableEditable.scss +++ b/packages/webapp/src/style/components/DataTable/DataTableEditable.scss @@ -1,6 +1,6 @@ .datatable-editor { - .bp3-form-group { + .bp4-form-group { margin-bottom: 0; } .table { @@ -58,11 +58,11 @@ &.landed-cost{ - .bp3-control{ + .bp4-control{ margin-top: 0; margin-left: 34px; } - .bp3-control-indicator{ + .bp4-control-indicator{ height: 18px; width: 18px; border-color: #dbdbdb; @@ -70,13 +70,13 @@ } } .tr { - .bp3-form-group:not(.bp3-intent-danger) .bp3-input, - .form-group--select-list .bp3-button { + .bp4-form-group:not(.bp4-intent-danger) .bp4-input, + .form-group--select-list .bp4-button { border-color: #ffffff; color: #222; border-radius: 3px; } - .bp3-form-group:not(.bp3-intent-danger) .bp3-input { + .bp4-form-group:not(.bp4-intent-danger) .bp4-input { border-radius: 2px; padding-left: 4px; padding-right: 4px; @@ -85,7 +85,7 @@ box-shadow: 0 0 0 2px #116cd0; } } - .form-group--select-list .bp3-button { + .form-group--select-list .bp4-button { padding-left: 6px; padding-right: 6px; @@ -94,10 +94,10 @@ } } .form-group--select-list, - .bp3-form-group { - &.bp3-intent-danger { - .bp3-button:not(.bp3-minimal), - .bp3-input { + .bp4-form-group { + &.bp4-intent-danger { + .bp4-button:not(.bp4-minimal), + .bp4-input { border-color: #f7b6b6; } } @@ -110,7 +110,7 @@ } .td.actions { - .bp3-button { + .bp4-button { background-color: transparent; color: #e66d6d; @@ -135,7 +135,7 @@ } .td { &.note { - .bp3-form-group { + .bp4-form-group { width: 100%; } } @@ -159,7 +159,7 @@ } .actions.td { - .bp3-button { + .bp4-button { background: transparent; margin: 0; } @@ -186,7 +186,7 @@ .table { .tbody { - .tr .td.actions .bp3-button { + .tr .td.actions .bp4-button { background-color: transparent; color: #e66d6d; @@ -200,13 +200,13 @@ &__actions { margin-top: 12px; - .bp3-button { + .bp4-button { padding-left: 10px; padding-right: 10px; } .button--clear-lines { - &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + &.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { background-color: #fcefef; &:hover{ diff --git a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss index d2dc44c16..928b44442 100644 --- a/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss +++ b/packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss @@ -28,10 +28,10 @@ &_actions { margin-top: 26px; - :global .bp3-button { + :global .bp4-button { min-height: 36px; - & + .bp3-button { + & + .bp4-button { margin-left: 10px; } } diff --git a/packages/webapp/src/style/components/DataTable/Pagination.scss b/packages/webapp/src/style/components/DataTable/Pagination.scss index e6719a729..d256a82f7 100644 --- a/packages/webapp/src/style/components/DataTable/Pagination.scss +++ b/packages/webapp/src/style/components/DataTable/Pagination.scss @@ -4,7 +4,7 @@ padding: 20px 14px; font-size: 13px; - .bp3-button{ + .bp4-button{ background: transparent; padding: 5px; } @@ -13,7 +13,7 @@ min-width: 24px; min-height: 24px; - &:not([class*="bp3-intent-"]){ + &:not([class*="bp4-intent-"]){ color: #666666; border-radius: 5px; @@ -22,22 +22,22 @@ } } - .bp3-icon{ + .bp4-icon{ margin-right: 4px; color: #666666; } - .pagination .pagination__buttons-group .bp3-button-group &{ + .pagination .pagination__buttons-group .bp4-button-group &{ border-radius: 5px; } &--next, &--previous{ - &.bp3-button{ + &.bp4-button{ padding-left: 10px; padding-right: 10px; - .bp3-icon { + .bp4-icon { [dir="rtl"] & { transform: scale(-1); @@ -48,21 +48,21 @@ } &.is-active{ - &.bp3-intent-primary:disabled, - &.bp3-intent-primary.bp3-disabled{ + &.bp4-intent-primary:disabled, + &.bp4-intent-primary.bp4-disabled{ background-color: #E6EFFB; } - &:not([class*="bp3-intent-"]) { + &:not([class*="bp4-intent-"]) { } - .bp3-button-text{ + .bp4-button-text{ color: #000; } } &--next{ - .bp3-icon{ + .bp4-icon{ order: 1; margin-right: 0; margin-left: 4px; @@ -82,7 +82,7 @@ align-items: center; margin-left: auto; - .bp3-html-select{ + .bp4-html-select{ margin-left: 6px; select{ diff --git a/packages/webapp/src/style/components/Dialog/Dialog.scss b/packages/webapp/src/style/components/Dialog/Dialog.scss index 0c0beb7c1..9098e7825 100644 --- a/packages/webapp/src/style/components/Dialog/Dialog.scss +++ b/packages/webapp/src/style/components/Dialog/Dialog.scss @@ -10,7 +10,7 @@ &-body{ &.is-loading{ - .bp3-spinner{ + .bp4-spinner{ padding-top: 10px; margin-bottom: -10px; } diff --git a/packages/webapp/src/style/components/Drawer.scss b/packages/webapp/src/style/components/Drawer.scss index b93794d18..b3ec3ecfc 100644 --- a/packages/webapp/src/style/components/Drawer.scss +++ b/packages/webapp/src/style/components/Drawer.scss @@ -1,16 +1,16 @@ @import '../Base.scss'; -.bp3-drawer { - .bp3-drawer-header { +.bp4-drawer { + .bp4-drawer-header { margin-bottom: 2px; background-color: #FFF; - .bp3-heading { + .bp4-heading { font-weight: 500; } - .bp3-heading, - .bp3-icon { + .bp4-heading, + .bp4-icon { color: #354152; } } @@ -25,8 +25,8 @@ } &__main-tabs{ - .bp3-tabs { - .bp3-tab-list { + .bp4-tabs { + .bp4-tab-list { position: relative; background-color: #fff; @@ -43,7 +43,7 @@ margin-right: 25px; } - &.bp3-large > .bp3-tab { + &.bp4-large > .bp4-tab { font-size: 15px; color: #555; margin: 0 0.8rem; @@ -55,7 +55,7 @@ } } - .bp3-tab-panel { + .bp4-tab-panel { margin-top: 0; .card { diff --git a/packages/webapp/src/style/components/Drawers/AccountDrawer.scss b/packages/webapp/src/style/components/Drawers/AccountDrawer.scss index aaaff51ed..31897719b 100644 --- a/packages/webapp/src/style/components/Drawers/AccountDrawer.scss +++ b/packages/webapp/src/style/components/Drawers/AccountDrawer.scss @@ -22,7 +22,7 @@ &--account-normal{ - .bp3-icon{ + .bp4-icon{ position: relative; top: -2px; margin-left: 2px; diff --git a/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss b/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss index 60e63bc8c..4983223ef 100644 --- a/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss +++ b/packages/webapp/src/style/components/Drawers/DrawerTemplate.scss @@ -116,14 +116,14 @@ } } -.bp3-drawer.bp3-position-right { +.bp4-drawer.bp4-position-right { bottom: 0; right: 0; top: 0; overflow: auto; height: 100%; - .bp3-drawer-header .bp3-heading { + .bp4-drawer-header .bp4-heading { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss b/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss index aa5acbfc7..36eaeef55 100644 --- a/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss +++ b/packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss @@ -1,8 +1,8 @@ @import '../../../Base.scss'; .view-detail-drawer { - .bp3-tabs { - .bp3-tab-list { + .bp4-tabs { + .bp4-tab-list { position: relative; background-color: #fff; @@ -19,7 +19,7 @@ margin-right: 25px; } - &.bp3-large > .bp3-tab { + &.bp4-large > .bp4-tab { font-size: 15px; color: #555; margin: 0 0.8rem; @@ -31,7 +31,7 @@ } } - .bp3-tab-panel { + .bp4-tab-panel { margin-top: 0; .card { diff --git a/packages/webapp/src/style/components/Hint.scss b/packages/webapp/src/style/components/Hint.scss index 7e8de0e37..8654fe428 100644 --- a/packages/webapp/src/style/components/Hint.scss +++ b/packages/webapp/src/style/components/Hint.scss @@ -3,14 +3,14 @@ position: relative; top: -1px; - .bp3-icon { + .bp4-icon { color: #a1b2c5; } - .bp3-popover-target:hover .bp3-icon { + .bp4-popover-target:hover .bp4-icon { color: #90a1b5; } - .bp3-icon { + .bp4-icon { vertical-align: middle; } } diff --git a/packages/webapp/src/style/components/Menu.scss b/packages/webapp/src/style/components/Menu.scss index f332e71d9..203d65737 100644 --- a/packages/webapp/src/style/components/Menu.scss +++ b/packages/webapp/src/style/components/Menu.scss @@ -1,4 +1,4 @@ -.bp3-menu-item { +.bp4-menu-item { .menu-item-space { width: 6px; diff --git a/packages/webapp/src/style/components/Overlay.scss b/packages/webapp/src/style/components/Overlay.scss index c5cdc5f0b..be474f16e 100644 --- a/packages/webapp/src/style/components/Overlay.scss +++ b/packages/webapp/src/style/components/Overlay.scss @@ -1,6 +1,6 @@ -.bp3-overlay-backdrop { +.bp4-overlay-backdrop { 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 509c46b21..bbbc74548 100644 --- a/packages/webapp/src/style/components/PageForm.scss +++ b/packages/webapp/src/style/components/PageForm.scss @@ -15,15 +15,15 @@ border-top: 1px solid rgb(210, 221, 226); box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05); - .bp3-button-group{ + .bp4-button-group{ - .bp3-button{ + .bp4-button{ &:not(:last-child), - &.bp3-popover-wrapper:not(:last-child) { + &.bp4-popover-wrapper:not(:last-child) { border-right: 1px solid rgba(92, 112, 127, 0.3); margin-right: 0; - &.bp3-intent-primary{ + &.bp4-intent-primary{ border-right: 1px solid rgba(255, 255, 255, 0.3); } } @@ -34,11 +34,11 @@ #{$self}__header-fields { width: 85%; - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 16px; } - > .bp3-form-group:last-of-type{ + > .bp4-form-group:last-of-type{ margin-bottom: 0; } } @@ -47,7 +47,7 @@ padding: 25px 32px; border-bottom: 1px solid #d2dce2; - .bp3-form-group.bp3-inline label.bp3-label { + .bp4-form-group.bp4-inline label.bp4-label { font-weight: 500; } } @@ -61,7 +61,7 @@ padding-left: 32px; padding-right: 32px; - label.bp3-label{ + 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 c6f83b92c..e0deb0bc8 100644 --- a/packages/webapp/src/style/components/SidebarOverlay.scss +++ b/packages/webapp/src/style/components/SidebarOverlay.scss @@ -93,7 +93,7 @@ .sidebar-overlay-transition { transform: translateX(-100%); - &.bp3-overlay { + &.bp4-overlay { &-appear, &-enter { diff --git a/packages/webapp/src/style/components/Toast.scss b/packages/webapp/src/style/components/Toast.scss index ff6a35d43..5b1ac1d97 100644 --- a/packages/webapp/src/style/components/Toast.scss +++ b/packages/webapp/src/style/components/Toast.scss @@ -1,3 +1,3 @@ -.bp3-toast { +.bp4-toast { box-shadow: none; } \ 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 01aaa5fe5..e6c0b8689 100644 --- a/packages/webapp/src/style/components/UniversalSearch.scss +++ b/packages/webapp/src/style/components/UniversalSearch.scss @@ -11,14 +11,14 @@ width: 500px; z-index: 20; - &.bp3-overlay-appear, - &.bp3-overlay-enter { + &.bp4-overlay-appear, + &.bp4-overlay-enter { filter: blur(20px); opacity: 0.2; } - &.bp3-overlay-appear-active, - &.bp3-overlay-enter-active { + &.bp4-overlay-appear-active, + &.bp4-overlay-enter-active { filter: blur(0); opacity: 1; transition-delay: 0; @@ -27,12 +27,12 @@ transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9); } - &.bp3-overlay-exit { + &.bp4-overlay-exit { filter: blur(0); opacity: 1; } - &.bp3-overlay-exit-active { + &.bp4-overlay-exit-active { filter: blur(20px); opacity: 0.2; transition-delay: 0; @@ -42,8 +42,8 @@ } &__omnibar { - .bp3-input-group { - .bp3-icon { + .bp4-input-group { + .bp4-icon { svg { stroke: currentColor; fill: none; @@ -54,7 +54,7 @@ } } - .bp3-input-group .bp3-input { + .bp4-input-group .bp4-input { border: 0; box-shadow: 0 0 0 0; height: 50px; @@ -62,15 +62,15 @@ font-size: 20px; } - .bp3-input-group.bp3-large .bp3-input:not(:first-child) { + .bp4-input-group.bp4-large .bp4-input:not(:first-child) { padding-left: 50px !important; } - .bp3-input-group.bp3-large .bp3-input:not(:last-child) { + .bp4-input-group.bp4-large .bp4-input:not(:last-child) { padding-right: 130px !important; } - .bp3-input-group { - .bp3-icon { + .bp4-input-group { + .bp4-icon { margin: 16px; color: #5c707f; @@ -81,25 +81,25 @@ } } - .bp3-menu { + .bp4-menu { border-top: 1px solid #d3dce2; max-height: calc(60vh - 20px); overflow: auto; - .bp3-menu-item { - .bp3-text-muted { + .bp4-menu-item { + .bp4-text-muted { font-size: 12px; - .bp3-icon { + .bp4-icon { color: #8499a7; } } - &.bp3-intent-primary { - &.bp3-active { + &.bp4-intent-primary { + &.bp4-active { background-color: rgb(235, 241, 246); color: #252b30; - .bp3-menu-item-label { + .bp4-menu-item-label { color: #5c7080; } } @@ -112,7 +112,7 @@ } } - .bp3-input-action { + .bp4-input-action { height: 100%; display: flex; flex-direction: row; @@ -121,7 +121,7 @@ } &__type-select-overlay { - .bp3-button { + .bp4-button { margin: 0 !important; } } @@ -140,12 +140,12 @@ margin-left: 14px; } - .bp3-tag { + .bp4-tag { background: #708392; } &--arrows { - .bp3-tag { + .bp4-tag { padding: 0; text-align: center; line-height: 16px; @@ -173,7 +173,7 @@ display: flex; margin: 10px; - .bp3-spinner { + .bp4-spinner { margin-right: 6px; } } @@ -202,6 +202,6 @@ } } -.universal-search-overlay .bp3-overlay-backdrop { +.universal-search-overlay .bp4-overlay-backdrop { background: rgba(0, 10, 30, 0.3); } diff --git a/packages/webapp/src/style/components/dragzone.scss b/packages/webapp/src/style/components/dragzone.scss index a1c7ff0a5..8a07ffb96 100644 --- a/packages/webapp/src/style/components/dragzone.scss +++ b/packages/webapp/src/style/components/dragzone.scss @@ -58,7 +58,7 @@ left: -5px; visibility: hidden; - .bp3-icon { + .bp4-icon { position: relative; top: -3px; left: 0px; diff --git a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss index 38e1be39e..c98031b94 100644 --- a/packages/webapp/src/style/containers/Dashboard/Sidebar.scss +++ b/packages/webapp/src/style/containers/Dashboard/Sidebar.scss @@ -66,18 +66,18 @@ outline: 0; font-size: 15px; - &:not([class*="bp3-intent-"]):not(.bp3-minimal) { + &:not([class*="bp4-intent-"]):not(.bp4-minimal) { color: rgb(255, 255, 255); } &:hover, &:focus, &:active, - &.bp3-active { + &.bp4-active { background: transparent; } - .bp3-button-text { + .bp4-button-text { margin-right: 4px; text-overflow: ellipsis; overflow: hidden; @@ -90,8 +90,8 @@ } } - .bp3-popover-wrapper, - .bp3-popover-target { + .bp4-popover-wrapper, + .bp4-popover-target { max-width: 100%; display: inline-block; } @@ -145,7 +145,7 @@ font-weight: 400; &:hover, - &.bp3-active { + &.bp4-active { background: $sidebar-submenu-item-bg-color; color: $sidebar-menu-item-color-active; } @@ -183,7 +183,7 @@ } } - &:hover .bp3-button.menu-item__add-btn { + &:hover .bp4-button.menu-item__add-btn { display: inline-block; } } @@ -202,12 +202,12 @@ color: $sidebar-submenu-item-color; &:hover, - &.bp3-active { + &.bp4-active { background: transparent; color: $sidebar-submenu-item-hover-color; } - &.bp3-active { + &.bp4-active { font-weight: 500; } } @@ -296,7 +296,7 @@ } } - .bp3-button.menu-item__add-btn { + .bp4-button.menu-item__add-btn { width: auto; padding: 2px; margin-right: 0px; @@ -306,8 +306,8 @@ display: none; vertical-align: top; - &:not([class*='bp3-intent-']):not(.bp3-minimal):not(:disabled) { - .bp3-icon { + &:not([class*='bp4-intent-']):not(.bp4-minimal):not(:disabled) { + .bp4-icon { color: rgba(255, 255, 255, 0.4); } @@ -322,13 +322,13 @@ &:hover { background-color: rgba(255, 255, 255, 0.12); - .bp3-icon { + .bp4-icon { color: rgba(255, 255, 255, 0.6); } } } - .bp3-icon { + .bp4-icon { margin: 0; display: block; } diff --git a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss index 57b718450..46814703b 100644 --- a/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss +++ b/packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss @@ -13,7 +13,7 @@ &.is-hidden { visibility: hidden; } - .bp3-drawer { + .bp4-drawer { box-shadow: 0 0 0 transparent; max-height: 550px; height: 100%; @@ -26,26 +26,26 @@ flex: 1 0 0; height: 100%; } - .bp3-drawer-backdrop { + .bp4-drawer-backdrop { background-color: rgba(2, 9, 19, 0.65); } } - .bp3-button.button--submit-filter { + .bp4-button.button--submit-filter { min-height: 34px; padding-left: 16px; padding-right: 16px; } .radio-group---accounting-basis { - .bp3-label { + .bp4-label { margin-bottom: 12px; } } - .bp3-tabs { + .bp4-tabs { height: 100%; - &.bp3-vertical > .bp3-tab-panel { + &.bp4-vertical > .bp4-tab-panel { flex: 1 0 0; border-top: 24px solid transparent; padding-left: 20px; @@ -55,10 +55,10 @@ } } - .bp3-tabs.bp3-vertical { + .bp4-tabs.bp4-vertical { flex: 1 0 0; - .bp3-tab-list { + .bp4-tab-list { width: 220px; border-right: 1px solid #c3cdd5; padding-top: 10px; @@ -66,17 +66,17 @@ > *:not(:last-child) { margin-right: 0; } - .bp3-tab-indicator-wrapper { + .bp4-tab-indicator-wrapper { width: 100%; - .bp3-tab-indicator { + .bp4-tab-indicator { border-left: 3px solid #0350f8; background-color: #edf5ff; border-radius: 0; } } - .bp3-tab { + .bp4-tab { color: #333; line-height: 45px; border-radius: 0; @@ -105,8 +105,8 @@ padding-right: 0.85rem; } } - .bp3-popover-target { - .bp3-tag-input { + .bp4-popover-target { + .bp4-tag-input { height: auto; } } diff --git a/packages/webapp/src/style/objects/buttons.scss b/packages/webapp/src/style/objects/buttons.scss index b8c0f2086..7dbffe7f8 100644 --- a/packages/webapp/src/style/objects/buttons.scss +++ b/packages/webapp/src/style/objects/buttons.scss @@ -1,35 +1,35 @@ -.bp3-button { +.bp4-button { min-width: 32px; min-height: 32px; padding-left: 12px; padding-right: 12px; } -.bp3-button:not([class*='bp3-intent-']) { +.bp4-button:not([class*='bp4-intent-']) { color: #33304a; } -.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { +.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { color: #555555; box-shadow: 0 0 0 transparent; - &.bp3-small { + &.bp4-small { font-size: 13px; min-height: 29px; } } -.bp3-button-group.bp3-minimal .bp3-button { +.bp4-button-group.bp4-minimal .bp4-button { background-color: transparent; } -.bp3-button { - &.bp3-intent-primary, - &.bp3-intent-success, - &.bp3-intent-danger, - &.bp3-intent-warning { +.bp4-button { + &.bp4-intent-primary, + &.bp4-intent-success, + &.bp4-intent-danger, + &.bp4-intent-warning { &, &:hover { box-shadow: 0 0 0 transparent; diff --git a/packages/webapp/src/style/objects/form.scss b/packages/webapp/src/style/objects/form.scss index 80ca55605..c56b838f9 100644 --- a/packages/webapp/src/style/objects/form.scss +++ b/packages/webapp/src/style/objects/form.scss @@ -14,7 +14,7 @@ } // Form form. -label.bp3-label { +label.bp4-label { color: #353535; font-weight: 400; @@ -22,7 +22,7 @@ label.bp3-label { color: red; } - .bp3-form-group.bp3-inline & { + .bp4-form-group.bp4-inline & { margin: 0 10px 0 0; line-height: 1.6; padding-top: calc(0.3rem + 1px); @@ -40,38 +40,38 @@ label.bp3-label { color: #333; &:focus, - &.bp3-active { + &.bp4-active { box-shadow: 0 0 0 1px #116cd0; border-color: #116cd0; } - &.bp3-disabled, + &.bp4-disabled, &:disabled { background: #e9ecef; } - &.bp3-intent-danger { + &.bp4-intent-danger { box-shadow: 0 0 0 transparent; border-color: #db3737; &:focus, - &.bp3-active { + &.bp4-active { box-shadow: 0 0 0 1px #db3737; border-color: #db3737; } } } -.bp3-input-group{ +.bp4-input-group{ - &.bp3-intent-danger{ + &.bp4-intent-danger{ - .bp3-input{ + .bp4-input{ box-shadow: 0 0 0 transparent; border-color: #db3737; &:focus, - &.bp3-active { + &.bp4-active { box-shadow: 0 0 0 1px #db3737; border-color: #db3737; } @@ -134,7 +134,7 @@ label.bp3-label { border-radius: 0.25rem; height: 100%; - .bp3-form-group & { + .bp4-form-group & { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; @@ -143,12 +143,12 @@ label.bp3-label { } } -.bp3-form-group { - .bp3-input-group { +.bp4-form-group { + .bp4-input-group { flex: 1 1 auto; } - .bp3-control-group { + .bp4-control-group { >.input-group-prepend:first-child .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -157,12 +157,12 @@ label.bp3-label { } .#{$ns}-html-select { - .bp3-icon-double-caret-vertical { + .bp4-icon-double-caret-vertical { display: none; } } -.bp3-datepicker-caption select { +.bp4-datepicker-caption select { &, &:hover { @@ -190,7 +190,7 @@ label.bp3-label { .form-group--select-list { - .form-group--select-list.bp3-intent-danger & { + .form-group--select-list.bp4-intent-danger & { & { border-color: #db3737; } @@ -202,7 +202,7 @@ label.bp3-label { padding-right: 25px; justify-content: start; - &:not([class*="bp3-intent-"]):not(.bp3-minimal) { + &:not([class*="bp4-intent-"]):not(.bp4-minimal) { &, &:hover { @@ -222,41 +222,41 @@ label.bp3-label { } } - &.bp3-fill { + &.bp4-fill { width: 100%; } - .bp3-popover-target.bp3-popover-open { + .bp4-popover-target.bp4-popover-open { .#{$ns}-button { - &:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled), - &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled) { + &:not([class*="bp4-intent-"]):not(.bp4-minimal):not(:disabled), + &:not([class*="bp4-intent-"]):not(.bp4-minimal):hover:not(:disabled) { background-color: #fafafa; } } } - .bp3-popover-target { - .bp3-icon { + .bp4-popover-target { + .bp4-icon { position: absolute; top: 0; left: 0; margin: 7px; - +.bp3-button-text { + +.bp4-button-text { padding-left: 20px; } } - .bp3-button { + .bp4-button { padding-left: 10px; color: #333; } } - &.bp3-intent-danger { - .bp3-button:not(.bp3-minimal) { + &.bp4-intent-danger { + .bp4-button:not(.bp4-minimal) { border-color: #db3737; } } @@ -265,13 +265,13 @@ label.bp3-label { .select-list--fill-popover { position: relative; - .bp3-transition-container, - .bp3-popover { + .bp4-transition-container, + .bp4-popover { min-width: 100%; } } -.select-list--tooltip-items .bp3-popover-target { +.select-list--tooltip-items .bp4-popover-target { display: block; } @@ -347,7 +347,7 @@ label.bp3-label { } } - &.bp3-large .#{$ns}-control-indicator { + &.bp4-large .#{$ns}-control-indicator { width: 20px; height: 20px; @@ -417,7 +417,7 @@ label.bp3-label { } input:indeterminate~.#{$ns}-control-indicator { - background-image: escape-svg($form-check-input-indeterminate-bg-image); + // background-image: escape-svg($form-check-input-indeterminate-bg-image); border-color: $form-check-input-checked-bg-color; background-color: $form-check-input-checked-bg-color; box-shadow: 0 0 0 0 transparent; @@ -471,14 +471,14 @@ label.bp3-label { } } -.bp3-menu-item::before, -.bp3-menu-item>.bp3-icon { +.bp4-menu-item::before, +.bp4-menu-item>.bp4-icon { color: #4b5d6b; } -.bp3-control-group { +.bp4-control-group { .input-prepend { - &:not(.bp3-fixed) { + &:not(.bp4-fixed) { flex: 0; } @@ -499,13 +499,13 @@ label.bp3-label { border: 1px solid #ced4da; border-radius: 0 3px 3px 0; - .bp3-icon { + .bp4-icon { color: #848da0; } } } } -.bp3-control.bp3-checkbox .bp3-control-indicator{ +.bp4-control.bp4-checkbox .bp4-control-indicator{ border-color: #666; } \ No newline at end of file diff --git a/packages/webapp/src/style/objects/switch.scss b/packages/webapp/src/style/objects/switch.scss index 16bd2d8c3..9363c1aeb 100644 --- a/packages/webapp/src/style/objects/switch.scss +++ b/packages/webapp/src/style/objects/switch.scss @@ -1,5 +1,5 @@ -.bp3-control.bp3-switch { - .bp3-control-indicator { +.bp4-control.bp4-switch { + .bp4-control-indicator { &:before { box-shadow: none; diff --git a/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss b/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss index 13c081287..e072041b1 100644 --- a/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss +++ b/packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss @@ -3,21 +3,21 @@ // Account Form Dialog. // ---------------------------- .dialog--account-form { - &:not(.dialog--loading) .bp3-dialog-body { + &:not(.dialog--loading) .bp4-dialog-body { margin-bottom: 30px; } - .bp3-dialog-body { - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-dialog-body { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 250px; } &.form-group--description { - .bp3-form-content { + .bp4-form-content { width: 280px; } textarea { @@ -35,7 +35,7 @@ .form-group--subaccount { margin-bottom: 16px; - .bp3-icon-info-circle { + .bp4-icon-info-circle { color: #a1b2c5; position: relative; top: -2px; diff --git a/packages/webapp/src/style/pages/Accounts/List.scss b/packages/webapp/src/style/pages/Accounts/List.scss index 314dec53b..12d67344d 100644 --- a/packages/webapp/src/style/pages/Accounts/List.scss +++ b/packages/webapp/src/style/pages/Accounts/List.scss @@ -17,13 +17,13 @@ } .account_name { - .bp3-popover-wrapper--inactive-semafro { + .bp4-popover-wrapper--inactive-semafro { margin-left: 8px; margin-right: 6px; float: right; border: 0; } - .bp3-popover-wrapper--account-desc { + .bp4-popover-wrapper--account-desc { border-bottom-color: #bbb; } .inactive-semafro { @@ -43,10 +43,10 @@ display: block; } .normal { - .bp3-popover-wrapper { + .bp4-popover-wrapper { width: 100%; } - .bp3-tooltip-indicator { + .bp4-tooltip-indicator { cursor: initial; border-bottom: 0; } diff --git a/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss b/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss index d0b23d633..71a87b4aa 100644 --- a/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss +++ b/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss @@ -2,25 +2,25 @@ .dialog--allocate-landed-cost-form { width: 700px; - .bp3-dialog-body { - .bp3-form-group{ + .bp4-dialog-body { + .bp4-form-group{ margin-bottom: 18px; } - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 165px; } - .bp3-form-content { + .bp4-form-content { width: 300px; } - &:not(.dialog--loading) .bp3-dialog-body { + &:not(.dialog--loading) .bp4-dialog-body { margin-bottom: 30px; } } } - .bp3-dialog-footer{ + .bp4-dialog-footer{ padding-top: 10px; } @@ -45,10 +45,10 @@ border-left: 1px solid #ececec; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 0; - &:not(.bp3-intent-danger) .bp3-input{ + &:not(.bp4-intent-danger) .bp4-input{ border: 1px solid #d0dfe2; &:focus{ diff --git a/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss b/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss index a83fcc41b..7c37270d8 100644 --- a/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss +++ b/packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss @@ -1,23 +1,23 @@ .dialog--bad-debt { max-width: 400px; - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; margin-top: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } } - .bp3-callout { + .bp4-callout { font-size: 13px; } .form-group { &--reason { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -28,7 +28,7 @@ } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/Billing/BillingPage.scss b/packages/webapp/src/style/pages/Billing/BillingPage.scss index be72d6ef8..09cac5b8f 100644 --- a/packages/webapp/src/style/pages/Billing/BillingPage.scss +++ b/packages/webapp/src/style/pages/Billing/BillingPage.scss @@ -5,10 +5,10 @@ margin-top: 40px; max-width: 820px; - .bp3-tab-list{ + .bp4-tab-list{ border-bottom: 2px solid #d7e1e7; - .bp3-tab[aria-disabled="true"]{ + .bp4-tab[aria-disabled="true"]{ color: rgba(92, 112, 128, 0.7); } } diff --git a/packages/webapp/src/style/pages/Bills/List.scss b/packages/webapp/src/style/pages/Bills/List.scss index 55b52b0af..ec3f40ea0 100644 --- a/packages/webapp/src/style/pages/Bills/List.scss +++ b/packages/webapp/src/style/pages/Bills/List.scss @@ -44,12 +44,12 @@ .fully-paid-text { font-size: 13.5px; } - .bp3-progress-bar { + .bp4-progress-bar { height: 3px; max-width: 180px; &, - .bp3-progress-meter { + .bp4-progress-meter { border-radius: 0; } } diff --git a/packages/webapp/src/style/pages/Bills/PageForm.scss b/packages/webapp/src/style/pages/Bills/PageForm.scss index df8a23c28..847f8f5f5 100644 --- a/packages/webapp/src/style/pages/Bills/PageForm.scss +++ b/packages/webapp/src/style/pages/Bills/PageForm.scss @@ -20,18 +20,18 @@ body.page-bill-edit{ &-fields{ flex: 1 0 0; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 18px; } - .bp3-label{ + .bp4-label{ min-width: 140px; } - .bp3-form-content{ + .bp4-form-content{ width: 100%; } - .bp3-form-group{ - &.bp3-inline{ + .bp4-form-group{ + &.bp4-inline{ max-width: 440px; } @@ -40,7 +40,7 @@ body.page-bill-edit{ &--expiration-date{ max-width: 340px; - .bp3-label{ + .bp4-label{ min-width: 120px; } } diff --git a/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss b/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss index 9dd06954f..e3caccb89 100644 --- a/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss +++ b/packages/webapp/src/style/pages/Branches/BranchFormDialog.scss @@ -1,20 +1,20 @@ .dialog--branch-form { width: 650px; - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; } - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-form-group.bp4-inline { + .bp4-label { font-size: 13px; margin-bottom: 3px; min-width: 150px; } - .bp3-form-content { + .bp4-form-content { width: 278px; } - .bp3-control-group > * { + .bp4-control-group > * { flex-shrink: unset; padding-right: 5px; padding-left: 5px; @@ -28,13 +28,13 @@ } &.form-group--branch_address { - .bp3-form-content { + .bp4-form-content { width: 388px; } } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss b/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss index 50f834183..cf48b27d9 100644 --- a/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss +++ b/packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss @@ -13,14 +13,14 @@ } .account_name { - .bp3-popover-wrapper--inactive-semafro { + .bp4-popover-wrapper--inactive-semafro { margin-left: 8px; margin-right: 6px; float: right; border: 0; } - .bp3-popover-wrapper--account-desc { + .bp4-popover-wrapper--account-desc { border-bottom-color: #bbb; } diff --git a/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss b/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss index d034edc91..0d4395419 100644 --- a/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss +++ b/packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss @@ -6,12 +6,12 @@ padding: 0 0px 16px 0px; border-bottom: 2px solid #e9e9e9; - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 0; } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss b/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss index 89ae4b723..27bca225f 100644 --- a/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss +++ b/packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss @@ -1,22 +1,22 @@ .dialog--contact-duplicate { - .bp3-dialog-body { + .bp4-dialog-body { > .paragraph { margin-bottom: 1rem; } - .bp3-form-group { + .bp4-form-group { margin-bottom: 1.4rem; - .bp3-label { + .bp4-label { font-size: 13px; } } - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { width: 260px; } } - .bp3-dialog-footer { - .bp3-dialog-footer-actions .bp3-button { + .bp4-dialog-footer { + .bp4-dialog-footer-actions .bp4-button { margin-left: 8px; min-width: 65px; } diff --git a/packages/webapp/src/style/pages/CreditNote/List.scss b/packages/webapp/src/style/pages/CreditNote/List.scss index 087b2f910..b6d29bac4 100644 --- a/packages/webapp/src/style/pages/CreditNote/List.scss +++ b/packages/webapp/src/style/pages/CreditNote/List.scss @@ -11,7 +11,7 @@ } .table-size--small { .status.td { - .bp3-progress-bar { + .bp4-progress-bar { height: 3px; } } diff --git a/packages/webapp/src/style/pages/CreditNote/PageForm.scss b/packages/webapp/src/style/pages/CreditNote/PageForm.scss index 8da43b9aa..dbc9ce728 100644 --- a/packages/webapp/src/style/pages/CreditNote/PageForm.scss +++ b/packages/webapp/src/style/pages/CreditNote/PageForm.scss @@ -19,15 +19,15 @@ body.page-credit-note-edit { flex: 1 0 0; } - .bp3-label { + .bp4-label { min-width: 150px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { - &.bp3-inline { + .bp4-form-group { + &.bp4-inline { max-width: 450px; } } diff --git a/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss b/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss index ae1ab9d6f..3d74660cd 100644 --- a/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss +++ b/packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss @@ -1,22 +1,22 @@ .dialog--currency-form { - .bp3-dialog-body { + .bp4-dialog-body { margin-bottom: 30px; - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 250px; } } - .bp3-dialog-header { + .bp4-dialog-header { height: 170px; } } - .bp3-dialog-footer{ - .bp3-button{ + .bp4-dialog-footer{ + .bp4-button{ min-width: 75px; } } diff --git a/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss b/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss index 1aeb28e83..1d1788bf9 100644 --- a/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss +++ b/packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss @@ -1,19 +1,19 @@ .dialog--customer-opening-balance { max-width: 400px; - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; margin-top: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: px; font-size: 13px; } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/Customers/Form.scss b/packages/webapp/src/style/pages/Customers/Form.scss index 3d9e1389f..912bed69f 100644 --- a/packages/webapp/src/style/pages/Customers/Form.scss +++ b/packages/webapp/src/style/pages/Customers/Form.scss @@ -15,20 +15,20 @@ max-width: 1000px; } - .bp3-form-group { + .bp4-form-group { max-width: 500px; - .bp3-control { + .bp4-control { margin-top: 8px; margin-bottom: 8px; } - &.bp3-inline { - .bp3-label { + &.bp4-inline { + .bp4-label { min-width: 150px; } } - .bp3-form-content { + .bp4-form-content { width: 100%; } } @@ -36,7 +36,7 @@ .form-group--contact_name { max-width: 600px; - .bp3-control-group > * { + .bp4-control-group > * { flex-shrink: unset; &:not(:last-child) { @@ -52,16 +52,16 @@ } } - .bp3-form-group { + .bp4-form-group { margin-bottom: 14px; } - .bp3-tab-panel { + .bp4-tab-panel { margin-top: 26px; } .form-group--phone-number { - .bp3-control-group > * { + .bp4-control-group > * { flex-shrink: unset; padding-right: 5px; padding-left: 5px; @@ -88,20 +88,20 @@ // Tab panels. .tab-panel { &--address { - .bp3-form-group { + .bp4-form-group { max-width: 440px; - &.bp3-inline { - .bp3-label { + &.bp4-inline { + .bp4-label { min-width: 145px; } } - .bp3-form-content { + .bp4-form-content { width: 100%; } - textarea.bp3-input { + textarea.bp4-input { max-width: 100%; width: 100%; min-height: 50px; @@ -110,7 +110,7 @@ } &--note { .form-group--note { - .bp3-form-group { + .bp4-form-group { max-width: 600px; } textarea { @@ -126,8 +126,8 @@ } } - .bp3-tabs { - .bp3-tab-list { + .bp4-tabs { + .bp4-tab-list { position: relative; &:before { @@ -142,7 +142,7 @@ > *:not(:last-child) { margin-right: 25px; } - &.bp3-large > .bp3-tab { + &.bp4-large > .bp4-tab { font-size: 15px; } } diff --git a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss index 931d18f60..b23b7ce3e 100644 --- a/packages/webapp/src/style/pages/Dashboard/Dashboard.scss +++ b/packages/webapp/src/style/pages/Dashboard/Dashboard.scss @@ -59,16 +59,16 @@ $dashboard-views-bar-height: 44px; } } - .bp3-navbar-divider { + .bp4-navbar-divider { margin: 0 8px; } .form-group-quick-new-downDrop { - .bp3-popover-target .bp3-button { + .bp4-popover-target .bp4-button { color: #1552c8; } - .bp3-button::after { + .bp4-button::after { content: none; } } @@ -79,7 +79,7 @@ $dashboard-views-bar-height: 44px; align-items: center; margin-right: 14px; - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { padding: 0; background-size: contain; border-radius: 50%; @@ -157,7 +157,7 @@ $dashboard-views-bar-height: 44px; &__actions-bar { border-bottom: 2px solid #e1e2e8; - .bp3-navbar-divider { + .bp4-navbar-divider { border-left-color: rgb(199, 214, 219); } @@ -185,8 +185,8 @@ $dashboard-views-bar-height: 44px; color: #32304a; } - &.bp3-minimal:active, - &.bp3-minimal.bp3-active { + &.bp4-minimal:active, + &.bp4-minimal.bp4-active { background: #a7b6c21f; color: #32304a; } @@ -194,7 +194,7 @@ $dashboard-views-bar-height: 44px; &.has-active-filters { &, - &.bp3-active, + &.bp4-active, &:active { background: #eafbe4; } @@ -241,25 +241,25 @@ $dashboard-views-bar-height: 44px; } } - .bp3-control.bp3-switch { + .bp4-control.bp4-switch { margin-bottom: 0; margin-left: 8px; color: #3d3b53; - .bp3-control-indicator { + .bp4-control-indicator { height: 16px; min-width: 1.8em; } - .bp3-control-indicator::before { + .bp4-control-indicator::before { box-shadow: 0 0 0; } - input~.bp3-control-indicator { + input~.bp4-control-indicator { background: rgba(167, 182, 194, 0.55); } - input:checked~.bp3-control-indicator { + input:checked~.bp4-control-indicator { background: #0069ff; } } @@ -361,7 +361,7 @@ $dashboard-views-bar-height: 44px; height: 100%; background-color: #fbfbfb; - .bp3-spinner { + .bp4-spinner { margin: auto; } } @@ -485,7 +485,7 @@ $dashboard-views-bar-height: 44px; opacity: 0.8; } - .bp3-icon { + .bp4-icon { margin-top: 6px; path { @@ -549,15 +549,15 @@ $dashboard-views-bar-height: 44px; height: $dashboard-views-bar-height; padding: 0 20px; - .bp3-navbar-group { + .bp4-navbar-group { height: $dashboard-views-bar-height; } - .bp3-tab[aria-selected='true'] { + .bp4-tab[aria-selected='true'] { box-shadow: inset 0 -2px 0 #0052cc; } - .bp3-button { + .bp4-button { &:hover { background: rgba(167, 182, 194, 0.12); color: #32304a; @@ -578,7 +578,7 @@ $dashboard-views-bar-height: 44px; background-color: #fff; width: 600px; - .bp3-input { + .bp4-input { padding-left: 40px !important; } } diff --git a/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss b/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss index 033896ad3..ef7301933 100644 --- a/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss +++ b/packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss @@ -1,12 +1,12 @@ .dialog--exchangeRate-form { - .bp3-dialog-body { - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-dialog-body { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 250px; } } diff --git a/packages/webapp/src/style/pages/Expense/PageForm.scss b/packages/webapp/src/style/pages/Expense/PageForm.scss index 6aaf1fade..5112dfe77 100644 --- a/packages/webapp/src/style/pages/Expense/PageForm.scss +++ b/packages/webapp/src/style/pages/Expense/PageForm.scss @@ -22,18 +22,18 @@ flex: 1 0 0; } - .bp3-label { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { + .bp4-form-group { margin-bottom: 18px; - &.bp3-inline { + &.bp4-inline { max-width: 440px; } } @@ -50,12 +50,12 @@ &.landed-cost { - .bp3-control { + .bp4-control { margin-top: 0; margin-left: 34px; } - .bp3-control-indicator { + .bp4-control-indicator { height: 18px; width: 18px; border-color: #e0e0e0; diff --git a/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss b/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss index d6fc85b7a..263a4efe3 100644 --- a/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss +++ b/packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss @@ -8,7 +8,7 @@ .financial-statement--cash-flow { .financial-header-drawer { - .bp3-drawer { + .bp4-drawer { max-height: 450px; } } diff --git a/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss b/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss index df41bc845..e02af2439 100644 --- a/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss +++ b/packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss @@ -37,7 +37,7 @@ .financial-statement--balance-summary { .financial-header-drawer { - .bp3-drawer { + .bp4-drawer { // max-height: 350px; max-height: 415px; } diff --git a/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss b/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss index dc7031f84..c08a707b7 100644 --- a/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss +++ b/packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss @@ -21,7 +21,7 @@ .number-format-dropdown { .toggles-fields { - .bp3-form-group:first-child { + .bp4-form-group:first-child { display: none; } } @@ -33,7 +33,7 @@ .financial-statement--inventory-details { .financial-header-drawer { - .bp3-drawer { + .bp4-drawer { max-height: 350px; } } diff --git a/packages/webapp/src/style/pages/FinancialStatements/Journal.scss b/packages/webapp/src/style/pages/FinancialStatements/Journal.scss index 26cca5b7d..8e86c281b 100644 --- a/packages/webapp/src/style/pages/FinancialStatements/Journal.scss +++ b/packages/webapp/src/style/pages/FinancialStatements/Journal.scss @@ -2,7 +2,7 @@ .financial-statement--journal{ .financial-header-drawer{ - .bp3-drawer{ + .bp4-drawer{ max-height: 350px; } } diff --git a/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss b/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss index de6107dd9..a0a59d08a 100644 --- a/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss +++ b/packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss @@ -4,20 +4,20 @@ width: 300px; padding: 15px; - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 6px; - label.bp3-label{ + label.bp4-label{ font-size: 13px; margin-bottom: 4px; font-weight: 500; } - .bp3-button{ + .bp4-button{ min-height: 28px; min-width: 28px; } } - .bp3-control.bp3-inline{ + .bp4-control.bp4-inline{ margin-bottom: 0; margin-top: 0; } @@ -28,15 +28,15 @@ text-align: right; padding-top: 10px; - .bp3-button.bp3-small, - .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal).bp3-small{ + .bp4-button.bp4-small, + .bp4-button:not([class*="bp4-intent-"]):not(.bp4-minimal).bp4-small{ min-width: 65px; height: 26px; min-height: 26px; } } - .bp3-control .bp3-control-indicator{ + .bp4-control .bp4-control-indicator{ height: 16px; width: 16px; } diff --git a/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss b/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss index 348cf69bd..f1e7a4e5a 100644 --- a/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss +++ b/packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss @@ -20,7 +20,7 @@ .financial-statement--sales-by-items, .financial-statement--purchases-by-items { .financial-header-drawer { - .bp3-drawer { + .bp4-drawer { // max-height: 400px; max-height: 450px; } @@ -29,7 +29,7 @@ .financial-statement--inventory-valuation { .financial-header-drawer { - .bp3-drawer { + .bp4-drawer { max-height: 400px; } } diff --git a/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss b/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss index 2ef5363b3..aebe5647d 100644 --- a/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss +++ b/packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss @@ -2,19 +2,19 @@ .dialog--category-form{ - .bp3-dialog-body{ - .bp3-form-group.bp3-inline{ + .bp4-dialog-body{ + .bp4-form-group.bp4-inline{ - .bp3-label{ + .bp4-label{ min-width: 140px; } - .bp3-form-content{ + .bp4-form-content{ width: 250px; } &.form-group--description{ - .bp3-form-content{ + .bp4-form-content{ width: 280px; textarea{ @@ -27,10 +27,10 @@ } } } - .bp3-dialog-footer{ + .bp4-dialog-footer{ margin-top: 30px; - .bp3-button{ + .bp4-button{ min-width: 75px; } } diff --git a/packages/webapp/src/style/pages/Items/Form.scss b/packages/webapp/src/style/pages/Items/Form.scss index 31575856d..9f147e1bd 100644 --- a/packages/webapp/src/style/pages/Items/Form.scss +++ b/packages/webapp/src/style/pages/Items/Form.scss @@ -16,16 +16,16 @@ } #{$self}__body { - .bp3-form-group { + .bp4-form-group { max-width: 500px; margin-bottom: 14px; - &.bp3-inline { - .bp3-label { + &.bp4-inline { + .bp4-label { min-width: 140px; } } - .bp3-form-content { + .bp4-form-content { width: 100%; } } @@ -36,7 +36,7 @@ margin-bottom: 1.4rem; } - .bp3-control { + .bp4-control { h3 { display: inline; margin-bottom: 0; @@ -61,7 +61,7 @@ max-width: 850px; margin-bottom: 1rem; - .bp3-form-group { + .bp4-form-group { max-width: 400px; } @@ -83,7 +83,7 @@ } } - .bp3-tooltip-indicator { + .bp4-tooltip-indicator { border-bottom: 1px dashed #d0d0d0; } } diff --git a/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss b/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss index fdfb3cdf3..b0590791e 100644 --- a/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss +++ b/packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss @@ -1,15 +1,15 @@ .dialog--adjustment-item { - .bp3-form-group { + .bp4-form-group { margin-bottom: 15px; - label.bp3-label { + label.bp4-label { font-size: 13px; margin-bottom: 3px; } } .form-group { &--adjustment-reasons { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -29,9 +29,9 @@ padding-bottom: 12px; border-bottom: 2px solid #e9e9e9; - .bp3-input-group{ + .bp4-input-group{ - .bp3-input{ + .bp4-input{ padding-left: 8px; padding-right: 8px; } @@ -47,7 +47,7 @@ padding-left: 0.3rem; padding-right: 0.3rem; - .bp3-form-group { + .bp4-form-group { margin-bottom: 0; } &--quantity-on-hand, @@ -73,7 +73,7 @@ } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/Items/List.scss b/packages/webapp/src/style/pages/Items/List.scss index 5be7f2fed..57f7b4b64 100644 --- a/packages/webapp/src/style/pages/Items/List.scss +++ b/packages/webapp/src/style/pages/Items/List.scss @@ -7,13 +7,13 @@ .table { .tbody { .item_type.td { - .bp3-tag { + .bp4-tag { font-size: 13px; } } .tr.inactive .td { - &.normal .bp3-icon { + &.normal .bp4-icon { color: #9eaab6; } } diff --git a/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss b/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss index a6968de65..4f4870f17 100644 --- a/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss +++ b/packages/webapp/src/style/pages/ManualJournal/JournalNumberDialog.scss @@ -4,12 +4,12 @@ .paragraph { margin-bottom: 20px; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 10px; } - .bp3-dialog-footer-actions{ - .bp3-button{ + .bp4-dialog-footer-actions{ + .bp4-button{ min-width: 75px; } } diff --git a/packages/webapp/src/style/pages/ManualJournal/List.scss b/packages/webapp/src/style/pages/ManualJournal/List.scss index df30f4d0f..f2d714764 100644 --- a/packages/webapp/src/style/pages/ManualJournal/List.scss +++ b/packages/webapp/src/style/pages/ManualJournal/List.scss @@ -8,7 +8,7 @@ // padding: 0.8rem 0.5rem; // } .td.amount { - .bp3-popover-target { + .bp4-popover-target { border-bottom: 1px solid #e7e7e7; > span { @@ -17,10 +17,10 @@ } } .note { - .bp3-icon { + .bp4-icon { color: #666; } - .bp3-tooltip-indicator { + .bp4-tooltip-indicator { cursor: initial; border-bottom: 0; } diff --git a/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss b/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss index 1490e7642..51996af3e 100644 --- a/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss +++ b/packages/webapp/src/style/pages/ManualJournal/MakeJournal.scss @@ -12,17 +12,17 @@ flex: 1 0 0; } - .bp3-label{ + .bp4-label{ min-width: 140px; } - .bp3-form-content{ + .bp4-form-content{ width: 100%; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 18px; - &.bp3-inline{ + &.bp4-inline{ max-width: 440px; } } diff --git a/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss b/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss index f4e334703..5e511cab7 100644 --- a/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss +++ b/packages/webapp/src/style/pages/NotifyConactViaSMS/NotifyConactViaSMSDialog.scss @@ -1,12 +1,12 @@ .dialog--notify-vis-sms { width: 800px; - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; margin-top: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } @@ -14,7 +14,7 @@ .form-group { &--sms_message { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -25,7 +25,7 @@ } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/PaymentMade/PageForm.scss b/packages/webapp/src/style/pages/PaymentMade/PageForm.scss index b730fb844..49e2ce062 100644 --- a/packages/webapp/src/style/pages/PaymentMade/PageForm.scss +++ b/packages/webapp/src/style/pages/PaymentMade/PageForm.scss @@ -15,17 +15,17 @@ body.page-payment-made-edit{ $self: '.page-form'; #{$self}__header{ - .bp3-label{ + .bp4-label{ min-width: 160px; } - .bp3-form-content{ + .bp4-form-content{ width: 100%; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 18px; - &.bp3-inline{ + &.bp4-inline{ max-width: 470px; } button.receive-full-amount{ diff --git a/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss b/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss index 1fdc4859d..b191ba85f 100644 --- a/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss +++ b/packages/webapp/src/style/pages/PaymentReceive/PageForm.scss @@ -16,18 +16,18 @@ body.page-payment-receive-edit{ $self: '.page-form'; #{$self}__header { - .bp3-label { + .bp4-label { min-width: 160px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { + .bp4-form-group { margin-bottom: 18px; - &.bp3-inline { + &.bp4-inline { max-width: 470px; } diff --git a/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss b/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss index ad208a3a9..5aba5f8aa 100644 --- a/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss +++ b/packages/webapp/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss @@ -1,8 +1,8 @@ .dialog--quick-payment-receive { - .bp3-form-group { + .bp4-form-group { margin-bottom: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: 3px; font-size: 13px; } @@ -10,7 +10,7 @@ .form-group { &--statement { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -21,6 +21,6 @@ } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } diff --git a/packages/webapp/src/style/pages/Preferences/Accounting.scss b/packages/webapp/src/style/pages/Preferences/Accounting.scss index 80708b761..9b9866f9c 100644 --- a/packages/webapp/src/style/pages/Preferences/Accounting.scss +++ b/packages/webapp/src/style/pages/Preferences/Accounting.scss @@ -9,10 +9,10 @@ border-top: 1px solid #e0e7ea; margin-top: 30px; - .bp3-button { + .bp4-button { min-width: 65px; - + .bp3-button { + + .bp4-button { margin-left: 10px; } } @@ -24,20 +24,20 @@ min-width: 250px; } } - .bp3-form-group { - .bp3-form-helper-text { + .bp4-form-group { + .bp4-form-helper-text { margin-top: 7px; } - label.bp3-label { + label.bp4-label { margin-bottom: 7px; } } - .bp3-form-group.accounts-checkbox { - .bp3-form-group.bp3-inline { + .bp4-form-group.accounts-checkbox { + .bp4-form-group.bp4-inline { margin-bottom: 7px; } - .bp3-control.bp3-inline { + .bp4-control.bp4-inline { margin-bottom: 0; } } diff --git a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss index 283ea9fae..9b874c463 100644 --- a/packages/webapp/src/style/pages/Preferences/GeneralForm.scss +++ b/packages/webapp/src/style/pages/Preferences/GeneralForm.scss @@ -4,17 +4,17 @@ //--------------------------------- .preferences-page__inside-content--general { - .bp3-form-group { + .bp4-form-group { max-width: 650px; margin-bottom: 24px; - .bp3-label { + .bp4-label { min-width: 190px; font-weight: 600; color: #38414e; } - .bp3-form-content { + .bp4-form-content { width: 100%; } } diff --git a/packages/webapp/src/style/pages/Preferences/Roles/Form.scss b/packages/webapp/src/style/pages/Preferences/Roles/Form.scss index 1b375407e..32461e986 100644 --- a/packages/webapp/src/style/pages/Preferences/Roles/Form.scss +++ b/packages/webapp/src/style/pages/Preferences/Roles/Form.scss @@ -11,26 +11,26 @@ border-top: 1px solid #e0e7ea; margin-top: 30px; - .bp3-button { + .bp4-button { min-width: 65px; - + .bp3-button { + + .bp4-button { margin-left: 10px; } } } } - .bp3-form-group { + .bp4-form-group { max-width: 600px; margin-bottom: 14px; - &.bp3-inline { - .bp3-label { + &.bp4-inline { + .bp4-label { min-width: 150px; } } - .bp3-form-content { + .bp4-form-content { width: 100%; } diff --git a/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss b/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss index d2a52edf0..f2eff4bcf 100644 --- a/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss +++ b/packages/webapp/src/style/pages/Preferences/SMSIntegration.scss @@ -30,8 +30,8 @@ } } } - .bp3-tabs { - .bp3-tab-panel { + .bp4-tabs { + .bp4-tab-panel { margin-top: 0; } } diff --git a/packages/webapp/src/style/pages/Preferences/Topbar.scss b/packages/webapp/src/style/pages/Preferences/Topbar.scss index 17b6c5b91..5653a0eec 100644 --- a/packages/webapp/src/style/pages/Preferences/Topbar.scss +++ b/packages/webapp/src/style/pages/Preferences/Topbar.scss @@ -27,7 +27,7 @@ align-items: center; margin-right: 14px; - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { padding: 0; background-size: contain; background-color: #eed1f2; @@ -55,7 +55,7 @@ margin-right: 15px; border-right: 1px solid #e5e5e5; - .bp3-button + .bp3-button { + .bp4-button + .bp4-button { margin-left: 10px; } } diff --git a/packages/webapp/src/style/pages/Preferences/Users.scss b/packages/webapp/src/style/pages/Preferences/Users.scss index c9a3726e7..420ce0f48 100644 --- a/packages/webapp/src/style/pages/Preferences/Users.scss +++ b/packages/webapp/src/style/pages/Preferences/Users.scss @@ -24,8 +24,8 @@ border-bottom: 0; } } - .bp3-tabs { - .bp3-tab-panel { + .bp4-tabs { + .bp4-tab-panel { margin-top: 0; } } diff --git a/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss index 0d793aaca..14c1a3633 100644 --- a/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss +++ b/packages/webapp/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss @@ -1,11 +1,11 @@ .dialog--reconcile-credit-form { width: 850px; - .bp3-callout { + .bp4-callout { font-size: 14px; } - .bp3-dialog-footer { + .bp4-dialog-footer { display: flex; justify-content: flex-start; padding-top: 10px; diff --git a/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss b/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss index 8d8e7239f..5fd6e4845 100644 --- a/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss +++ b/packages/webapp/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss @@ -17,10 +17,10 @@ } .tbody { - .bp3-form-group { + .bp4-form-group { margin-bottom: 0; - &:not(.bp3-intent-danger) .bp3-input { + &:not(.bp4-intent-danger) .bp4-input { border: 1px solid #d0dfe2; &:focus { @@ -33,11 +33,11 @@ } } - .bp3-callout { + .bp4-callout { font-size: 14px; } - .bp3-dialog-footer { + .bp4-dialog-footer { display: flex; justify-content: flex-start; padding-top: 10px; diff --git a/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss b/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss index 2e8d889ce..270ea5493 100644 --- a/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss +++ b/packages/webapp/src/style/pages/ReferenceNumber/ReferenceNumber.scss @@ -1,18 +1,18 @@ .reference-number-form { - .bp3-dialog-body { + .bp4-dialog-body { .paragraph { margin-bottom: 22px; } - .bp3-control { + .bp4-control { margin-bottom: 16px; } } - .bp3-dialog-footer { - .bp3-button[type='submit'] { + .bp4-dialog-footer { + .bp4-button[type='submit'] { min-width: 80px; } } diff --git a/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss b/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss index b94467894..4d892b314 100644 --- a/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss +++ b/packages/webapp/src/style/pages/RefundCreditNote/RefundCreditNote.scss @@ -1,12 +1,12 @@ .dialog--refund-credit-note { - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 13px; } .form-group { &--description { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -17,7 +17,7 @@ } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } \ No newline at end of file diff --git a/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss b/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss index 6e023f2dc..d832eb295 100644 --- a/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss +++ b/packages/webapp/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss @@ -1,14 +1,14 @@ .dialog--refund-vendor-credit { max-width: 450px; - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 13px; } .form-group { &--description { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -18,7 +18,7 @@ } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss b/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss index bd9b46c90..8721f92f5 100644 --- a/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss +++ b/packages/webapp/src/style/pages/SMSMessage/SMSMessage.scss @@ -1,10 +1,10 @@ .dialog--sms-message { width: 800px; - .bp3-form-group { + .bp4-form-group { margin-bottom: 15px; - label.bp3-label { + label.bp4-label { font-size: 13px; margin-bottom: 6px; } @@ -12,7 +12,7 @@ .form-group { &--message_text { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-width: 100%; @@ -23,7 +23,7 @@ } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss b/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss index 0fe8385d1..f9d50a745 100644 --- a/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss +++ b/packages/webapp/src/style/pages/SaleEstimate/PageForm.scss @@ -21,17 +21,17 @@ body.page-estimate-edit{ flex: 1 0 0; } - .bp3-label { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { + .bp4-form-group { margin-bottom: 18px; - &.bp3-inline { + &.bp4-inline { max-width: 440px; } } diff --git a/packages/webapp/src/style/pages/SaleInvoice/List.scss b/packages/webapp/src/style/pages/SaleInvoice/List.scss index 03e62e64a..f1bee53e7 100644 --- a/packages/webapp/src/style/pages/SaleInvoice/List.scss +++ b/packages/webapp/src/style/pages/SaleInvoice/List.scss @@ -44,12 +44,12 @@ .fully-paid-text { font-size: 13.5px; } - .bp3-progress-bar { + .bp4-progress-bar { height: 3px; max-width: 180px; &, - .bp3-progress-meter { + .bp4-progress-meter { border-radius: 0; } } diff --git a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss b/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss index 44b9c607f..42b2266b3 100644 --- a/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss +++ b/packages/webapp/src/style/pages/SaleInvoice/PageForm.scss @@ -19,16 +19,16 @@ body.page-invoice-edit { flex: 1 0 0; } - .bp3-label { + .bp4-label { min-width: 150px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { - &.bp3-inline { + .bp4-form-group { + &.bp4-inline { max-width: 450px; } } @@ -41,10 +41,10 @@ body.page-invoice-edit { max-width: 470px; &--due-date { - .bp3-form-group { + .bp4-form-group { margin: 0px 15px 15px; - .bp3-label { + .bp4-label { min-width: 100px; } } @@ -89,7 +89,7 @@ body.page-invoice-edit { color: #ffffff; } - .bp3-progress-bar { + .bp4-progress-bar { background: rgba(92, 112, 128, 0.2); border-radius: 40px; display: block; diff --git a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss b/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss index 27daf23ff..f5faebc5d 100644 --- a/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss +++ b/packages/webapp/src/style/pages/SaleReceipt/PageForm.scss @@ -21,16 +21,16 @@ body.page-receipt-edit{ &-fields{ flex: 1 0 0; } - .bp3-label{ + .bp4-label{ min-width: 150px; } - .bp3-form-content{ + .bp4-form-content{ width: 100%; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 18px; - &.bp3-inline{ + &.bp4-inline{ max-width: 450px; } } diff --git a/packages/webapp/src/style/pages/Setup/Congrats.scss b/packages/webapp/src/style/pages/Setup/Congrats.scss index d2aaef755..d5fb935aa 100644 --- a/packages/webapp/src/style/pages/Setup/Congrats.scss +++ b/packages/webapp/src/style/pages/Setup/Congrats.scss @@ -19,7 +19,7 @@ opacity: 0.85; margin-bottom: 14px; } - .bp3-button { + .bp4-button { height: 38px; padding-left: 25px; padding-right: 25px; diff --git a/packages/webapp/src/style/pages/Setup/Initializing.scss b/packages/webapp/src/style/pages/Setup/Initializing.scss index 863ce85fb..1575c0aed 100644 --- a/packages/webapp/src/style/pages/Setup/Initializing.scss +++ b/packages/webapp/src/style/pages/Setup/Initializing.scss @@ -5,7 +5,7 @@ margin: 0 auto; padding: 16% 0 0; - .bp3-progress-bar { + .bp4-progress-bar { background: rgba(92, 112, 128, 0.2); border-radius: 40px; display: block; @@ -15,7 +15,7 @@ width: 80%; margin: 0 auto; - .bp3-progress-meter { + .bp4-progress-meter { background-color: #809cb3; } } diff --git a/packages/webapp/src/style/pages/Setup/Organization.scss b/packages/webapp/src/style/pages/Setup/Organization.scss index 02ceff63a..dd5623f6e 100644 --- a/packages/webapp/src/style/pages/Setup/Organization.scss +++ b/packages/webapp/src/style/pages/Setup/Organization.scss @@ -12,32 +12,32 @@ font-weight: 600; } } - .bp3-form-group { + .bp4-form-group { margin-bottom: 24px; - .bp3-input-group { - .bp3-input { + .bp4-input-group { + .bp4-input { height: 38px; } } - .bp3-input, - .form-group--select-list .bp3-button{ + .bp4-input, + .form-group--select-list .bp4-button{ font-size: 15px; } } - label.bp3-label{ + label.bp4-label{ color: #20242e; } - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { width: 100%; height: 38px; padding: 8px; } - .bp3-text-muted { + .bp4-text-muted { color: #000000; } @@ -50,14 +50,14 @@ } .register-org-button { - .bp3-button { + .bp4-button { background-color: #1c2448; height: 40px; font-size: 15px; width: 100%; &:disabled, - &.bp3-loading{ + &.bp4-loading{ background-color: rgba(28, 36, 72, 0.5); } } diff --git a/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss b/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss index 722f2abcd..3548f7ca5 100644 --- a/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss +++ b/packages/webapp/src/style/pages/Setup/PaymentViaVoucherDialog.scss @@ -2,7 +2,7 @@ .dialog--payment-via-voucher{ - .bp3-dialog-body{ + .bp4-dialog-body{ p{ margin-bottom: 20px; } @@ -11,11 +11,11 @@ } } - .bp3-dialog-footer-actions{ + .bp4-dialog-footer-actions{ button{ min-width: 80px; - &.bp3-intent-primary{ + &.bp4-intent-primary{ min-width: 90px; } } diff --git a/packages/webapp/src/style/pages/Subscription/BillingPlans.scss b/packages/webapp/src/style/pages/Subscription/BillingPlans.scss index f5d2bbe5c..01bc82922 100644 --- a/packages/webapp/src/style/pages/Subscription/BillingPlans.scss +++ b/packages/webapp/src/style/pages/Subscription/BillingPlans.scss @@ -15,19 +15,19 @@ margin-top: 0; margin-bottom: 12px; } - .bp3-tab-list { + .bp4-tab-list { border-bottom: 2px solid #e6e6e6; width: 95%; - .bp3-tab-indicator-wrapper .bp3-tab-indicator{ + .bp4-tab-indicator-wrapper .bp4-tab-indicator{ bottom: -2px; } } - .bp3-tab-panel{ + .bp4-tab-panel{ margin-top: 26px; } .subscribe-button { - .bp3-button { + .bp4-button { background-color: #0063ff; min-height: 41px; width: 240px; @@ -41,19 +41,19 @@ .license-container { - .bp3-button{ + .bp4-button{ margin-top: 14px; padding: 0 30px; } .form-group-license_code{ margin-top: 20px; } - .bp3-form-content { - .bp3-input-group { + .bp4-form-content { + .bp4-input-group { display: block; position: relative; } - .bp3-input { + .bp4-input { position: relative; width: 59%; height: 41px; diff --git a/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss b/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss index a8d8bc7e6..9f7fdbb76 100644 --- a/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss +++ b/packages/webapp/src/style/pages/TransactionsLocking/TransactionsLockingDialog.scss @@ -1,11 +1,11 @@ .dialog--transaction--locking { max-width: 450px; - .bp3-form-group { + .bp4-form-group { margin-bottom: 10px; margin-top: 10px; - label.bp3-label { + label.bp4-label { font-size: 13px; margin-bottom: 3px; } @@ -13,7 +13,7 @@ .form-group { &--reason { - .bp3-form-content { + .bp4-form-content { textarea { width: 100%; min-height: 85px; @@ -23,7 +23,7 @@ } } } - .bp3-dialog-footer { + .bp4-dialog-footer { display: flex; justify-content: flex-start; // padding-top: 10px; diff --git a/packages/webapp/src/style/pages/Users/InviteFormDialog.scss b/packages/webapp/src/style/pages/Users/InviteFormDialog.scss index c4c3911cc..32a18eb80 100644 --- a/packages/webapp/src/style/pages/Users/InviteFormDialog.scss +++ b/packages/webapp/src/style/pages/Users/InviteFormDialog.scss @@ -1,15 +1,15 @@ .dialog--invite-form { width: 450px; - .bp3-dialog-body { - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-dialog-body { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 70px; } - .bp3-form-content { + .bp4-form-content { width: 250px; - .bp3-dialog-footer-actions { + .bp4-dialog-footer-actions { margin-right: 20px; display: flex; justify-content: flex-end; @@ -20,12 +20,12 @@ } .dialog--invite-user { - .bp3-dialog-body { - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-dialog-body { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 250px; } } diff --git a/packages/webapp/src/style/pages/Users/UserFormDialog.scss b/packages/webapp/src/style/pages/Users/UserFormDialog.scss index 767701724..f02570ef7 100644 --- a/packages/webapp/src/style/pages/Users/UserFormDialog.scss +++ b/packages/webapp/src/style/pages/Users/UserFormDialog.scss @@ -1,32 +1,32 @@ .dialog--user-form { width: 450px; - .bp3-form-group { + .bp4-form-group { margin-bottom: 15px; } - .bp3-dialog-body { + .bp4-dialog-body { margin-bottom: 30px; - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-form-group.bp4-inline { + .bp4-label { min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 250px; } } - .bp3-dialog-header { + .bp4-dialog-header { height: 170px; } } - .bp3-callout { + .bp4-callout { font-size: 13px; margin-bottom: 20px; } - .bp3-dialog-footer { - .bp3-button { + .bp4-dialog-footer { + .bp4-button { min-width: 75px; } } diff --git a/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss b/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss index 30c5b7124..e796cec09 100644 --- a/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss +++ b/packages/webapp/src/style/pages/VendorOpeningBalance/VendorOpeningBalance.scss @@ -1,19 +1,19 @@ .dialog--vendor-opening-balance { max-width: 400px; - .bp3-dialog-body { - .bp3-form-group { + .bp4-dialog-body { + .bp4-form-group { margin-bottom: 15px; margin-top: 15px; - label.bp3-label { + label.bp4-label { margin-bottom: px; font-size: 13px; } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/Vendors/Form.scss b/packages/webapp/src/style/pages/Vendors/Form.scss index 6a341d76c..8449a125c 100644 --- a/packages/webapp/src/style/pages/Vendors/Form.scss +++ b/packages/webapp/src/style/pages/Vendors/Form.scss @@ -15,20 +15,20 @@ max-width: 1000px; } - .bp3-form-group { + .bp4-form-group { max-width: 500px; - .bp3-control { + .bp4-control { margin-top: 8px; margin-bottom: 8px; } - &.bp3-inline { - .bp3-label { + &.bp4-inline { + .bp4-label { min-width: 150px; } } - .bp3-form-content { + .bp4-form-content { width: 100%; } } @@ -36,7 +36,7 @@ .form-group--contact_name { max-width: 600px; - .bp3-control-group > * { + .bp4-control-group > * { flex-shrink: unset; &:not(:last-child) { @@ -52,16 +52,16 @@ } } - .bp3-form-group { + .bp4-form-group { margin-bottom: 14px; } - .bp3-tab-panel { + .bp4-tab-panel { margin-top: 26px; } .form-group--phone-number { - .bp3-control-group > * { + .bp4-control-group > * { flex-shrink: unset; padding-right: 5px; padding-left: 5px; @@ -88,20 +88,20 @@ // Tab panels. .tab-panel { &--address { - .bp3-form-group { + .bp4-form-group { max-width: 440px; - &.bp3-inline { - .bp3-label { + &.bp4-inline { + .bp4-label { min-width: 145px; } } - .bp3-form-content { + .bp4-form-content { width: 100%; } - textarea.bp3-input { + textarea.bp4-input { max-width: 100%; width: 100%; min-height: 50px; @@ -110,7 +110,7 @@ } &--note { .form-group--note { - .bp3-form-group { + .bp4-form-group { max-width: 600px; } textarea { @@ -126,8 +126,8 @@ } } - .bp3-tabs { - .bp3-tab-list { + .bp4-tabs { + .bp4-tab-list { position: relative; &:before { @@ -143,7 +143,7 @@ margin-right: 25px; } - &.bp3-large > .bp3-tab { + &.bp4-large > .bp4-tab { font-size: 15px; color: #555; diff --git a/packages/webapp/src/style/pages/VendorsCreditNote/List.scss b/packages/webapp/src/style/pages/VendorsCreditNote/List.scss index 5119f3081..8c5e5ae37 100644 --- a/packages/webapp/src/style/pages/VendorsCreditNote/List.scss +++ b/packages/webapp/src/style/pages/VendorsCreditNote/List.scss @@ -11,7 +11,7 @@ } .table-size--small { .status.td { - .bp3-progress-bar { + .bp4-progress-bar { height: 3px; } } diff --git a/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss b/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss index 79be9954b..4831a2ab7 100644 --- a/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss +++ b/packages/webapp/src/style/pages/VendorsCreditNote/PageForm.scss @@ -19,15 +19,15 @@ body.page-vendor-credit-note-edit { flex: 1 0 0; } - .bp3-label { + .bp4-label { min-width: 150px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { - &.bp3-inline { + .bp4-form-group { + &.bp4-inline { max-width: 450px; } } diff --git a/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss b/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss index 27fe8d405..c41fb81ac 100644 --- a/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss +++ b/packages/webapp/src/style/pages/WarehouseTransfers/PageForm.scss @@ -19,15 +19,15 @@ body.page-warehouse-transfer-edit { flex: 1 0 0; } - .bp3-label { + .bp4-label { min-width: 150px; } - .bp3-form-content { + .bp4-form-content { width: 100%; } - .bp3-form-group { - &.bp3-inline { + .bp4-form-group { + &.bp4-inline { max-width: 450px; } } diff --git a/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss b/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss index 5a9a4433a..7ee26daf3 100644 --- a/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss +++ b/packages/webapp/src/style/pages/Warehouses/warehouseFormDialog.scss @@ -1,16 +1,16 @@ .dialog--warehouse-form { width: 650px; - .bp3-dialog-body { - .bp3-form-group.bp3-inline { - .bp3-label { + .bp4-dialog-body { + .bp4-form-group.bp4-inline { + .bp4-label { font-size: 13px; min-width: 140px; } - .bp3-form-content { + .bp4-form-content { width: 388px; } - .bp3-control-group > * { + .bp4-control-group > * { flex-shrink: unset; padding-right: 5px; padding-left: 5px; @@ -24,13 +24,13 @@ } &.form-group--warehouse_name, &.form-group--phone_number { - .bp3-form-content { + .bp4-form-content { width: 278px; } } } } - .bp3-dialog-footer { + .bp4-dialog-footer { padding-top: 10px; } } diff --git a/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss b/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss index 05a0f9969..7e0b149e4 100644 --- a/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss +++ b/packages/webapp/src/style/pages/keyboardShortcuts/KeyboardShortcutDialog.scss @@ -31,8 +31,8 @@ text-align: right; margin: 0px 15px; - .bp3-button.bp3-small, - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small { + .bp4-button.bp4-small, + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal).bp4-small { min-width: 65px; height: 26px; min-height: 26px; diff --git a/packages/webapp/src/style/pages/register-organizaton.scss b/packages/webapp/src/style/pages/register-organizaton.scss index cf30a8958..9044785c1 100644 --- a/packages/webapp/src/style/pages/register-organizaton.scss +++ b/packages/webapp/src/style/pages/register-organizaton.scss @@ -29,9 +29,9 @@ margin-bottom: 20px; } - .bp3-form-group { - .bp3-input-group { - .bp3-input { + .bp4-form-group { + .bp4-input-group { + .bp4-input { position: relative; width: 619px; height: 38px; @@ -41,7 +41,7 @@ .form-group--base-currency, .form-group--language { - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { min-width: 300px; min-height: 38px; } @@ -49,16 +49,16 @@ .form-group--language { margin-left: 18px; } - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { min-width: 619px; min-height: 38px; } .form-group--time-zone { - .bp3-text-muted { + .bp4-text-muted { color: #000000; } - .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) { + .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) { background: #fff; box-shadow: 0 0 0 transparent; border: 1px solid #ced4da; @@ -74,7 +74,7 @@ border-bottom: 3px solid #f5f5f5; } .register-org-button { - .bp3-button { + .bp4-button { background-color: #0052cc; width: 174px; min-height: 40px; diff --git a/packages/webapp/src/style/pages/view-form.scss b/packages/webapp/src/style/pages/view-form.scss index 3f185b8a9..34743a300 100644 --- a/packages/webapp/src/style/pages/view-form.scss +++ b/packages/webapp/src/style/pages/view-form.scss @@ -18,7 +18,7 @@ background: #fbfafa; margin-bottom: 22px; - .bp3-form-group.bp3-inline{ + .bp4-form-group.bp4-inline{ margin-bottom: 0; } } @@ -71,7 +71,7 @@ .dragable-columns{ &__column{ - .bp3-input-group .bp3-input{ + .bp4-input-group .bp4-input{ border-radius: 3px 3px 0 0; } @@ -91,7 +91,7 @@ &__role-conditional{ margin-top: 1rem; - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 0; } } diff --git a/packages/webapp/src/style/variables.scss b/packages/webapp/src/style/variables.scss index 21fe0ded6..41f427703 100644 --- a/packages/webapp/src/style/variables.scss +++ b/packages/webapp/src/style/variables.scss @@ -1,6 +1,7 @@ -@import '@blueprintjs/core/src/common/_variables.scss'; +@import "@blueprintjs/colors/lib/scss/colors"; +@import '@blueprintjs/core/src/common/variables'; -$ns: bp3; +$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); @@ -43,8 +44,7 @@ $sidebar-submenu-item-bg-color: rgba(255, 255, 255, 0.2); $form-check-input-checked-color: #fff; $form-check-input-checked-bg-color: $blue1; -$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; -$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-checked-bg-image: "" !default; // z-indexs $zindex-dashboard-splash-screen: 39; diff --git a/packages/webapp/src/style/views/filter-dropdown.scss b/packages/webapp/src/style/views/filter-dropdown.scss index d3a7d9eac..a703fe1de 100644 --- a/packages/webapp/src/style/views/filter-dropdown.scss +++ b/packages/webapp/src/style/views/filter-dropdown.scss @@ -19,43 +19,43 @@ display: flex; padding: 6px 12px; - .bp3-input{ + .bp4-input{ padding: 0 6px; } - .form-group--select-list .bp3-popover-target .bp3-button{ + .form-group--select-list .bp4-popover-target .bp4-button{ padding-left: 6px; } - .bp3-html-select::after, - .form-group--select-list .bp3-button::after{ + .bp4-html-select::after, + .form-group--select-list .bp4-button::after{ margin-right: 6px; border-top-color: #c5c5c5; } - .bp3-html-select, - .bp3-input, - .form-group--select-list .bp3-button{ + .bp4-html-select, + .bp4-input, + .form-group--select-list .bp4-button{ &:not(:focus){ border-color: #d3d9de; } } - .form-group--select-list .bp3-button{ + .form-group--select-list .bp4-button{ padding-right: 20px; } - .bp3-form-group{ + .bp4-form-group{ margin-bottom: 0; padding-right: 10px; - .bp3-control.bp3-checkbox{ + .bp4-control.bp4-checkbox{ margin-left: 20px; } - .bp3-popover-wrapper{ + .bp4-popover-wrapper{ width: 100%; } - .bp3-button{ + .bp4-button{ text-overflow: ellipsis; overflow: visible; white-space: nowrap; @@ -84,7 +84,7 @@ .button--remove{ margin-left: -6px; - .bp3-icon{ + .bp4-icon{ color: #929aa0; } } @@ -96,15 +96,15 @@ } } -.bp3-popover{ +.bp4-popover{ &, - & .bp3-popover-content{ + & .bp4-popover-content{ border-radius: 5px; } } -.bp3-menu-item{ +.bp4-menu-item{ .text-hint{ font-size: 11px; line-height: 1.3;