From 2aa9f305468774167a0528c8e6f15aaefafb9f17 Mon Sep 17 00:00:00 2001
From: Victoria Sloan <victoriasloan@gmail.com>
Date: Fri, 4 Sep 2020 22:40:25 +0100
Subject: [PATCH] minWidth set on NewScreen bbui modal, Spacer component used
 instead of margins and bbui version bumped

---
 packages/builder/package.json                 |  2 +-
 .../components/common/ConfirmDialog.svelte    | 17 ++----
 .../components/userInterface/NewScreen.svelte | 56 ++++++++++---------
 3 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 613d61696b..b13ab74287 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.29.2",
+    "@budibase/bbui": "^1.29.3",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index a65b6edb97..77ff9ddb02 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -1,6 +1,6 @@
 <script>
   import UIkit from "uikit"
-  import { Modal, Button, Heading } from "@budibase/bbui"
+  import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
@@ -33,18 +33,14 @@
 </script>
 
 <Modal id={title} bind:this={theModal}>
-
   <h2>{title}</h2>
-
-  <div class="modal-body">
-    <slot class="rows">{body}</slot>
-  </div>
-
+  <Spacer extraLarge />
+  <slot class="rows">{body}</slot>
+  <Spacer extraLarge />
   <div class="modal-footer">
     <Button red wide on:click={ok}>{okText}</Button>
     <Button secondary wide on:click={cancel}>{cancelText}</Button>
   </div>
-
 </Modal>
 
 <style>
@@ -55,11 +51,6 @@
     font-weight: 600;
   }
 
-  .modal-body {
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-m);
-  }
-
   .modal-footer {
     display: grid;
     grid-gap: var(--spacing-s);
diff --git a/packages/builder/src/components/userInterface/NewScreen.svelte b/packages/builder/src/components/userInterface/NewScreen.svelte
index ae5a50ab6a..052aa80272 100644
--- a/packages/builder/src/components/userInterface/NewScreen.svelte
+++ b/packages/builder/src/components/userInterface/NewScreen.svelte
@@ -3,7 +3,7 @@
   import { pipe } from "components/common/core"
   import { isRootComponent } from "./pagesParsing/searchComponents"
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
-  import { Input, Select, Modal, Button } from "@budibase/bbui"
+  import { Input, Select, Modal, Button, Spacer } from "@budibase/bbui"
 
   import { find, filter, some, map, includes } from "lodash/fp"
   import { assign } from "lodash"
@@ -67,37 +67,39 @@
   }
 </script>
 
-<Modal bind:this={dialog}>
+<Modal bind:this={dialog} minWidth="500px">
   <h2>New Screen</h2>
+  <Spacer extraLarge />
 
-  <div class="modal-body">
-    <div data-cy="new-screen-dialog">
-      <div class="bb-margin-xl">
-        <Input label="Name" bind:value={name} />
-      </div>
+  <div data-cy="new-screen-dialog">
+    <div class="bb-margin-xl">
+      <Input label="Name" bind:value={name} />
+    </div>
 
-      <div class="bb-margin-xl">
-        <Input
-          label="Url"
-          error={routeError}
-          bind:value={route}
-          on:change={routeChanged} />
-      </div>
+    <div class="bb-margin-xl">
+      <Input
+        label="Url"
+        error={routeError}
+        bind:value={route}
+        on:change={routeChanged} />
+    </div>
 
-      <div class="bb-margin-xl">
-        <label>Layout Component</label>
-        <Select bind:value={layoutComponent} secondary>
-          {#each layoutComponents as { _component, name }}
-            <option value={_component}>{name}</option>
-          {/each}
-        </Select>
-      </div>
+    <div class="bb-margin-xl">
+      <label>Layout Component</label>
+      <Select bind:value={layoutComponent} secondary>
+        {#each layoutComponents as { _component, name }}
+          <option value={_component}>{name}</option>
+        {/each}
+      </Select>
     </div>
   </div>
 
-  <Button secondary medium on:click={cancel}>Cancel</Button>
-  <Button blue medium on:click={save}>Create Screen</Button>
+  <Spacer extraLarge />
 
+  <div class="modal-footer">
+    <Button secondary medium on:click={cancel}>Cancel</Button>
+    <Button blue medium on:click={save}>Create Screen</Button>
+  </div>
 </Modal>
 
 <style>
@@ -108,8 +110,8 @@
     font-weight: 600;
   }
 
-  .modal-body {
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-m);
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
   }
 </style>