From 6696f1007a9cb56dd613eb299743ea642a90be14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 10:07:33 +0200
Subject: [PATCH 1/9] builder data side panel now uses new tabs component

---
 .../builder/[application]/data/_layout.svelte | 59 ++++++++++---------
 .../data/datasource/index.svelte              |  2 +-
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index 5fe0b03780..a7dd60a93a 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { isActive, goto } from "@roxi/routify"
-  import { Switcher, Modal } from "@budibase/bbui"
+  import { Switcher, Modal, Tabs, Tab } from "@budibase/bbui"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
   import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@@ -17,11 +17,11 @@
     },
   ]
 
-  let tab = $isActive("./datasource") ? "datasource" : "table"
+  let selected = $isActive("./datasource") ? "External" : "Internal"
 
   function selectFirstTableOrSource({ detail }) {
-    const type = detail.heading.key
-    if (type === "datasource") {
+    const { key } = tabs.find(t => t.title === detail)
+    if (key === "datasource") {
       $goto("./datasource")
     } else {
       $goto("./table")
@@ -34,28 +34,30 @@
 <!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
-    <Switcher
-      headings={tabs}
-      bind:value={tab}
-      on:change={selectFirstTableOrSource}>
-      <div class="title">
-        <i
-          data-cy={`new-${tab}`}
-          class="ri-add-circle-fill"
-          on:click={modal.show} />
-      </div>
-      {#if tab === 'table'}
-        <TableNavigator />
-        <Modal bind:this={modal}>
-          <CreateTableModal />
-        </Modal>
-      {:else if tab === 'datasource'}
-        <DatasourceNavigator />
-        <Modal bind:this={modal}>
-          <CreateDatasourceModal />
-        </Modal>
-      {/if}
-    </Switcher>
+    <Tabs {selected} on:select={selectFirstTableOrSource}>
+      <Tab title="Internal">
+        <div class="tab-content-padding">
+          <TableNavigator />
+          <Modal bind:this={modal}>
+            <CreateTableModal />
+          </Modal>
+        </div>
+      </Tab>
+      <Tab title="External">
+        <div class="tab-content-padding">
+          <DatasourceNavigator />
+          <Modal bind:this={modal}>
+            <CreateDatasourceModal />
+          </Modal>
+        </div>
+      </Tab>
+    </Tabs>
+    <div class="title">
+      <i
+        data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}
+        class="ri-add-circle-fill"
+        on:click={modal.show} />
+    </div>
   </div>
   <div class="content">
     <slot />
@@ -84,16 +86,17 @@
   .content :global(> span) {
     display: contents;
   }
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
 
   .nav {
     overflow-y: auto;
     background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     position: relative;
     border-right: var(--border-light);
   }
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
index fb14c6d0a1..6667e4eeff 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
@@ -5,7 +5,7 @@
 
   onMount(async () => {
     // navigate to first table in list, if not already selected
-    $datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`)
+    $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
   })
 </script>
 

From 2255fdad64386de566eef75b61b539f38b5d6ce1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 11:18:39 +0200
Subject: [PATCH 2/9] adds tab to left sidebar on design section

---
 .../FrontendNavigatePane.svelte               | 85 ++++++++++---------
 .../builder/[application]/data/_layout.svelte |  2 +-
 .../design/[assetType]/_layout.svelte         |  2 +-
 3 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 70e2306dcf..6f4872dec4 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -13,7 +13,7 @@
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
+  import { Modal, Switcher, Select, Input, Tabs, Tab } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -28,13 +28,11 @@
 
   let modal
   let routes = {}
-  $: tab = $params.assetType
+  $: selected = tabs.find(t => t.key === $params.assetType).title
 
-  const navigate = ({ detail }) => {
-    if (!detail) {
-      return
-    }
-    $goto(`../${detail.heading.key}`)
+  const navigate = ({detail}) => {
+    const { key } = tabs.find(t => t.title === detail)
+    $goto(`../${key}`)
   }
 
   const updateAccessRole = event => {
@@ -68,33 +66,30 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab} on:change={navigate}>
-    {#if tab === FrontendTypes.SCREEN}
-      <i
-        on:click={modal.show}
-        data-cy="new-screen"
-        class="ri-add-circle-fill" />
-      <div class="role-select">
-        <Select
-          extraThin
-          secondary
-          on:change={updateAccessRole}
-          value={$selectedAccessRole}
-          label="Filter by Access">
-          {#each $roles as role}
-            <option value={role._id}>{role.name}</option>
-          {/each}
-        </Select>
-        <div class="search-screens">
-          <Input
+  <Tabs {selected} on:select={navigate}>
+    <Tab title="Screens">
+      <div class="tab-content-padding">
+        <div class="role-select">
+          <Select
             extraThin
-            placeholder="Enter a route to search"
-            label="Search Screens"
-            bind:value={$screenSearchString} />
-          <i
-            class="ri-close-line"
-            on:click={() => ($screenSearchString = null)} />
-        </div>
+            secondary
+            on:change={updateAccessRole}
+            value={$selectedAccessRole}
+            label="Filter by Access">
+            {#each $roles as role}
+              <option value={role._id}>{role.name}</option>
+            {/each}
+          </Select>
+          <div class="search-screens">
+            <Input
+              extraThin
+              placeholder="Enter a route to search"
+              label="Search Screens"
+              bind:value={$screenSearchString} />
+            <i
+              class="ri-close-line"
+              on:click={() => ($screenSearchString = null)} />
+          </div>
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -102,8 +97,11 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === FrontendTypes.LAYOUT}
-      <i
+      </div>
+    </Tab>
+    <Tab title="Layouts">
+      <div class="tab-content-padding">
+        <i
         on:click={modal.show}
         data-cy="new-layout"
         class="ri-add-circle-fill" />
@@ -113,8 +111,13 @@
       <Modal bind:this={modal}>
         <NewLayoutModal />
       </Modal>
-    {/if}
-  </Switcher>
+      </div>
+    </Tab>
+  </Tabs>
+  <i
+    on:click={modal.show}
+    data-cy="new-screen"
+    class="ri-add-circle-fill" />
 </div>
 
 <style>
@@ -128,8 +131,8 @@
   .title i {
     font-size: 20px;
     position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--spacing-l);
+    right: var(--spacing-l);
   }
   .title i:hover {
     cursor: pointer;
@@ -145,6 +148,10 @@
     gap: var(--spacing-m);
   }
 
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
+
   .search-screens {
     position: relative;
   }
diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index a7dd60a93a..7d7fa5c386 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -105,7 +105,7 @@
     font-size: 20px;
     position: absolute;
     top: var(--spacing-l);
-    right: var(--spacing-xl);
+    right: var(--spacing-l);
   }
 
   i:hover {
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index b58c694e25..2852101a2c 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -177,7 +177,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
+    padding: 0 0 60px 0;
     overflow-y: auto;
     border-right: var(--border-light);
   }

From ef74a2fe989e812562d50801df88816d4ad7787e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 11:28:53 +0200
Subject: [PATCH 3/9] Component panel now uses Tabs component

---
 .../FrontendNavigatePane.svelte               |  1 -
 .../PropertiesPanel/PropertiesPanel.svelte    | 46 +++++++++----------
 .../design/[assetType]/_layout.svelte         |  2 -
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 6f4872dec4..5bf448ec3d 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -27,7 +27,6 @@
   ]
 
   let modal
-  let routes = {}
   $: selected = tabs.find(t => t.key === $params.assetType).title
 
   const navigate = ({detail}) => {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 38f6b521fa..26e898c8d0 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
+  import { Tabs, Tab } from '@budibase/bbui'
   import { FrontendTypes } from "constants"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -44,47 +45,46 @@
   }
 </script>
 
-<CategoryTab
-  onClick={category => (selectedCategory = category)}
-  {categories}
-  {selectedCategory} />
-
-{#if definition && definition.name}
-  <div class="instance-name">{definition.name}</div>
-{/if}
-
-<div class="component-props-container">
-  {#if selectedCategory.value === 'design'}
-    <DesignView
+<Tabs selected="Settings">
+  <Tab title="Settings">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <DesignView
       componentInstance={$selectedComponent}
       componentDefinition={definition}
       {onStyleChanged}
       {onCustomStyleChanged}
       {onUpdateTransition}
       {onResetStyles} />
-  {:else if selectedCategory.value === 'settings'}
-    <SettingsView
+    </div>
+  </Tab>
+  <Tab title="Design">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <SettingsView
       componentInstance={$selectedComponent}
       componentDefinition={definition}
       {showDisplayName}
       onChange={store.actions.components.updateProp}
       onScreenPropChange={setAssetProps}
       assetInstance={$store.currentView !== 'component' && $currentAsset} />
-  {/if}
-</div>
+    </div>
+  </Tab>
+</Tabs>
 
 <style>
-  .component-props-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 20px;
+
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
   }
 
   .instance-name {
     font-size: var(--font-size-xs);
+    margin-bottom: var(--spacing-l);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index 2852101a2c..7204f6afb1 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -206,8 +206,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl);
     border-left: var(--border-light);
   }
 </style>

From 3ccc0a39ff34ef6aa09c19adee7436d13d23cff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 11:49:08 +0200
Subject: [PATCH 4/9] Automations panel now uses the tabs component

---
 .../AutomationPanel/AutomationPanel.svelte    | 40 ++++++++++++-------
 .../[application]/automate/_layout.svelte     |  3 --
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 7d56867d03..2dcb7ab211 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,33 +1,45 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal } from "@budibase/bbui"
+  import { Modal, Tabs, Tab } from "@budibase/bbui"
   let modal
 </script>
 
 <div class="title">
-  <h1>Automations</h1>
+  <Tabs selected="Automations">
+    <Tab title="Automations">
+      <div class="tab-content-padding">
+        <AutomationList />
+        <Modal bind:this={modal}>
+          <CreateAutomationModal />
+        </Modal>
+      </div>
+    </Tab>
+  </Tabs>
   <i
     on:click={modal.show}
     data-cy="new-automation"
     class="ri-add-circle-fill" />
 </div>
-<AutomationList />
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>
 
 <style>
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
+
+  i {
+    font-size: 20px;
+    position: absolute;
+    top: var(--spacing-l);
+    right: var(--spacing-l);
+  }
+
   .title {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
   }
   .title i {
     font-size: 20px;
diff --git a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
index 166c834160..440ebe461f 100644
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
@@ -28,13 +28,10 @@
 
   .nav {
     overflow-y: auto;
-    background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     border-right: var(--border-light);
   }
 

From 399bd1497bdfa47de9da81e27ec5b229240e99bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 12:17:20 +0200
Subject: [PATCH 5/9] reverses tab order mistake in properties panel

---
 .../PropertiesPanel/PropertiesPanel.svelte    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 26e898c8d0..9b33e04056 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -47,20 +47,6 @@
 
 <Tabs selected="Settings">
   <Tab title="Settings">
-    <div class="tab-content-padding">
-      {#if definition && definition.name}
-        <div class="instance-name">{definition.name}</div>
-      {/if}
-      <DesignView
-      componentInstance={$selectedComponent}
-      componentDefinition={definition}
-      {onStyleChanged}
-      {onCustomStyleChanged}
-      {onUpdateTransition}
-      {onResetStyles} />
-    </div>
-  </Tab>
-  <Tab title="Design">
     <div class="tab-content-padding">
       {#if definition && definition.name}
         <div class="instance-name">{definition.name}</div>
@@ -74,6 +60,20 @@
       assetInstance={$store.currentView !== 'component' && $currentAsset} />
     </div>
   </Tab>
+  <Tab title="Design">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <DesignView
+      componentInstance={$selectedComponent}
+      componentDefinition={definition}
+      {onStyleChanged}
+      {onCustomStyleChanged}
+      {onUpdateTransition}
+      {onResetStyles} />
+    </div>
+  </Tab>
 </Tabs>
 
 <style>

From d761a4ebfed70e2d212bac03a52134afbcde88bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 12:24:06 +0200
Subject: [PATCH 6/9] Adds Icon component to bbui

---
 packages/bbui/src/Icon/Icon.svelte            | 19 +++++++++++++++++++
 packages/bbui/src/index.js                    |  2 +-
 .../src/components/start/AppCard.svelte       |  4 ++--
 .../start/BuilderSettingsButton.svelte        |  2 +-
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 packages/bbui/src/Icon/Icon.svelte

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
new file mode 100644
index 0000000000..ad5faf5ae8
--- /dev/null
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -0,0 +1,19 @@
+<script context="module">
+    export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
+</script>
+
+<script>
+    export let direction = "n"
+    export let name = "Add"
+    export let hidden = false
+    export let s = false
+    export let m = false;
+    export let l = false;
+    export let xl = false
+
+    $: rotation = directions.indexOf(direction) * 45
+</script>
+
+<svg on:click class:spectrum-Icon--sizeS={s} class:spectrum-Icon--sizeM={m} class:spectrum-Icon--sizeL={l} class:spectrum-Icon--sizeXL={xl} class="spectrum-Icon" focusable="false" aria-hidden={hidden} aria-label="{name}" style={`transform: rotate(${rotation}deg)`}>
+    <use xlink:href="#spectrum-icon-18-{name}" />
+</svg>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index f5b2987ad3..a84c2b1ad5 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -12,7 +12,7 @@ export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
 export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
-export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
+export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as Radio } from "./Form/Radio.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 9478d16315..4f8eae4902 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,6 +1,6 @@
 <script>  
   import { goto } from "@roxi/routify"
-  import { ActionButton, Heading, Spacer } from "@budibase/bbui"
+  import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
   import { notifications } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import download from "downloadjs"
@@ -36,7 +36,7 @@
     </ActionButton>
     {#if appExportLoading}
       <Spinner size="10" />
-    {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
+    {:else}<ActionButton icon="Download" quiet />{/if}
   </div>
 </div>
 
diff --git a/packages/builder/src/components/start/BuilderSettingsButton.svelte b/packages/builder/src/components/start/BuilderSettingsButton.svelte
index 9bf50ab25e..45712ad1b4 100644
--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsButton.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Button overBackground quiet icon="Settings" text on:click={modal.show}>
+  <Button primary quiet icon="Settings" text on:click={modal.show}>
     Settings
   </Button>
 </div>

From 98ad7a745a08635cf066eb2880af3004d2c71894 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 12:40:34 +0200
Subject: [PATCH 7/9] Convert main nav to use an ActionGroup

---
 .../bbui/src/ActionButton/ActionButton.svelte    |  8 +++++---
 .../pages/builder/[application]/_reset.svelte    | 16 +++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index df087dd627..73eb5e4a71 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -59,7 +59,9 @@
     {/if}
 </button>
   
-  <style>
-  
-  </style>
+<style>
+    span {
+        text-transform: capitalize;
+    }
+</style>
   
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index 6d33137170..7d617dfc11 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -1,7 +1,7 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles } from "stores/backend"
-  import { Button } from "@budibase/bbui"
+  import { Button, ActionGroup, ActionButton, Icon } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
   import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
@@ -60,14 +60,11 @@
         </button>
 
         <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
-        {/each}
+        <ActionGroup>
+          {#each $layout.children as { path, title }}
+            <ActionButton quiet selected={$isActive(path)} on:click={topItemNavigate(path)}>{title}</ActionButton>
+          {/each}
+        </ActionGroup>
       </div>
       <div class="toprightnav">
         <ThemeEditorDropdown />
@@ -76,6 +73,7 @@
           <a
             target="_blank"
             href="https://github.com/Budibase/budibase/discussions">
+            <Icon />
             <i class="ri-github-fill" />
           </a>
         </div>

From a6f91704c9ac253b5130f62c9dde7a0c50866650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 12:42:32 +0200
Subject: [PATCH 8/9] fixes menu item placement issue

---
 packages/builder/src/pages/builder/[application]/_reset.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index 7d617dfc11..1f70a9700c 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -142,7 +142,7 @@
 
   .topleftnav {
     display: flex;
-    align-items: center;
+    place-items: center;
   }
 
   .topnavitem {

From 641b6022dea444ad9f448ad6b43902238efb1fb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 13:02:45 +0200
Subject: [PATCH 9/9] fix navigation error in automation section

---
 .../src/pages/builder/[application]/automate/index.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/[application]/automate/index.svelte b/packages/builder/src/pages/builder/[application]/automate/index.svelte
index 4c6d12ffad..d48bd36e59 100644
--- a/packages/builder/src/pages/builder/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/index.svelte
@@ -11,7 +11,7 @@
       (!$automationStore.selectedAutomation ||
         !$automationStore.selectedAutomation?.automation?._id)
     ) {
-      $goto(`../${$automationStore.automations[0]._id}`)
+      $goto(`./${$automationStore.automations[0]._id}`)
     }
   })
 </script>