more remix replacements

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
   import WebhookDisplay from "./WebhookDisplay.svelte"
@@ -41,28 +42,30 @@
   title="Webhook Setup"
   confirmText="Finished"
   showConfirmButton={finished}
-  cancelText="Skip">
+  cancelText="Skip"
+>
   <p>
     Webhooks are for receiving data. To make them easier please use the URL
     shown below and send a
     <code>POST</code>
-    request to it from your other application. If you're unable to do this now
-    then you can skip this step, however we will not be able to configure
-    bindings for your later actions!
+    request to it from your other application. If you're unable to do this now then
+    you can skip this step, however we will not be able to configure bindings for
+    your later actions!
   </p>
   <WebhookDisplay value={schemaURL} />
   {#if finished}
     <p class="finished-text">
       Request received! We found
       {propCount}
-      bindable value{propCount > 1 ? 's' : ''}.
+      bindable value{propCount > 1 ? "s" : ""}.
     </p>
   {/if}
   <a
     slot="footer"
     target="_blank"
-    href="https://docs.budibase.com/automate/steps/triggers">
-    <i class="ri-information-line" />
+    href="https://docs.budibase.com/automate/steps/triggers"
+  >
+    <Icon name="InfoOutline" />
     <span>Learn about webhooks</span>
   </a>
 </ModalContent>
@@ -78,11 +81,7 @@
   }
   a span {
     text-decoration: underline;
-  }
-  i {
-    font-size: 20px;
-    margin-right: var(--spacing-m);
-    text-decoration: none;
+    margin-left: var(--spectrum-alias-item-padding-s);
   }
   p {
     margin: 0;

packages/builder/src/components/feedback/FeedbackNavLink.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover } from "@budibase/bbui"
+  import { Icon, Popover } from "@budibase/bbui"
   import { store } from "builderStore"
   import { onMount } from "svelte"
 
@@ -13,7 +13,7 @@
 
   onMount(() => {
     const interval = setInterval(() => {
-      store.update(state => {
+      store.update((state) => {
         state.highlightFeedbackIcon = analytics.highlightFeedbackIcon()
         return state
       })
@@ -23,7 +23,7 @@
 </script>
 
 <div class="container" bind:this={iconContainer} on:click={popover.show}>
-  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
+  <Icon hoverable name="Feedback" />
 </div>
 <div class="iframe">
   <Popover bind:this={popover} anchor={iconContainer} align="right">
@@ -32,15 +32,6 @@
 </div>
 
 <style>
-  i {
-    font-size: 18px;
-    color: var(--grey-7);
-  }
-  i.highlight {
-    color: var(--blue);
-    filter: drop-shadow(0 0 20px var(--blue));
-  }
-
   .container {
     cursor: pointer;
     color: var(--grey-7);
@@ -54,9 +45,6 @@
     height: 24px;
     width: 24px;
   }
-  .container:hover i {
-    color: var(--ink);
-  }
 
   .iframe :global(.menu-container) {
     background-color: white;