From c72a65bc5fd6ca4c14fa30f3fc331291a2203c81 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Apr 2021 13:15:49 +0100
Subject: [PATCH 1/5] Add support for all 4 spectrum themes in builder!

---
 .../builder/src/builderStore/store/theme.js   | 21 ++++++++++++++-----
 .../components/settings/ThemeEditor.svelte    | 11 ++++++----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index cb4d0a2774..fd6b05df59 100644
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@@ -3,14 +3,25 @@ import { localStorageStore } from "./localStorage"
 export const getThemeStore = () => {
   const themeElement = document.documentElement
   const initialValue = {
-    darkMode: true,
+    theme: "darkest",
+    options: ["lightest", "light", "dark", "darkest"],
   }
   const store = localStorageStore("bb-theme", initialValue)
 
-  // Update theme when store changes
-  store.subscribe(theme => {
-    themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
-    themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
+  // Update theme class when store changes
+  store.subscribe(state => {
+    // Handle any old local storage values - this can be removed after the update
+    if (state.darkMode !== undefined) {
+      store.set(initialValue)
+      return
+    }
+
+    state.options.forEach(option => {
+      themeElement.classList.toggle(
+        `spectrum--${option}`,
+        option === state.theme
+      )
+    })
   })
 
   return store
diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte
index 9c7235ce62..d971f01764 100644
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ b/packages/builder/src/components/settings/ThemeEditor.svelte
@@ -1,8 +1,11 @@
 <script>
   import { themeStore } from "builderStore"
-  import { Toggle } from "@budibase/bbui"
-
-  let showAdvanced = false
+  import { Select } from "@budibase/bbui"
+  import { capitalise } from "../../helpers"
 </script>
 
-<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
+<Select
+  options={$themeStore.options}
+  bind:value={$themeStore.theme}
+  placeholder={null}
+  getOptionLabel={capitalise} />

From f2dd930478db803fce2b3e52c357b3fc10a5db19 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 27 Apr 2021 13:16:58 +0100
Subject: [PATCH 2/5] Fix app card background color

---
 packages/builder/src/components/start/AppCard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 232f60811d..a2f42db2e4 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -44,7 +44,7 @@
 
 <style>
   .apps-card {
-    background-color: var(--background-alt);
+    background-color: var(--background);
     padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
     max-width: 300px;

From e5e3a7238100b76154aa2be53d568ebd952718f2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Apr 2021 13:42:17 +0100
Subject: [PATCH 3/5] Update all component icons

---
 .../bbui/src/ActionMenu/ActionMenu.svelte     |  8 +-
 .../AppPreview/ComponentSelectionList.svelte  | 51 ++++++++++---
 .../design/AppPreview/componentStructure.json | 10 +--
 packages/standard-components/manifest.json    | 74 +++++++++----------
 4 files changed, 83 insertions(+), 60 deletions(-)

diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index 6cfc531738..6947e69a7e 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -28,7 +28,7 @@
   setContext("actionMenu", { show, hide })
 </script>
 
-<div class="contents" use:getAnchor on:click={openMenu}>
+<div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
@@ -36,9 +36,3 @@
     <slot />
   </Menu>
 </Popover>
-
-<style>
-  div {
-    display: contents;
-  }
-</style>
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 0fd334794a..0ecf51e74f 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -4,6 +4,7 @@
     ActionGroup,
     ActionButton,
     MenuItem,
+    Icon,
   } from "@budibase/bbui"
   import { store, currentAssetName } from "builderStore"
   import structure from "./componentStructure.json"
@@ -12,7 +13,7 @@
 
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
-    structure.forEach((item) => {
+    structure.forEach(item => {
       if (typeof item === "string") {
         const def = definitions[`@budibase/standard-components/${item}`]
         if (def) {
@@ -32,37 +33,65 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item) => {
+  const onItemChosen = async item => {
     if (!item.isCategory) {
-      // Add this component
       await store.actions.components.create(item.component)
     }
   }
 </script>
 
-<ActionGroup>
+<div class="components">
   {#each enrichedStructure as item}
     <ActionMenu disabled={!item.isCategory}>
       <ActionButton
         icon={item.icon}
-        primary
         quiet
+        size="S"
         slot="control"
-        on:click={() => onItemChosen(item)}
-      >
-        {item.name}
+        on:click={() => onItemChosen(item)}>
+        <div class="buttonContent">
+          {item.name}
+          {#if item.isCategory}
+            <Icon size="S" name="ChevronDown" />
+          {/if}
+        </div>
       </ActionButton>
       {#each item.children || [] as item}
         {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
           <MenuItem
             dataCy={`component-${item.name}`}
             icon={item.icon}
-            on:click={() => onItemChosen(item)}
-          >
+            on:click={() => onItemChosen(item)}>
             {item.name}
           </MenuItem>
         {/if}
       {/each}
     </ActionMenu>
   {/each}
-</ActionGroup>
+</div>
+
+<style>
+  .components {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: -10px;
+  }
+  .components :global(> *) {
+    margin-top: 10px;
+  }
+
+  .buttonContent {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+  }
+  .buttonContent :global(svg) {
+    margin-left: 2px !important;
+    margin-right: 0 !important;
+    margin-bottom: -1px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 267289a804..91f039fe68 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -7,7 +7,7 @@
   "search",
   {
     "name": "Form",
-    "icon": "ri-file-edit-line",
+    "icon": "Form",
     "children": [
       "form",
       "fieldgroup",
@@ -24,7 +24,7 @@
   },
   {
     "name": "Card",
-    "icon": "ri-archive-drawer-line",
+    "icon": "Card",
     "children": [
       "stackedlist",
       "card",
@@ -34,7 +34,7 @@
   },
   {
     "name": "Chart",
-    "icon": "ri-bar-chart-2-line",
+    "icon": "GraphBarVertical",
     "children": [
       "bar",
       "line",
@@ -46,7 +46,7 @@
   },
   {
     "name": "Elements",
-    "icon": "ri-paragraph",
+    "icon": "TextParagraph",
     "children": [
       "heading",
       "text",
@@ -59,7 +59,7 @@
   },
   {
     "name": "Other",
-    "icon": "ri-more-2-line",
+    "icon": "More",
     "children": [
       "screenslot",
       "navigation",
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 5618127191..b8168e7bfc 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -2,7 +2,7 @@
   "container": {
     "name": "Container",
     "description": "This component contains things within itself",
-    "icon": "ri-layout-column-line",
+    "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
     "transitionable": true,
@@ -10,14 +10,14 @@
   },
   "screenslot": {
     "name": "Screenslot",
-    "icon": "ri-artboard-2-line",
+    "icon": "WebPage",
     "description": "Contains your app screens",
     "styleable": true
   },
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
-    "icon": "ri-share-box-line",
+    "icon": "Button",
     "styleable": true,
     "settings": [
       {
@@ -40,7 +40,7 @@
   "repeater": {
     "name": "Repeater",
     "description": "A configurable data list that attaches to your backend tables.",
-    "icon": "ri-list-check-2",
+    "icon": "ViewList",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -68,7 +68,7 @@
   "search": {
     "name": "Search",
     "description": "A searchable list of items.",
-    "icon": "ri-search-line",
+    "icon": "Search",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -101,7 +101,7 @@
     }
   },
   "stackedlist": {
-    "name": "Stacked List",
+    "name": "TaskList",
     "icon": "ri-archive-drawer-line",
     "description": "A basic card component that can contain content and actions.",
     "styleable": true,
@@ -132,7 +132,7 @@
   "card": {
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
-    "icon": "ri-layout-column-line",
+    "icon": "ViewColumn",
     "styleable": true,
     "settings": [
       {
@@ -192,7 +192,7 @@
   "text": {
     "name": "Paragraph",
     "description": "A component for displaying paragraph text.",
-    "icon": "ri-paragraph",
+    "icon": "TextParagraph",
     "styleable": true,
     "settings": [
       {
@@ -204,7 +204,7 @@
   },
   "heading": {
     "name": "Headline",
-    "icon": "ri-heading",
+    "icon": "TextBold",
     "description": "A component for displaying heading text",
     "styleable": true,
     "settings": [
@@ -225,7 +225,7 @@
   "image": {
     "name": "Image",
     "description": "A basic component for displaying images",
-    "icon": "ri-image-line",
+    "icon": "Image",
     "styleable": true,
     "settings": [
       {
@@ -238,7 +238,7 @@
   "backgroundimage": {
     "name": "Background Image",
     "description": "A background image",
-    "icon": "ri-image-line",
+    "icon": "Images",
     "styleable": true,
     "settings": [
       {
@@ -295,7 +295,7 @@
   "icon": {
     "name": "Icon",
     "description": "A basic component for displaying icons",
-    "icon": "ri-sun-fill",
+    "icon": "Bell",
     "styleable": true,
     "settings": [
       {
@@ -342,7 +342,7 @@
   "login": {
     "name": "Login Form",
     "description": "A component that automatically generates a login screen for your app.",
-    "icon": "ri-login-box-line",
+    "icon": "Login",
     "styleable": true,
     "settings": [
       {
@@ -365,7 +365,7 @@
   "navigation": {
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
-    "icon": "ri-navigation-line",
+    "icon": "BreadcrumbNavigation",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -379,7 +379,7 @@
   "link": {
     "name": "Link",
     "description": "A basic link component for internal and external links",
-    "icon": "ri-link",
+    "icon": "Link",
     "styleable": true,
     "settings": [
       {
@@ -408,7 +408,7 @@
   "cardhorizontal": {
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
-    "icon": "ri-layout-row-line",
+    "icon": "ViewRow",
     "styleable": true,
     "settings": [
       {
@@ -480,7 +480,7 @@
   "cardstat": {
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
-    "icon": "ri-dual-sim-2-line",
+    "icon": "Card",
     "styleable": true,
     "settings": [
       {
@@ -505,7 +505,7 @@
   },
   "embed": {
     "name": "Embed",
-    "icon": "ri-code-line",
+    "icon": "Code",
     "description": "Embed content from 3rd party sources",
     "styleable": true,
     "settings": [
@@ -519,7 +519,7 @@
   "bar": {
     "name": "Bar Chart",
     "description": "Bar chart",
-    "icon": "ri-bar-chart-line",
+    "icon": "GraphBarVertical",
     "styleable": true,
     "settings": [
       {
@@ -619,7 +619,7 @@
   "line": {
     "name": "Line Chart",
     "description": "Line chart",
-    "icon": "ri-line-chart-line",
+    "icon": "GraphTrend",
     "styleable": true,
     "settings": [
       {
@@ -720,7 +720,7 @@
   "area": {
     "name": "Area Chart",
     "description": "Line chart",
-    "icon": "ri-line-chart-fill",
+    "icon": "GraphAreaStacked",
     "styleable": true,
     "settings": [
       {
@@ -833,7 +833,7 @@
   "pie": {
     "name": "Pie Chart",
     "description": "Pie chart",
-    "icon": "ri-pie-chart-line",
+    "icon": "GraphPie",
     "styleable": true,
     "settings": [
       {
@@ -910,7 +910,7 @@
   "donut": {
     "name": "Donut Chart",
     "description": "Donut chart",
-    "icon": "ri-donut-chart-line",
+    "icon": "GraphDonut",
     "styleable": true,
     "settings": [
       {
@@ -987,7 +987,7 @@
   "candlestick": {
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
-    "icon": "ri-stock-line",
+    "icon": "GraphBarVerticalStacked",
     "styleable": true,
     "settings": [
       {
@@ -1068,7 +1068,7 @@
   },
   "form": {
     "name": "Form",
-    "icon": "ri-file-text-line",
+    "icon": "Form",
     "styleable": true,
     "hasChildren": true,
     "actions": [
@@ -1133,7 +1133,7 @@
   },
   "fieldgroup": {
     "name": "Field Group",
-    "icon": "ri-layout-row-line",
+    "icon": "Group",
     "styleable": true,
     "hasChildren": true,
     "settings": [
@@ -1161,7 +1161,7 @@
   },
   "stringfield": {
     "name": "Text Field",
-    "icon": "ri-t-box-line",
+    "icon": "Text",
     "styleable": true,
     "settings": [
       {
@@ -1189,7 +1189,7 @@
   },
   "numberfield": {
     "name": "Number Field",
-    "icon": "ri-edit-box-line",
+    "icon": "123",
     "styleable": true,
     "settings": [
       {
@@ -1217,7 +1217,7 @@
   },
   "passwordfield": {
     "name": "Password Field",
-    "icon": "ri-lock-password-line",
+    "icon": "LockClosed",
     "styleable": true,
     "settings": [
       {
@@ -1245,7 +1245,7 @@
   },
   "optionsfield": {
     "name": "Options Picker",
-    "icon": "ri-file-list-line",
+    "icon": "ViewList",
     "styleable": true,
     "settings": [
       {
@@ -1274,7 +1274,7 @@
   },
   "booleanfield": {
     "name": "Checkbox",
-    "icon": "ri-checkbox-line",
+    "icon": "Checkmark",
     "styleable": true,
     "settings": [
       {
@@ -1302,7 +1302,7 @@
   },
   "longformfield": {
     "name": "Rich Text",
-    "icon": "ri-file-edit-line",
+    "icon": "TextParagraph",
     "styleable": true,
     "settings": [
       {
@@ -1331,7 +1331,7 @@
   },
   "datetimefield": {
     "name": "Date Picker",
-    "icon": "ri-calendar-line",
+    "icon": "DateInput",
     "styleable": true,
     "settings": [
       {
@@ -1365,7 +1365,7 @@
   },
   "attachmentfield": {
     "name": "Attachment",
-    "icon": "ri-image-edit-line",
+    "icon": "Attach",
     "styleable": true,
     "settings": [
       {
@@ -1388,7 +1388,7 @@
   },
   "relationshipfield": {
     "name": "Relationship Picker",
-    "icon": "ri-links-line",
+    "icon": "TaskList",
     "styleable": true,
     "settings": [
       {
@@ -1416,7 +1416,7 @@
   },
   "dataprovider": {
     "name": "Data Provider",
-    "icon": "ri-database-2-line",
+    "icon": "Data",
     "styleable": false,
     "hasChildren": true,
     "settings": [
@@ -1476,7 +1476,7 @@
   },
   "table": {
     "name": "Table",
-    "icon": "ri-table-line",
+    "icon": "Table",
     "styleable": true,
     "hasChildren": true,
     "settings": [

From 62b0e02ef43f39862745d62eba6e72daece1df47 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Apr 2021 13:59:55 +0100
Subject: [PATCH 4/5] Update all backend buttons to be action buttons. Add
 missing ActionMenu conversion to views

---
 .../bbui/src/ActionButton/ActionButton.svelte |  15 +--
 .../backend/DataTable/DataTable.svelte        |   2 +-
 .../DataTable/buttons/CalculateButton.svelte  |   7 +-
 .../buttons/CreateColumnButton.svelte         |   8 +-
 .../DataTable/buttons/CreateRowButton.svelte  |   8 +-
 .../DataTable/buttons/CreateViewButton.svelte |   8 +-
 .../DataTable/buttons/ExportButton.svelte     |   6 +-
 .../DataTable/buttons/FilterButton.svelte     |   7 +-
 .../buttons/HideAutocolumnButton.svelte       |  23 +---
 .../buttons/ManageAccessButton.svelte         |   8 +-
 .../TableNavigator/TableNavigator.svelte      |  13 +--
 .../popovers/EditViewPopover.svelte           | 102 ++++--------------
 .../components/common/ConfirmDialog.svelte    |  12 +--
 13 files changed, 63 insertions(+), 156 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 9dd5c68f43..c7bfbc32db 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -41,14 +41,12 @@
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   {disabled}
   on:longPress
-  on:click|preventDefault
->
+  on:click|preventDefault>
   {#if longPressable}
     <svg
       class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
       focusable="false"
-      aria-hidden="true"
-    >
+      aria-hidden="true">
       <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
     </svg>
   {/if}
@@ -57,8 +55,7 @@
       class="spectrum-Icon spectrum-Icon--size{size}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}
-    >
+      aria-label={icon}>
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}
@@ -66,9 +63,3 @@
     <span class="spectrum-ActionButton-label"><slot /></span>
   {/if}
 </button>
-
-<style>
-  span {
-    text-transform: capitalize;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 80b28d470b..53d1efb330 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -57,7 +57,7 @@
   <CreateColumnButton />
   {#if schema && Object.keys(schema).length > 0}
     <CreateRowButton
-      title={isUsersTable ? 'Create New User' : 'Create New Row'}
+      title={isUsersTable ? 'Create user' : 'Create row'}
       modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
     <CreateViewButton />
     <ManageAccessButton resourceId={$tables.selected?._id} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 2d05938f41..7316b1c69c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Modal, Button } from "@budibase/bbui"
+  import { Modal, ActionButton } from "@budibase/bbui"
   import CalculateModal from "../modals/CalculateModal.svelte"
 
   export let view = {}
@@ -7,15 +7,14 @@
   let modal
 </script>
 
-<Button
+<ActionButton
   icon="Calculator"
-  primary
   size="S"
   quiet
   on:click={modal.show}
   active={view.field && view.calculation}>
   Calculate
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <CalculateModal {view} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 1459187332..86aef4ddbb 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -1,13 +1,13 @@
 <script>
-  import { Button, Icon, Modal, ModalContent } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
 </script>
 
-<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
-  Create New Column
-</Button>
+<ActionButton icon="TableColumnAddRight" quiet size="S" on:click={modal.show}>
+  Create column
+</ActionButton>
 <Modal bind:this={modal}>
   <CreateEditColumn />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index cb65525f68..7f62a246f3 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -1,16 +1,16 @@
 <script>
-  import { Button, Icon, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import CreateEditRow from "../modals/CreateEditRow.svelte"
 
   export let modalContentComponent = CreateEditRow
-  export let title = "Create New Row"
+  export let title = "Create row"
 
   let modal
 </script>
 
-<Button icon="Add" primary size="S" quiet on:click={modal.show}>
+<ActionButton icon="TableRowAddBottom" size="S" quiet on:click={modal.show}>
   {title}
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <svelte:component this={modalContentComponent} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index 285323c6d7..297d120ede 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -1,13 +1,13 @@
 <script>
-  import { Modal, Button } from "@budibase/bbui"
+  import { Modal, ActionButton } from "@budibase/bbui"
   import CreateViewModal from "../modals/CreateViewModal.svelte"
 
   let modal
 </script>
 
-<Button icon="CollectionAdd" primary size="S" quiet on:click={modal.show}>
-  Create New View
-</Button>
+<ActionButton icon="CollectionAdd" size="S" quiet on:click={modal.show}>
+  Create view
+</ActionButton>
 <Modal bind:this={modal}>
   <CreateViewModal />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index 9ec0a86131..7a76ba0820 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import ExportModal from "../modals/ExportModal.svelte"
 
   export let view
@@ -7,9 +7,9 @@
   let modal
 </script>
 
-<Button icon="Download" primary size="S" quiet on:click={modal.show}>
+<ActionButton icon="Download" size="S" quiet on:click={modal.show}>
   Export
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <ExportModal {view} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
index 5b345d6df7..e93c355404 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import FilterModal from "../modals/FilterModal.svelte"
 
   export let view = {}
@@ -7,15 +7,14 @@
   let modal
 </script>
 
-<Button
+<ActionButton
   icon="Filter"
-  primary
   size="S"
   quiet
   on:click={modal.show}
   active={view.filters?.length}>
   Filter
-</Button>
+</ActionButton>
 <Modal bind:this={modal}>
   <FilterModal {view} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index 1f92043381..3d74188ee4 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -1,28 +1,13 @@
 <script>
-  import { Button } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
 
   export let hideAutocolumns
 
-  let anchor
-  let dropdown
-
   function hideOrUnhide() {
     hideAutocolumns = !hideAutocolumns
   }
 </script>
 
-<div bind:this={anchor}>
-  <Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
-    {#if hideAutocolumns}
-      Show Auto Columns
-    {:else}
-      Hide Auto Columns
-    {/if}
-  </Button>
-</div>
-
-<style>
-  i {
-    margin-right: 4px;
-  }
-</style>
+<ActionButton icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
+  {#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if}
+</ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 8af3f3f3f1..38dfcbf26a 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import { permissions } from "stores/backend"
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
@@ -14,9 +14,9 @@
   }
 </script>
 
-<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
-  Manage Access
-</Button>
+<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
+  Manage access
+</ActionButton>
 <Modal bind:this={modal}>
   <ManageAccessModal
     {resourceId}
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 94852d1202..beb435f69f 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -34,11 +34,10 @@
     {#each $tables.list as table, idx}
       <NavItem
         border={idx > 0}
-        icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
+        icon={table._id === TableNames.USERS ? 'UserGroup' : 'Table'}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
-        on:click={() => selectTable(table)}
-      >
+        on:click={() => selectTable(table)}>
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
         {/if}
@@ -46,14 +45,12 @@
       {#each Object.keys(table.views || {}) as viewName, idx (idx)}
         <NavItem
           indentLevel={1}
-          icon="ri-eye-line"
+          icon="Remove"
           text={viewName}
           selected={selectedView === viewName}
-          on:click={() => onClickView(table, viewName)}
-        >
+          on:click={() => onClickView(table, viewName)}>
           <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }}
-          />
+            view={{ name: viewName, ...table.views[viewName] }} />
         </NavItem>
       {/each}
     {/each}
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
index 929afd2ad6..1bd9798fdb 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte
@@ -1,40 +1,30 @@
 <script>
   import { goto } from "@roxi/routify"
   import { views } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
-  import { Icon, Popover, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import {
+    notifications,
+    Icon,
+    Input,
+    ActionMenu,
+    MenuItem,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
 
   export let view
 
-  let anchor
-  let dropdown
-  let editing
+  let editorModal
+  let confirmDeleteDialogue
   let originalName = view.name
   let confirmDeleteDialog
 
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown.hide()
-    editing = false
-  }
-
-  function showDelete() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
   async function save() {
     await views.save({
       originalName,
       ...view,
     })
     notifications.success("View renamed successfully")
-    hideEditor()
   }
 
   async function deleteView() {
@@ -46,69 +36,21 @@
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+<ActionMenu>
+  <div slot="control" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <Popover align="left" {anchor} bind:this={dropdown}>
-    {#if editing}
-      <div class="actions">
-        <h5>Edit View</h5>
-        <Input label="View Name" thin bind:value={view.name} />
-        <footer>
-          <Button secondary on:click={hideEditor}>Cancel</Button>
-          <Button primary on:click={save}>Save</Button>
-        </footer>
-      </div>
-    {:else}
-      <DropdownContainer>
-        <DropdownItem
-          icon="ri-edit-line"
-          data-cy="edit-view"
-          title="Edit"
-          on:click={showEditor}
-        />
-        <DropdownItem
-          icon="ri-delete-bin-line"
-          title="Delete"
-          data-cy="delete-view"
-          on:click={showDelete}
-        />
-      </DropdownContainer>
-    {/if}
-  </Popover>
-</div>
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+</ActionMenu>
+<Modal bind:this={editorModal}>
+  <ModalContent title="Edit View" onConfirm={save} confirmText="Save">
+    <Input label="View Name" thin bind:value={view.name} />
+  </ModalContent>
+</Modal>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
   okText="Delete View"
   onOk={deleteView}
-  title="Confirm Deletion"
-/>
-
-<style>
-  div.icon {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
-</style>
+  title="Confirm Deletion" />
diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 27a7517fce..33a1d86b88 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalContent } from "@budibase/bbui"
+  import { Modal, ModalContent, Body } from "@budibase/bbui"
 
   export let title = ""
   export let body = ""
@@ -20,15 +20,9 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <div class="body">
+    <Body size="S">
       {body}
       <slot />
-    </div>
+    </Body>
   </ModalContent>
 </Modal>
-
-<style>
-  .body {
-    font-size: var(--font-size-s);
-  }
-</style>

From 6a11c998edb8cb3564da90f5ce0bfdbd7841e357 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Apr 2021 14:00:39 +0100
Subject: [PATCH 5/5] Fix confirmation dialogue size

---
 packages/builder/src/components/common/ConfirmDialog.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte
index 33a1d86b88..526a5c6f68 100644
--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@@ -20,7 +20,7 @@
 
 <Modal bind:this={modal} on:hide={onCancel}>
   <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <Body size="S">
+    <Body s>
       {body}
       <slot />
     </Body>