remove Modal.svelte and update ConfirmDialog modal to use bbui modal

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -1,8 +1,6 @@
 <script>
-  import Button from "./Button.svelte"
-  import ActionButton from "./ActionButton.svelte"
-  import ButtonGroup from "./ButtonGroup.svelte"
   import UIkit from "uikit"
+  import { Modal, Button, Heading } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
@@ -12,16 +10,14 @@
   export let onCancel = () => {}
 
   export const show = () => {
-    uiKitModal.hide()
+    theModal.show()
-    uiKitModal.show()
   }
 
   export const hide = () => {
-    uiKitModal.hide()
+    theModal.hide()
   }
 
   let theModal
-  $: uiKitModal = theModal && UIkit.modal(theModal)
 
   const cancel = () => {
     hide()
@@ -36,31 +32,36 @@
   }
 </script>
 
-<div id={title} uk-modal bind:this={theModal}>
+<Modal id={title} bind:this={theModal}>
-  <div class="uk-modal-dialog">
+
-    <button class="uk-modal-close-default" type="button" uk-close />
+  <h2>{title}</h2>
-    <div class="uk-modal-header">
+
-      <h4 class="budibase__title--4">{title}</h4>
+  <div class="modal-body">
-    </div>
+    <slot class="rows">{body}</slot>
-    <div class="uk-modal-body">
-      <slot class="rows">{body}</slot>
-    </div>
-    <div class="uk-modal-footer">
-      <ButtonGroup>
-        <ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
-        <ActionButton primary on:click={ok}>{okText}</ActionButton>
-      </ButtonGroup>
-    </div>
   </div>
-</div>
+
+  <div class="modal-footer">
+    <Button red wide on:click={ok}>{okText}</Button>
+    <Button secondary wide on:click={cancel}>{cancelText}</Button>
+  </div>
+
+</Modal>
 
 <style>
-  .uk-modal-footer {
+  h2 {
-    background: var(--grey-1);
+    font-size: var(--font-size-xl);
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 600;
   }
 
-  .uk-modal-dialog {
+  .modal-body {
-    width: 400px;
+    margin-top: var(--spacing-m);
-    border-radius: 5px;
+    margin-bottom: var(--spacing-m);
+  }
+
+  .modal-footer {
+    display: grid;
+    grid-gap: var(--spacing-s);
   }
 </style>

packages/builder/src/components/common/Modal.svelte

@@ -1,59 +0,0 @@
-<script>
-  import UIkit from "uikit"
-  import ActionButton from "../common/ActionButton.svelte"
-
-  export let isOpen = false
-  export let onClosed
-  export let id = ""
-  export let title
-
-  let ukModal
-  let listenerAdded = false
-
-  $: {
-    if (ukModal && !listenerAdded) {
-      listenerAdded = true
-      ukModal.addEventListener("hidden", onClosed)
-    }
-
-    if (ukModal) {
-      if (isOpen) {
-        UIkit.modal(ukModal).show()
-      } else {
-        UIkit.modal(ukModal).hide()
-      }
-    }
-  }
-</script>
-
-<div bind:this={ukModal} uk-modal {id}>
-  {#if isOpen}
-    <div class="uk-modal-dialog" uk-overflow-auto>
-      {#if title}
-        <div class="uk-modal-header">
-          <h4 class="budibase__title--4">{title}</h4>
-        </div>
-      {/if}
-      <div class="uk-modal-body">
-        {#if onClosed}
-          <button class="uk-modal-close-default" type="button" uk-close />
-        {/if}
-        <slot />
-      </div>
-      <div class="uk-modal-footer">
-        <slot name="footer" />
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .uk-modal-dialog {
-    border-radius: 0.3rem;
-    width: 520px;
-    height: 80vh;
-    display: flex;
-    flex-direction: column;
-    padding: 40px;
-  }
-</style>

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

@@ -1,5 +1,4 @@
 <script>
-  import Modal from "./Modal.svelte"
   import { SettingsIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
   import { isActive, goto, layout } from "@sveltech/routify"

packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

@@ -1,7 +1,6 @@
 <script>
   import { store } from "builderStore"
   import { Button, Select } from "@budibase/bbui"
-  import Modal from "../../common/Modal.svelte"
   import HandlerSelector from "./HandlerSelector.svelte"
   import IconButton from "../../common/IconButton.svelte"
   import ActionButton from "../../common/ActionButton.svelte"