Merge develop

src/UI/Base/FloatOver.svelte

@@ -3,6 +3,7 @@
   import { ariaLabel } from "../../Utils/ariaLabel"
   import Translations from "../i18n/Translations"
   import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import { CloseButton } from "flowbite-svelte"
 
   /**
    * The slotted element will be shown on top, with a lower-opacity border
@@ -29,7 +30,7 @@
   }}
 >
   <div
-    class="content normal-background pointer-events-auto h-full"
+    class="content relative normal-background pointer-events-auto h-full"
     on:click|stopPropagation={() => {}}
   >
     <div class="h-full rounded-xl">
@@ -37,22 +38,21 @@
     </div>
     <slot name="close-button">
       <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
-      <div
-        class="absolute right-10 top-10 m-0 cursor-pointer rounded-full border-0 border-none bg-white p-0"
-        style="margin: -0.25rem"
-        on:click={() => dispatch("close")}
-        use:ariaLabel={Translations.t.general.backToMap}
-      >
-        <XCircleIcon class="h-8 w-8" />
+      <div class="absolute top-0 right-0">
+
+        <CloseButton class="normal-background mt-2 mr-2"
+                     on:click={() => dispatch("close")}
+        />
       </div>
+
     </slot>
   </div>
 </div>
 
 <style>
-  .content {
-    border-radius: 0.5rem;
-    overflow-x: hidden;
-    box-shadow: 0 0 1rem #00000088;
-  }
+    .content {
+        border-radius: 0.5rem;
+        overflow-x: hidden;
+        box-shadow: 0 0 1rem #00000088;
+    }
 </style>

src/UI/Base/Page.svelte

@@ -29,7 +29,7 @@
          size="xl"
          {defaultClass} {bodyClass} {dialogClass} {headerClass}
          color="none">
-    <h1 slot="header" class="w-full">
+    <h1 slot="header" class="page-header w-full">
       <slot name="header" />
     </h1>
     <slot />
@@ -44,3 +44,16 @@
     </slot>
   </button>
 {/if}
+
+<style>
+    :global(.page-header) {
+        display: flex;
+        align-items: center;
+    }
+
+  :global(.page-header svg) {
+      width: 2rem;
+      height: 2rem;
+      margin-right: 0.75rem;
+  }
+</style>

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>