From c9a49e4d4bbf0406fd9df7302fad587d0b988e66 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 12:51:02 +0200
Subject: [PATCH] bump bbui and add DangerZone design

---
 packages/builder/package.json                 |  2 +-
 .../settings/tabs/DangerZone.svelte           | 44 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 764ec0e687..22a25ad931 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.7.1",
+    "@budibase/bbui": "^1.7.2",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index 5766d97588..4cfa6cbb1e 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -1 +1,43 @@
-Danger
+<script>
+  import { Input, TextArea, Button } from "@budibase/bbui"
+  let value = ""
+  let loading = false
+
+  const deleteApp = () => {
+    loading = true
+    // Do stuff here to delete app!
+    // Navigate to start
+  }
+</script>
+
+<div class="background">
+  <Input
+    on:change={e => (value = e.target.value)}
+    on:input={e => (value = e.target.value)}
+    thin
+    disabled={loading}
+    placeholder="Enter your name"
+    label="Type DELETE into the textbox, then click the following button to
+    delete your web app:" />
+
+  <Button
+    disabled={value !== 'DELETE' || loading}
+    primary
+    wide
+    on:click={deleteApp}>
+    Delete Entire Web App
+  </Button>
+</div>
+
+<style>
+  .background {
+    display: grid;
+    grid-gap: 16px;
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+  .background :global(button) {
+    max-width: 100%;
+  }
+</style>