Publish

- @bigcapital/server@0.10.1
 - @bigcapital/webapp@0.10.2

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "useWorkspaces": true,
+  "version": "independent",
-  "version": "0.9.6",
+  "npmClient": "pnpm",
-  "npmClient": "npm"
+  "packages": ["packages/*"]
 }

package.json

@@ -2,7 +2,7 @@
   "name": "bigcapital-monorepo",
   "private": true,
   "scripts": {
-    "bootstrap": "lerna exec npm install",
+    "bootstrap": "lerna exec pnpm install",
     "dev": "lerna run dev",
     "build": "lerna run build",
     "dev:webapp": "lerna run dev --scope \"@bigcapital/webapp\"",
@@ -13,10 +13,6 @@
     "test:e2e": "playwright test",
     "prepare": "husky install"
   },
-  "workspaces": [
-    "packages/*",
-    "shared/*"
-  ],
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",

packages/server/.gitignore

@@ -1,7 +1,6 @@
 /node_modules/
 /.env
 /storage
-package-lock.json
 stdout.log
 /dist
-/build
+/build

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcapital/server",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "",
   "main": "src/server.ts",
   "scripts": {
@@ -35,6 +35,7 @@
     "babel-loader": "^9.1.2",
     "bcryptjs": "^2.4.3",
     "bluebird": "^3.7.2",
+    "body-parser": "^1.20.2",
     "compression": "^1.7.4",
     "country-codes-list": "^1.6.8",
     "cpy": "^8.1.2",
@@ -72,6 +73,8 @@
     "memory-cache": "^0.2.0",
     "moment": "^2.24.0",
     "moment-range": "^4.0.2",
+    "moment-timezone": "^0.5.43",
+    "mongodb": "^6.1.0",
     "mongoose": "^5.10.0",
     "mustache": "^3.0.3",
     "mysql": "^2.17.1",
@@ -131,7 +134,7 @@
     "rimraf": "^3.0.2",
     "rtlcss": "^3.3.0",
     "run-script-webpack-plugin": "^0.1.1",
-    "sass": "^1.37.5",
+    "sass": "^1.58.0",
     "sinon": "^7.4.2",
     "start-server-webpack-plugin": "^2.2.5",
     "ts-loader": "^9.4.2",

packages/webapp/.npmrc

@@ -1 +0,0 @@
-@bigcapitalhq:registry=https://npm.pkg.github.com

packages/webapp/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@bigcapital/webapp",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "private": true,
   "dependencies": {
-    "@blueprintjs-formik/core": "^0.3.4",
+    "@blueprintjs-formik/core": "^0.3.6",
-    "@blueprintjs-formik/datetime": "^0.3.4",
+    "@blueprintjs-formik/datetime": "^0.3.7",
-    "@blueprintjs-formik/select": "^0.3.2",
+    "@blueprintjs-formik/select": "^0.3.5",
-    "@blueprintjs/core": "^3.50.2",
+    "@blueprintjs/colors": "4.1.19",
-    "@blueprintjs/datetime": "^3.23.12",
+    "@blueprintjs/core": "^4.20.2",
+    "@blueprintjs/datetime": "^4.4.37",
     "@blueprintjs/popover2": "^0.11.1",
-    "@blueprintjs/select": "^3.11.2",
+    "@blueprintjs/select": "^4.9.24",
-    "@blueprintjs/table": "^3.8.3",
+    "@blueprintjs/table": "^4.10.12",
-    "@blueprintjs/timezone": "^3.6.2",
+    "@blueprintjs/timezone": "^4.5.43",
     "@casl/ability": "^5.4.3",
     "@casl/react": "^2.3.0",
     "@craco/craco": "^5.9.0",
@@ -26,6 +27,7 @@
     "@types/ramda": "^0.28.14",
     "@types/react": "^16.14.28",
     "@types/react-body-classname": "^1.1.7",
+    "@types/react-dom": "^16.9.16",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.5",
@@ -38,44 +40,49 @@
     "axios": "^0.21.2",
     "basscss": "^8.0.2",
     "camelcase": "^5.3.1",
+    "classnames": "^2.3.2",
     "cross-env": "^7.0.2",
-    "deep-map-keys": "^2.0.1",
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
     "dotenv-webpack": "^8.0.1",
+    "eslint": "^8.33.0",
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
     "formik": "^2.2.5",
+    "history": "4.10.1",
     "http-proxy-middleware": "^1.0.0",
     "jest": "24.9.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "js-cookie": "2.2.1",
     "js-money": "^0.6.3",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.33",
-    "node-sass": "^4.14.1",
     "path-browserify": "^1.0.1",
+    "prop-types": "15.8.1",
     "query-string": "^7.1.1",
     "ramda": "^0.27.1",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-app-polyfill": "^1.0.6",
     "react-body-classname": "^1.3.1",
     "react-content-loader": "^6.0.1",
     "react-dev-utils": "^11.0.4",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.0.1",
     "react-error-boundary": "^3.0.2",
+    "react-error-overlay": "^6.0.9",
     "react-hotkeys-hook": "^3.0.3",
     "react-intl-universal": "^2.4.7",
     "react-loadable": "^5.5.0",
     "react-query": "^3.6.0",
     "react-query-devtools": "^2.1.1",
-    "react-redux": "^7.1.3",
+    "react-redux": "^7.2.9",
+    "react-router": "5.3.4",
     "react-router-breadcrumbs-hoc": "^3.2.10",
     "react-router-dom": "^5.3.3",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "5.0.1",
     "react-scroll-sync": "^0.7.1",
     "react-scrollbars-custom": "^4.0.21",
     "react-sortablejs": "^2.0.11",
@@ -86,11 +93,13 @@
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
     "react-virtualized": "^9.22.3",
-    "redux": "^4.0.5",
+    "redux": "^4.2.1",
     "redux-devtools": "^3.5.0",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.2",
+    "reselect": "4.1.7",
     "rtl-detect": "^1.0.3",
+    "sass": "^1.68.0",
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
@@ -105,10 +114,6 @@
     "storybook": "start-storybook -p 6006"
   },
   "proxy": "http://localhost:3000/",
-  "devDependencies": {
-    "@types/react-dom": "^16.9.16",
-    "react-error-overlay": "^6.0.9"
-  },
   "resolutions": {
     "react-error-overlay": "6.0.9"
   },

packages/webapp/src/components/Accounts/AccountsTypesSelect.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { FSelect } from '@/components/Forms';
 
 export function AccountsTypesSelect({ ...props }) {

packages/webapp/src/components/Accounts/_components.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 
 // Filters accounts items.
 export const accountPredicate = (query, account, _index, exactMatch) => {

packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { Formik, FastField, FieldArray, useFormikContext } from 'formik';
+import { Formik, FastField, FieldArray } from 'formik';
 import {
   Button,
   FormGroup,

packages/webapp/src/components/App.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';

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;
     }
   }

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;

packages/webapp/src/components/Dashboard/SplashScreen.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import * as R from 'ramda';
 import BigcapitalLoading from './BigcapitalLoading';
 import withDashboard from '@/containers/Dashboard/withDashboard';

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,
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input,
-        .form-group--select-list .bp3-button {
+        .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 {
+        .bp4-form-group {
-          &.bp3-intent-danger {
+          &.bp4-intent-danger {
-            .bp3-button:not(.bp3-minimal),
+            .bp4-button:not(.bp4-minimal),
-            .bp3-input {
+            .bp4-input {
               border-color: #f7b6b6;
             }
           }
         }
         .td.actions {
-          .bp3-button {
+          .bp4-button {
             color: #80858f;
           }
         }

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;
   }

packages/webapp/src/components/DialogsContainer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import AccountDialog from '@/containers/Dialogs/AccountDialog';
 import InviteUserDialog from '@/containers/Dialogs/InviteUserDialog';
 import UserFormDialog from '@/containers/Dialogs/UserFormDialog';

packages/webapp/src/components/Drawer/DrawerMainTabs.tsx

@@ -17,8 +17,8 @@ export function DrawerMainTabs({ children, ...restProps }) {
 }
 
 const DrawerMainTabsRoot = styled.div`
-  .bp3-tabs {
+  .bp4-tabs {
-    .bp3-tab-list {
+    .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 {

packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx

@@ -60,8 +60,8 @@ export function ExchangeRateMutedField({
 }
 
 const ExchangeRateFormGroup = styled(FormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    label.bp3-label {
+    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;
   }

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;
   }
 `;

packages/webapp/src/components/Menu/MenuItemLabel.tsx

@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function MenuItemLabel({ text }) {
-  return <span class="bp3-menu-item-labeler">{text}</span>;
+  return <span class="bp4-menu-item-labeler">{text}</span>;
 }

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;

packages/webapp/src/components/Utils/For.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export const For = ({ render, of }) =>

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function MakeJournalFormFooterLeft() {
 }
 
 const DescriptionFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Authentication/Login.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Formik } from 'formik';
 import { Link } from 'react-router-dom';
 

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);
     }
   }

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;
   }
 `;

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;
   }

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
 
 import { CommercialDocBox } from '@/components';

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
 
 import { Card } from '@/components';

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx

@@ -20,12 +20,12 @@ export function ExpenseFormFooterLeft() {
   );
 }
 const DescriptionFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

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;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx

@@ -14,12 +14,11 @@ import classNames from 'classnames';
 
 import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
-import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 import withARAgingSummary from './withARAgingSummary';
 
-import { compose } from '@/utils';
+import { compose, safeInvoke } from '@/utils';
 
 /**
  * A/R Aging summary sheet - Actions bar.

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;
   }
 `;

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;
   }
 `;

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;
   }
 `;

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.tsx

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import React from 'react';
-
 import { Row, Col } from '@/components';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   NavbarGroup,
   Button,

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position, Checkbox } from '@blueprintjs/core';

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;
   }
 `;

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;
   }
 `;

packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx

@@ -47,7 +47,7 @@ export default function FinancialStatementsFilter({
       {({ form: { setFieldValue }, field: { value } }) => (
         <FormGroup
           label={label}
-          className="form-group--select-list bp3-fill"
+          className="form-group--select-list bp4-fill"
           inline={false}
         >
           <ListSelect

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx

@@ -120,7 +120,7 @@ export default compose(
 )(GeneralLedgerHeader);
 
 const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

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

@@ -119,7 +119,7 @@ export default compose(
 )(InventoryItemDetailsHeader);
 
 const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 400px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -117,7 +117,7 @@ export default compose(
 )(InventoryValuationHeader);
 
 const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx

@@ -98,7 +98,7 @@ export default compose(
 )(JournalHeader);
 
 const JournalDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 350px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx

@@ -114,7 +114,7 @@ export default R.compose(
 )(ProfitLossHeader);
 
 const ProfitLossSheetHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx

@@ -191,7 +191,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
 }
 
 const ProfitLossSheetComparisonWrap = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 3px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryHeader.tsx

@@ -109,7 +109,7 @@ export default compose(
 )(ProjectProfitabilitySummaryHeader);
 
 const ProjectProfitabilityDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx

@@ -98,7 +98,7 @@ export default compose(
 )(PurchasesByItemsHeader);
 
 const PurchasesByItemsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx

@@ -105,7 +105,7 @@ export default compose(
 )(SalesByItemsHeader);
 
 const SalesByItemsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx

@@ -108,7 +108,7 @@ export default compose(
 )(SalesTaxLiabilitySummaryHeader);
 
 const SalesTaxSummaryFinancialHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 320px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx

@@ -18,7 +18,7 @@ export default function SelectsListColumnsBy(props) {
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'display_report_columns'} />}
-              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}
             >

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;
   }
 `;

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;
   }
 `;

