Various style tweaks

src/UI/Base/FloatOver.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
-  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ariaLabel } from "../../Utils/ariaLabel"
   import Translations from "../i18n/Translations"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
 
   /**
    * The slotted element will be shown on top, with a lower-opacity border
@@ -37,13 +37,14 @@
     </div>
     <slot name="close-button">
       <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
-      <button
+      <div
-        class="absolute right-10 top-10 h-8 w-8 cursor-pointer rounded-full border-none bg-white p-0"
+        class="absolute right-10 top-10 cursor-pointer border-none p-0 m-0 bg-white rounded-full border-0"
+        style="margin: -0.25rem"
         on:click={() => dispatch("close")}
         use:ariaLabel={Translations.t.general.backToMap}
       >
-        <XCircleIcon />
+        <XCircleIcon class="w-8 h-8" />
-      </button>
+      </div>
     </slot>
   </div>
 </div>

src/UI/Base/TitledPanel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+
+  import Translations from "../i18n/Translations"
+</script>
+
+<div class="flex h-full flex-col">
+  <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
+    <slot name="title" />
+  </h2>
+
+  <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
+    <slot />
+  </div>
+</div>

src/UI/BigComponents/FilterPanel.svelte

@@ -9,6 +9,7 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Filter from "../../assets/svg/Filter.svelte"
+  import TitledPanel from "../Base/TitledPanel.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -46,12 +47,12 @@
   }
 </script>
 
-<div class="flex h-full flex-col">
+<TitledPanel>
-  <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
+  <div class="flex" slot="title">
     <Filter class="h-6 w-6 pr-2" />
     <Tr t={Translations.t.general.menu.filter} />
-  </h2>
+  </div>
-  <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
+
     {#each layout.layers as layer}
       <Filterview
         zoomlevel={state.mapProperties.zoom}
@@ -76,5 +77,7 @@
         zoomlevel={state.mapProperties.zoom}
       />
     {/each}
-  </div>
+
-</div>
+</TitledPanel>
+
+

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -72,14 +72,14 @@
     {/if}
   </div>
   <slot name="close-button">
-    <button
+    <div
-      class="mt-2 h-fit shrink-0 rounded-full border-none p-0"
+      class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer"
       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>
   </slot>
 </div>
 

src/UI/BigComponents/SelectedElementView.svelte

@@ -22,6 +22,8 @@
     selectedElement.properties.id
   )
 
+  let isAddNew = tags.mapD(t => t.id.startsWith(LastClickFeatureSource.newPointElementId))
+
   function getLayer(properties: Record<string, string>) {
     if (properties.id === "settings") {
       return UserRelatedState.usersettingsConfig
@@ -76,7 +78,10 @@
   </div>
 {:else}
   <div
-    class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto p-1 px-4"
+    class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto"
+    class:p1={!$isAddNew}
+    class:px-4={!$isAddNew}
+
     tabindex="-1"
   >
     {#each $knownTagRenderings as config (config.id)}

src/UI/Map/RasterLayerOverview.svelte

@@ -11,6 +11,7 @@
   import UserRelatedState from "../../Logic/State/UserRelatedState"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
+  import TitledPanel from "../Base/TitledPanel.svelte"
 
   export let availableLayers: Store<RasterLayerPolygon[]>
   export let mapproperties: MapProperties
@@ -50,12 +51,8 @@
   }
 </script>
 
-<div class="flex h-full flex-col">
+<TitledPanel>
-  <slot name="title">
+      <Tr slot="title" t={Translations.t.general.backgroundMap} />
-    <h2>
-      <Tr t={Translations.t.general.backgroundMap} />
-    </h2>
-  </slot>
 
   <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
     <RasterLayerPicker
@@ -91,4 +88,4 @@
       {visible}
     />
   </div>
-</div>
+</TitledPanel>

src/UI/Map/RasterLayerPicker.svelte

@@ -77,7 +77,7 @@
 
 {#if hasLayers}
   <form class="flex h-full w-full flex-col" on:submit|preventDefault={() => {}}>
-    <button tabindex="-1" on:click={() => apply()} class="m-0 h-full w-full cursor-pointer p-1">
+    <button tabindex="-1" on:click={() => apply()} class="m-0 p-0 rounded-none h-full w-full cursor-pointer border-none">
       <span class="pointer-events-none relative h-full w-full">
         <OverlayMap
           interactive={false}

src/UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -36,6 +36,7 @@
   import { Translation } from "../../i18n/Translation"
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import BaseUIElement from "../../BaseUIElement"
+  import TitledPanel from "../../Base/TitledPanel.svelte"
 
   export let coordinate: { lon: number; lat: number }
   export let state: SpecialVisualizationState
@@ -116,7 +117,7 @@
       theme: state.layout?.id ?? "unkown",
       changeType: "create",
       snapOnto: snapToWay,
-      reusePointWithinMeters: 1,
+      reusePointWithinMeters: 1
     })
     await state.changes.applyAction(newElementAction)
     state.newFeatures.features.ping()
@@ -186,6 +187,10 @@
       />
     {:else if !$layerIsDisplayed}
       <!-- Check that the layer is enabled, so that we don't add a duplicate -->
+      <TitledPanel>
+        <Tr slot="title" t={Translations.t.general.add.intro} />
+
+
         <div class="alert flex items-center justify-center">
           <EyeOffIcon class="w-8" />
           <Tr
@@ -218,7 +223,13 @@
             />
           </button>
         </div>
+      </TitledPanel>
+
     {:else if $layerHasFilters}
+      <TitledPanel>
+        <Tr slot="title" t={Translations.t.general.add.intro} />
+
+
         <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
       <div class="alert flex items-center justify-center">
         <EyeOffIcon class="w-8" />
@@ -246,13 +257,14 @@
           <Tr t={Translations.t.general.add.openLayerControl} />
         </button>
       </div>
+      </TitledPanel>
     {:else if !confirmedCategory}
       <!-- Second, confirm the category -->
-      <h2 class="mr-12">
+      <TitledPanel>
-        <Tr
+
+        <Tr slot="title"
           t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
         />
-      </h2>
 
       {#if selectedPreset.preset.description}
         <Tr t={selectedPreset.preset.description} />
@@ -293,6 +305,8 @@
           </div>
         </NextButton>
       </div>
+      </TitledPanel>
+
     {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
       <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
       <SubtleButton
@@ -366,7 +380,9 @@
         </div>
       </div>
     {:else}
-      <Loading><Tr t={Translations.t.general.add.creating} /></Loading>
+      <Loading>
+        <Tr t={Translations.t.general.add.creating} />
+      </Loading>
     {/if}
   </div>
 </LoginToggle>

src/UI/Popup/AddNewPoint/PresetList.svelte

@@ -13,6 +13,7 @@
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import BaseUIElement from "../../BaseUIElement"
   import Combine from "../../Base/Combine"
+  import TitledPanel from "../../Base/TitledPanel.svelte"
 
   /**
    * This component lists all the presets and allows the user to select one
@@ -79,7 +80,7 @@
         text: Translations.t.general.add.addNew.Subs(
           { category: preset.title },
           preset.title["context"]
-        ),
+        )
       }
       presets.push(simplified)
     }
@@ -96,11 +97,9 @@
   }>()
 </script>
 
-<div class="flex w-full flex-col">
+<TitledPanel>
-  <h2 class="mr-12">
+  <Tr slot="title" t={Translations.t.general.add.intro} />
-    <!-- The title gets a big right margin to give place to the 'close'-button, see https://github.com/pietervdvn/MapComplete/issues/1445 -->
+
-    <Tr t={Translations.t.general.add.intro} />
-  </h2>
 
   {#each presets as preset}
     <NextButton on:click={() => dispatch("select", preset)}>
@@ -115,4 +114,4 @@
       </div>
     </NextButton>
   {/each}
-</div>
+</TitledPanel>

src/UI/ThemeViewGUI.svelte

@@ -472,13 +472,6 @@
 
   <If condition={state.previewedImage.map((i) => i !== undefined)}>
     <FloatOver on:close={() => state.previewedImage.setData(undefined)}>
-      <button
-        class="absolute right-4 top-4 h-8 w-8 rounded-full p-0"
-        on:click={() => previewedImage.setData(undefined)}
-        slot="close-button"
-      >
-        <XCircleIcon />
-      </button>
       <ImageOperations image={$previewedImage} />
     </FloatOver>
   </If>
@@ -550,7 +543,6 @@
         state.guistate.backgroundLayerSelectionIsOpened.setData(false)
       }}
     >
-      <div class="h-full p-2">
         <RasterLayerOverview
           {availableLayers}
           map={state.map}
@@ -558,7 +550,6 @@
           userstate={state.userRelatedState}
           visible={state.guistate.backgroundLayerSelectionIsOpened}
         />
-      </div>
     </FloatOver>
   </IfHidden>
 

src/UI/Wikipedia/Wikidatapreview.svelte

@@ -15,15 +15,15 @@
 
 </script>
 
-<div class="flex w-full p-2">
+<div class="flex w-full p-2 flex-wrap">
 
   {#if imageUrl}
     <img src={imageUrl} style={imageStyle} class="mr-2" />
   {/if}
 
-  <div class="flex flex-col w-full">
+  <div class="flex flex-col flex-grow">
 
-    <div class="flex w-full justify-between">
+    <div class="flex w-full justify-between flex-wrap">
       <Tr cls="font-bold" t={ Translation.fromMap(wikidata.labels) } />
       <a href={Wikidata.IdToArticle(wikidata.id)} target="_blank" class="flex must-link items-center">
         <Wikidata_icon class="w-10" /> {wikidata.id}

src/UI/Wikipedia/WikipediaArticle.svelte

@@ -3,14 +3,11 @@
   import { Store } from "../../Logic/UIEventSource"
   import FromHtml from "../Base/FromHtml.svelte"
   import Loading from "../Base/Loading.svelte"
-  import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui"
-  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import WikidataPreviewBox from "./WikidataPreviewBox"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import Wikipedia from "../../assets/svg/Wikipedia.svelte"
   import Wikidatapreview from "./Wikidatapreview.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
   /**
    * Shows a wikipedia-article + wikidata preview for the given item
@@ -21,15 +18,11 @@
   )
 </script>
 
+<div class="low-interaction border-gray-300 border-dashed rounded-xl p-2 flex flex-col">
   {#if $titleOnly}
     <Loading>{$wikipediaDetails.title}</Loading>
   {/if}
-{#if $wikipediaDetails.articleUrl}
+
-  <a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
-    <Wikipedia class="h-6 w-6" />
-    <Tr t={Translations.t.general.wikipedia.fromWikipedia} />
-  </a>
-{/if}
 
   {#if $wikipediaDetails.wikidata}
     <Wikidatapreview wikidata={$wikipediaDetails.wikidata} />
@@ -42,19 +35,16 @@
       </Loading>
     {:else}
       <FromHtml clss="wikipedia-article" src={$wikipediaDetails.firstParagraph} />
-    <Disclosure let:open>
+      {#if $wikipediaDetails.articleUrl}
-      <DisclosureButton>
+        <a class="flex self-end my-2" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
-        <span class="flex">
+          <Wikipedia class="h-6 w-6" />
-          <ChevronRightIcon
+          <Tr t={Translations.t.general.wikipedia.fromWikipedia} />
-            style={(open ? "transform: rotate(90deg); " : "") +
+        </a>
-              "  transition: all .25s linear; width: 1.5rem; height: 1.5rem"}
+      {/if}
-          />
+      <AccordionSingle>
-          <Tr t={Translations.t.general.wikipedia.readMore} />
+        <Tr slot="header" t={Translations.t.general.wikipedia.readMore} />
-        </span>
-      </DisclosureButton>
-      <DisclosurePanel>
         <FromHtml clss="wikipedia-article" src={$wikipediaDetails.restOfArticle} />
-      </DisclosurePanel>
+      </AccordionSingle>
-    </Disclosure>
     {/if}
   {/if}
+</div>