ui fix

src/lib/components/Searchbar.svelte

@@ -339,7 +339,7 @@
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   ><path
-                    fill="white"
+                    fill="currentColor"
                     d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
                   /></svg
                 >
@@ -443,11 +443,8 @@
   bind:checked={searchBarModalChecked}
 />
 
-<dialog id="searchBarModal" class="modal modal-bottom">
+<dialog id="searchBarModal" class="modal bg-[#000]/40 p-3">
-  <label
+  <label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
-    for="searchBarModal"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-[#000]/30"
-  ></label>
 
   <div
     class="z-999 modal-box overflow-hidden rounded-md shadow bg-white dark:bg-secondary border border-gray-300 dark:border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
@@ -482,7 +479,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 ><path
-                  fill="white"
+                  fill="currentColor"
                   d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
                 /></svg
               >
@@ -496,7 +493,7 @@
 
         <input
           id="modal-search"
-          class="rounded-md w-full bg-gray-300 dark:bg-secondary border border-gray-300 dark:border-gray-600 focus:ring-transparent placeholder-gray-600 dark:placeholder-gray-200 py-3 pl-10 pr-4"
+          class="focus:outline-none rounded-md w-full bg-gray-300 dark:bg-secondary border border-gray-300 dark:border-gray-600 focus:ring-transparent placeholder-gray-600 dark:placeholder-gray-200 py-3 pl-10 pr-4"
           type="search"
           placeholder="Company or stock symbol..."
           bind:value={inputValue}

src/routes/economic-calendar/+page.svelte

@@ -454,7 +454,7 @@
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
                       <div
-                        class="relative sticky z-40 focus:outline-hidden -top-1"
+                        class="relative sticky z-40 focus:outline-hidden -top-1 flex flex-row items-center justitfy-between p-3 bg-white dark:bg-default border-b border-gray-200"
                         tabindex="0"
                         role="menu"
                       >
@@ -462,10 +462,26 @@
                           bind:value={searchQuery}
                           on:input={handleInput}
                           autocomplete="off"
-                          class="absolute sticky w-full border-0 dark:bg-default border-b border-gray-200 focus:border-gray-200 focus:ring-0 placeholder-gray-500 dark:placeholder:text-gray-300"
+                          class="focus:outline-none text-sm absolute sticky w-full border-0 focus:border-gray-200 focus:ring-0 placeholder-gray-500 dark:placeholder:text-gray-300"
                           type="search"
                           placeholder="Search..."
                         />
+                        {#if searchQuery?.length > 0}
+                          <label
+                            class="cursor-pointer inline-block"
+                            on:click={() => (searchQuery = "")}
+                          >
+                            <svg
+                              class="w-5 h-5"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+                              /></svg
+                            >
+                          </label>
+                        {/if}
                       </div>
                       <DropdownMenu.Group>
                         {#each searchQuery.length > 0 ? testList : listOfRelevantCountries as item}
@@ -486,6 +502,12 @@
                               </label>
                             </div>
                           </DropdownMenu.Item>
+                        {:else}
+                          <DropdownMenu.Item
+                            class="sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                          >
+                            No country found
+                          </DropdownMenu.Item>
                         {/each}
                       </DropdownMenu.Group>
                     </DropdownMenu.Content>