UX: work on layout

src/UI/Popup/DeleteFlow/DeleteWizard.svelte

@@ -90,7 +90,7 @@
     </div>
   {:else if currentState === "start"}
     <button
-      class="flex items-center"
+      class="w-full"
       on:click={() => {
         currentState = "confirm"
       }}

src/UI/Popup/ExportAsGpxViz.ts

@@ -8,6 +8,9 @@ import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisua
 import { UIEventSource } from "../../Logic/UIEventSource"
 import { Feature, LineString } from "geojson"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import ToSvelte from "../Base/ToSvelte.svelte"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
 
 export class ExportAsGpxViz implements SpecialVisualization {
     funcName = "export_as_gpx"
@@ -26,7 +29,7 @@ export class ExportAsGpxViz implements SpecialVisualization {
             return undefined
         }
         return new SubtleButton(
-            Svg.download_svg(),
+            new SvelteUIElement(ArrowDownTray),
             new Combine([
                 t.downloadFeatureAsGpx.SetClass("font-bold text-lg"),
                 t.downloadGpxHelper.SetClass("subtle"),

src/UI/Popup/MarkAsFavourite.svelte

@@ -26,22 +26,23 @@
 <LoginToggle ignoreLoading={true} {state}>
   {#if $isFavourite}
     <div class="flex h-fit items-start">
-      <HeartSolidIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(false)} />
-      <div class="flex w-full flex-col">
-        <button class="flex flex-col items-start" on:click={() => markFavourite(false)}>
+        <button  on:click={() => markFavourite(false)}>
+          <HeartSolidIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(false)} />
+          <div class="flex flex-col items-start">
           <Tr t={t.button.unmark} />
           <Tr cls="normal-font subtle" t={t.button.unmarkNotDeleted} />
+          </div>
         </button>
       </div>
-    </div>
     <Tr cls="font-bold thanks m-2 p-2 block" t={t.button.isFavourite} />
   {:else}
-    <div class="flex items-start">
-      <HeartOutlineIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(true)} />
-      <button class="flex w-full flex-col items-start" on:click={() => markFavourite(true)}>
+      <button on:click={() => markFavourite(true)}>
+        <HeartOutlineIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(true)} />
+        <div class="flex w-full flex-col items-start">
+
         <Tr t={t.button.markAsFavouriteTitle} />
         <Tr cls="normal-font subtle" t={t.button.markDescription} />
+        </div>
       </button>
-    </div>
   {/if}
 </LoginToggle>

src/UI/Popup/MoveWizard.svelte

@@ -64,7 +64,7 @@
     {:else if currentStep === "start"}
       {#if moveWizardState.reasons.length === 1}
         <button
-          class="flex"
+          class="w-full"
           on:click={() => {
             reason.setData(moveWizardState.reasons[0])
             currentStep = "pick_location"
@@ -77,7 +77,7 @@
         </button>
       {:else}
         <button
-          class="flex"
+          class="w-full"
           on:click={() => {
             currentStep = "reason"
           }}
@@ -127,13 +127,12 @@
             )}
           >
             <button
-              class="primary flex w-full"
+              class="primary  w-full"
               on:click={() => {
                 moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove)
                 currentStep = "moved"
               }}
             >
-              <Move class="mr-2 h-6 w-6" />
               <Tr t={t.confirmMove} />
             </button>
 

src/UI/Popup/TagRendering/EditButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { PencilAltIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ariaLabel } from "../../../Utils/ariaLabel.js"
   import { Translation } from "../../i18n/Translation"
+  import Pencil from "@babeard/svelte-heroicons/solid/Pencil"
 
   /**
    * A small, round button with an edit-icon (and aria-labels etc)
@@ -15,9 +15,9 @@
 
 <button
   on:click
-  class="secondary h-8 w-8 shrink-0 self-start rounded-full p-1"
+  class="h-8 w-8 shrink-0 self-start rounded-full p-1 as-link"
   aria-labelledby={arialabel === undefined ? ariaLabelledBy : undefined}
   use:ariaLabel={arialabel}
 >
-  <PencilAltIcon />
+  <Pencil class="h-4 w-4 hover-alert" />
 </button>