references

front/js/svelte/content/tools/AppliedFilter.svelte

@@ -1,6 +1,7 @@
 <script>
     import {createEventDispatcher, getContext} from "svelte";
     import {previewTitle} from "../../records/Preview";
+    import Icon from "../../common/Icon.svelte";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -73,8 +74,8 @@
     }
 </script>
 
-<span class="applied-filter d-inline-block border border-primary rounded lx-small-text  me-1 px-2 py-1">
-    <div class="d-flex align-items-center justify-content-center">
+<span class="applied-filter">
+
         {#if filter.isReference && filterRecord}
               {filter.label} is {previewTitle(channel.schemas, filterRecord)}
         {:else}
@@ -83,20 +84,9 @@
         <button
                 on:click|preventDefault={() => removeFilter(key)}
                 type="button"
-                class="btn-close btn-close ms-1"
+                class="button-text"
                 aria-label="Close"
-        />
-    </div>
+        ><Icon width={12} height={12}  icon="close"></Icon></button>
 </span>
 
-<style>
-    .applied-filter {
-        background-color: #fff;
-        line-height: 22px;
-    }
 
-    .applied-filter:hover {
-        opacity: .8;
-        background-color: #eee;
-    }
-</style>

front/js/svelte/content/tools/Tools.svelte

@@ -130,7 +130,7 @@
 
 
 {#if Object.entries(filter).length > 0}
-    <div class=" d-flex mb-3">
+    <div class="applied-filters">
         {#each Object.entries(filter) as [k, v]}
             <AppliedFilter
                     {schema}