From 8820edd1bcf342a7fd36588c27e24e5c7c68c84a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 11 Mar 2021 15:53:31 +0000
Subject: [PATCH] Add clear icon to screen search field

---
 .../FrontendNavigatePane.svelte               | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index a64bf9f0ee..e235e3b254 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -85,11 +85,16 @@
             <option value={role._id}>{role.name}</option>
           {/each}
         </Select>
-        <Input
-          extraThin
-          placeholder="Enter a route to search"
-          label="Search Screens"
-          bind:value={$screenSearchString} />
+        <div class="search-screens">
+          <Input
+            extraThin
+            placeholder="Enter a route to search"
+            label="Search Screens"
+            bind:value={$screenSearchString} />
+          <i
+            class="ri-close-line"
+            on:click={() => ($screenSearchString = null)} />
+        </div>
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -139,4 +144,23 @@
     margin-bottom: var(--spacing-m);
     gap: var(--spacing-m);
   }
+
+  .search-screens {
+    position: relative;
+  }
+  .search-screens i {
+    right: 2px;
+    bottom: 2px;
+    position: absolute;
+    box-sizing: border-box;
+    padding: var(--spacing-s);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+    color: var(--grey-7);
+    font-size: 14px;
+    line-height: 15px;
+    top: auto;
+  }
 </style>