feat: apply new cards design system.

feat: empty status datatables.
fix: edit account.

client/src/components/Dashboard/DashboardCard.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+
+// Dashboard card.
+export default function DashboardCard({ children, page }) {
+  return (
+    <div
+      className={classNames(CLASSES.DASHBOARD_CARD, {
+        [CLASSES.DASHBOARD_CARD_PAGE]: page,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,15 +1,18 @@
 import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 import DashboardContentRoute from 'components/Dashboard/DashboardContentRoute';
 import DashboardFooter from 'components/Dashboard/DashboardFooter';
+import DashboardErrorBoundary from './DashboardErrorBoundary';
 
-export default function() {
+export default function () {
   return (
-    <div className="dashboard-content" id="dashboard">
-      <DashboardTopbar />
-      <DashboardContentRoute />
-
-      <DashboardFooter />
-    </div>
+    <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
+      <div className="dashboard-content" id="dashboard">
+        <DashboardTopbar />
+        <DashboardContentRoute />
+        <DashboardFooter />
+      </div>
+    </ErrorBoundary>
   );
-}
+}

client/src/components/Dashboard/DashboardErrorBoundary.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from 'components';
+
+export default function DashboardErrorBoundary({}) {
+  return (
+    <div class="dashboard__error-boundary">
+      <h1>Sorry about that! Something went wrong</h1>
+      <p>If the problem stuck, please <a href="#">contact us</a> as soon as possible.</p>
+      <Icon icon="bigcapital" height={30} width={160} />
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 import {
   Navbar,
@@ -14,7 +13,7 @@ import { FormattedMessage as T } from 'react-intl';
 
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
-import { Icon, If } from 'components';
+import { Icon, Hint, If } from 'components';
 
 import withSearch from 'containers/GeneralSearch/withSearch';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -78,8 +77,18 @@ function DashboardTopbar({
         <div class="dashboard__title">
           <h1>{pageTitle}</h1>
 
+          <If condition={true}>
+            <div class="dashboard__hint">
+              <Hint
+                content={
+                  'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
+                }
+              />
+            </div>
+          </If>
+
           <If condition={pageSubtitle}>
-            <h3>{ pageSubtitle }</h3>
+            <h3>{pageSubtitle}</h3>
           </If>
 
           <If condition={pageSubtitle && editViewId}>