replace more remix icons

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

@@ -3,8 +3,11 @@
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { Popover } from "@budibase/bbui"
+  import { Icon, Popover } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import {
+    DropdownContainer,
+    DropdownItem,
+  } from "components/common/Dropdowns"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let automation
@@ -31,14 +34,15 @@
 
 <div on:click|stopPropagation>
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+    <Icon s hoverable name="MoreSmallList" />
   </div>
   <Popover align="left" {anchor} bind:this={dropdown}>
     <DropdownContainer>
       <DropdownItem
         icon="ri-delete-bin-line"
         title="Delete"
-        on:click={showModal} />
+        on:click={showModal}
+      />
     </DropdownContainer>
   </Popover>
 </div>
@@ -46,7 +50,8 @@
   bind:this={confirmDeleteDialog}
   okText="Delete Automation"
   onOk={deleteAutomation}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete the automation
   <i>{automation.name}?</i>
   This action cannot be undone.

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -2,7 +2,7 @@
   import { goto } from "@roxi/routify"
   import { datasources } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { Popover } from "@budibase/bbui"
+  import { Icon, Popover } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -37,7 +37,7 @@
 
 <div on:click|stopPropagation>
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+    <Icon s hoverable name="MoreSmallList" />
   </div>
   <Popover align="left" {anchor} bind:this={dropdown}>
     <DropdownContainer>
@@ -45,7 +45,8 @@
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={showModal}
-        data-cy="delete-datasource" />
+        data-cy="delete-datasource"
+      />
     </DropdownContainer>
   </Popover>
 </div>
@@ -53,7 +54,8 @@
   bind:this={confirmDeleteDialog}
   okText="Delete Datasource"
   onOk={deleteDatasource}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete the datasource
   <i>{datasource.name}?</i>
   This action cannot be undone.
@@ -66,8 +68,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -1,6 +1,6 @@
 <script>
   import { notifications } from "@budibase/bbui"
-  import { Popover } from "@budibase/bbui"
+  import { Icon, Popover } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -28,7 +28,7 @@
 
 <div on:click|stopPropagation>
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+    <Icon s hoverable name="MoreSmallList" />
   </div>
   <Popover align="left" {anchor} bind:this={dropdown}>
     <DropdownContainer>
@@ -36,7 +36,8 @@
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={showModal}
-        data-cy="delete-datasource" />
+        data-cy="delete-datasource"
+      />
     </DropdownContainer>
   </Popover>
 </div>
@@ -44,7 +45,8 @@
   bind:this={confirmDeleteDialog}
   okText="Delete Query"
   onOk={deleteQuery}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete this query? This action cannot be undone.
 </ConfirmDialog>
 
@@ -55,8 +57,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -3,7 +3,7 @@
   import { store, allScreens } from "builderStore"
   import { tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { Popover, Button, Input } 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"
 
@@ -29,9 +29,11 @@
 
   function showModal() {
     const screens = $allScreens
-    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
+    templateScreens = screens.filter(
+      (screen) => screen.autoTableId === table._id
+    )
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
+      templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
     )
     hideEditor()
     confirmDeleteDialog.show()
@@ -66,7 +68,7 @@
 
 <div on:click|stopPropagation>
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+    <Icon s hoverable name="MoreSmallList" />
   </div>
   <Popover align="left" {anchor} bind:this={dropdown}>
     {#if editing}
@@ -77,7 +79,8 @@
           thin
           bind:value={table.name}
           on:input={checkValid}
-          {error} />
+          {error}
+        />
         <footer>
           <Button secondary on:click={hideEditor}>Cancel</Button>
           <Button primary disabled={error} on:click={save}>Save</Button>
@@ -89,12 +92,14 @@
           icon="ri-edit-line"
           data-cy="edit-table"
           title="Edit"
-          on:click={showEditor} />
+          on:click={showEditor}
+        />
         <DropdownItem
           icon="ri-delete-bin-line"
           title="Delete"
           on:click={showModal}
-          data-cy="delete-table" />
+          data-cy="delete-table"
+        />
       </DropdownContainer>
     {/if}
   </Popover>
@@ -103,7 +108,8 @@
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
   onOk={deleteTable}
-  title="Confirm Deletion">
+  title="Confirm Deletion"
+>
   Are you sure you wish to delete the table
   <i>{table.name}?</i>
   The following will also be deleted:
@@ -125,10 +131,6 @@
     align-items: center;
   }
 
-  div.icon i {
-    font-size: 16px;
-  }
-
   div.delete-items {
     margin-top: 10px;
     margin-bottom: 10px;

packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte

@@ -2,7 +2,7 @@
   import { goto } from "@roxi/routify"
   import { views } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { Popover, Button, Input } 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"
 
@@ -48,7 +48,7 @@
 
 <div on:click|stopPropagation>
   <div bind:this={anchor} class="icon" on:click={dropdown.show}>
-    <i class="ri-more-line" />
+    <Icon s hoverable name="MoreSmallList" />
   </div>
   <Popover align="left" {anchor} bind:this={dropdown}>
     {#if editing}
@@ -66,12 +66,14 @@
           icon="ri-edit-line"
           data-cy="edit-view"
           title="Edit"
-          on:click={showEditor} />
+          on:click={showEditor}
+        />
         <DropdownItem
           icon="ri-delete-bin-line"
           title="Delete"
           data-cy="delete-view"
-          on:click={showDelete} />
+          on:click={showDelete}
+        />
       </DropdownContainer>
     {/if}
   </Popover>
@@ -81,7 +83,8 @@
   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" />
+  title="Confirm Deletion"
+/>
 
 <style>
   div.icon {
@@ -91,10 +94,6 @@
     align-items: center;
   }
 
-  div.icon i {
-    font-size: 16px;
-  }
-
   .actions {
     padding: var(--spacing-xl);
     display: grid;