From 29a3d6e696d4df85a33d5e3d6a9c32d50f2d050c Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 7 Sep 2021 16:42:30 +1000
Subject: [PATCH] Home: add empty state for non-admins

---
 src/components/Home/AccessDenied.tsx |  2 +-
 src/pages/Home.tsx                   | 23 ++++++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Home/AccessDenied.tsx b/src/components/Home/AccessDenied.tsx
index 656025fc..c42d2cff 100644
--- a/src/components/Home/AccessDenied.tsx
+++ b/src/components/Home/AccessDenied.tsx
@@ -29,7 +29,7 @@ export default function AccessDenied() {
             >
               these instructions
             </MuiLink>{" "}
-            to set up the project’s security rules.
+            to set up this project’s security rules.
           </Typography>
 
           <Button component={Link} to={routes.signOut}>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 349b8f08..62c0b8de 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -30,6 +30,7 @@ import TableGridSkeleton from "components/Home/TableGrid/TableGridSkeleton";
 import TableListSkeleton from "components/Home/TableList/TableListSkeleton";
 import HomeWelcomePrompt from "components/Home/HomeWelcomePrompt";
 import AccessDenied from "components/Home/AccessDenied";
+import EmptyState from "components/EmptyState";
 
 import routes from "constants/routes";
 import { useAppContext } from "contexts/AppContext";
@@ -41,6 +42,7 @@ import TableSettingsDialog, {
 } from "components/TableSettings";
 
 import { SETTINGS } from "config/dbPaths";
+import { APP_BAR_HEIGHT } from "components/Navigation";
 
 const useHomeViewState = createPersistedState("__ROWY__HOME_VIEW");
 
@@ -121,13 +123,24 @@ export default function HomePage() {
     </Tooltip>
   );
 
-  if (tables.length === 0 && userClaims.roles.includes("ADMIN"))
+  if (tables.length === 0) {
+    if (userClaims.roles.includes("ADMIN"))
+      return (
+        <>
+          <HomeWelcomePrompt />
+          {createTableFab}
+        </>
+      );
+
     return (
-      <>
-        <HomeWelcomePrompt />
-        {createTableFab}
-      </>
+      <EmptyState
+        message="No Tables"
+        description="There are no tables in this project. Sign in with an admin account to create tables."
+        fullScreen
+        style={{ marginTop: -APP_BAR_HEIGHT }}
+      />
     );
+  }
 
   const getLink = (table: Table) =>
     `${