From 9d82279b367e635cd109beb604823e2e7d88058e Mon Sep 17 00:00:00 2001
From: Victoria Sloan <victoriasloan@gmail.com>
Date: Thu, 3 Sep 2020 08:44:08 +0100
Subject: [PATCH] remove Modal.svelte and update ConfirmDialog modal to use
 bbui modal

---
 .../components/common/ConfirmDialog.svelte    | 57 +++++++++---------
 .../src/components/common/Modal.svelte        | 59 -------------------
 .../src/components/settings/Link.svelte       |  1 -
 .../EventsEditor/EventEditorModal.svelte      |  1 -
 4 files changed, 29 insertions(+), 89 deletions(-)
 delete mode 100644 packages/builder/src/components/common/Modal.svelte

diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index f9a4e7ec57..a65b6edb97 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/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()
-    uiKitModal.show()
+    theModal.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}>
-  <div class="uk-modal-dialog">
-    <button class="uk-modal-close-default" type="button" uk-close />
-    <div class="uk-modal-header">
-      <h4 class="budibase__title--4">{title}</h4>
-    </div>
-    <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>
+<Modal id={title} bind:this={theModal}>
+
+  <h2>{title}</h2>
+
+  <div class="modal-body">
+    <slot class="rows">{body}</slot>
   </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 {
-    background: var(--grey-1);
+  h2 {
+    font-size: var(--font-size-xl);
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 600;
   }
 
-  .uk-modal-dialog {
-    width: 400px;
-    border-radius: 5px;
+  .modal-body {
+    margin-top: var(--spacing-m);
+    margin-bottom: var(--spacing-m);
+  }
+
+  .modal-footer {
+    display: grid;
+    grid-gap: var(--spacing-s);
   }
 </style>
diff --git a/packages/builder/src/components/common/Modal.svelte b/packages/builder/src/components/common/Modal.svelte
deleted file mode 100644
index c91c30827e..0000000000
--- a/packages/builder/src/components/common/Modal.svelte
+++ /dev/null
@@ -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>
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 9d669bc7b2..697a1609e4 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/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"
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index d2e6cc5693..83dfcef457 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/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"