From d24679bc332d886ecf375f136983d7db21946d6b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 8 Oct 2020 09:35:11 +0100
Subject: [PATCH] Move modal to BBUI and update usages

---
 packages/builder/src/App.svelte               |   2 -
 .../AutomationList/AutomationList.svelte      |  15 +--
 .../CreateAutomationModal.svelte              |  10 +-
 .../DataTable/buttons/CreateRowButton.svelte  |  13 +-
 .../modals/CreateEditRecordModal.svelte       |   9 +-
 .../DataTable/popovers/RowPopover.svelte      |  13 +-
 .../modals/CreateTableModal.svelte            |  46 +++----
 .../components/common/ConfirmDialog.svelte    |  26 ++--
 .../src/components/settings/Link.svelte       |  12 +-
 .../components/settings/SettingsModal.svelte  |  11 +-
 .../components/start/CreateAppModal.svelte    | 117 ++++++++----------
 .../EventsEditor/EventEditorModal.svelte      |  14 +--
 .../EventsEditor/EventPropertyControl.svelte  |  18 +--
 .../EventsEditor/EventsEditor.svelte          |   9 +-
 .../userInterface/FrontendNavigatePane.svelte |  51 ++------
 .../userInterface/NewScreenModal.svelte       |   8 +-
 .../userInterface/UserInterfaceRoot.svelte    |  26 ++--
 packages/builder/src/pages/index.svelte       |  21 ++--
 18 files changed, 156 insertions(+), 265 deletions(-)

diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 0badb1012b..a5016db114 100644
--- 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 />
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
index 7b5b117a91..328c0d6122 100644
--- 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 {
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
index b0c2f90121..5bd535087d 100644
--- 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 {
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 4bfb54a3d6..1ef0333398 100644
--- 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>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte
index 547d68d50a..2e8771ac6e 100644
--- 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>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
index 67b02bfa9f..040fc34fab 100644
--- 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 {
diff --git a/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/ModelNavigator/modals/CreateTableModal.svelte
index 1892783252..1cc0e8894c 100644
--- 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>
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 1c702ab532..2cd27573f4 100644
--- 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>
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 2591ef2c6f..3bb6d6e40d 100644
--- 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 {
diff --git a/packages/builder/src/components/settings/SettingsModal.svelte b/packages/builder/src/components/settings/SettingsModal.svelte
index b03b6ad63b..44ab581521 100644
--- 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) {
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 587c408ecb..e171dc836e 100644
--- 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>
-    <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>
-    <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 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>
-</Modal>
+  <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>
+  <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 {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 3d0732e174..020cf51fa5 100644
--- 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 {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index dac0ab9b7b..6b0beb71b8 100644
--- 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>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index 05ecd526b2..14e6656381 100644
--- 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>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 724f351112..64c3ee45f4 100644
--- 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>
diff --git a/packages/builder/src/components/userInterface/NewScreenModal.svelte b/packages/builder/src/components/userInterface/NewScreenModal.svelte
index 109bb2965a..d38d4bbb7b 100644
--- 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
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index f668660543..0bf8095e41 100644
--- 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>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 166e5855d7..a5a799f825 100644
--- 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;