Update binding panel icons to use new styles

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -3,6 +3,7 @@
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
+  import { tick } from "svelte"
 
   export let addHelper
   export let addBinding
@@ -12,6 +13,7 @@
   export let context = null
 
   let search = ""
+  let searching = false
   let popover
   let popoverAnchor
   let hoverTarget
@@ -112,6 +114,17 @@
       hideTimeout = null
     }
   }
+
+  const startSearching = async () => {
+    searching = true
+    search = ""
+  }
+
+  const stopSearching = e => {
+    e.stopPropagation()
+    searching = false
+    search = ""
+  }
 </script>
 
 <Popover
@@ -158,25 +171,34 @@
 
     {#if !selectedCategory}
       <div class="header">
-        <span class="search-input">
+        {#if searching}
-          <Input
+          <div class="search-input">
-            placeholder={"Search for bindings"}
+            <Input
-            autocomplete="off"
+              placeholder="Search for bindings"
-            bind:value={search}
+              autocomplete="off"
+              bind:value={search}
+              autofocus
+            />
+          </div>
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            newStyles
+            on:click={stopSearching}
           />
-        </span>
+        {:else}
-        <span
+          <div class="title">Bindings</div>
-          class="search-input-icon"
+          <Icon
-          on:click={() => {
+            size="S"
-            search = null
+            name="Search"
-          }}
+            hoverable
-          class:searching={search}
+            newStyles
-        >
+            on:click={startSearching}
-          <Icon size="S" name={search ? "Close" : "Search"} />
+          />
-        </span>
+        {/if}
       </div>
     {/if}
-
     {#if !selectedCategory && !search}
       <ul class="category-list">
         {#each categoryNames as categoryName}
@@ -281,18 +303,15 @@
     background: var(--background);
     z-index: 1;
   }
-
   .header :global(input) {
     border: none;
     border-radius: 0;
     background: none;
     padding: 0;
   }
-  .search-input {
+  .search-input,
-    flex: 1;
+  .title {
-  }
+    flex: 1 1 auto;
-  .search-input-icon.searching {
-    cursor: pointer;
   }
 
   ul.category-list {

packages/builder/src/components/common/bindings/SnippetSidePanel.svelte

@@ -89,11 +89,29 @@
             bind:value={search}
           />
         </div>
-        <Icon size="S" name="Close" hoverable on:click={stopSearching} />
+        <Icon
+          size="S"
+          name="Close"
+          hoverable
+          newStyles
+          on:click={stopSearching}
+        />
       {:else}
         <div class="title">Snippets</div>
-        <Icon size="S" name="Search" hoverable on:click={startSearching} />
+        <Icon
-        <Icon size="S" name="Add" hoverable on:click={createSnippet} />
+          size="S"
+          name="Search"
+          hoverable
+          newStyles
+          on:click={startSearching}
+        />
+        <Icon
+          size="S"
+          name="Add"
+          hoverable
+          newStyles
+          on:click={createSnippet}
+        />
       {/if}
     </div>
     <div class="snippet-list">
@@ -108,9 +126,9 @@
           <Icon
             name="Edit"
             hoverable
+            newStyles
             size="S"
             on:click={e => editSnippet(e, snippet)}
-            color="var(--spectrum-global-color-gray-700)"
           />
         </div>
       {/each}