Move modal to BBUI and update usages

6 years ago · b7edf26754
18 changed files with 154 additions and 263 deletions
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@ -4,7 +4,6 @@
  import { routes } from "../routify/routes"
  import { initialise } from "builderStore"
  import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte"
-  import { ModalContainer } from "components/common/Modal"

  onMount(async () => {
    await initialise()
@ -15,4 +14,3 @@

 <NotificationDisplay />
 <Router {routes} />
-<ModalContainer />
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
@ -2,10 +2,9 @@
  import { onMount } from "svelte"
  import { automationStore } from "builderStore"
  import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Button } from "@budibase/bbui"
-  import { Modal } from "components/common/Modal"
+  import { Button, Modal } from "@budibase/bbui"

-  let modalVisible = false
+  let modal

  $: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id

@ -15,9 +14,7 @@
 </script>

 <section>
-  <Button primary wide on:click={() => (modalVisible = true)}>
-    Create New Automation
-  </Button>
+  <Button primary wide on:click={modal.show}>Create New Automation</Button>
  <ul>
    {#each $automationStore.automations as automation}
      <li
@ -30,9 +27,9 @@
    {/each}
  </ul>
 </section>
-{#if modalVisible}
-  <CreateAutomationModal bind:visible={modalVisible} />
-{/if}
+<Modal bind:this={modal}>
+  <CreateAutomationModal />
+</Modal>

 <style>
  section {
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
@ -1,11 +1,8 @@
 <script>
  import { store, backendUiStore, automationStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
-  import { Input } from "@budibase/bbui"
+  import { Input, ModalContent } from "@budibase/bbui"
  import analytics from "analytics"
-  import { Modal } from "components/common/Modal"
-
-  export let visible

  let name

@ -29,8 +26,7 @@
  }
 </script>

-<Modal
-  bind:visible
+<ModalContent
  title="Create Automation"
  confirmText="Create"
  onConfirm={createAutomation}
@ -44,7 +40,7 @@
      <span>Learn about automations</span>
    </a>
  </div>
-</Modal>
+</ModalContent>

 <style>
  a {
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@ -1,17 +1,16 @@
 <script>
-  import { TextButton as Button, Icon } from "@budibase/bbui"
+  import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
-  import { Modal } from "components/common/Modal"

-  let modalVisible
+  let modal
 </script>

 <div>
-  <Button text small on:click={() => (modalVisible = true)}>
+  <Button text small on:click={modal.show}>
    <Icon name="addrow" />
    Create New Row
  </Button>
 </div>
-{#if modalVisible}
-  <CreateEditRecordModal bind:visible={modalVisible} />
-{/if}
+<Modal bind:this={modal}>
+  <CreateEditRecordModal />
+</Modal>
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
@ -3,13 +3,11 @@
  import { notifier } from "builderStore/store/notifications"
  import RecordFieldControl from "../RecordFieldControl.svelte"
  import * as api from "../api"
-  import { Modal } from "components/common/Modal"
+  import { ModalContent } from "@budibase/bbui"
  import ErrorsBox from "components/common/ErrorsBox.svelte"

  export let record = {}
-  export let visible

-  let modal
  let errors = []

  $: creating = record?._id == null
@ -35,8 +33,7 @@
  }
 </script>

-<Modal
-  bind:visible
+<ModalContent
  title={creating ? 'Create Row' : 'Edit Row'}
  confirmText={creating ? 'Create Row' : 'Save Row'}
  onConfirm={saveRecord}>
@ -46,4 +43,4 @@
      <RecordFieldControl {meta} bind:value={record[key]} />
    </div>
  {/each}
-</Modal>
+</ModalContent>
--- a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
@ -1,22 +1,21 @@
 <script>
  import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon } from "@budibase/bbui"
+  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
  import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
  import * as api from "../api"
  import { notifier } from "builderStore/store/notifications"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { Modal } from "components/common/Modal"

  export let row

  let anchor
  let dropdown
  let confirmDeleteDialog
-  let editModalVisible
+  let modal

  function showModal() {
    dropdown.hide()
-    editModalVisible = true
+    modal.show()
  }

  function showDelete() {
@ -52,9 +51,9 @@
  okText="Delete Row"
  onOk={deleteRow}
  title="Confirm Delete" />
-{#if editModalVisible}
-  <CreateEditRecordModal bind:visible={editModalVisible} record={row} />
-{/if}
+<Modal bind:this={modal}>
+  <CreateEditRecordModal record={row} />
+</Modal>

 <style>
  .ri-more-line:hover {
--- a/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
@ -2,25 +2,21 @@
  import { goto } from "@sveltech/routify"
  import { backendUiStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
-  import { Button, Input, Label } from "@budibase/bbui"
+  import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import TableDataImport from "../TableDataImport.svelte"
  import analytics from "analytics"
-  import { Modal } from "components/common/Modal"

-  let visible = false
+  let modal
  let name
  let dataImport
-  let loading = false

  function resetState() {
    name = ""
    dataImport = undefined
-    loading = false
  }

  async function saveTable() {
-    loading = true
    const model = await backendUiStore.actions.models.save({
      name,
      schema: dataImport.schema || {},
@ -29,28 +25,24 @@
    notifier.success(`Table ${name} created successfully.`)
    $goto(`./model/${model._id}`)
    analytics.captureEvent("Table Created", { name })
-    visible = false
-    resetState()
-  }
-
-  function onClosed() {
-    visible = false
-    resetState()
  }
 </script>

-<Button primary wide on:click={() => (visible = true)}>Create New Table</Button>
-<Modal
-  bind:visible
-  {loading}
-  title="Create Table"
-  on:hide={onClosed}
-  confirmText="Create"
-  onConfirm={saveTable}
-  disabled={!name || (dataImport && !dataImport.valid)}>
-  <Input data-cy="table-name-input" thin label="Table Name" bind:value={name} />
-  <div>
-    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-    <TableDataImport bind:dataImport />
-  </div>
+<Button primary wide on:click={modal.show}>Create New Table</Button>
+<Modal bind:this={modal} on:hide={resetState}>
+  <ModalContent
+    title="Create Table"
+    confirmText="Create"
+    onConfirm={saveTable}
+    disabled={!name || (dataImport && !dataImport.valid)}>
+    <Input
+      data-cy="table-name-input"
+      thin
+      label="Table Name"
+      bind:value={name} />
+    <div>
+      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+      <TableDataImport bind:dataImport />
+    </div>
+  </ModalContent>
 </Modal>
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@ -1,33 +1,27 @@
 <script>
-  import { Modal } from "components/common/Modal"
+  import { Modal, ModalContent } from "@budibase/bbui"

  export let title = ""
  export let body = ""
  export let okText = "Confirm"
  export let cancelText = "Cancel"
-  export let onOk = () => {}
-  export let onCancel = () => {}
+  export let onOk = undefined
+  export let onCancel = undefined

-  let visible = false
+  let modal

  export const show = () => {
-    visible = true
+    modal.show()
  }
  export const hide = () => {
-    visible = false
+    modal.hide()
  }
 </script>

-<Modal
-  id={title}
-  bind:visible
-  on:hide={onCancel}
-  {title}
-  confirmText={okText}
-  {cancelText}
-  onConfirm={onOk}
-  red>
-  <div class="body">{body}</div>
+<Modal bind:this={modal} on:hide={onCancel}>
+  <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
+    <div class="body">{body}</div>
+  </ModalContent>
 </Modal>

 <style>
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@ -1,17 +1,17 @@
 <script>
  import SettingsModal from "./SettingsModal.svelte"
  import { SettingsIcon } from "components/common/Icons/"
-  import { Modal } from "components/common/Modal"
+  import { Modal } from "@budibase/bbui"

-  let modalVisible
+  let modal
 </script>

-<span class="topnavitemright settings" on:click={() => (modalVisible = true)}>
+<span class="topnavitemright settings" on:click={modal.show}>
  <SettingsIcon />
 </span>
-{#if modalVisible}
-  <SettingsModal bind:visible={modalVisible} />
-{/if}
+<Modal bind:this={modal} width="600px">
+  <SettingsModal />
+</Modal>

 <style>
  span:first-letter {
--- a/packages/builder/src/components/settings/SettingsModal.svelte
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@ -1,7 +1,6 @@
 <script>
  import { General, Users, DangerZone, APIKeys } from "./tabs"
-  import { Switcher } from "@budibase/bbui"
-  import { Modal } from "components/common/Modal"
+  import { Switcher, ModalContent } from "@budibase/bbui"

  const tabs = [
    {
@ -26,17 +25,13 @@
    },
  ]

-  export let visible
-
  let value = "GENERAL"

  $: selectedTab = tabs.find(tab => tab.key === value).component
 </script>

-<Modal
+<ModalContent
  title="Settings"
-  wide
-  bind:visible
  showConfirmButton={false}
  showCancelButton={false}>
  <div class="container">
@ -44,7 +39,7 @@
      <svelte:component this={selectedTab} />
    </Switcher>
  </div>
-</Modal>
+</ModalContent>

 <style>
  .container :global(section > header) {
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -1,6 +1,5 @@
 <script>
  import { writable } from "svelte/store"
-  import { Modal } from "components/common/Modal"
  import { store, automationStore, backendUiStore } from "builderStore"
  import { string, object } from "yup"
  import api, { get } from "builderStore/api"
@ -18,7 +17,6 @@
  //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
  const createAppStore = writable({ currentStep: 0, values: {} })

-  export let visible
  export let hasKey
  export let template

@ -201,68 +199,61 @@
  }
 </script>

-<Modal
-  bind:visible
-  wide
-  padded={false}
-  showCancelButton={false}
-  showConfirmButton={false}>
-  <div class="container">
-    <div class="sidebar">
-      {#each steps as { active, done }, i}
-        <Indicator
-          active={$createAppStore.currentStep === i}
-          done={i < $createAppStore.currentStep}
-          step={i + 1} />
-      {/each}
+<div class="container">
+  <div class="sidebar">
+    {#each steps as { active, done }, i}
+      <Indicator
+        active={$createAppStore.currentStep === i}
+        done={i < $createAppStore.currentStep}
+        step={i + 1} />
+    {/each}
+  </div>
+  <div class="body">
+    <div class="heading">
+      <h3 class="header">Get Started with Budibase</h3>
+    </div>
+    <div class="step">
+      <Form bind:values={$createAppStore.values}>
+        {#each steps as step, i (i)}
+          <div class:hidden={$createAppStore.currentStep !== i}>
+            <svelte:component
+              this={step.component}
+              {template}
+              {validationErrors}
+              options={step.options}
+              name={step.name} />
+          </div>
+        {/each}
+      </Form>
    </div>
-    <div class="body">
-      <div class="heading">
-        <h3 class="header">Get Started with Budibase</h3>
-      </div>
-      <div class="step">
-        <Form bind:values={$createAppStore.values}>
-          {#each steps as step, i (i)}
-            <div class:hidden={$createAppStore.currentStep !== i}>
-              <svelte:component
-                this={step.component}
-                {template}
-                {validationErrors}
-                options={step.options}
-                name={step.name} />
-            </div>
-          {/each}
-        </Form>
-      </div>
-      <div class="footer">
-        {#if $createAppStore.currentStep > 0}
-          <Button medium secondary on:click={back}>Back</Button>
-        {/if}
-        {#if $createAppStore.currentStep < steps.length - 1}
-          <Button medium blue on:click={next} disabled={!currentStepIsValid}>
-            Next
-          </Button>
-        {/if}
-        {#if $createAppStore.currentStep === steps.length - 1}
-          <Button
-            medium
-            blue
-            on:click={signUp}
-            disabled={!fullFormIsValid || submitting}>
-            {submitting ? 'Loading...' : 'Submit'}
-          </Button>
-        {/if}
-      </div>
+    <div class="footer">
+      {#if $createAppStore.currentStep > 0}
+        <Button medium secondary on:click={back}>Back</Button>
+      {/if}
+      {#if $createAppStore.currentStep < steps.length - 1}
+        <Button medium blue on:click={next} disabled={!currentStepIsValid}>
+          Next
+        </Button>
+      {/if}
+      {#if $createAppStore.currentStep === steps.length - 1}
+        <Button
+          medium
+          blue
+          on:click={signUp}
+          disabled={!fullFormIsValid || submitting}>
+          {submitting ? 'Loading...' : 'Submit'}
+        </Button>
+      {/if}
    </div>
-    <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
-    {#if submitting}
-      <div in:fade class="spinner-container">
-        <Spinner />
-        <span class="spinner-text">Creating your app...</span>
-      </div>
-    {/if}
  </div>
-</Modal>
+  <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
+  {#if submitting}
+    <div in:fade class="spinner-container">
+      <Spinner />
+      <span class="spinner-text">Creating your app...</span>
+    </div>
+  {/if}
+</div>

 <style>
  .container {
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@ -3,21 +3,18 @@
  import {
    TextButton,
    Button,
-    Heading,
    Body,
-    Spacer,
    DropdownMenu,
+    ModalContent,
  } from "@budibase/bbui"
  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
  import actionTypes from "./actions"
  import { createEventDispatcher } from "svelte"
-  import { Modal } from "components/common/Modal"

  const dispatch = createEventDispatcher()

  export let event
-  export let visible

  let addActionButton
  let addActionDropdown
@ -60,12 +57,7 @@
  }
 </script>

-<Modal
-  bind:visible
-  title="Actions"
-  wide
-  confirmText="Save"
-  onConfirm={saveEventData}>
+<ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>
  <div slot="header">
    <div bind:this={addActionButton}>
      <TextButton text small blue on:click={addActionDropdown.show}>
@ -121,7 +113,7 @@
  <div slot="footer">
    <a href="https://docs.budibase.com">Learn more about Actions</a>
  </div>
-</Modal>
+</ModalContent>

 <style>
  .action-header {
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@ -1,23 +1,17 @@
 <script>
  import { Button, Modal } from "@budibase/bbui"
  import EventEditorModal from "./EventEditorModal.svelte"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
  const dispatch = createEventDispatcher()

  export let value
  export let name

-  let modalVisible = false
+  let modal
 </script>

-<Button secondary small on:click={() => (modalVisible = true)}>
-  Define Actions
-</Button>
+<Button secondary small on:click={modal.show}>Define Actions</Button>

-{#if modalVisible}
-  <EventEditorModal
-    bind:visible={modalVisible}
-    event={value}
-    eventType={name}
-    on:change />
-{/if}
+<Modal bind:this={modal}>
+  <EventEditorModal event={value} eventType={name} on:change />
+</Modal>
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -1,7 +1,7 @@
 <script>
  import { keys, map, includes, filter } from "lodash/fp"
  import EventEditorModal from "./EventEditorModal.svelte"
-  import { Modal } from "components/common/Modal"
+  import { Modal } from "@budibase/bbui"

  export const EVENT_TYPE = "event"
  export let component
@ -47,11 +47,8 @@
  </form>
 </div>

-<Modal bind:this={modal}>
-  <EventEditorModal
-    eventOptions={events}
-    event={selectedEvent}
-    on:hide={() => (selectedEvent = null)} />
+<Modal bind:this={modal} width="600px">
+  <EventEditorModal eventOptions={events} event={selectedEvent} />
 </Modal>

 <style>
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@ -1,21 +1,18 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
+  import { store } from "builderStore"
  import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
  import PageLayout from "components/userInterface/PageLayout.svelte"
  import PagesList from "components/userInterface/PagesList.svelte"
-  import NewScreen from "components/userInterface/NewScreen.svelte"
-  import { Button } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
+  import { Button, Spacer, Modal } from "@budibase/bbui"

-  let modalVisible = false
+  let modal
 </script>

 <PagesList />

 <Spacer medium />
-<Button primary wide on:click={() => (modalVisible = true)}>
-  Create New Screen
-</Button>
+<Button primary wide on:click={modal.show}>Create New Screen</Button>
 <Spacer medium />
 <PageLayout layout={$store.pages[$store.currentPageName]} />

@ -23,38 +20,6 @@
  <ComponentsHierarchy screens={$store.screens} />
 </div>

-{#if modalVisible}
-  <NewScreen bind:visible={modalVisible} />
-{/if}
-
-<style>
-  .newscreen {
-    cursor: pointer;
-    border: 1px solid var(--purple);
-    border-radius: 5px;
-    width: 100%;
-    height: 36px;
-    padding: 8px 16px;
-    margin: 20px 0px 12px 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--purple);
-    color: var(--white);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 3ms;
-    outline: none;
-  }
-
-  .newscreen:hover {
-    background: var(--purple-light);
-    color: var(--purple);
-  }
-
-  .icon {
-    color: var(--ink);
-    font-size: 16px;
-    margin-right: 4px;
-  }
-</style>
+<Modal bind:this={modal}>
+  <NewScreenModal />
+</Modal>
--- a/packages/builder/src/components/userInterface/NewScreenModal.svelte
+++ b/packages/builder/src/components/userInterface/NewScreenModal.svelte
@ -1,11 +1,7 @@
 <script>
  import { store } from "builderStore"
-  import { pipe } from "components/common/core"
-  import { isRootComponent } from "./pagesParsing/searchComponents"
-  import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select, Button, Spacer, ModalContent } from "@budibase/bbui"
-  import { find, filter, some, map, includes } from "lodash/fp"
-  import { assign } from "lodash"
+  import { Input, Select, ModalContent } from "@budibase/bbui"
+  import { find, filter, some } from "lodash/fp"

  let dialog
  let layoutComponents
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@ -4,19 +4,20 @@
  import PageLayout from "./PageLayout.svelte"
  import PagesList from "./PagesList.svelte"
  import { store } from "builderStore"
-  import NewScreen from "./NewScreen.svelte"
-  import CurrentItemPreview from "./CurrentItemPreview.svelte"
+  import NewScreenModal from "./NewScreenModal.svelte"
+  import CurrentItemPreview from "./AppPreview/CurrentItemPreview.svelte"
  import SettingsView from "./SettingsView.svelte"
  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { last } from "lodash/fp"
  import { AddIcon } from "components/common/Icons"
+  import { Modal } from "@budibase/bbui"

  let newScreenPicker
  let confirmDeleteDialog
  let componentToDelete = ""
  let settingsView
-  let modalVisible = false
+  let modal

  const settings = () => {
    settingsView.show()
@ -26,30 +27,24 @@
 </script>

 <div class="root">
-
  <div class="ui-nav">
-
    <div class="pages-list-container">
      <div class="nav-header">
        <span class="navigator-title">Navigator</span>
-
        <span class="components-nav-page">Pages</span>
      </div>
-
      <div class="nav-items-container">
        <PagesList />
      </div>
    </div>
-
    <PageLayout layout={$store.pages[$store.currentPageName]} />
-
    <div class="components-list-container">
      <div class="nav-group-header">
        <span class="components-nav-header" style="margin-top: 0;">
          Screens
        </span>
        <div>
-          <button on:click={() => (modalVisible = true)}>
+          <button on:click={modal.show}>
            <AddIcon />
          </button>
        </div>
@ -58,24 +53,21 @@
        <ComponentsHierarchy screens={$store.screens} />
      </div>
    </div>
-
  </div>
-
  <div class="preview-pane">
    <CurrentItemPreview />
  </div>
-
  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
    <div class="components-pane">
      <ComponentsPaneSwitcher />
    </div>
  {/if}
-
 </div>

-{#if modalVisible}
-  <NewScreen bind:visible={modalVisible} />
-{/if}
+<Modal bind:this={modal}>
+  <NewScreenModal />
+</Modal>
+
 <SettingsView bind:this={settingsView} />

 <style>
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -7,15 +7,14 @@
  import { get } from "builderStore/api"
  import Spinner from "components/common/Spinner.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading } from "@budibase/bbui"
+  import { Button, Heading, Modal } from "@budibase/bbui"
  import TemplateList from "components/start/TemplateList.svelte"
  import analytics from "analytics"
-  import { Modal } from "components/common/Modal"

  let promise = getApps()
  let hasKey
  let template
-  let modalVisible = false
+  let modal

  async function getApps() {
    const res = await get("/api/applications")
@ -42,13 +41,13 @@
    }

    if (!keys.budibase) {
-      modalVisible = true
+      modal.show()
    }
  }

  function selectTemplate(newTemplate) {
    template = newTemplate
-    modalVisible = true
+    modal.show()
  }

  checkIfKeysAndApps()
@ -57,9 +56,7 @@
 <div class="container">
  <div class="header">
    <Heading medium black>Welcome to the Budibase Beta</Heading>
-    <Button primary purple on:click={() => (modalVisible = true)}>
-      Create New Web App
-    </Button>
+    <Button primary purple on:click={modal.show}>Create New Web App</Button>
  </div>

  <div class="banner">
@ -72,12 +69,12 @@
  <TemplateList onSelect={selectTemplate} />

  <AppList />
-
-  {#if modalVisible}
-    <CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
-  {/if}
 </div>

+<Modal bind:this={modal} padding={false} width="600px">
+  <CreateAppModal {hasKey} {template} />
+</Modal>
+
 <style>
  .container {
    display: grid;