switch remix icons to spectrum in panels

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Tabs, Tab } from "@budibase/bbui"
+  import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
   let modal
 </script>
 
@@ -16,22 +16,20 @@
       </div>
     </Tab>
   </Tabs>
-  <i
-    on:click={modal.show}
-    data-cy="new-automation"
-    class="ri-add-circle-fill" />
+  <div class="add-button">
+    <Icon hoverable name="AddCircle" on:click={modal.show} />
+  </div>
 </div>
 
 <style>
   .tab-content-padding {
-    padding: 0 var(--spacing-s);
+    padding: 0 var(--spectrum-alias-item-padding-m);
   }
-
-  i {
-    font-size: 20px;
+  .add-button {
     position: absolute;
-    top: var(--spacing-l);
-    right: var(--spacing-l);
+    top: var(--spectrum-alias-item-padding-l);
+    bottom: 0;
+    right: var(--spectrum-alias-item-padding-l);
   }
 
   .title {

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -12,7 +12,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, Select, Search, Tabs, Tab } from "@budibase/bbui"
+  import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -26,21 +26,21 @@
   ]
 
   let modal
-  $: selected = tabs.find(t => t.key === $params.assetType).title
+  $: selected = tabs.find((t) => t.key === $params.assetType).title
 
   const navigate = ({ detail }) => {
-    const { key } = tabs.find(t => t.title === detail)
+    const { key } = tabs.find((t) => t.title === detail)
     $goto(`../${key}`)
   }
 
-  const updateAccessRole = event => {
+  const updateAccessRole = (event) => {
     const role = event.detail
 
     // Select a valid screen with this new role - otherwise we'll not be
     // able to change role at all because ComponentNavigationTree will kick us
     // back the current role again because the same screen ID is still selected
     const firstValidScreenId = $allScreens.find(
-      screen => screen.routing.roleId === role
+      (screen) => screen.routing.roleId === role
     )?._id
     if (firstValidScreenId) {
       store.actions.screens.select(firstValidScreenId)
@@ -49,7 +49,7 @@
     // Otherwise clear the selected screen ID so that the first new valid screen
     // can be selected by ComponentNavigationTree
     else {
-      store.update(state => {
+      store.update((state) => {
         state.selectedScreenId = null
         return state
       })
@@ -72,13 +72,15 @@
             on:change={updateAccessRole}
             value={$selectedAccessRole}
             label="Filter by Access"
-            getOptionLabel={role => role.name}
-            getOptionValue={role => role._id}
-            options={$roles} />
+            getOptionLabel={(role) => role.name}
+            getOptionValue={(role) => role._id}
+            options={$roles}
+          />
           <Search
             placeholder="Enter a route to search"
             label="Search Screens"
-            bind:value={$screenSearchString} />
+            bind:value={$screenSearchString}
+          />
         </div>
         <div class="nav-items-container">
           <ComponentNavigationTree />
@@ -93,7 +95,8 @@
         <i
           on:click={modal.show}
           data-cy="new-layout"
-          class="ri-add-circle-fill" />
+          class="ri-add-circle-fill"
+        />
         {#each $store.layouts as layout, idx (layout._id)}
           <Layout {layout} border={idx > 0} />
         {/each}
@@ -103,7 +106,9 @@
       </div>
     </Tab>
   </Tabs>
-  <i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
+  <div class="add-button">
+    <Icon hoverable name="AddCircle" on:click={modal.show} />
+  </div>
 </div>
 
 <style>
@@ -114,15 +119,11 @@
     align-items: stretch;
     position: relative;
   }
-  .title i {
-    font-size: 20px;
+  .add-button {
     position: absolute;
-    top: var(--spacing-l);
-    right: var(--spacing-l);
-  }
-  .title i:hover {
-    cursor: pointer;
-    color: var(--blue);
+    top: var(--spectrum-alias-item-padding-l);
+    bottom: 0;
+    right: var(--spectrum-alias-item-padding-l);
   }
 
   .role-select {
@@ -135,25 +136,6 @@
   }
 
   .tab-content-padding {
-    padding: 0 var(--spacing-s);
-  }
-
-  .search-screens {
-    position: relative;
-  }
-  .search-screens i {
-    right: 2px;
-    bottom: 2px;
-    position: absolute;
-    box-sizing: border-box;
-    padding: var(--spacing-s);
-    border-left: 1px solid var(--grey-4);
-    background-color: var(--grey-2);
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
-    color: var(--grey-7);
-    font-size: 14px;
-    line-height: 15px;
-    top: auto;
+    padding: 0 var(--spectrum-alias-item-padding-m);
   }
 </style>

packages/builder/src/pages/builder/[application]/data/_layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import { isActive, goto } from "@roxi/routify"
-  import { Modal, Tabs, Tab } from "@budibase/bbui"
+  import { Icon, 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"
@@ -20,7 +20,7 @@
   let selected = $isActive("./datasource") ? "External" : "Internal"
 
   function selectFirstTableOrSource({ detail }) {
-    const { key } = tabs.find(t => t.title === detail)
+    const { key } = tabs.find((t) => t.title === detail)
     if (key === "datasource") {
       $goto("./datasource")
     } else {
@@ -52,11 +52,8 @@
         </div>
       </Tab>
     </Tabs>
-    <div class="title">
-      <i
-        data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}
-        class="ri-add-circle-fill"
-        on:click={modal.show} />
+    <div class="add-button" data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}>
+      <Icon hoverable name="AddCircle" on:click={modal.show} />
     </div>
   </div>
   <div class="content">
@@ -83,11 +80,8 @@
     gap: var(--spacing-l);
     background: var(--background);
   }
-  .content :global(> span) {
-    display: contents;
-  }
   .tab-content-padding {
-    padding: 0 var(--spacing-s);
+    padding: 0 var(--spectrum-alias-item-padding-m);
   }
 
   .nav {
@@ -101,11 +95,11 @@
     border-right: var(--border-light);
   }
 
-  i {
-    font-size: 20px;
+  .add-button {
     position: absolute;
-    top: var(--spacing-l);
-    right: var(--spacing-l);
+    top: var(--spectrum-alias-item-padding-l);
+    bottom: 0;
+    right: var(--spectrum-alias-item-padding-l);
   }
 
   i:hover {