feat: style read-only drawers.

fix: empty state in resources tables.

client/src/components/Card.js

@@ -1,5 +1,6 @@
 import React from 'react';
+import classNames from 'classnames';
 
-export default function Card({ children }) {
-  return <div class="card">{children}</div>;
+export default function Card({ className, children }) {
+  return <div className={classNames('card', className)}>{children}</div>;
 }

client/src/components/Dashboard/DashboardSplitePane.js

@@ -9,7 +9,7 @@ function DashboardSplitPane({
   sidebarExpended,
   children
 }) {
-  const initialSize = 190;
+  const initialSize = 180;
 
   const [defaultSize, setDefaultSize] = useState(
     parseInt(localStorage.getItem('dashboard-size'), 10) || initialSize,
@@ -27,7 +27,7 @@ function DashboardSplitPane({
     <SplitPane
       allowResize={sidebarExpended}
       split="vertical"
-      minSize={190}
+      minSize={180}
       maxSize={300}
       defaultSize={sidebarExpended ? defaultSize : 50}
       size={sidebarExpended ? defaultSize : 50}

client/src/components/Dashboard/DashboardViewsTabs.js

@@ -9,7 +9,6 @@ import { saveInvoke } from 'utils';
 
 /**
  * Dashboard views tabs.
- *
  */
 export default function DashboardViewsTabs({
   initialViewSlug = 0,
@@ -42,8 +41,9 @@ export default function DashboardViewsTabs({
 
   // Trigger `onChange` and `onThrottledChange` events.
   const triggerOnChange = (viewSlug) => {
-    saveInvoke(onChange, viewSlug);
-    throttledOnChange.current(viewSlug);
+    const value = viewSlug === 0 ? null : viewSlug;
+    saveInvoke(onChange, value);
+    throttledOnChange.current(value);
   };
 
   // Handles click a new view.

client/src/components/Details/index.js

@@ -1,17 +1,22 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Col, Row } from 'components';
 
 import 'style/components/Details.scss';
 
+const DIRECTION = {
+  VERTICAL: 'vertical',
+  HORIZANTAL: 'horizantal',
+};
+
 /**
  * Details menu.
  */
-export function DetailsMenu({ children, vertical = false }) {
+export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) {
   return (
     <div
       className={classNames('details-menu', {
-        'is-vertical': vertical,
+        'details-menu--vertical': direction === DIRECTION.VERTICAL,
+        'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
       })}
     >
       {children}
@@ -20,27 +25,15 @@ export function DetailsMenu({ children, vertical = false }) {
 }
 
 /**
- * Detail item vertical .
+ * Detail item.
  */
-export function DetailItemVER({ label, children }) {
+export function DetailItem({ label, children, name }) {
   return (
-    <div class="detail-item">
+    <div className={classNames('detail-item', {
+      [`detail-item--${name}`]: name,
+    })}>
       <div class="detail-item__label">{label}</div>
       <div class="detail-item__content">{children}</div>
     </div>
   );
 }
-
-/**
- * Detail item horizontal .
- */
-export function DetailItemHOR({ label, children }) {
-  return (
-    <Row>
-      <Col className="label" xs={3}>
-        {label}
-      </Col>
-      <Col xs={3}>{children}</Col>
-    </Row>
-  );
-}

client/src/components/Dialog/DialogContent.js

@@ -5,15 +5,10 @@ import classNames from 'classnames';
 export default function DialogContent(props) {
   const { isLoading, children } = props;
 
-  const loadingContent = <Spinner size={30} />;
-
-  return (
-    <div
-      className={classNames(Classes.DIALOG_BODY, {
-        'is-loading': isLoading,
-      })}
-    >
-      {isLoading ? loadingContent : children}
+  const loadingContent = (
+    <div className={classNames(Classes.DIALOG_BODY, 'is-loading')}>
+      <Spinner size={30} />
     </div>
   );
+  return isLoading ? loadingContent : children;
 }

client/src/components/Drawer/Drawer.js

@@ -24,6 +24,7 @@ function DrawerComponent(props) {
       canEscapeKeyClose={true}
       position={Position.RIGHT}
       onClose={handleClose}
+      portalClassName={'drawer-portal'}
       {...props}
     >
       {children}

client/src/components/DrawersContainer.js

@@ -13,16 +13,21 @@ import PaymentReceiveDetailDrawer from 'containers/Drawers/PaymentReceiveDetailD
 import PaymentMadeDetailDrawer from 'containers/Drawers/PaymentMadeDetailDrawer';
 import EstimateDetailDrawer from '../containers/Drawers/EstimateDetailDrawer';
 
+import { DRAWERS } from 'common/drawers';
+
+/**
+ * Drawers container of the dashboard.
+ */
 export default function DrawersContainer() {
   return (
     <div>
-      <EstimateDrawer name={'estimate-drawer'} />
+      <EstimateDrawer name={DRAWERS.EstimateDrawer} />
       <InvoiceDrawer name={'invoice-drawer'} />
       <ReceiptDrawer name={'receipt-drawer'} />
       <PaymentReceiveDrawer name={'payment-receive-drawer'} />
-      <AccountDrawer name={'account-drawer'} />
-      <ManualJournalDrawer name={'journal-drawer'} />
-      <ExpenseDrawer name={'expense-drawer'} />
+      <AccountDrawer name={DRAWERS.ACCOUNT_DRAWER} />
+      <ManualJournalDrawer name={DRAWERS.JOURNAL_DRAWER} />
+      <ExpenseDrawer name={DRAWERS.EXPENSE_DRAWER} />
       <BillDrawer name={'bill-drawer'} />
       <InvoiceDetailDrawer name={'invoice-detail-drawer'} />
       <EstimateDetailDrawer name={'estimate-detail-drawer'} />

client/src/components/PdfPreview/index.js

@@ -1,13 +1,24 @@
 import React from 'react';
-import { Spinner } from '@blueprintjs/core';
+import { Spinner, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
 
 /**
  * Previews the pdf document of the given object url.
  */
 export function PdfDocumentPreview({ url, height, width, isLoading }) {
-  return isLoading ? (
+  const content = isLoading ? (
     <Spinner size={30} />
   ) : (
     <embed src={url} height={height} width={width} />
   );
+
+  return (
+    <div
+      className={classNames(Classes.DIALOG_BODY, {
+        loading: isLoading,
+      })}
+    >
+      {content}
+    </div>
+  );
 }

client/src/components/index.js

@@ -68,6 +68,7 @@ export * from './Dashboard/DashboardFilterButton';
 export * from './Dashboard/DashboardRowsHeightButton';
 export * from './UniversalSearch/UniversalSearch';
 export * from './PdfPreview';
+export * from './Details';
 
 const Hint = FieldHint;