packages/webapp/src/containers/ItemsCategories/ItemsCategoryActionsBar.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   NavbarGroup,
   NavbarDivider,

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;

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;
     }
   }

packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export default function PreferencesPageLoader(props) {

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;
   }
 `;

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;
       }
 

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;

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 {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .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;
   }
 `;

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;
   }
 `;

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,
+  &.bp4-button.bp4-small,
-  &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small {
+  &.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal).bp4-small {
     font-size: 12px;
     color: #2172ed;
     background: transparent;

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 {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
-    .bp3-dialog-footer-actions {
+    .bp4-dialog-footer-actions {
       display: flex;
       justify-content: flex-start;
     }

packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx

@@ -48,8 +48,8 @@ export default function ProjectDetailTabs() {
 }
 
 const ProjectTabsContent = styled.div`
-  .bp3-tabs {
+  .bp4-tabs {
-    .bp3-tab-list {
+    .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;

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;
     }
   }

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;
     }
   }

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 {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .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;
   }
 `;

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 {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .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;
   }
 `;

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 {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .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;
   }
 `;

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;
   }
 `;

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 {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .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;
   }
 `;

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;
     }
   }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function BillFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx

@@ -88,7 +88,7 @@ export function BillUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.bill_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_bill_date}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function VendorCreditNoteFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx

@@ -74,7 +74,7 @@ export function VendorCreditUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.vendor_credit_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_vendor_credit_date}

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;
     }
   }

packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx

@@ -44,7 +44,7 @@ export function PaymentMadeUniversalSearchItem(
         <div>
           <div>{highlightText(text, query)}</div>
 
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {reference.payment_number && (
               <>
                 {highlightText(reference.payment_number, query)}

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 {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx

@@ -73,7 +73,7 @@ export function CreditNoteUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.credit_note_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_credit_note_date}

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 {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx

@@ -76,7 +76,7 @@ export function EstimateUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.estimate_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_estimate_date}

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;
   }
 `;

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 {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx

@@ -80,7 +80,7 @@ export function InvoiceUniversalSearchItem(
       text={
         <div>
           <div>{highlightText(item.text, query)}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {highlightText(item.reference.invoice_no, query)}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_invoice_date}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx

@@ -26,12 +26,12 @@ export function PaymentReceiveFormFootetLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx

@@ -50,7 +50,7 @@ export function PaymentReceiveUniversalSearchItem(
         <div>
           <div>{highlightText(item.text, query)}</div>
 
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {highlightText(item.reference.payment_receive_no, query)}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {highlightText(item.reference.formatted_payment_date, query)}

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 {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx

@@ -66,7 +66,7 @@ export function ReceiptUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.receipt_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_receipt_date}

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;
   }
 `;

packages/webapp/src/containers/UniversalSearch/components.tsx

@@ -18,7 +18,7 @@ function UniversalSearchItemDetail(item, { handleClick, modifiers, query }) {
           <div>{highlightText(item.text, query)}</div>
 
           {item.subText && (
-            <span class="bp3-text-muted">
+            <span class="bp4-text-muted">
               {highlightText(item.subText, query)}
             </span>
           )}

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function WarehouseTransferFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/style/App.scss

@@ -1,14 +1,10 @@
 @import './normalize.scss';
+@import './_base.scss';
 
-@import './Base.scss';
-
-// Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
 @import '@blueprintjs/popover2/src/blueprint-popover2.scss';
 
-@import 'basscss';
-
 // Objects
 @import 'objects/form';
 @import 'objects/switch';
@@ -51,56 +47,56 @@ body.hide-scrollbar .Pane2 {
   overflow: hidden;
 }
 
-.bp3-fill {
+.bp4-fill {
 
-  .bp3-popover-wrapper,
+  .bp4-popover-wrapper,
-  .bp3-popover-target {
+  .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,
+.bp4-select-popover .bp4-menu,
-.bp3-multi-select-popover .bp3-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 {
+.bp4-timezone-picker {
-  .bp3-button {
+  .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 +179,7 @@ body.hide-scrollbar .Pane2 {
 
 .ReactVirtualized__List {}
 
-.bp3-drawer {
+.bp4-drawer {
   box-shadow: 0 0 0;
   background-color: #fbfbfb;
 
@@ -194,7 +190,7 @@ body.hide-scrollbar .Pane2 {
 
 // RTL Icons.
 html[dir='rtl'] {
-  .bp3-icon-caret-right {
+  .bp4-icon-caret-right {
     transform: scaleX(-1);
   }
 }
@@ -205,12 +201,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 +226,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);
   }
 }

packages/webapp/src/style/Base.scss

@@ -1,3 +0,0 @@
-
-@import 'variables';
-@import 'functions';

packages/webapp/src/style/_base.scss

@@ -0,0 +1,3 @@
+
+@import '_variables';
+@import '_functions';