Fix styles in create app modal

packages/builder/src/components/start/CreateAppModal.svelte

@@ -1,13 +1,12 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications } from "@budibase/bbui"
+  import { notifications, Heading, Button } from "@budibase/bbui"
   import { store, automationStore, hostingStore } from "builderStore"
   import { string, object } from "yup"
   import api, { get } from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
   import { Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
-  import { Button } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
@@ -132,6 +131,8 @@
 
 <div class="container">
   <div class="sidebar">
+    <img src={Logo} alt="budibase icon" />
+    <div class="steps">
       {#each steps as component, i}
         <Indicator
           active={$currentStep === i}
@@ -139,9 +140,10 @@
           step={i + 1} />
       {/each}
     </div>
+  </div>
   <div class="body">
     <div class="heading">
-      <h3 class="header">Get Started with Budibase</h3>
+      <Heading h2 l>Get started with Budibase</Heading>
     </div>
     <div class="step">
       {#each steps as component, i (i)}
@@ -175,7 +177,6 @@
       {/if}
     </div>
   </div>
-  <img src={Logo} alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
@@ -192,12 +193,20 @@
     position: relative;
   }
   .sidebar {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 40px 0;
+    background: var(--grey-1);
+  }
+  .steps {
+    flex: 1 1 auto;
     display: grid;
     border-bottom-left-radius: 0.5rem;
     border-top-left-radius: 0.5rem;
     grid-gap: 30px;
     align-content: center;
-    background: var(--grey-1);
   }
   .heading {
     display: flex;
@@ -205,22 +214,18 @@
     align-items: center;
     margin-bottom: 20px;
   }
-  .header {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 600;
-  }
   .body {
-    padding: 40px 60px 60px 60px;
+    padding: 40px 60px 40px 60px;
     display: grid;
     align-items: center;
     grid-template-rows: auto 1fr auto;
   }
   .footer {
-    display: grid;
+    display: flex;
-    grid-gap: 15px;
+    flex-direction: row;
-    grid-template-columns: auto auto;
+    justify-content: flex-end;
-    justify-content: end;
+    align-items: center;
+    gap: 15px;
   }
   .spinner-container {
     background: var(--background);
@@ -243,9 +248,7 @@
     display: none;
   }
   img {
-    position: absolute;
-    top: 20px;
-    left: 20px;
     height: 40px;
+    margin-bottom: 20px;
   }
 </style>

packages/builder/src/components/start/Steps/Info.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { Label, Heading, Input } from "@budibase/bbui"
+  import { Label, Heading, Input, notifications } from "@budibase/bbui"
-  import { notifications } from "@budibase/bbui"
 
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
@@ -27,12 +26,12 @@
   }
 </script>
 
-{#if template?.fromFile}
-  <h2>Import Your Web App From A File</h2>
-{:else}
-  <h2>Create your Web App</h2>
-{/if}
 <div class="container">
+  {#if template?.fromFile}
+    <Heading l h2>Import your Web App</Heading>
+  {:else}
+    <Heading l h2>Create your Web App</Heading>
+  {/if}
   {#if template?.fromFile}
     <div class="template">
       <Label extraSmall grey>Import File</Label>
@@ -65,6 +64,7 @@
   .container {
     display: grid;
     grid-gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
   }
 
   .template :global(label) {

packages/builder/src/components/start/Steps/User.svelte

@@ -1,13 +1,13 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, Select, Heading } from "@budibase/bbui"
 
   export let values
   export let errors
   export let touched
 </script>
 
-<h2>Create your first User</h2>
 <div class="container">
+  <Heading l h2>Create your first User</Heading>
   <Input
     bind:value={$values.email}
     on:change={() => ($touched.email = true)}