minWidth set on NewScreen bbui modal, Spacer component used instead of margins and bbui version bumped

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",

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">
+  <Spacer extraLarge />
   <slot class="rows">{body}</slot>
-  </div>
-
+  <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);

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,10 +67,10 @@
   }
 </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} />
@@ -93,11 +93,13 @@
       </Select>
     </div>
   </div>
-  </div>
 
+  <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>