Add empty state text to automate page and consistently style empty states

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;

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;

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>

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>

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>