Many UI improvements

src/UI/Image/NearbyImages.svelte

@@ -30,7 +30,7 @@
       lon,
       lat,
       allowSpherical: new UIEventSource<boolean>(false),
-      blacklist: AllImageProviders.LoadImagesFor(tags),
+      blacklist: AllImageProviders.LoadImagesFor(tags)
     },
     state.indexedFeatures
   )
@@ -39,24 +39,23 @@
   let allDone = imagesProvider.allDone
 </script>
 
-<div class="interactive border-interactive rounded-2xl p-2">
-  <div class="flex justify-between">
-    <h4>
-      <Tr t={Translations.t.image.nearby.title} />
-    </h4>
-    <slot name="corner" />
-  </div>
-  {#if !$allDone}
-    <Loading />
-  {:else if $images.length === 0}
-    <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
-  {:else}
-    <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
-      {#each $images as image (image.pictureUrl)}
+
+<div class="flex justify-between">
+  <h4>
+    <Tr t={Translations.t.image.nearby.title} />
+  </h4>
+  <slot name="corner" />
+</div>
+{#if !$allDone}
+  <Loading />
+{:else if $images.length === 0}
+  <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
+{:else}
+  <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
+    {#each $images as image (image.pictureUrl)}
         <span class="w-fit shrink-0" style="scroll-snap-align: start">
           <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />
         </span>
-      {/each}
-    </div>
-  {/if}
-</div>
+    {/each}
+  </div>
+{/if}

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -11,6 +11,8 @@
   import Camera_plus from "../../assets/svg/Camera_plus.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import { ariaLabel } from "../../Utils/ariaLabel"
+  import { Accordion, AccordionItem } from "flowbite-svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
   export let tags: UIEventSource<OsmTags>
   export let state: SpecialVisualizationState
@@ -25,31 +27,10 @@
   let expanded = false
 </script>
 
-<div class="my-4">
-  {#if expanded}
-    <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable} {layer}>
-      <button
-        slot="corner"
-        class="no-image-background h-6 w-6 cursor-pointer border-none p-0"
-        use:ariaLabel={t.close}
-        on:click={() => {
-          expanded = false
-        }}
-      >
-        <XCircleIcon />
-      </button>
-    </NearbyImages>
-  {:else}
-    <button
-      class="flex w-full items-center"
-      style="margin-left: 0; margin-right: 0"
-      on:click={() => {
-        expanded = true
-      }}
-      aria-expanded={expanded}
-    >
-      <Camera_plus class="mr-2 block h-8 w-8 p-1" />
+<AccordionSingle>
+   <span slot="header" class="text-base p-2">
       <Tr t={t.seeNearby} />
-    </button>
-  {/if}
-</div>
+    </span>
+  <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable} {layer} />
+</AccordionSingle>
+

src/UI/Image/UploadImage.svelte

@@ -11,9 +11,9 @@
   import Tr from "../Base/Tr.svelte"
   import UploadingImageCounter from "./UploadingImageCounter.svelte"
   import FileSelector from "../Base/FileSelector.svelte"
-  import Camera_plus from "../../assets/svg/Camera_plus.svelte"
   import LoginButton from "../Base/LoginButton.svelte"
   import { Translation } from "../i18n/Translation"
+  import Camera from "@babeard/svelte-heroicons/solid/Camera"
 
   export let state: SpecialVisualizationState
 
@@ -73,7 +73,7 @@
         {#if image !== undefined}
           <img src={image} aria-hidden="true" />
         {:else}
-          <Camera_plus class="block h-12 w-12 p-1 text-4xl" aria-hidden="true" />
+          <Camera class="h-12 w-12 p-1" aria-hidden="true" />
         {/if}
         {#if labelText}
           {labelText}