UX: improve 'move wizard' layout

src/UI/Map/Icon.svelte

@@ -38,6 +38,7 @@
   import { Utils } from "../../Utils"
   import Gear from "../../assets/svg/Gear.svelte"
   import { DesktopComputerIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import Relocation from "../../assets/svg/Relocation.svelte"
 
   /**
    * Renders a single icon.
@@ -137,8 +138,10 @@
     <LinkIcon style="--svg-color: {color}" />
   {:else if icon === "wifi"}
     <WifiIcon class={"m-0 " +clss} {color} />
-    {:else if icon === "computer"}
+  {:else if icon === "computer"}
     <DesktopComputerIcon class={"m-0 "+clss} {color} />
+  {:else if icon === "relocation"}
+    <Relocation class={clss} {color} />
   {:else if Utils.isEmoji(icon)}
     <span style={`font-size: ${emojiHeight}px; line-height: ${emojiHeight}px`}>
       {icon}

src/UI/Popup/MoveWizard.svelte

@@ -23,6 +23,7 @@
   import BackButton from "../Base/BackButton.svelte"
   import ChevronLeft from "@babeard/svelte-heroicons/solid/ChevronLeft"
   import ThemeViewState from "../../Models/ThemeViewState"
+  import Icon from "../Map/Icon.svelte"
 
   export let state: ThemeViewState
 
@@ -47,7 +48,7 @@
       location: new UIEventSource({ lon, lat }),
       minzoom: new UIEventSource($reason.minZoom),
       rasterLayer: state.mapProperties.rasterLayer,
-      zoom: new UIEventSource($reason?.startZoom ?? 16),
+      zoom: new UIEventSource($reason?.startZoom ?? 16)
     }
   }
 
@@ -84,7 +85,6 @@
         </span>
         <span class="flex flex-col p-2">
           {#if currentStep === "reason" && moveWizardState.reasons.length > 1}
-            <Tr cls="text-lg font-bold" t={t.whyMove} />
             {#each moveWizardState.reasons as reasonSpec}
               <button
                 on:click={() => {
@@ -92,7 +92,7 @@
                   currentStep = "pick_location"
                 }}
               >
-                <ToSvelte construct={reasonSpec.icon.SetClass("w-16 h-16 pr-2")} />
+                <Icon icon={reasonSpec.icon} clss="w-12 h-12"/>
                 <Tr t={Translations.T(reasonSpec.text)} />
               </button>
             {/each}

src/UI/Popup/MoveWizardState.ts

@@ -16,7 +16,7 @@ import Location from "../../assets/svg/Location.svelte"
 export interface MoveReason {
     text: Translation | string
     invitingText: Translation | string
-    icon: BaseUIElement
+    icon: string
     changesetCommentValue: string
     lockBounds: true | boolean
     includeSearch: false | boolean
@@ -48,7 +48,7 @@ export class MoveWizardState {
             reasons.push({
                 text: t.reasons.reasonRelocation,
                 invitingText: t.inviteToMove.reasonRelocation,
-                icon: new SvelteUIElement(Relocation),
+                icon: "relocation",
                 changesetCommentValue: "relocated",
                 lockBounds: false,
                 background: undefined,
@@ -62,7 +62,7 @@ export class MoveWizardState {
             reasons.push({
                 text: t.reasons.reasonInaccurate,
                 invitingText: t.inviteToMove.reasonInaccurate,
-                icon: new SvelteUIElement(Location),
+                icon: "location",
                 changesetCommentValue: "improve_accuracy",
                 lockBounds: true,
                 includeSearch: false,