From b497000f7b426212998e7a92e5ee05e7f6e1a6dd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 18 Jun 2021 09:59:28 +0100
Subject: [PATCH] Update buttons in settings, improve preview styles

---
 .../design/AppPreview/iframeTemplate.js       | 20 +++++++++++++------
 .../EventsEditor/EventPropertyControl.svelte  |  4 ++--
 .../FilterEditor/FilterEditor.svelte          |  3 ++-
 .../IconSelect/IconSelect.svelte              |  4 ++--
 .../NavigationEditor/NavigationEditor.svelte  |  4 ++--
 .../design/[assetType]/_layout.svelte         |  5 ++---
 packages/standard-components/manifest.json    | 10 +++++-----
 7 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index c715cfc814..7a7c04b3a1 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@@ -12,16 +12,24 @@ export default `
       rel="stylesheet"
     />
     <style>
-      html,
-      body {
-        margin: 0;
+      html, body {
         padding: 0;
-        height: 100%;
-        width: 100%;
+        margin: 0;
+      }
+      html {
+        height: calc(100% - 16px);
+        width: calc(100% - 16px);
         overflow: hidden;
+        margin: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
       }
       body {
-        padding: 2px;
+        flex: 1 1 auto;
+        overflow: hidden;
       }
   
       *,
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
index fb2752edde..f4fff05803 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Drawer } from "@budibase/bbui"
+  import { ActionButton, Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { notifications } from "@budibase/bbui"
   import EventEditor from "./EventEditor.svelte"
@@ -51,7 +51,7 @@
   }
 </script>
 
-<Button secondary on:click={drawer.show}>Define Actions</Button>
+<ActionButton on:click={drawer.show}>Define Actions</ActionButton>
 <Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
     Define what actions to run.
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
index e2a386497c..eee8fb113c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@@ -1,6 +1,7 @@
 <script>
   import {
     notifications,
+    ActionButton,
     Button,
     Drawer,
     Body,
@@ -46,7 +47,7 @@
   }
 </script>
 
-<Button secondary on:click={drawer.show}>Define Filters</Button>
+<ActionButton on:click={drawer.show}>Define Filters</ActionButton>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <DrawerContent slot="body">
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
index 7167dd046c..9afd1ea65e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <script>
-  import { Popover, Button, Input } from "@budibase/bbui"
+  import { Popover, ActionButton, Button, Input } from "@budibase/bbui"
   import { createEventDispatcher, tick } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -117,7 +117,7 @@
 </script>
 
 <div bind:this={buttonAnchor}>
-  <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
+  <ActionButton on:click={dropdown.show}>{displayValue}</ActionButton>
 </div>
 <Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
   <div class="container">
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
index bce4f86b65..b7a272e608 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Drawer } from "@budibase/bbui"
+  import { Button, ActionButton, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import NavigationDrawer from "./NavigationDrawer.svelte"
 
@@ -13,7 +13,7 @@
   }
 </script>
 
-<Button secondary on:click={drawer.show}>Configure Links</Button>
+<ActionButton on:click={drawer.show}>Configure Links</ActionButton>
 <Drawer bind:this={drawer} title={"Navigation Links"}>
   <svelte:fragment slot="description">
     Configure the links in your navigation bar.
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index 0c4d0367f2..ed62a387fa 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -190,11 +190,10 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
-    padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
+    gap: var(--spacing-m);
+    padding: var(--spacing-xl) 40px;
   }
   .preview-content {
-    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
     flex: 1 1 auto;
   }
 
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index db834762bb..b77ecf1f26 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -214,15 +214,15 @@
         "label": "Text",
         "key": "text"
       },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled"
-      },
       {
         "type": "event",
         "label": "On Click",
         "key": "onClick"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled"
       }
     ]
   },