replace remix

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Input } from "@budibase/bbui"
+  import { Icon, Button, Input } from "@budibase/bbui"
 
   export let defaults
   export let object = defaults || {}
@@ -28,7 +28,7 @@
     <Input placeholder="Key" bind:value={field.name} />
     <Input placeholder="Value" bind:value={field.value} />
     {#if !readOnly}
-      <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
+      <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
     {/if}
   {/each}
 </div>

packages/builder/src/components/integration/QueryParameterBuilder.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
+  import { Icon, Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -67,9 +67,7 @@
           value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
           {bindings} />
       {:else}
-        <i
-          class="ri-close-circle-line delete"
-          on:click={() => deleteQueryParameter(idx)} />
+        <Icon hoverable name="Close" on:click={() => deleteQueryParameter(idx)} />
       {/if}
     {/each}
   </div>

packages/builder/src/components/integration/QueryViewer.svelte

@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import {
+    Icon,
     Select,
     Button,
     Body,
@@ -9,7 +10,7 @@
     Heading,
     Spacer,
     Tabs,
-    Tab
+    Tab,
   } from "@budibase/bbui"
   import { notifications, Divider } from "@budibase/bbui"
   import api from "builderStore/api"
@@ -31,7 +32,7 @@
     { label: "Datetime", value: "DATETIME" },
   ]
 
-  $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
+  $: datasource = $datasources.list.find((ds) => ds._id === query.datasourceId)
   $: query.schema = fields.reduce(
     (acc, next) => ({
       ...acc,
@@ -87,7 +88,7 @@
 
       // Assume all the fields are strings and create a basic schema from the
       // unique fields returned by the server
-      fields = json.schemaFields.map(field => ({
+      fields = json.schemaFields.map((field) => ({
         name: field,
         type: "STRING",
       }))
@@ -129,7 +130,9 @@
       <Select
         bind:value={query.queryVerb}
         options={Object.keys(queryConfig)}
-        getOptionLabel={verb => queryConfig[verb]?.displayName || capitalise(verb)} />
+        getOptionLabel={(verb) =>
+          queryConfig[verb]?.displayName || capitalise(verb)}
+      />
     </div>
     <Spacer extraLarge />
     <Divider />
@@ -152,7 +155,8 @@
         {query}
         height={300}
         schema={queryConfig[query.queryVerb]}
-        bind:parameters />
+        bind:parameters
+      />
       <Spacer extraLarge />
       <Divider />
       <Spacer extraLarge />
@@ -163,7 +167,8 @@
             secondary
             thin
             disabled={data.length === 0 || !query.name}
-            on:click={saveQuery}>
+            on:click={saveQuery}
+          >
             Save Query
           </Button>
           <Spacer medium />
@@ -195,9 +200,7 @@
                 <div class="field">
                   <Input placeholder="Field Name" bind:value={field.name} />
                   <Select bind:value={field.type} options={typeOptions} />
-                  <i
-                    class="ri-close-circle-line delete"
-                    on:click={() => deleteField(idx)} />
+                  <Icon name="bleClose" on:click={() => deleteField(idx)} />
                 </div>
               {/each}
               <Spacer extraLarge />

packages/builder/src/components/settings/ThemeEditorDropdown.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Label, Popover } from "@budibase/bbui"
+  import { Icon, Label, Popover } from "@budibase/bbui"
   import ThemeEditor from "./ThemeEditor.svelte"
 
   let anchor
@@ -7,7 +7,7 @@
 </script>
 
 <div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
-  <i class="ri-paint-fill" />
+  <Icon hoverable name="ColorFill" />
 </div>
 <div class="dropdown">
   <Popover bind:this={popover} {anchor} align="right">
@@ -22,11 +22,6 @@
   .dropdown {
     z-index: 2;
   }
-
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
@@ -40,10 +35,6 @@
     height: 24px;
     width: 24px;
   }
-  .topnavitemright:hover i {
-    color: var(--ink);
-  }
-
   .content {
     padding: var(--spacing-xl);
   }