From 162f91dc823a023c4bb754c95b06b5a789d630c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 30 Sep 2020 15:06:47 +0100
Subject: [PATCH] Add empty state text to automate page and consistently style
 empty states

---
 .../AutomationBuilder/AutomationBuilder.svelte     |  6 +++---
 .../AutomationBuilder/flowchart/FlowChart.svelte   | 14 ++++++++++++++
 .../backend/model/[selectedModel]/index.svelte     |  3 +--
 .../pages/[application]/backend/model/index.svelte |  7 ++++---
 .../backend/view/[selectedView]/index.svelte       |  5 ++---
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index ad49776605..c832ddd8bc 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -51,9 +51,9 @@
 <style>
   section {
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     overflow: auto;
     height: 100%;
     position: relative;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
index 1d7ebb35f8..e2fdddb43e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
@@ -3,6 +3,7 @@
   import Arrow from "./Arrow.svelte"
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
+  import { automationStore } from "builderStore"
 
   export let automation
   export let onSelect
@@ -17,8 +18,14 @@
       blocks = blocks.concat(automation.definition.steps || [])
     }
   }
+  $: automationCount = $automationStore.automations?.length ?? 0
 </script>
 
+{#if automationCount === 0}
+  <i>Create your first automation to get started</i>
+{:else if automation == null}
+  <i>Select an automation to edit</i>
+{/if}
 <section class="canvas">
   {#each blocks as block, idx (block.id)}
     <div
@@ -35,6 +42,13 @@
 </section>
 
 <style>
+  i {
+    font-size: var(--font-size-xl);
+    color: var(--grey-4);
+    padding: var(--spacing-xl) 40px;
+    align-self: flex-start;
+  }
+
   section {
     position: absolute;
     padding: 40px;
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
index f3a7840958..176bfc4c30 100644
--- a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
@@ -20,8 +20,7 @@
 
 <style>
   i {
-    font-size: 20px;
-    padding-bottom: 10px;
+    font-size: var(--font-size-xl);
     color: var(--grey-4);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
index 255c92ff26..2e800648e8 100644
--- a/packages/builder/src/pages/[application]/backend/model/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -23,12 +23,13 @@
 
 {#if $backendUiStore.models.length === 0}
   <i>Create your first table to start building</i>
-{:else}Please select a table{/if}
+{:else}
+  <i>Select a table to edit</i>
+{/if}
 
 <style>
   i {
-    font-size: 20px;
-    padding-bottom: 10px;
+    font-size: var(--font-size-xl);
     color: var(--grey-4);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
index 959d36f9d6..168461699b 100644
--- a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
@@ -15,13 +15,12 @@
 {#if $backendUiStore.selectedDatabase._id && selectedView}
   <ViewDataTable view={selectedView} />
 {:else}
-  <i>create your first table to start building</i>
+  <i>Create your first table to start building</i>
 {/if}
 
 <style>
   i {
-    font-size: 20px;
-    margin-right: 10px;
+    font-size: var(--font-size-xl);
     color: var(--grey-4);
   }
 </style>