Use same close-buttons everywhere

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/BigComponents/MenuDrawer.svelte

@@ -11,7 +11,7 @@
   import CommunityIndexView from "./CommunityIndexView.svelte"
   import Community from "../../assets/svg/Community.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
-  import { Sidebar } from "flowbite-svelte"
+  import { CloseButton, Sidebar } from "flowbite-svelte"
   import HotkeyTable from "./HotkeyTable.svelte"
   import { Utils } from "../../Utils"
   import Constants from "../../Models/Constants"
@@ -47,6 +47,8 @@
   import LogoutButton from "../Base/LogoutButton.svelte"
   import { BoltIcon } from "@babeard/svelte-heroicons/mini"
   import Copyright from "../../assets/svg/Copyright.svelte"
+  import Pencil from "../../assets/svg/Pencil.svelte"
+  import Squares2x2 from "@babeard/svelte-heroicons/mini/Squares2x2"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -62,20 +64,22 @@
 </script>
 
 <div class="flex flex-col p-2 sm:p-3 low-interaction gap-y-2 sm:gap-y-3 h-screen overflow-y-auto">
-<div class="flex justify-between">
-<h2>Menu<h2>
-<button on:click={() => {pg.menu.set(false)}}>Close</button>
-</div>
-{#if $showHome}
-      <a class="flex button primary" href={Utils.HomepageLink()}>
-        <Add class="h-6 w-6" />
-        {#if Utils.isIframe}
-          <Tr t={Translations.t.general.seeIndex} />
-        {:else}
-          <Tr t={Translations.t.general.backToIndex} />
-        {/if}
-      </a>
-    {/if}
+  <div class="flex justify-between">
+    <h2>
+      <Tr t={t.title}/>
+    </h2>
+    <CloseButton on:click={() => {pg.menu.set(false)}} />
+  </div>
+  {#if $showHome}
+    <a class="flex button primary" href={Utils.HomepageLink()}>
+      <Squares2x2 class="h-10 w-10" />
+      {#if Utils.isIframe}
+        <Tr t={Translations.t.general.seeIndex} />
+      {:else}
+        <Tr t={Translations.t.general.backToIndex} />
+      {/if}
+    </a>
+  {/if}
 
 
   <!-- User related: avatar, settings, favourits, logout -->
@@ -128,6 +132,8 @@
           <HeartIcon class="h-6 w-6" />
           <Tr t={Translations.t.favouritePoi.tab} />
         </div>
+
+
         <h3>
 
           <Tr t={Translations.t.favouritePoi.title} />
@@ -221,7 +227,7 @@
     <h3>
       <Tr t={t.moreUtilsTitle} />
     </h3>
-    
+
 
     <Page {onlyLink} shown={pg.community_index}>
       <div class="flex" slot="header">
@@ -248,8 +254,15 @@
       <Tr t={Translations.t.general.menu.aboutMapComplete} />
     </h3>
 
-    <div class="hidden-on-mobile">
+    <a
+      class="flex"
+      href={window.location.protocol + "//" + window.location.host + "/studio.html"}
+    >
+      <Pencil class="mr-2 h-6 w-6" />
+      <Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
+    </a>
 
+    <div class="hidden-on-mobile w-full">
       <Page {onlyLink} shown={pg.hotkeys}>
         <div class="flex" slot="header">
           <BoltIcon class="w-6 h-6" />
@@ -346,12 +359,14 @@
     }
 
 
-    :global(.sidebar-button, .sidebar-button, .sidebar-unit > a) {
+    :global(.sidebar-button, .sidebar-unit > a) {
         display: flex;
         align-items: center;
         border-radius: 0.25rem !important;
         padding: 0.4rem 0.75rem !important;
         text-decoration: none !important;
+        width: 100%;
+        text-align: start;
     }
 
     :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit a > img, .sidebar-unit > a svg) {

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -8,6 +8,7 @@
   import Tr from "../Base/Tr.svelte"
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ariaLabel } from "../../Utils/ariaLabel"
+  import { CloseButton } from "flowbite-svelte"
 
   export let state: SpecialVisualizationState
   export let layer: LayerConfig
@@ -72,14 +73,10 @@
     {/if}
   </div>
   <slot name="close-button">
-    <button
-      class="mt-2 h-fit shrink-0 cursor-pointer self-center rounded-full border-none p-0"
-      on:click={() => state.selectedElement.setData(undefined)}
-      style="border: 0 !important; padding: 0 !important;"
-      use:ariaLabel={Translations.t.general.backToMap}
-    >
-      <XCircleIcon aria-hidden={true} class="h-8 w-8" />
-    </button>
+    <div class="mt-4">
+    <CloseButton  on:click={() => state.selectedElement.setData(undefined)}/>
+    </div>
+
   </slot>
 </div>
 

src/UI/Favourites/FavouriteSummary.svelte

@@ -21,7 +21,7 @@
     state.mapProperties.location.setData({ lon, lat })
     const z = state.mapProperties.zoom.data
     state.mapProperties.zoom.setData(Math.min(17, Math.max(12, z)))
-    state.guistate.menuIsOpened.setData(false)
+    state.guistate.pageStates.menu.setData(false)
   }
 
   function select() {

src/UI/Image/ImageOperations.svelte

@@ -11,6 +11,8 @@
   import { twMerge } from "tailwind-merge"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Loading from "../Base/Loading.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
 
   export let image: ProvidedImage
   export let clss: string = undefined
@@ -48,7 +50,7 @@
       on:click={() => download()}
     >
       <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
-      Download
+      <Tr t={Translations.t.general.download.downloadImage}/>
     </button>
   </div>
 </div>

src/UI/ThemeViewGUI.svelte

@@ -196,7 +196,7 @@
         <MapControlButton
           cls="m-0.5 p-0.5 sm:p-1"
           arialabel={Translations.t.general.labels.menu}
-          on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
+          on:click={() => {console.log("Opening...."); state.guistate.pageStates.menu.setData(true)}}
           on:keydown={forwardEventToMap}
         >
           <MenuIcon class="h-6 w-6 cursor-pointer" />
@@ -404,7 +404,7 @@
     <svelte:fragment slot="error" />
   </LoginToggle>
 
-  <DrawerLeft shown={state.guistate.menuIsOpened}>
+  <DrawerLeft shown={state.guistate.pageStates.menu}>
     <div class="h-screen overflow-y-auto">
       <MenuDrawer onlyLink={true} {state} />
     </div>