Empty placeholder component. CSS fixes.

components/WebsiteList.js

@@ -9,6 +9,7 @@ import Button from './common/Button';
 import PageHeader from './layout/PageHeader';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
+import EmptyPlaceholder from './common/EmptyPlaceholder';
 
 export default function WebsiteList() {
   const [data, setData] = useState();
@@ -22,6 +23,10 @@ export default function WebsiteList() {
     loadData();
   }, []);
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <Page>
       {data?.map(({ website_id, name }) => (
@@ -51,6 +56,13 @@ export default function WebsiteList() {
           <WebsiteChart key={website_id} title={name} websiteId={website_id} />
         </div>
       ))}
+      {data.length === 0 && (
+        <EmptyPlaceholder msg={"You don't have any websites configured."}>
+          <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
+            <div>Go to settings</div>
+          </Button>
+        </EmptyPlaceholder>
+      )}
     </Page>
   );
 }

components/WebsiteSettings.js

@@ -12,6 +12,8 @@ import WebsiteEditForm from './forms/WebsiteEditForm';
 import DeleteForm from './forms/DeleteForm';
 import WebsiteCodeForm from './forms/WebsiteCodeForm';
 import styles from './WebsiteSettings.module.css';
+import EmptyPlaceholder from './common/EmptyPlaceholder';
+import Arrow from '../assets/arrow-right.svg';
 
 export default function WebsiteSettings() {
   const [data, setData] = useState();
@@ -67,6 +69,14 @@ export default function WebsiteSettings() {
     return null;
   }
 
+  const empty = (
+    <EmptyPlaceholder msg={"You don't have any websites configured."}>
+      <Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}>
+        <div>Add website</div>
+      </Button>
+    </EmptyPlaceholder>
+  );
+
   return (
     <>
       <PageHeader>
@@ -75,7 +85,7 @@ export default function WebsiteSettings() {
           <div>Add website</div>
         </Button>
       </PageHeader>
-      <Table columns={columns} rows={data} />
+      <Table columns={columns} rows={data} empty={empty} />
       {editWebsite && (
         <Modal title="Edit website">
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />

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 {

styles/index.css

@@ -54,9 +54,14 @@ textarea {
   line-height: 1.8;
   border: 1px solid var(--gray500);
   border-radius: 4px;
-  width: 100%;
   outline: none;
   resize: none;
+  flex: 1;
+}
+
+label {
+  flex: 1;
+  margin-right: 20px;
 }
 
 dt {