Empty placeholder component. CSS fixes.

components/common/EmptyPlaceholder.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Icon from 'components/common/Icon';
+import Logo from 'assets/logo.svg';
+import styles from './EmptyPlaceholder.module.css';
+
+export default function EmptyPlaceholder({ msg, children }) {
+  return (
+    <div className={styles.placeholder}>
+      <Icon icon={<Logo />} size="xlarge" />
+      <h2>{msg}</h2>
+      {children}
+    </div>
+  );
+}

components/common/EmptyPlaceholder.module.css

@@ -0,0 +1,7 @@
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 600px;
+}

components/common/Menu.js

@@ -22,23 +22,25 @@ export default function Menu({
         [styles.right]: align === 'right',
       })}
     >
-      {options.map(option => {
-        const { label, value, className: customClassName, render } = option;
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render } = option;
 
-        return render ? (
-          render(option)
-        ) : (
-          <div
-            key={value}
-            className={classNames(styles.option, optionClassName, customClassName, {
-              [selectedClassName]: selectedOption === value,
-            })}
-            onClick={e => onSelect(value, e)}
-          >
-            {label}
-          </div>
-        );
-      })}
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, optionClassName, customClassName, {
+                [selectedClassName]: selectedOption === value,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
     </div>
   );
 }

components/common/Table.js

@@ -2,7 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './Table.module.css';
 
-export default function Table({ columns, rows }) {
+export default function Table({ columns, rows, empty }) {
+  if (empty && rows.length === 0) {
+    return empty;
+  }
+
   return (
     <div className={styles.table}>
       <div className={styles.header}>

components/common/Table.module.css

@@ -1,6 +1,7 @@
 .table {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .header {
@@ -16,8 +17,19 @@
 }
 
 .body {
+  position: relative;
   display: flex;
   flex-direction: column;
+  flex: 1;
+}
+
+.body:empty:before {
+  content: 'No data available';
+  color: var(--gray500);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .row {