Update settings to use new modal

packages/builder/src/components/settings/Link.svelte

@@ -1,31 +1,17 @@
 <script>
-  import Modal from "./Modal.svelte"
+  import SettingsModal from "./SettingsModal.svelte"
   import { SettingsIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
-  import { isActive, goto, layout } from "@sveltech/routify"
+  import { Modal } from "components/common/Modal"
 
-  // Handle create app modal
-  const { open, close } = getContext("simple-modal")
-
-  const showSettingsModal = () => {
-    open(
-      Modal,
-      {
-        name: "Placeholder App Name",
-        description: "This is a hardcoded description that needs to change",
-      },
-      {
-        closeOnEsc: true,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
-  }
+  let modal
 </script>
 
-<span class="topnavitemright settings" on:click={showSettingsModal}>
+<span class="topnavitemright settings" on:click={modal.show}>
   <SettingsIcon />
 </span>
+<Modal bind:this={modal} wide>
+  <SettingsModal />
+</Modal>
 
 <style>
   span:first-letter {

packages/builder/src/components/settings/Modal.svelte → packages/builder/src/components/settings/SettingsModal.svelte

@@ -1,13 +1,8 @@
 <script>
   import { General, Users, DangerZone, APIKeys } from "./tabs"
+  import { Switcher } from "@budibase/bbui"
+  import { ModalTitle } from "components/common/Modal"
 
-  import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
-  import { SettingsIcon, CloseIcon } from "components/common/Icons/"
-  import { getContext } from "svelte"
-  import { post } from "builderStore/api"
-
-  export let name = ""
-  export let description = ""
   const tabs = [
     {
       title: "General",
@@ -30,15 +25,16 @@
       component: DangerZone,
     },
   ]
+
   let value = "GENERAL"
+
   $: selectedTab = tabs.find(tab => tab.key === value).component
+
+  function hide() {}
 </script>
 
 <div class="container">
-  <div class="heading">
-    <i class="ri-settings-2-fill" />
-    <h3>Settings</h3>
-  </div>
+  <ModalTitle>Settings</ModalTitle>
   <Switcher headings={tabs} bind:value>
     <svelte:component this={selectedTab} />
   </Switcher>
@@ -46,7 +42,6 @@
 
 <style>
   .container {
-    padding: 30px;
     display: grid;
     grid-gap: var(--spacing-xl);
   }
@@ -54,21 +49,7 @@
     /* Fix margin defined in BBUI as L rather than XL */
     margin-bottom: var(--spacing-xl);
   }
-
-  .heading {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .heading h3 {
-    font-size: var(--font-size-xl);
-    color: var(--ink);
-    font-weight: 600;
-    margin: 0;
-  }
-  .heading i {
-    margin-right: var(--spacing-m);
-    font-size: 28px;
-    color: var(--grey-6);
+  .container :global(textarea) {
+    min-height: 60px;
   }
 </style>

packages/builder/src/components/settings/tabs/DangerZone.svelte

@@ -2,6 +2,7 @@
   import { params, goto } from "@sveltech/routify"
   import { Input, TextArea, Button, Body } from "@budibase/bbui"
   import { del } from "builderStore/api"
+  import { ModalFooter } from "components/common/Modal"
 
   let value = ""
   let loading = false
@@ -9,16 +10,9 @@
   async function deleteApp() {
     loading = true
     const id = $params.application
-    const res = await del(`/api/${id}`)
-    const json = await res.json()
-
+    await del(`/api/${id}`)
     loading = false
-    if (res.ok) {
-      $goto("/")
-      return json
-    } else {
-      throw new Error(json)
-    }
+    $goto("/")
   }
 </script>
 
@@ -35,13 +29,12 @@
     thin
     disabled={loading}
     placeholder="" />
-  <Button
+  <ModalFooter
     disabled={value !== 'DELETE' || loading}
     red
-    wide
-    on:click={deleteApp}>
-    Delete Entire Web App
-  </Button>
+    showCancelButton={false}
+    confirmText="Delete Entire App"
+    onConfirm={deleteApp} />
 </div>
 
 <style>
@@ -53,7 +46,4 @@
     line-height: 1.2;
     margin: 0;
   }
-  .background :global(button) {
-    max-width: 100%;
-  }
 </style>