UI: styling of searchbars

public/css/index-tailwind-output.css

@@ -1168,14 +1168,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   right: 0px;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
 .right-10 {
   right: 2.5rem;
 }
@@ -1244,6 +1236,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   top: 0.75rem;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-1 {
   top: 0.25rem;
 }
@@ -1502,10 +1498,18 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-left: 0.25rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1522,18 +1526,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-bottom: 0.25rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .mt-8 {
   margin-top: 2rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -3023,11 +3019,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-style: none;
 }
 
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
-}
-
 .border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
@@ -3038,6 +3029,11 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-color: rgb(219 234 254 / var(--tw-border-opacity));
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -4004,6 +4000,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   padding-left: 0.5rem;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -4032,10 +4032,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   padding-right: 1rem;
 }
 
-.pl-1 {
-  padding-left: 0.25rem;
-}
-
 .pb-1\.5 {
   padding-bottom: 0.375rem;
 }
@@ -5149,6 +5145,10 @@ input[type="text"] {
   border-radius: 0.5rem;
 }
 
+.box-shadow {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
 /******************* Styling of input elements **********************/
 
 /**

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
+    <Searchbar value={themeSearchText} placeholder={tr.searchForATheme} on:search={() => MoreScreen.applySearch(themeSearchText.data)}/>
-      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>
 
     <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>

src/index.css

@@ -178,6 +178,10 @@ input[type="text"] {
   border-radius: 0.5rem;
 }
 
+.box-shadow {
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
 /******************* Styling of input elements **********************/
 
 /**