Update buttons in settings, improve preview styles

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;
       }
   
       *,

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.

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

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

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.

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;
   }
 

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