feat: Optimize SCSS architecture.

client/src/components/App.js

@@ -5,14 +5,14 @@ import { createBrowserHistory } from 'history';
 import { ReactQueryConfigProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query-devtools';
 
+import 'style/App.scss';
+
 import PrivateRoute from 'components/Guards/PrivateRoute';
 import Authentication from 'components/Authentication';
 import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 import intl from 'services/intl';
 
-import 'style/App.scss';
-
 function App({ locale }) {
   const history = createBrowserHistory();
 

client/src/components/Authentication.js

@@ -8,10 +8,10 @@ import withAuthentication from 'containers/Authentication/withAuthentication';
 import { compose } from 'utils';
 import Icon from 'components/Icon';
 
+import 'style/pages/Authentication/Auth.scss'
+
 function PageFade(props) {
-  return (
-    <CSSTransition {...props} classNames="authTransition" timeout={500} />
-  );
+  return <CSSTransition {...props} classNames="authTransition" timeout={500} />;
 }
 
 function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
@@ -52,7 +52,7 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
                       ))}
                     </Switch>
                   </PageFade>
-                </TransitionGroup>                
+                </TransitionGroup>
               </div>
             </div>
           </div>

client/src/components/Dashboard/BigcapitalLoading.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from 'components';
+
+import 'style/components/BigcapitalLoading.scss';
+
+/**
+ * Bigcapital logo loading.
+ */
+export default function BigcapitalLoading({ className }) {
+  return (
+    <div className={classNames('bigcapital-loading', className)}>
+      <div class="center">
+        <Icon icon="bigcapital" height={37} width={214} />
+      </div>
+    </div>
+  );
+}

client/src/components/Dashboard/Dashboard.js

