Move various tabs into buttons, more work on a11y

src/UI/Base/FloatOver.svelte

@@ -37,7 +37,7 @@
     <slot name="close-button">
       <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
       <button
-        class="absolute right-10 top-10 h-8 w-8 cursor-pointer border-none bg-white p-0"
+        class="absolute right-10 top-10 h-8 w-8 cursor-pointer border-none bg-white rounded-full p-0"
         on:click={() => dispatch("close")}
       >
         <XCircleIcon />

src/UI/Base/ModalRight.svelte

@@ -20,7 +20,7 @@
 >
   <slot name="close-button">
     <button
-      class="absolute right-10 top-10 h-8 w-8 cursor-pointer"
+      class="absolute right-10 top-10 h-8 w-8 cursor-pointer rounded-full"
       on:click={() => dispatch("close")}
     >
       <XCircleIcon />

src/UI/Base/OpenJosm.svelte

@@ -5,6 +5,7 @@
   import Josm_logo from "../../assets/svg/Josm_logo.svelte"
   import Constants from "../../Models/Constants"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import { Utils } from "../../Utils"
 
   export let state: SpecialVisualizationState
   const t = Translations.t.general.attribution
@@ -13,7 +14,7 @@
   josmState.stabilized(15000).addCallbackD(() => josmState.setData(undefined))
 
   const showButton = state.osmConnection.userDetails.map(
-    (ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible
+    (ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible,
   )
 
   function openJosm() {
@@ -33,16 +34,20 @@
 </script>
 
 {#if $showButton}
-  {#if $josmState === undefined}
-    <!-- empty -->
-  {:else if state === "OK"}
-    <Tr cls="thanks" t={t.josmOpened} />
-  {:else}
-    <Tr cls="alert" t={t.josmNotOpened} />
-  {/if}
+  <div class="flex">
+
+    <button class="flex items-center small soft grow" on:click={openJosm}>
+      <Josm_logo class="h-6 w-6 pr-2" />
+      <Tr t={t.editJosm} />
+    </button>
+
+    {#if $josmState === undefined}
+      <!-- empty -->
+    {:else if $josmState === "OK"}
+      <Tr cls="thanks shrink-0 w-fit" t={t.josmOpened} />
+    {:else}
+      <Tr cls="alert shrink-0 w-fit" t={t.josmNotOpened} />
+    {/if}
+  </div>
 
-  <button class="flex items-center" on:click={openJosm}>
-    <Josm_logo class="h-12 w-12 p-2 pr-4" />
-    <Tr t={t.editJosm} />
-  </button>
 {/if}

src/UI/Base/ShareButton.svelte

@@ -26,7 +26,7 @@
   }
 </script>
 
-<button on:click={share} class="secondary m-0 h-8 w-8 p-0" use:ariaLabel={Translations.t.general.share}>
+<button on:click={share} class="soft m-0 h-8 w-8 p-0" use:ariaLabel={Translations.t.general.share}>
   <slot name="content">
     <Share class="h-7 w-7 p-1" />
   </slot>