From 3c1414dc180e7185c0e1742069dc75f6b8841855 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Jan 2022 15:22:55 +0000
Subject: [PATCH 1/7] fix issue with templates showing over more than two rows

---
 packages/builder/src/pages/builder/portal/apps/index.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index ac10b5317f..4df434ecdd 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -474,9 +474,12 @@
   }
 
   .grid {
+    height: 200px;
     display: grid;
+    overflow: hidden;
     grid-gap: var(--spacing-xl);
     grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(0px, 0);
   }
   .template-card {
     height: 80px;

From 7ab4d5f3d3ed12b92882c83a880bdded9a309dfc Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Jan 2022 18:29:09 +0000
Subject: [PATCH 2/7] remove uneeded app creation modal

---
 .../components/start/CreateAppModal.svelte    | 83 +++++++------------
 .../src/components/start/TemplateList.svelte  | 69 ---------------
 .../pages/builder/portal/apps/index.svelte    | 11 ++-
 3 files changed, 38 insertions(+), 125 deletions(-)
 delete mode 100644 packages/builder/src/components/start/TemplateList.svelte

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 178588f608..60065b6eef 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -11,7 +11,6 @@
   import { capitalise } from "helpers"
   import { goto } from "@roxi/routify"
   import { APP_NAME_REGEX } from "constants"
-  import TemplateList from "./TemplateList.svelte"
 
   export let template
   export let inline
@@ -147,58 +146,34 @@
   }
 </script>
 