@@ -15,6 +15,11 @@ import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Dashboard/Dashboard.scss'
+
+/**
+ * Dashboard page.
+ */
 function Dashboard({
   // #withSettings
   requestFetchOptions,

client/src/components/Dashboard/DashboardLoadingIndicator.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import classNames from 'classnames';
-import { Choose, Icon } from 'components';
+import { Choose } from 'components';
+import BigcapitalLoading from './BigcapitalLoading';
 
+/**
+ * Dashboard loading indicator.
+ */
 export default function DashboardLoadingIndicator({
   isLoading = false,
   className,
@@ -10,11 +13,7 @@ export default function DashboardLoadingIndicator({
   return (  
     <Choose>
       <Choose.When condition={isLoading}>
-        <div className={classNames('bigcapital-loading', className)}>
-          <div class="center">
-            <Icon icon="bigcapital" height={37} width={214} />
-          </div>
-        </div>
+        <BigcapitalLoading />        
       </Choose.When>
 
       <Choose.Otherwise>

client/src/components/Dashboard/PrivatePages.js

@@ -11,13 +11,15 @@ import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptions
 
 import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
 import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
+
 import { compose } from 'utils';
 
+import 'style/pages/Dashboard/Dashboard.scss';
+
 /**
  * Dashboard inner private pages.
  */
 function DashboardPrivatePages({
-
   // #withOrganizationActions
   requestAllOrganizations,
 

client/src/components/DataTable.js

@@ -20,6 +20,8 @@ import { If, Pagination, Choose } from 'components';
 
 import { ConditionalWrapper, saveInvoke } from 'utils';
 
+import 'style/components/DataTable/DataTable.scss';
+
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
     return <Checkbox indeterminate={indeterminate} {...rest} />;

client/src/components/Datatable/DatatableEditable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  DataTable,
+  If,
+} from 'components';
+import 'style/components/DataTable/DataTableEditable.scss';
+
+export default function DatatableEditable({
+  totalRow = false,
+  actions,
+  className,
+  ...tableProps
+}) {
+  return (
+    <div
+      className={classNames(CLASSES.DATATABLE_EDITOR, {
+        [`${CLASSES.DATATABLE_EDITOR_HAS_TOTAL_ROW}`]: totalRow,
+      }, className)}
+    >
+      <DataTable {...tableProps} />
+
+      <If condition={actions}>
+        <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS)}>
+          {actions}
+        </div>
+      </If>
+    </div>
+  );
+}

client/src/components/Dialog/Dialog.js

@@ -3,6 +3,8 @@ import { Dialog } from '@blueprintjs/core';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+import 'style/components/Dialog/Dialog.scss';
+
 function DialogComponent(props) {
   const { name, children, closeDialog, onClose } = props;
 

client/src/components/DialogsContainer.js

@@ -1,4 +1,4 @@
-import React, { lazy } from 'react';
+import React from 'react';
 
 import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
 import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
@@ -6,7 +6,6 @@ import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
 import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
 import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
-// import BillNumberDialog from 'containers/Dialogs/BillNumberDialog';
 import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog';
 import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
 import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
@@ -18,7 +17,6 @@ export default function DialogsContainer() {
     <div>
       <AccountFormDialog dialogName={'account-form'} />
       <JournalNumberDialog dialogName={'journal-number-form'} />
-      {/* <BillNumberDialog dialogName={'bill-number-form'} /> */}
       <PaymentReceiveNumberDialog dialogName={'payment-receive-number-form'} />
       <EstimateNumberDialog dialogName={'estimate-number-form'} />
       <ReceiptNumberDialog dialogName={'receipt-number-form'} />

client/src/components/EmptyStatus.js

@@ -2,6 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
+import 'style/components/DataTable/DataTableEmptyStatus.scss';
+
+/**
+ * Datatable empty status.
+ */
 export default function EmptyStatuts({ title, description, action, children }) {
   return (
     <div className={classNames(CLASSES.DATATABLE_EMPTY_STATUS)}>

client/src/components/FieldHint.js

@@ -1,7 +1,12 @@
 import React from 'react';
-import { Tooltip, Position } from '@blueprintjs/core';
+import { Tooltip } from '@blueprintjs/core';
 import Icon from './Icon';
 
+import 'style/components/Hint.scss';
+
+/**
+ * Field hint.
+ */
 export default function FieldHint({
   content,
   position,

client/src/components/FinancialStatement.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'style/containers/FinancialStatements/FinancialSheet.scss';
 
 export default function FinancialStatements({ children }) {
   return <div class="financial-statement">{children}</div>;

client/src/components/PageFormBigNumber.js

@@ -5,6 +5,8 @@ import {
   Money,
 } from 'components';
 
+import 'style/components/BigAmount.scss';
+
 export default function PageFormBigNumber({ label, amount, currencyCode }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>

client/src/components/Pagination.js

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import { range } from 'lodash';
 import { Icon } from 'components';
 
+import 'style/components/DataTable/Pagination.scss';
+
 const getState = ({ currentPage, size, total }) => {
   const totalPages = Math.ceil(total / size);
   const visibleItems = 5;

client/src/components/Preferences/PreferencesPage.js

@@ -8,6 +8,11 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+import 'style/pages/Preferences/Page.scss';
+
+/**
+ * Preferences page.
+ */
 export default function PreferencesPage() {
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>

client/src/components/Preferences/PreferencesSidebar.js

@@ -4,6 +4,11 @@ import { useHistory, useLocation } from 'react-router-dom';
 import preferencesMenu from 'config/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 
+import 'style/pages/Preferences/Sidebar.scss';
+
+/**
+ * Preferences sidebar.
+ */
 export default function PreferencesSidebar() {
   const history = useHistory();
   const location = useLocation();

client/src/components/Preferences/PreferencesTopbar.js

@@ -10,6 +10,11 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 
 import { compose } from 'utils';
 
+import 'style/pages/Preferences/Topbar.scss';
+
+/**
+ * Preferences topbar.
+ */
 function PreferencesTopbar({ preferencesPageTitle }) {
   return (
     <div

client/src/components/Sidebar/Sidebar.js

@@ -3,6 +3,8 @@ import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
 
+import 'style/containers/Dashboard/Sidebar.scss';
+
 export default function Sidebar() {
   return (
     <SidebarContainer>

client/src/components/index.js

@@ -18,6 +18,7 @@ import CurrenciesSelectList from './CurrenciesSelectList';
 import FieldRequiredHint from './FieldRequiredHint';
 import AppToaster from './AppToaster';
 import DataTable from './DataTable';
+import DataTableEditable from './Datatable/DatatableEditable';
 import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
 import LoadingIndicator from './LoadingIndicator';
@@ -90,4 +91,5 @@ export {
   InputPrependText,
   PageFormBigNumber,
   AccountsMultiSelect,
+  DataTableEditable
 };