UI: styling of searchbars

src/UI/AllThemesGui.svelte

@@ -27,6 +27,7 @@
   import Github from "../assets/svg/Github.svelte"
   import { Utils } from "../Utils"
   import { ArrowTrendingUp } from "@babeard/svelte-heroicons/solid/ArrowTrendingUp"
+  import Searchbar from "./Base/Searchbar.svelte"
 
   const featureSwitches = new OsmConnectionFeatureSwitches()
   const osmConnection = new OsmConnection({
@@ -42,7 +43,7 @@
   const tr = Translations.t.general.morescreen
 
   let userLanguages = osmConnection.userDetails.map((ud) => ud.languages)
-  let themeSearchText: UIEventSource<string | undefined> = new UIEventSource<string>(undefined)
+  let themeSearchText: UIEventSource<string | undefined> = new UIEventSource<string>("")
 
   document.addEventListener("keydown", function (event) {
     if (event.ctrlKey && event.code === "KeyF") {
@@ -101,24 +102,7 @@
       </div>
     </div>
 
-    <form
-      class="flex justify-center"
-      on:submit|preventDefault={(_) => MoreScreen.applySearch(themeSearchText.data)}
-    >
-      <label
-        class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2"
-      >
-        <SearchIcon aria-hidden="true" class="h-8 w-8" />
-        <input
-          autofocus
-          bind:value={$themeSearchText}
-          class="mr-4 w-full outline-none"
-          id="theme-search"
-          type="search"
-          use:placeholder={tr.searchForATheme}
-        />
-      </label>
-    </form>
+    <Searchbar value={themeSearchText} placeholder={tr.searchForATheme} on:search={() => MoreScreen.applySearch(themeSearchText.data)}/>
 
     <ThemesList search={themeSearchText} {state} themes={MoreScreen.officialThemes} />
 

src/UI/Base/Searchbar.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import Translations from "../i18n/Translations"
+  import { createEventDispatcher } from "svelte"
+  import { placeholder as set_placeholder } from "../../Utils/placeholder"
+  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { ariaLabel } from "../../Utils/ariaLabel"
+  import { Translation } from "../i18n/Translation"
+
+  export let value: UIEventSource<string>
+  let _value = value.data ?? ""
+  value.addCallbackD(v => {
+    _value = v
+  })
+  $: value.set(_value)
+
+  const dispatch = createEventDispatcher<{ search }>()
+  export let placeholder: Translation =  Translations.t.general.search.search
+</script>
+
+
+<form
+  class="flex justify-center"
+  on:submit|preventDefault={() => dispatch("search")}
+>
+  <label
+    class="neutral-label my-2 flex w-full items-center rounded-full border-2 border-black sm:w-1/2  box-shadow"
+  >
+    <input
+      type="search"
+      style=" --tw-ring-color: rgb(0 0 0 / 0) !important;"
+      class="ml-4 pl-1 w-full outline-none border-none"
+      on:keypress={(keypr) => {
+          return keypr.key === "Enter" ? dispatch("search") : undefined
+        }}
+      bind:value={_value}
+      use:set_placeholder={placeholder}
+      use:ariaLabel={Translations.t.general.search.search}
+    />
+    <SearchIcon aria-hidden="true" class="h-8 w-8 mx-2" />
+
+  </label>
+</form>

src/UI/BigComponents/Geosearch.svelte

@@ -107,13 +107,14 @@
 </script>
 
 <div class="normal-background flex justify-between rounded-full pl-2">
-  <form class="flex w-full flex-wrap">
+  <form class="flex w-full flex-wrap items-center ">
     {#if isRunning}
       <Loading>{Translations.t.general.search.searching}</Loading>
     {:else}
       <input
         type="search"
-        class="w-full outline-none"
+        style="border: none !important;"
+        class="w-full outline-none border-none mx-2"
         bind:this={inputElement}
         on:keypress={(keypr) => {
           feedback = undefined
@@ -131,5 +132,5 @@
       {/if}
     {/if}
   </form>
-  <SearchIcon aria-hidden="true" class="h-6 w-6 self-end" on:click={performSearch} />
+  <SearchIcon aria-hidden="true" class="h-6 w-6 mx-2 self-center" on:click={performSearch} />
 </div>