-{#if showTemplateSelection}
-  <ModalContent
-    title={"Get started quickly"}
-    showConfirmButton={false}
-    size="L"
-    onConfirm={() => {
-      template = {}
-      return false
-    }}
-    showCancelButton={!inline}
-    showCloseIcon={!inline}
-  >
-    <TemplateList
-      onSelect={(selected, { useImport } = {}) => {
-        if (!selected) {
-          template = useImport ? { fromFile: true } : {}
-          return
-        }
-        template = selected
+<ModalContent
+  title={"Name your app"}
+  confirmText={template?.fromFile ? "Import app" : "Create app"}
+  onConfirm={createNewApp}
+  onCancel={inline ? onCancel : null}
+  cancelText={inline ? "Back" : undefined}
+  showCloseIcon={!inline}
+  disabled={!valid}
+>
+  {#if template?.fromFile}
+    <Dropzone
+      error={$touched.file && $errors.file}
+      gallery={false}
+      label="File to import"
+      value={[$values.file]}
+      on:change={e => {
+        $values.file = e.detail?.[0]
+        $touched.file = true
       }}
     />
-  </ModalContent>
-{:else}
-  <ModalContent
-    title={"Name your app"}
-    confirmText={template?.fromFile ? "Import app" : "Create app"}
-    onConfirm={createNewApp}
-    onCancel={inline ? onCancel : null}
-    cancelText={inline ? "Back" : undefined}
-    showCloseIcon={!inline}
-    disabled={!valid}
-  >
-    {#if template?.fromFile}
-      <Dropzone
-        error={$touched.file && $errors.file}
-        gallery={false}
-        label="File to import"
-        value={[$values.file]}
-        on:change={e => {
-          $values.file = e.detail?.[0]
-          $touched.file = true
-        }}
-      />
-    {/if}
-    <Input
-      bind:value={$values.name}
-      error={$touched.name && $errors.name}
-      on:blur={() => ($touched.name = true)}
-      label="Name"
-      placeholder={$auth.user.firstName
-        ? `${$auth.user.firstName}'s app`
-        : "My app"}
-    />
-  </ModalContent>
-{/if}
+  {/if}
+  <Input
+    bind:value={$values.name}
+    error={$touched.name && $errors.name}
+    on:blur={() => ($touched.name = true)}
+    label="Name"
+    placeholder={$auth.user.firstName
+      ? `${$auth.user.firstName}'s app`
+      : "My app"}
+  />
+</ModalContent>
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
deleted file mode 100644
index 90573bddff..0000000000
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { Heading, Layout, Icon } from "@budibase/bbui"
-
-  export let onSelect
-</script>
-
-<Layout gap="XS" noPadding>
-  <div class="template start-from-scratch" on:click={() => onSelect(null)}>
-    <div
-      class="background-icon"
-      style={`background: rgb(50, 50, 50); color: white;`}
-    >
-      <Icon name="Add" />
-    </div>
-    <Heading size="XS">Start from scratch</Heading>
-    <p class="detail">BLANK</p>
-  </div>
-  <div
-    class="template import"
-    on:click={() => onSelect(null, { useImport: true })}
-  >
-    <div
-      class="background-icon"
-      style={`background: rgb(50, 50, 50); color: white;`}
-    >
-      <Icon name="Add" />
-    </div>
-    <Heading size="XS">Import an app</Heading>
-    <p class="detail">BLANK</p>
-  </div>
-</Layout>
-
-<style>
-  .background-icon {
-    padding: 10px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    color: white;
-  }
-
-  .template {
-    min-height: 60px;
-    display: grid;
-    grid-gap: var(--layout-s);
-    grid-template-columns: auto 1fr auto;
-    border: 1px solid #494949;
-    align-items: center;
-    cursor: pointer;
-    border-radius: 4px;
-    background: var(--background-alt);
-    padding: 8px 16px;
-  }
-
-  .detail {
-    text-align: right;
-  }
-
-  .start-from-scratch {
-    background: var(--spectrum-global-color-gray-50);
-    margin-top: 20px;
-  }
-
-  .import {
-    background: var(--spectrum-global-color-gray-50);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 4df434ecdd..31530c5ef9 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -78,6 +78,7 @@
   }
 
   const initiateAppCreation = () => {
+    template = {}
     creationModal.show()
     creatingApp = true
   }
@@ -304,10 +305,16 @@
             Export apps
           </Button>
         {/if}
-        <Button icon="Import" quiet secondary on:click={initiateAppImport}>
+        <Button
+          icon="Import"
+          size="L"
+          quiet
+          secondary
+          on:click={initiateAppImport}
+        >
           Import app
         </Button>
-        <Button icon="Add" cta on:click={initiateAppCreation}>
+        <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
           Create app
         </Button>
       </div>

From ee20f2a934501bb556dc9ccf9abd17e1c23bedc5 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Jan 2022 19:40:28 +0000
Subject: [PATCH 3/7] add splash screen for apps page

---
 .../pages/builder/portal/apps/index.svelte    | 67 +++++++++++++++++--
 1 file changed, 61 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 31530c5ef9..e7b2724de0 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -11,6 +11,7 @@
     notifications,
     Body,
     Search,
+    Icon,
   } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
@@ -27,6 +28,7 @@
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
   import analytics, { Events } from "analytics"
+  import Logo from "assets/bb-space-man.svg"
 
   let sortBy = "name"
   let template
@@ -394,11 +396,26 @@
       </Layout>
     {/if}
 
-    {#if !enrichedApps.length && !creatingApp && loaded}
+    {#if !enrichedApps.length}
       <div class="empty-wrapper">
-        <Modal inline>
-          <CreateAppModal {template} inline={true} />
-        </Modal>
+        <div class="centered">
+          <div class="main">
+            <Layout gap="S" justifyItems="center">
+              <img class="img-size" alt="logo" src={Logo} />
+              <div class="new-screen-text">
+                <Detail size="M">LET’S GET STARTED!</Detail>
+              </div>
+              <Button on:click={() => initiateAppCreation()} size="M" cta>
+                <div class="new-screen-button">
+                  <div class="background-icon" style="color: white;">
+                    <Icon name="Add" />
+                  </div>
+                  Create App
+                </div></Button
+              >
+            </Layout>
+          </div>
+        </div>
       </div>
     {/if}
 
@@ -486,10 +503,10 @@
     overflow: hidden;
     grid-gap: var(--spacing-xl);
     grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-    grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(0px, 0);
+    grid-template-rows: minmax(70px, 1fr) minmax(100px, 1fr) minmax(0px, 0);
   }
   .template-card {
-    height: 80px;
+    height: 70px;
     border-radius: var(--border-radius-s);
     border: 1px solid var(--spectrum-global-color-gray-300);
     cursor: pointer;
@@ -543,4 +560,42 @@
     justify-content: center;
     align-items: center;
   }
+
+  .centered {
+    width: calc(100% - 350px);
+    height: calc(100% - 100px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  .new-screen-text {
+    width: 160px;
+    text-align: center;
+    color: #2c2c2c;
+    font-weight: 600;
+  }
+
+  .new-screen-button {
+    margin-left: 5px;
+    height: 20px;
+    width: 100px;
+    display: flex;
+    align-items: center;
+  }
+
+  .img-size {
+    width: 160px;
+    height: 160px;
+  }
+
+  .background-icon {
+    margin-top: 4px;
+    margin-right: 4px;
+  }
 </style>

From 15e8b64e6e9763cb4549c6637b0977174cc07886 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Jan 2022 19:45:19 +0000
Subject: [PATCH 4/7] fix export button size

---
 .../builder/src/pages/builder/portal/apps/index.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index e7b2724de0..4be0842ec3 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -303,7 +303,13 @@
 
       <div class="buttons">
         {#if cloud}
-          <Button icon="Export" quiet secondary on:click={initiateAppsExport}>
+          <Button
+            size="L"
+            icon="Export"
+            quiet
+            secondary
+            on:click={initiateAppsExport}
+          >
             Export apps
           </Button>
         {/if}
@@ -403,7 +409,7 @@
             <Layout gap="S" justifyItems="center">
               <img class="img-size" alt="logo" src={Logo} />
               <div class="new-screen-text">
-                <Detail size="M">LET’S GET STARTED!</Detail>
+                <Detail size="M">Create a business app in minutes!</Detail>
               </div>
               <Button on:click={() => initiateAppCreation()} size="M" cta>
                 <div class="new-screen-button">

From 765b5c67cf8d3c10e6a1928052816a87f6ddde16 Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Thu, 20 Jan 2022 07:23:13 +0000
Subject: [PATCH 5/7] Add creatingApp && loaded checks

---
 packages/builder/src/pages/builder/portal/apps/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index e7b2724de0..170feb1cbc 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -396,7 +396,7 @@
       </Layout>
     {/if}
 
-    {#if !enrichedApps.length}
+    {#if !enrichedApps.length && !creatingApp && loaded}
       <div class="empty-wrapper">
         <div class="centered">
           <div class="main">

From a3519ac1aacb8dfcaece8efccdb2ee95aea8111a Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 20 Jan 2022 09:44:40 +0000
Subject: [PATCH 6/7] fix cypress

---
 packages/builder/cypress/support/commands.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 5952f4699c..f4d0f9af46 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -42,7 +42,7 @@ Cypress.Commands.add("createApp", name => {
         cy.get(".spectrum-Button").contains("Create app").click({ force: true })
       }
     })
-  cy.contains(/Start from scratch/).dblclick()
+  cy.contains(/Create App/).click()
   cy.get(".spectrum-Modal").within(() => {
     cy.get("input").eq(0).type(name).should("have.value", name).blur()
     cy.get(".spectrum-ButtonGroup").contains("Create app").click()

From c5ea321f25d181ced1932f5f8858edc52b80c66d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 20 Jan 2022 11:51:41 +0000
Subject: [PATCH 7/7] fix cypress createApp command

---
 packages/builder/cypress/support/commands.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index a165f7e13b..d99e2b271f 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -35,7 +35,7 @@ Cypress.Commands.add("login", () => {
 Cypress.Commands.add("createApp", name => {
   cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
   cy.wait(500)
-  cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
+  cy.request(`${Cypress.config().baseUrl}api/applications?status=all`)
     .its("body")
     .then(body => {
       if (body.length > 0) {