Styling: style most buttons

2023-05-14 03:24:13 +02:00 · 2023-05-14 03:24:13 +02:00 · 83f3662b9a
commit 83f3662b9a
parent e04430b428
46 changed files with 720 additions and 671 deletions
--- a/Logic/State/GeoLocationState.ts
+++ b/Logic/State/GeoLocationState.ts
@ -2,7 +2,7 @@ import { UIEventSource } from "../UIEventSource"
 import { LocalStorageSource } from "../Web/LocalStorageSource"
 import { QueryParameters } from "../Web/QueryParameters"

-type GeolocationState = "prompt" | "requested" | "granted" | "denied"
+export type GeolocationPermissionState = "prompt" | "requested" | "granted" | "denied"

 export interface GeoLocationPointProperties extends GeolocationCoordinates {
    id: "gps"
@ -21,7 +21,7 @@ export class GeoLocationState {
     * 'granted' means that it is granted
     * 'denied' means that we don't have access
     */
-    public readonly permission: UIEventSource<GeolocationState> = new UIEventSource("prompt")
+    public readonly permission: UIEventSource<GeolocationPermissionState> = new UIEventSource("prompt")

    /**
     * Important to determine e.g. if we move automatically on fix or not
--- a/UI/Base/BackButton.svelte
+++ b/UI/Base/BackButton.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+    /**
+     * Wrapper around 'subtleButton' with an arrow pointing to the right
+     */
+    import SubtleButton from "./SubtleButton.svelte";
+    import {ChevronLeftIcon} from "@rgossiaux/svelte-heroicons/solid";
+    import {createEventDispatcher} from "svelte";
+
+    const dispatch = createEventDispatcher<{ click }>()
+    export let clss = ""
+</script>
+
+<SubtleButton on:click={() => dispatch("click")} options={{extraClasses:clss+ " flex items-center"}}>
+    <ChevronLeftIcon class="w-12 h-12" slot="image"/>
+    <slot name="message" slot="message"/>
+</SubtleButton>
--- a/UI/Base/FromHtml.svelte
+++ b/UI/Base/FromHtml.svelte
@ -11,9 +11,10 @@
    }
  }

+  export let clss = ""
 </script>

 {#if src !== undefined}
-  <span bind:this={htmlElem}></span>
+  <span bind:this={htmlElem} class={clss}></span>
 {/if}

--- a/UI/Base/LoginButton.svelte
+++ b/UI/Base/LoginButton.svelte
@ -1,15 +1,17 @@
 <script lang="ts">
-  import { OsmConnection } from "../../Logic/Osm/OsmConnection";
-  import SubtleButton from "./SubtleButton.svelte";
+    import {OsmConnection} from "../../Logic/Osm/OsmConnection";
    import Translations from "../i18n/Translations.js";
    import Tr from "./Tr.svelte";
+    import ToSvelte from "./ToSvelte.svelte";
+    import Svg from "../../Svg";

    export let osmConnection: OsmConnection
+    export let clss = ""
 </script>

-<SubtleButton on:click={() => osmConnection.AttemptLogin()}>
-  <img slot="image" src="./assets/svg/login.svg" class="w-8"/>
-  <slot name="message" slot="message">
+<button class={clss} on:click={() => osmConnection.AttemptLogin()}>
+    <ToSvelte construct={Svg.login_svg().SetClass("w-12 m-1")}/>
+    <slot name="message">
        <Tr t={Translations.t.general.loginWithOpenStreetMap}/>
    </slot>
-</SubtleButton>
+</button>
--- a/UI/Base/MapControlButton.svelte
+++ b/UI/Base/MapControlButton.svelte
@ -8,6 +8,6 @@
 </script>


-<button on:click={e => dispatch("click", e)} class="secondary rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1">
+<button on:click={e => dispatch("click", e)} class="rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1">
  <slot/>
 </button>
--- a/UI/Base/NextButton.svelte
+++ b/UI/Base/NextButton.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+    /**
+     * Wrapper around 'subtleButton' with an arrow pointing to the right
+     */
+    import SubtleButton from "./SubtleButton.svelte";
+    import {ChevronRightIcon} from "@rgossiaux/svelte-heroicons/solid";
+    import {createEventDispatcher} from "svelte";
+
+    const dispatch = createEventDispatcher<{ click }>()
+    
+    export let clss : string= ""
+</script>
+
+<SubtleButton on:click={() => dispatch("click")} options={{extraClasses: clss+" flex items-center"}}>
+    <slot name="image" slot="image"/>
+    <div class="w-full flex justify-between items-center" slot="message">
+        <slot/>
+        <ChevronRightIcon class="w-12 h-12"/>
+    </div>
+</SubtleButton>
--- a/UI/Base/SubtleButton.svelte
+++ b/UI/Base/SubtleButton.svelte
@ -12,11 +12,10 @@

  let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11");
  const dispatch = createEventDispatcher<{click}>()
-  console.log("Slots:", $$slots)
 </script>

 <button
-  class={(options.extraClasses??"") + 'flex hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle cursor-pointer'}
+  class={(options.extraClasses??"") + ' secondary no-image-background'}
  target={options?.newTab ? "_blank" : ""}
  on:click={(e) => dispatch("click", e)}
 >
@ -30,16 +29,3 @@

  <slot name="message"/>
 </button>
-
-<style lang="scss">
-  span,
-  a {
-    @apply flex p-3 my-2 py-4 rounded-lg shrink-0;
-    @apply items-center w-full no-underline;
-    @apply bg-subtle text-black;
-
-    :global(span) {
-      @apply block text-ellipsis;
-    }
-  }
-</style>
--- a/UI/Base/TabbedGroup.svelte
+++ b/UI/Base/TabbedGroup.svelte
@ -22,7 +22,7 @@
        <div class="interactive flex items-center justify-between sticky top-0">
            <TabList class="flex flex-wrap">
                {#if $$slots.title1}
-                    <Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
+                    <Tab class={({selected}) => "tab "+(selected ? "primary" : "")}>
                        <div bind:this={tabElements[0]} class="flex">
                            <slot name="title0">
                                Tab 0
@ -31,28 +31,28 @@
                    </Tab>
                {/if}
                {#if $$slots.title1}
-                    <Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
+                    <Tab class={({selected}) => "tab "+(selected ? "primary" : "")}>
                        <div bind:this={tabElements[1]} class="flex">
                            <slot name="title1"/>
                        </div>
                    </Tab>
                {/if}
                {#if $$slots.title2}
-                    <Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
+                    <Tab class={({selected}) => "tab "+(selected ? "primary" : "")}>
                        <div bind:this={tabElements[2]} class="flex">
                            <slot name="title2"/>
                        </div>
                    </Tab>
                {/if}
                {#if $$slots.title3}
-                    <Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
+                    <Tab class={({selected}) => "tab "+(selected ? "primary" : "")}>
                        <div bind:this={tabElements[3]} class="flex">
                            <slot name="title3"/>
                        </div>
                    </Tab>
                {/if}
                {#if $$slots.title4}
-                    <Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
+                    <Tab class={({selected}) => "tab "+(selected ? "primary" : "")}>
                        <div bind:this={tabElements[4]} class="flex">
                            <slot name="title4"/>
                        </div>
--- a/UI/Base/Tr.svelte
+++ b/UI/Base/Tr.svelte
@ -10,6 +10,7 @@
  import WeblateLink from "./WeblateLink.svelte";

  export let t: Translation;
+  export let cls: string = ""
  export let tags: Record<string, string> | undefined = undefined;
  // Text for the current language
  let txt: string | undefined;
@ -29,7 +30,7 @@
 </script>

 {#if t}
-  <span class="inline-flex items-center">
+  <span class={"inline-flex items-center "+cls}>
  <FromHtml src={txt}></FromHtml>
  <WeblateLink context={t.context}></WeblateLink>
  </span>
--- a/UI/BigComponents/ContactLink.svelte
+++ b/UI/BigComponents/ContactLink.svelte
@ -40,9 +40,9 @@
        </a>
        {resource.resolved?.description}
        {#if resource.languageCodes?.indexOf($language) >= 0}
-          <span class="border-2 rounded-full border-lime-500 text-sm w-fit px-2">
+          <div class="thanks w-fit">
            <ToSvelte construct={() => availableTranslation.Clone()} />
-          </span>
+          </div>
        {/if}
      </div>
    </div>
--- a/UI/BigComponents/Filterview.svelte
+++ b/UI/BigComponents/Filterview.svelte
@ -111,17 +111,3 @@ $:  onDestroy(
    </div>
 {/if}

-<style>
-
-    :global(.no-image-background * img) {
-        background: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    :global(.no-image-background * svg) {
-        background: none;
-        margin: 0;
-        padding: 0;
-    }
-</style>
--- a/UI/BigComponents/Geosearch.svelte
+++ b/UI/BigComponents/Geosearch.svelte
@ -11,6 +11,7 @@
  import { Geocoding } from "../../Logic/Osm/Geocoding";
  import { BBox } from "../../Logic/BBox";
  import { GeoIndexedStoreForLayer } from "../../Logic/FeatureSource/Actors/GeoIndexedStore";
+  import {createEventDispatcher} from "svelte";

  export let perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer> | undefined = undefined;
  export let bounds: UIEventSource<BBox>;
@ -34,6 +35,8 @@
    }
  );

+  const dispatch = createEventDispatcher<{searchCompleted}>()
+  
  async function performSearch() {
    try {
      isRunning = true;
@ -59,6 +62,7 @@

        }
      }
+      dispatch("searchCompleted")
    } catch (e) {
      console.error(e);
      feedback = Translations.t.general.search.error.txt;
--- a/UI/BigComponents/SelectedElementTitle.svelte
+++ b/UI/BigComponents/SelectedElementTitle.svelte
@ -4,7 +4,6 @@
    import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
    import type {SpecialVisualizationState} from "../SpecialVisualization";
    import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
-    import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
    import {onDestroy} from "svelte";
    import Translations from "../i18n/Translations";
    import Tr from "../Base/Tr.svelte";
@ -31,7 +30,7 @@
 {#if _tags._deleted === "yes"}
    <Tr t={ Translations.t.delete.isDeleted}/>
 {:else}
-        <div class="flex border-b-2 border-black drop-shadow-md justify-between items-center low-interaction px-3 active-links">
+    <div class="flex border-b-2 border-black drop-shadow-md justify-between items-center low-interaction px-3">
        <div class="flex flex-col">

            <!-- Title element-->
@ -40,12 +39,12 @@
                                    {layer}></TagRenderingAnswer>
            </h3>

-                <div class="flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2 gap-x-0.5 p-1">
+            <div class="title-icons flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2 gap-x-0.5 p-1 links-as-button">
                {#each layer.titleIcons as titleIconConfig}
                    {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({..._metatags, ..._tags}) ?? true) && titleIconConfig.IsKnown(_tags)}
                        <div class="w-8 h-8 flex items-center">
                            <TagRenderingAnswer config={titleIconConfig} {tags} {selectedElement} {state}
-                                                    {layer} extraClasses="h-full justify-center" ></TagRenderingAnswer>
+                                                {layer} extraClasses="h-full justify-center"></TagRenderingAnswer>
                        </div>
                    {/if}
                {/each}
@ -57,5 +56,11 @@
 {/if}

 <style>
+    .title-icons {

+    }
+
+    :global(.title-icons a) {
+        display: block !important;
+    }
 </style>
--- a/UI/BigComponents/UserProfile.svelte
+++ b/UI/BigComponents/UserProfile.svelte
@ -23,7 +23,7 @@
  }));
 </script>

-<div class="flex border border-gray-300 border-dashed m-1 p-1 rounded-md link-underline">
+<div class="flex border border-gray-600 border-dashed m-1 p-1 rounded-md link-underline">
  {#if $userdetails.img}
    <img src={$userdetails.img} class="rounded-full w-12 h-12 m-4">
  {:else}
@ -32,15 +32,15 @@
  <div class="flex flex-col">
    <h3>{$userdetails.name}</h3>
    {#if description}
-      <FromHtml src={description} />
-      <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="link-no-underline flex subtle-background items-center w-fit self-end">
+      <FromHtml src={description}/>
+      <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="link-no-underline flex items-center self-end">
        <PencilAltIcon slot="image" class="p-2 w-8 h-8" />
        <Tr slot="message" t={Translations.t.userinfo.editDescription} />
      </a>

    {:else}
      <Tr t={Translations.t. userinfo.noDescription} />
-      <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex subtle-background items-center">
+      <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
        <PencilAltIcon slot="image" class="p-2 w-8 h-8" />
        <Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
      </a>
--- a/UI/Input/Checkboxes.ts
+++ b/UI/Input/Checkboxes.ts
@ -1,6 +1,6 @@
-import { InputElement } from "./InputElement"
-import { UIEventSource } from "../../Logic/UIEventSource"
-import { Utils } from "../../Utils"
+import {InputElement} from "./InputElement"
+import {UIEventSource} from "../../Logic/UIEventSource"
+import {Utils} from "../../Utils"
 import BaseUIElement from "../BaseUIElement"
 import InputElementMap from "./InputElementMap"
 import Translations from "../i18n/Translations"
@ -68,18 +68,15 @@ export default class CheckBoxes extends InputElement<number[]> {
            label.appendChild(inputI.ConstructElement())
            label.classList.add("block", "w-full", "p-2", "cursor-pointer", "bg-red")

-            const wrapper = document.createElement("div")
-            wrapper.classList.add("wrapper", "flex", "w-full", "border", "border-gray-400", "mb-1")
-            wrapper.appendChild(label)
-            formTag.appendChild(wrapper)
+            formTag.appendChild(label)

            value.addCallbackAndRunD((selectedValues) => {
                input.checked = selectedValues.indexOf(i) >= 0

                if (input.checked) {
-                    wrapper.classList.add("checked")
+                    label.classList.add("checked")
                } else {
-                    wrapper.classList.remove("checked")
+                    label.classList.remove("checked")
                }
            })

--- a/UI/Popup/AddNewPoint/AddNewPoint.svelte
+++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte
@ -3,7 +3,7 @@
     * This component ties together all the steps that are needed to create a new point.
     * There are many subcomponents which help with that
     */
-  import type { SpecialVisualizationState } from "../../SpecialVisualization";
+    import type {SpecialVisualizationState} from "../../SpecialVisualization";
    import PresetList from "./PresetList.svelte";
    import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig";
    import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
@ -12,21 +12,23 @@
    import FromHtml from "../../Base/FromHtml.svelte";
    import Translations from "../../i18n/Translations.js";
    import TagHint from "../TagHint.svelte";
-  import { And } from "../../../Logic/Tags/And.js";
+    import {And} from "../../../Logic/Tags/And.js";
    import LoginToggle from "../../Base/LoginToggle.svelte";
    import Constants from "../../../Models/Constants.js";
    import FilteredLayer from "../../../Models/FilteredLayer";
-  import { Store, UIEventSource } from "../../../Logic/UIEventSource";
-  import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid";
+    import {Store, UIEventSource} from "../../../Logic/UIEventSource";
+    import {EyeIcon, EyeOffIcon} from "@rgossiaux/svelte-heroicons/solid";
    import LoginButton from "../../Base/LoginButton.svelte";
    import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte";
    import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction";
-  import { OsmWay } from "../../../Logic/Osm/OsmObject";
-  import { Tag } from "../../../Logic/Tags/Tag";
-  import type { WayId } from "../../../Models/OsmFeature";
+    import {OsmWay} from "../../../Logic/Osm/OsmObject";
+    import {Tag} from "../../../Logic/Tags/Tag";
+    import type {WayId} from "../../../Models/OsmFeature";
    import Loading from "../../Base/Loading.svelte";
-  import type { GlobalFilter } from "../../../Models/GlobalFilter";
-  import { onDestroy } from "svelte";
+    import type {GlobalFilter} from "../../../Models/GlobalFilter";
+    import {onDestroy} from "svelte";
+    import NextButton from "../../Base/NextButton.svelte";
+    import BackButton from "../../Base/BackButton.svelte";

    export let coordinate: { lon: number, lat: number };
    export let state: SpecialVisualizationState;
@ -37,7 +39,7 @@
        icon: string,
        tags: Record<string, string>
    } = undefined;
-  let checkedOfGlobalFilters : number = 0
+    let checkedOfGlobalFilters: number = 0
    let confirmedCategory = false;
    $: if (selectedPreset === undefined) {
        confirmedCategory = false;
@ -139,12 +141,12 @@
    2. What do we want to add?
    3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
    <LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
-    <Tr slot="message" t={Translations.t.general.add.pleaseLogin} />
+        <Tr slot="message" t={Translations.t.general.add.pleaseLogin}/>
    </LoginButton>
    {#if $isLoading}
        <div class="alert">
            <Loading>
-        <Tr t={Translations.t.general.add.stillLoading} />
+                <Tr t={Translations.t.general.add.stillLoading}/>
            </Loading>
        </div>
    {:else if $zoom < Constants.minZoomLevelToAddNewPoint}
@ -159,19 +161,20 @@
    {:else if !$layerIsDisplayed}
        <!-- Check that the layer is enabled, so that we don't add a duplicate -->
        <div class="alert flex justify-center items-center">
-      <EyeOffIcon class="w-8" />
+            <EyeOffIcon class="w-8"/>
            <Tr t={Translations.t.general.add.layerNotEnabled
                    .Subs({ layer: selectedPreset.layer.name })
-                   } />
+                   }/>
        </div>

        <SubtleButton on:click={() => {
      layerIsDisplayed.setData(true)
      abort()
    }}>
-      <EyeIcon slot="image" class="w-8" />
-      <Tr slot="message" t={Translations.t.general.add.enableLayer.Subs({name: selectedPreset.layer.name})} />
+            <EyeIcon slot="image" class="w-8"/>
+            <Tr slot="message" t={Translations.t.general.add.enableLayer.Subs({name: selectedPreset.layer.name})}/>
        </SubtleButton>
+
        <SubtleButton on:click={() => {
      abort()
      state.guistate.openFilterView(selectedPreset.layer)    }    }>
@ -183,8 +186,8 @@
    {:else if $layerHasFilters}
        <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
        <div class="alert flex justify-center items-center">
-      <EyeOffIcon class="w-8" />
-      <Tr t={Translations.t.general.add.disableFiltersExplanation} />
+            <EyeOffIcon class="w-8"/>
+            <Tr t={Translations.t.general.add.disableFiltersExplanation}/>
        </div>

        <SubtleButton on:click={() => {
@ -193,12 +196,12 @@
      flayer.disableAllFilters()
    }
    }>
-      <EyeOffIcon class="w-8" />
+            <EyeOffIcon class="w-8"/>
            <Tr slot="message" t={Translations.t.general.add.disableFilters}></Tr>
        </SubtleButton>


-    <SubtleButton on:click={() => {
+        <SubtleButton options={{extraClasses:"secondary"}} on:click={() => {
      abort()
      state.guistate.openFilterView(selectedPreset.layer)
    }
@ -209,21 +212,25 @@

    {:else if !confirmedCategory  }
        <!-- Second, confirm the category -->
-    <Tr t={Translations.t.general.add.confirmIntro.Subs({title: selectedPreset.preset.title})}></Tr>
+        <h2>
+            <Tr t={Translations.t.general.add.confirmTitle.Subs({title: selectedPreset.preset.title})}/>
+        </h2>
+        
+        <Tr t={Translations.t.general.add.confirmIntro}/>


        {#if selectedPreset.preset.description}
-      <Tr t={selectedPreset.preset.description} />
+            <Tr t={selectedPreset.preset.description}/>
        {/if}

        {#if selectedPreset.preset.exampleImages}
-      <h4>
-        {#if selectedPreset.preset.exampleImages.length == 1}
-          <Tr t={Translations.t.general.example} />
+            <h3>
+                {#if selectedPreset.preset.exampleImages.length === 1}
+                    <Tr t={Translations.t.general.example}/>
                {:else}
-          <Tr t={Translations.t.general.examples } />
+                    <Tr t={Translations.t.general.examples }/>
                {/if}
-      </h4>
+            </h3>
            <span class="flex flex-wrap items-stretch">
      {#each selectedPreset.preset.exampleImages as src}
        <img {src} class="h-64 m-1 w-auto rounded-lg">
@ -233,27 +240,30 @@
        <TagHint embedIn={tags => t.presetInfo.Subs({tags})} {state}
                 tags={new And(selectedPreset.preset.tags)}></TagHint>

+        <div class="flex w-full">

-    <SubtleButton on:click={() => confirmedCategory = true}>
+            <BackButton on:click={() => selectedPreset = undefined} clss="w-full">
+                <Tr slot="message" t={t.backToSelect}/>
+            </BackButton>
+
+            <NextButton on:click={() => confirmedCategory = true} clss="primary w-full">
                <div slot="image" class="relative">
                    <FromHtml src={selectedPreset.icon}></FromHtml>
                    <img class="absolute bottom-0 right-0 w-4 h-4" src="./assets/svg/confirm.svg">
                </div>
-      <div slot="message">
+                <div class="w-full">
                    <Tr t={selectedPreset.text}></Tr>
                </div>
-    </SubtleButton>
-    <SubtleButton on:click={() => selectedPreset = undefined}>
-      <img src="./assets/svg/back.svg" class="w-8 h-8" slot="image">
-      <div slot="message">
-        <Tr t={t.backToSelect} />
+            </NextButton>
        </div>
-    </SubtleButton>
+
    {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
-      <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} />
+        <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck}/>
        <SubtleButton on:click={() => {checkedOfGlobalFilters = checkedOfGlobalFilters + 1}}>
-        <img slot="image" src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"} class="w-12 h-12">
-        <Tr slot="message" t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({preset: selectedPreset.preset})} />
+            <img slot="image" src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
+                 class="w-12 h-12">
+            <Tr slot="message"
+                t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({preset: selectedPreset.preset})}/>
        </SubtleButton>
        <SubtleButton on:click={() => {globalFilter.setData([]); abort()}}>
            <img slot="image" src="./assets/svg/close.svg" class="w-8 h-8"/>
@ -263,9 +273,18 @@
        <NewPointLocationInput value={preciseCoordinate} snappedTo={snappedToObject} {state} {coordinate}
                               targetLayer={selectedPreset.layer}
                               snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}></NewPointLocationInput>
-    <SubtleButton on:click={confirm}>
-      <span slot="message">Confirm location</span>
-    </SubtleButton>
+        <div class="flex">
+            
+        <BackButton on:click={() => selectedPreset = undefined} clss="w-full">
+            <Tr slot="message" t={t.backToSelect}/>
+        </BackButton>
+
+        <NextButton on:click={confirm} clss="primary w-full">
+            <div class="w-full flex justify-end gap-x-2">
+            <Tr t={Translations.t.general.add.confirmLocation}/>
+            </div>
+        </NextButton>
+        </div>
    {:else}
        <Loading>Creating point...</Loading>
    {/if}
--- a/UI/Popup/AddNewPoint/PresetList.svelte
+++ b/UI/Popup/AddNewPoint/PresetList.svelte
@ -1,16 +1,17 @@
 <script lang="ts">
    import LayoutConfig from "../../../Models/ThemeConfig/LayoutConfig";
-  import { createEventDispatcher } from "svelte";
+    import {createEventDispatcher} from "svelte";
    import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig";
    import Tr from "../../Base/Tr.svelte";
    import Translations from "../../i18n/Translations.js";
    import SubtleButton from "../../Base/SubtleButton.svelte";
-  import { Translation } from "../../i18n/Translation";
-  import type { SpecialVisualizationState } from "../../SpecialVisualization";
-  import { ImmutableStore } from "../../../Logic/UIEventSource";
-  import { TagUtils } from "../../../Logic/Tags/TagUtils";
+    import {Translation} from "../../i18n/Translation";
+    import type {SpecialVisualizationState} from "../../SpecialVisualization";
+    import {ImmutableStore} from "../../../Logic/UIEventSource";
+    import {TagUtils} from "../../../Logic/Tags/TagUtils";
    import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
    import FromHtml from "../../Base/FromHtml.svelte";
+    import NextButton from "../../Base/NextButton.svelte";

    /**
     * This component lists all the presets and allows the user to select one
@ -57,32 +58,36 @@
                icon,
                description,
                tags,
-        text: Translations.t.general.add.addNew.Subs({ category: preset.title }, preset.title["context"])
+                text: Translations.t.general.add.addNew.Subs({category: preset.title}, preset.title["context"])
            };
            presets.push(simplified);
        }

    }

-  const dispatch = createEventDispatcher<{ select: {preset: PresetConfig, layer: LayerConfig, icon: string, tags: Record<string, string>} }>();
+    const dispatch = createEventDispatcher<{
+        select: { preset: PresetConfig, layer: LayerConfig, icon: string, tags: Record<string, string> }
+    }>();

 </script>

-<div>
-  <Tr t={Translations.t.general.add.intro} />
-  {#each presets as preset}
-    <SubtleButton on:click={() => dispatch("select", preset)}>
-      <FromHtml slot="image" src={preset.icon}></FromHtml>
-      <div slot="message">
+<div class="flex flex-col w-full">
+    <h2>
+        <Tr t={Translations.t.general.add.intro}/>
+    </h2>
    
-        <b>
-          <Tr t={preset.text} />
+    {#each presets as preset}
+        <NextButton on:click={() => dispatch("select", preset)}>
+            <FromHtml slot="image" src={preset.icon}></FromHtml>
+            <div class="flex flex-col">
+                <b class="w-fit">
+                    <Tr t={preset.text}/>
                </b>
                {#if preset.description}
-          <Tr t={preset.description}/>
+                    <Tr t={preset.description} cls="font-normal"/>
                {/if}
            </div>

-    </SubtleButton>
+        </NextButton>
    {/each}
 </div>
--- a/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@ -201,7 +201,7 @@

                <slot name="cancel"></slot>

-                <button on:click={onSave} class={selectedTags === undefined ? "disabled" : "button-shadow"}>
+                <button on:click={onSave} class={(selectedTags === undefined ? "disabled" : "button-shadow")+" primary"}>
                    <Tr t={Translations.t.general.save}></Tr>
                </button>
            </div>
--- a/UI/StylesheetTestGui.svelte
+++ b/UI/StylesheetTestGui.svelte
@ -31,21 +31,21 @@
        </p>

        <div class="flex">
-            <button>
+            <button class="primary">
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Main action
            </button>
-            <button class="disabled">
+            <button class="primary disabled">
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Main action (disabled)
            </button>
        </div>
        <div class="flex">
-            <button class="secondary">
+            <button>
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Secondary action
            </button>
-            <button class="secondary disabled">
+            <button class="disabled">
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Secondary action (disabled)
            </button>
@ -79,21 +79,21 @@
        </p>

        <div class="flex">
-            <button>
+            <button class="primary">
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Main action
            </button>
-            <button class="disabled">
+            <button class="primary disabled">
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Main action (disabled)
            </button>
        </div>
        <div class="flex">
-            <button class="secondary">
+            <button>
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Secondary action
            </button>
-            <button class="secondary disabled">
+            <button class="disabled">
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Secondary action (disabled)
            </button>
--- a/UI/ThemeViewGUI.svelte
+++ b/UI/ThemeViewGUI.svelte
@ -39,6 +39,8 @@
    import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
    import Svg from "../Svg";
    import {ShareScreen} from "./BigComponents/ShareScreen";
+    import NextButton from "./Base/NextButton.svelte";
+    import IfNot from "./Base/IfNot.svelte";

    export let state: ThemeViewState;
    let layout = state.layout;
@ -83,6 +85,21 @@
    let availableLayers = state.availableLayers;
    let userdetails = state.osmConnection.userDetails;
    let currentViewLayer = layout.layers.find(l => l.id === "current_view")
+
+    function jumpToCurrentLocation() {
+        const glstate = state.geolocation.geolocationState
+        if (glstate.currentGPSLocation.data !== undefined) {
+            const c: GeolocationCoordinates = glstate.currentGPSLocation.data
+            state.guistate.themeIsOpened.setData(false)
+            const coor = {lon: c.longitude, lat: c.latitude}
+            state.mapProperties.location.setData(coor)
+        }
+        if (glstate.permission.data !== "granted") {
+            glstate.requestPermission()
+            return
+        }
+
+    }
 </script>


@ -95,7 +112,7 @@
    <If condition={state.featureSwitches.featureSwitchSearch}>
        <div class="max-[480px]:w-full float-right mt-1 px-1 sm:m-2">
            <Geosearch bounds={state.mapProperties.bounds} perLayer={state.perLayer} {selectedElement}
-                       {selectedLayer}></Geosearch>
+                       {selectedLayer}/>
        </div>
    </If>
    <div class="float-left m-1 sm:mt-2">
@ -184,7 +201,7 @@
                <Tr t={layout.title}/>
            </div>

-            <div slot="content0">
+            <div class="m-4" slot="content0">

                <Tr t={layout.description}></Tr>
                <Tr t={Translations.t.general.welcomeExplanation.general}/>
@ -198,11 +215,30 @@
                loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"),
                -->
                <Tr t={layout.descriptionTail}></Tr>
-                <div class="m-x-8">
-                    <button class="subtle-background rounded w-full p-4"
-                            on:click={() => state.guistate.themeIsOpened.setData(false)}>
+                <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
+                    <div class="flex justify-center w-full text-2xl">
                        <Tr t={Translations.t.general.openTheMap}/>
+                    </div>
+                </NextButton>
+
+                <div class="flex w-full">
+                    <IfNot condition={state.geolocation.geolocationState.permission.map(p => p === "denied")}>
+                        <button class="flex w-full gap-x-2 items-center" on:click={jumpToCurrentLocation}>
+                            <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")}/>
+                            <span>
+                            Jump to your location
+                        </span>
                        </button>
+                    </IfNot>
+
+                    <div class="flex flex-col w-full border rounded low-interactive">
+                        Search for a location:
+                        <Geosearch bounds={state.mapProperties.bounds}
+                                   on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
+                                   perLayer={state.perLayer}
+                                   {selectedElement}
+                                   {selectedLayer}/>
+                    </div>
                </div>

            </div>
@ -238,7 +274,7 @@
                    <Tr t={Translations.t.general.download.title}/>
                </If>
            </div>
-            <div slot="content2">
+            <div class="m-4" slot="content2">
                <ToSvelte construct={() => new DownloadPanel(state)}/>
            </div>

@ -270,7 +306,7 @@
                <Tr t={Translations.t.general.menu.aboutMapComplete}/>
            </div>

-            <div class="flex flex-col" slot="content0">
+            <div class="flex flex-col m-2 links-as-button links-w-full gap-y-1" slot="content0">

                <Tr t={Translations.t.general.aboutMapComplete.intro}/>

@ -308,12 +344,12 @@
                <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})}/>
            </div>

-            <div slot="content1">
+            <div class="links-as-button" slot="content1">
                <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
                <LoginToggle {state}>
-                    <div slot="not-logged-in">
+                    <div slot="not-logged-in" class="flex flex-col">
                        <Tr class="alert" t={Translations.t.userinfo.notLoggedIn}/>
-                        <LoginButton osmConnection={state.osmConnection}></LoginButton>
+                        <LoginButton osmConnection={state.osmConnection} clss="primary"/>
                    </div>
                    <SelectedElementView
                            highlightedRendering={state.guistate.highlightedUserSetting}
@ -330,16 +366,20 @@
                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                Get in touch with others
            </div>
-            <CommunityIndexView location={state.mapProperties.location} slot="content2"></CommunityIndexView>
+            <div class="m-2" slot="content2">
+                <CommunityIndexView location={state.mapProperties.location}></CommunityIndexView>
+            </div>

            <div class="flex" slot="title3">
                <EyeIcon class="w-6"/>
                <Tr t={Translations.t.privacy.title}></Tr>
            </div>
-            <ToSvelte construct={() => new PrivacyPolicy()} slot="content3"></ToSvelte>
+            <div class="m-2" slot="content3">
+                <ToSvelte construct={() => new PrivacyPolicy()}/>
+            </div>

            <Tr slot="title4" t={Translations.t.advanced.title}/>
-            <div class="flex flex-col" slot="content4">
+            <div class="flex flex-col m-2" slot="content4">
                <ToSvelte construct={Hotkeys.generateDocumentationDynamic}></ToSvelte>

            </div>
--- a/assets/svg/crosshair.svg
+++ b/assets/svg/crosshair.svg
@ -1,11 +1,14 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
-  <g id="surface1">
-    <path style="fill:none;stroke-width:2.645833;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:0.988235;stroke-miterlimit:4;" d="M 22.034555 283.770823 C 22.034555 288.670301 18.062773 292.642358 13.16302 292.642358 C 8.263267 292.642358 4.291486 288.670301 4.291486 283.770823 C 4.291486 278.871071 8.263267 274.899289 13.16302 274.899289 C 18.062773 274.899289 22.034555 278.871071 22.034555 283.770823 Z M 22.034555 283.770823 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.097239;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:0.988235;stroke-miterlimit:4;" d="M 3.28414 283.770823 L 1.041796 283.770823 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.116667;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:0.988235;stroke-miterlimit:4;" d="M 25.405787 283.770823 L 23.286365 283.770823 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.116667;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:0.988235;stroke-miterlimit:4;" d="M 13.229166 295.948823 L 13.229166 293.831329 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.116667;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:0.988235;stroke-miterlimit:4;" d="M 13.229166 275.057488 L 13.229166 271.612392 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 235.789062 187.5 C 235.789062 214.167969 214.167969 235.789062 187.5 235.789062 C 160.832031 235.789062 139.210938 214.167969 139.210938 187.5 C 139.210938 160.832031 160.832031 139.210938 187.5 139.210938 C 214.167969 139.210938 235.789062 160.832031 235.789062 187.5 Z M 235.789062 187.5 "/>
-  </g>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="375px"
+   height="375px"
+   viewBox="0 0 375 375"
+   version="1.1"
+   id="svg15"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     id="path2"
+     style="color:#000000;fill:#000000;fill-opacity:0.988235;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="M 187.5 0.17578125 A 15 15 0 0 0 172.5 15.175781 L 172.5 43.708984 C 104.37541 50.343145 49.843699 104.61884 42.837891 172.63672 L 14.765625 172.63672 A 14.86235 14.86235 0 0 0 -0.09765625 187.5 A 14.86235 14.86235 0 0 0 14.765625 202.36133 L 42.837891 202.36133 C 49.842792 270.37794 104.37427 324.65648 172.5 331.29102 L 172.5 360.10156 A 15 15 0 0 0 187.5 375.10156 A 15 15 0 0 0 202.5 360.10156 L 202.5 331.08594 C 269.70108 323.65092 323.26953 269.82518 330.26953 202.5 L 360.08203 202.5 A 15 15 0 0 0 375.08203 187.5 A 15 15 0 0 0 360.08203 172.5 L 330.26953 172.5 C 323.26946 105.17266 269.70061 51.348735 202.5 43.914062 L 202.5 15.175781 A 15 15 0 0 0 187.5 0.17578125 z M 186.5625 80.511719 C 245.87515 80.511719 293.55078 128.18741 293.55078 187.5 C 293.55078 246.80822 245.87443 294.48828 186.5625 294.48828 C 127.25056 294.48828 79.574219 246.80822 79.574219 187.5 C 79.574219 128.1874 127.24984 80.511719 186.5625 80.511719 z M 187.5 139.21094 C 160.83203 139.21094 139.21094 160.83203 139.21094 187.5 C 139.21094 214.16797 160.83203 235.78906 187.5 235.78906 C 214.16797 235.78906 235.78906 214.16797 235.78906 187.5 C 235.78906 160.83203 214.16797 139.21094 187.5 139.21094 z " />
 </svg>
--- a/assets/svg/login.svg
+++ b/assets/svg/login.svg
@ -5,48 +5,12 @@
   viewBox="0 0 375 375"
   version="1.1"
   id="svg11"
-   sodipodi:docname="login.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs15" />
-  <sodipodi:namedview
-     id="namedview13"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="1.3821795"
-     inkscape:cx="194.62016"
-     inkscape:cy="176.89453"
-     inkscape:window-width="1920"
-     inkscape:window-height="995"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg11" />
  <path
-     style="fill:none;stroke:#000000;stroke-width:39.7328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
-     d="m 237.15027,94.152359 c 0,0 -92.37109,68.046801 -92.69922,93.515521 -0.32428,25.46887 92.69922,93.7423 92.69922,93.7423"
-     id="path2" />
-  <path
-     style="fill:none;stroke:#000000;stroke-width:33.75;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
-     d="M 148.99403,187.46096 H 359.47448"
-     id="path4" />
-  <path
-     style="fill:none;stroke:#000000;stroke-width:31.3235;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
-     d="m 166.75391,294.40998 0,5.70716 c 0,33.18364 -26.84767,33.62896 -26.84767,33.62896 0,0 -52.734369,0.74551 -85.976555,0.74551 -33.246085,0 -30.578116,-33.03127 -30.578116,-33.03127 l 0.773433,-112.8359"
-     id="path8"
-     sodipodi:nodetypes="cscscc" />
-  <path
-     style="fill:none;stroke:#000000;stroke-width:31.3235;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
-     d="m 166.75391,82.8389 v -5.70716 c 0,-33.18364 -26.84767,-33.62896 -26.84767,-33.62896 0,0 -52.734369,-0.74551 -85.976555,-0.74551 -33.246085,0 -30.578116,33.03127 -30.578116,33.03127 l 0.773433,112.8359"
-     id="path1167"
-     sodipodi:nodetypes="cscscc" />
+     id="path2"
+     style="color:#000000;fill:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="M 53.929688 27.095703 C 32.119816 27.095703 16.970068 40.812733 11.746094 53.177734 C 7.106544 64.159419 7.5344948 73.99011 7.6914062 76.158203 L 8.4628906 188.625 L 7.6914062 301.08984 C 7.5344948 303.25794 7.106544 313.08863 11.746094 324.07031 C 16.970068 336.43531 32.119816 350.1543 53.929688 350.1543 C 87.406 350.1543 140.12695 349.40625 140.12695 349.40625 A 15.663316 15.663316 0 0 0 140.16602 349.40625 C 140.16602 349.40625 151.12665 349.32365 161.72266 342.59961 C 172.31866 335.87554 182.41602 320.93277 182.41602 300.11719 L 182.41602 294.41016 A 15.66175 15.66175 0 0 0 166.75391 278.74805 A 15.66175 15.66175 0 0 0 151.0918 294.41016 L 151.0918 300.11719 C 151.0918 312.48521 147.76532 314.35785 144.9375 316.15234 C 142.10968 317.94684 139.64648 318.08594 139.64648 318.08594 C 139.59848 318.08661 86.922647 318.83008 53.929688 318.83008 C 42.493509 318.83008 42.353165 316.03148 40.599609 311.88086 C 38.846054 307.73024 38.962891 302.7207 38.962891 302.7207 A 15.663316 15.663316 0 0 0 39.013672 301.56836 L 39.787109 188.73242 A 15.66175 15.66175 0 0 0 39.78125 188.625 A 15.66175 15.66175 0 0 0 39.787109 188.51758 L 39.013672 75.681641 A 15.663316 15.663316 0 0 0 38.962891 74.527344 C 38.962891 74.527344 38.846054 69.517805 40.599609 65.367188 C 42.353165 61.216571 42.493508 58.419922 53.929688 58.419922 C 86.922646 58.419922 139.59847 59.161432 139.64648 59.162109 C 139.64648 59.162109 142.10968 59.303163 144.9375 61.097656 C 147.76532 62.892149 151.0918 64.762835 151.0918 77.130859 L 151.0918 82.839844 A 15.66175 15.66175 0 0 0 166.75391 98.5 A 15.66175 15.66175 0 0 0 182.41602 82.839844 L 182.41602 77.130859 C 182.41602 56.315277 172.31866 41.374459 161.72266 34.650391 C 151.12665 27.926322 140.16602 27.84375 140.16602 27.84375 A 15.663316 15.663316 0 0 0 140.12695 27.841797 C 140.12695 27.841797 87.406001 27.095703 53.929688 27.095703 z M 234.94336 74.408203 A 19.8664 19.8664 0 0 0 225.36719 78.158203 C 225.36719 78.158203 201.76359 95.524722 177.85938 116.39258 C 165.90727 126.82651 153.84111 138.11038 144.11523 149.23828 C 134.38936 160.36618 124.82118 169.15316 124.58594 187.41211 A 19.868386 19.868386 0 0 0 124.58594 187.41406 C 124.34949 205.98477 134.08341 214.90837 143.80273 226.0918 C 153.52206 237.27522 165.61857 248.59181 177.61914 259.06055 C 201.62029 279.99802 225.39648 297.42578 225.39648 297.42578 A 19.8664 19.8664 0 0 0 253.16602 293.16406 A 19.8664 19.8664 0 0 0 248.9043 265.39453 C 248.9043 265.39453 226.16776 248.68556 203.73828 229.11914 C 194.28077 220.86885 185.03853 212.15104 177.75586 204.33594 L 359.47461 204.33594 A 16.875 16.875 0 0 0 376.34961 187.46094 A 16.875 16.875 0 0 0 359.47461 170.58594 L 178.46289 170.58594 C 185.70519 162.89528 194.75718 154.38471 203.98828 146.32617 C 226.3516 126.80349 248.93359 110.14648 248.93359 110.14648 A 19.8664 19.8664 0 0 0 253.14453 82.369141 A 19.8664 19.8664 0 0 0 234.94336 74.408203 z " />
 </svg>
--- a/index.css
+++ b/index.css
@ -88,7 +88,7 @@ li::marker {
 }

 h1 {
-    font-size: x-large;
+    font-size: xx-large;
    margin-top: 0.6em;
    margin-bottom: 0.4em;
    font-weight: bold;
@ -96,7 +96,7 @@ h1 {


 h2 {
-    font-size: large;
+    font-size: x-large;
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    font-weight: bold;
@ -157,31 +157,6 @@ input {
 * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
 */

-button.disabled {
-    cursor: default;
-    border: 2px dashed var(--button-background);
-    background: unset;
-    color: unset;
-    box-shadow: none;
-}
-
-button.disabled:hover {
-    cursor: default;
-    border: 2px dashed var(--button-background);
-    background: unset;
-    color: unset;
-}
-
-button:hover {
-    border: 2px solid var(--catch-detail-color-contrast);
-    background-color: var(--catch-detail-color);
-    color: var(--catch-detail-foregroundcolor);
-}
-
-button:hover img {
-    background: var(--low-interaction-background);
-    border-radius: 100rem;
-}

 button {
    display: inline-flex;
@ -192,16 +167,17 @@ button {
    padding-right: 0.6rem;
    font-size: large;
    font-weight: bold;
-    color: var(--button-foreground);
-    background: var(--button-background);
    /*-- invisible border: rendered on hover*/
    border: 2px solid var(--button-background);
    border-radius: 0.5rem;
    transition: all 250ms;
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
+    background: var(--low-interaction-background);
+    color: var(--low-interaction-foreground);
 }

+
 button .button-shadow {
    box-shadow: 0 5px 10px #88888888;
 }
@ -217,14 +193,71 @@ button.selected svg path {
    fill: var(--catch-detail-foregroundcolor) !important;
 }

-button svg path {
+button:not(.no-image-background) svg path {
+    fill: var(--interactive-foreground) !important;;
+    transition: all 250ms;
+}
+
+.interactive button {
+    background: var(--interactive-background);
+    color: var(--interactive-foreground);
+}
+
+button:hover {
+    background-color: var(--catch-detail-color);
+    color: var(--catch-detail-foregroundcolor);
+    border: 2px solid var(--catch-detail-color-contrast);
+}
+
+
+button:hover:not(.no-image-background) img {
+    background: var(--low-interaction-background);
+    border-radius: 100rem;
+}
+
+
+button:hover:not(.no-image-background) svg path {
+    fill: var(--catch-detail-foregroundcolor) !important;;
+}
+
+button.disabled:hover:not(.no-image-background) svg path {
+    fill: var(--low-interaction-foreground) !important;;
+}
+
+
+
+button.primary {
+    color: var(--button-foreground);
+    background: var(--button-background);
+}
+
+button.primary:not(.no-image-background) svg path {
    fill: var(--button-foreground) !important;;
+    transition: all 250ms;
+}
+
+
+button.disabled {
+    cursor: default;
+    border: 2px dashed var(--button-background);
+    background: unset;
+    color: unset;
+    box-shadow: none;
+}
+
+
+button.disabled:hover {
+    cursor: default;
+    border: 2px dashed var(--button-background);
+    background: unset;
+    color: unset;
 }

 .interactive button.disabled svg path {
    fill: var(--interactive-foreground) !important;;
 }

+
 .low-interaction button.disabled svg path {
    fill: var(--low-interaction-foreground) !important;;
 }
@ -233,49 +266,7 @@ button svg path {
    fill: var(--foreground-color) !important;
 }

-button.disabled.secondary:hover {
-    background: unset;
-    color: unset;
-}

-button.secondary {
-    background: var(--low-interaction-background);
-    color: var(--low-interaction-foreground);
-    border-color: var(--button-background);
-}
-
-.interactive button.secondary {
-    background: var(--interactive-background);
-    color: var(--interactive-foreground);
-}
-
-button.secondary svg path {
-    fill: var(--low-interaction-foreground) !important;
-    transition: all 250ms;
-}
-
-button.secondary.disabled {
-    background: unset;
-    color: var(--low-interaction-foreground);
-}
-
-button.secondary.disabled svg path {
-    fill: var(--low-interaction-foreground) !important;
-}
-
-button.secondary:hover {
-    background-color: var(--catch-detail-color);
-    color: var(--catch-detail-foregroundcolor);
-    border-color: var(--catch-detail-color-contrast);
-}
-
-button.secondary:hover svg path {
-    fill: var(--catch-detail-foregroundcolor) !important;;
-}
-
-button.secondary.disabled:hover svg path {
-    fill: var(--low-interaction-foreground) !important;;
-}

 label {
    /**
@ -317,15 +308,18 @@ label.checked {
    border: 2px solid var(--foreground-color);
 }

-
-
-.active-links a{
-    /*
-    * Let a 'link' mimick a secondary button, but not entirely
-    */
-    display: block;
+.links-w-full a {
+    display: flex;
+    column-gap: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
    width: 100%;
-    height: 100%;
+}
+
+.links-as-button a{
+    /*
+    * Let a 'link' mimick a button, but not entirely
+    */
    padding: 3px;
    margin: 0;
    background: var(--low-interaction-background);
@ -335,13 +329,13 @@ label.checked {
 }


-.active-links a:hover {
+.links-as-button a:hover {
    background-color: var(--interactive-background);
    color: var(--catch-detail-foregroundcolor);
    border-color: var(--catch-detail-color-contrast);
 }

-.active-links a:hover svg path {
+.links-as-button a:hover svg path {
    fill: var(--catch-detail-foregroundcolor) !important;
 }

@ -354,12 +348,15 @@ label.checked {

 .thanks {
    /* The class to indicate 'operation successful' or 'thank you for contributing' */
-    background-color: #43d904;
    font-weight: bold;
    border-radius: 1em;
    margin: 0.25em;
    text-align: center;
-    padding: 0.15em 0.3em;
+    padding: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    border: 3px dotted #58cd27;
+    background-color: #58cd2722;
 }

 .alert {
@ -371,6 +368,7 @@ label.checked {
    margin: 0.25em;
    text-align: center;
    padding: 0.15em 0.3em;
+    border: 2px dotted #ff9143;
 }

 .subtle {
--- a/langs/ca.json
+++ b/langs/ca.json
@ -92,7 +92,6 @@
            "addNew": "Afegir {category} aquí",
            "backToSelect": "Selecciona una categoria diferent",
            "confirmButton": "Afegir una {category}<br/><div class='alert'>La teva atribució és visible per a tots</div>",
-            "confirmIntro": "<h3>Afegir {title} aquí?</h3>L'element que estàs creant <b>el veurà tothom</b>. Només afegeix coses que realment existeixen. Moltes aplicacions fan servir aquestes dades.",
            "disableFilters": "Deshabilitar tots els filtres",
            "disableFiltersExplanation": "Alguns elements s'amagaran en passar un filtre",
            "hasBeenImported": "Aquest element ja ha estat importat",
--- a/langs/cs.json
+++ b/langs/cs.json
@ -92,7 +92,6 @@
            "addNew": "Přidat {category}",
            "backToSelect": "Vyberte jinou kategorii",
            "confirmButton": "Přidat kategorii {category}<br/><div class='alert'>Váš příspěvek je viditelný pro všechny</div>",
-            "confirmIntro": "<h3>Přidat {title}?</h3>Funkce, kterou zde vytvoříte, bude <b>viditelná pro všechny</b>. Prosíme, přidávejte věci na mapu pouze tehdy, pokud skutečně existují. Tato data využívá mnoho aplikací.",
            "disableFilters": "Vypnout všechny filtry",
            "disableFiltersExplanation": "Některé funkce mohou být filtrem skryty",
            "hasBeenImported": "Tato funkce již byla importována",
--- a/langs/da.json
+++ b/langs/da.json
@ -44,7 +44,6 @@
        "add": {
            "addNew": "Tilføj {category}",
            "confirmButton": "Tilføj en {category}<br><div class=\"alert\">Din tilføjelse er synlig for alle</div>",
-            "confirmIntro": "<h3>Tilføj en {title}?</h3>Punktet du opretter her vil være <b>synligt for alle</b>. Tilføj kun ting til kortet, hvis de virkelig findes. Mange programmer bruger disse data.",
            "disableFilters": "Slå alle filtre fra",
            "disableFiltersExplanation": "Nogle elementer kan være skjult af et filter",
            "hasBeenImported": "Punktet er allerede importeret",
--- a/langs/de.json
+++ b/langs/de.json
@ -92,7 +92,6 @@
            "addNew": "{category} hinzufügen",
            "backToSelect": "Wählen Sie eine andere Kategorie",
            "confirmButton": "Eine {category} hinzufügen.<br><div class=\"alert\">Ihre Ergänzung ist für alle sichtbar</div>",
-            "confirmIntro": "<h3>Einen {title} hinzufügen?</h3>Das Objekt, das Sie erstellen wird <b>für alle sichtbar sein</b>. Bitte nur Dinge hinzufügen, die wirklich existieren. Viele Anwendungen verwenden diese Daten.",
            "disableFilters": "Alle Filter deaktivieren",
            "disableFiltersExplanation": "Einige Elemente können durch einen Filter ausgeblendet sein",
            "hasBeenImported": "Dieses Objekt wurde bereits importiert",
--- a/langs/en.json
+++ b/langs/en.json
@ -98,7 +98,9 @@
            "addNew": "Add {category}",
            "backToSelect": "Select a different category",
            "confirmButton": "Add a {category}<br/><div class='alert'>Your addition is visible for everyone</div>",
-            "confirmIntro": "<h3>Add a {title}?</h3>The feature you create here will be <b>visible for everyone</b>. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
+            "confirmLocation": "Confirm this location",
+            "confirmTitle": "Add a {title}?",
+            "confirmWarning": "The feature you create here will be <b>visible for everyone</b>. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
            "disableFilters": "Disable all filters",
            "disableFiltersExplanation": "Some features might be hidden by a filter",
            "enableLayer": "Enable layer {name}",
--- a/langs/es.json
+++ b/langs/es.json
@ -44,7 +44,6 @@
        "add": {
            "addNew": "Añadir {category}",
            "confirmButton": "Añadir una {category} .<br><div class=\"alert\">Tu contribución es visible para todos</div>",
-            "confirmIntro": "<h3>Añadir {title} aquí?</h3>El punto que estás creando <b>lo verá todo el mundo</b>. Sólo añade cosas que realmente existan. Muchas aplicaciones usan estos datos.",
            "disableFilters": "Desactivar todos los filtros",
            "disableFiltersExplanation": "Algunas características pueden estar ocultas por un filtro",
            "hasBeenImported": "Este punto ya ha sido importado",
--- a/langs/fil.json
+++ b/langs/fil.json
@ -42,7 +42,6 @@
        "add": {
            "addNew": "Dagdagan ng {category}",
            "confirmButton": "Magdagdag ng {category}<br><div class=\"alert\">Makikita ng lahat ang idinagdag mo</div>",
-            "confirmIntro": "<h3>Mag-dagdag ng {title}?</h3>Ang tampók na ida-dagdag mo ay <b>makikita ng lahat</b>. Paki-usap, mag-dagdag lamang ng mga bagay na tutuong umiiral. Marami pang mga aplikasyon ang gumagamit ng datos na ito.",
            "disableFilters": "Huwag paganahin ang lahat ng filter",
            "disableFiltersExplanation": "May mga tampók na maaring nai-tago ng filter",
            "hasBeenImported": "Ang bukóng ito ay nai-angkat na",
--- a/langs/fr.json
+++ b/langs/fr.json
@ -63,7 +63,6 @@
            "addNew": "Ajouter {category}",
            "backToSelect": "Sélectionner une catégorie différente",
            "confirmButton": "Ajouter un/une {category} ici.<br><div class=\"alert\">Votre ajout sera visible par tout le monde</div>",
-            "confirmIntro": "<h3>Ajouter un/une {title} ici ?</h3>L’élément que vous ajouterez sera <b>visible par tout le monde</b>. Merci de vous assurer que celui-ci existe réellement. Beaucoup d'autres applications utilisent ces données.",
            "disableFilters": "Désactiver tous les filtres",
            "disableFiltersExplanation": "Certains élément peuvent être filtrés",
            "hasBeenImported": "Cet élément a déjà été importé",
--- a/langs/gl.json
+++ b/langs/gl.json
@ -19,7 +19,6 @@
        "add": {
            "addNew": "Engadir {category} aquí",
            "confirmButton": "Engadir {category} aquí",
-            "confirmIntro": "<h3>Engadir {title} aquí?</h3>O punto que estás a crear <b>será ollado por todo o mundo</b>. Só engade cousas que realmente existan. Moitas aplicacións empregan estes datos.",
            "import": {},
            "intro": "Marcaches un lugar onde non coñecemos os datos.<br/>",
            "layerNotEnabled": "A capa {layer} non está activada. Faino para poder engadir un punto nesta capa",
--- a/langs/hu.json
+++ b/langs/hu.json
@ -42,7 +42,6 @@
        "add": {
            "addNew": "Új {category} hozzáadása",
            "confirmButton": "{category} hozzáadása.<br><div class=\"alert\">A hozzáadott objektum mindenki számára látható lesz</div>",
-            "confirmIntro": "<h3>Felrajzolsz egy {title} objektumot?</h3>Az itt létrehozandó térképelemet <b>mindenki láthatja majd</b>. Kérjük, csak valóban létező dolgokat rajzolj fel a térképre. Ezeket az adatokat sok alkalmazás használja.",
            "disableFilters": "Minden szűrő kikapcsolása",
            "disableFiltersExplanation": "Lehet, hogy a szűrő miatt egyes térképelemek nem látszanak",
            "hasBeenImported": "Ezt a térképelemet már importálták",
--- a/langs/id.json
+++ b/langs/id.json
@ -42,7 +42,6 @@
        "add": {
            "addNew": "Tambahkan {category}",
            "confirmButton": "Tambahkan {category}<br><div class=\"alert\">Penambahan Anda akan terlihat oleh semua orang</div>",
-            "confirmIntro": "<h3>Tambahkan {title}?</h3>Fitur yang Anda buat di sini akan <b>terlihat oleh semua orang</b>. Harap menambahkan sesuatu ke peta hanya jika ia benar-benar ada. Banyak aplikasi menggunakan data ini.",
            "disableFiltersExplanation": "Beberapa fitur mungkin disembunyikan oleh penyaringan",
            "hasBeenImported": "Fitur ini sudah diimpor",
            "import": {
--- a/langs/it.json
+++ b/langs/it.json
@ -44,7 +44,6 @@
        "add": {
            "addNew": "Aggiungi {category} qua",
            "confirmButton": "Aggiungi una {category} qua.<br><div class=\"alert\">La tua aggiunta è visibile a chiunque</div>",
-            "confirmIntro": "<h3>Aggiungere un {title}?</h3>L'elemento che hai creato qui sarà <b>visibile da chiunque</b>. Per favore, aggiungi sulla mappa solo oggetti realmente esistenti. Molte applicazioni usano questi dati.",
            "disableFilters": "Disabilita tutti i filtri",
            "disableFiltersExplanation": "Alcuni oggetti potrebbero essere nascosti da un filtro",
            "hasBeenImported": "Questo elemento è stato già importato",
--- a/langs/ja.json
+++ b/langs/ja.json
@ -19,7 +19,6 @@
        "add": {
            "addNew": "ここに新しい {category} を追加します",
            "confirmButton": "ここに{category}を追加します。<br><div class=\"alert\">追加内容はすべてのユーザーに表示されます。</div>",
-            "confirmIntro": "<h3>ここに{title}を追加しますか?</h3>ここで作成したポイントは<b>すべてのユーザーに表示されます</b>。本当に存在するものだけをマップに追加してください。多くのアプリケーションがこのデータを使用しています。",
            "import": {},
            "intro": "データがまだわからない場所をクリックしました。<br>",
            "layerNotEnabled": "レイヤ{layer}は有効になっていません。このレイヤで点を追加できるようにする",
--- a/langs/layers/en.json
+++ b/langs/layers/en.json
@ -8870,6 +8870,24 @@
                },
                "question": "Show user settings debug info?"
            },
+            "show_tags": {
+                "mappings": {
+                    "0": {
+                        "then": "Never show the tags."
+                    },
+                    "1": {
+                        "then": "Show the tags that will be applied once I have made {__userjourney_tagsVisibleAt} changesets"
+                    },
+                    "2": {
+                        "then": "Show the tags that will be applied when making a change"
+                    },
+                    "3": {
+                        "then": "Show the tags that will be applied when making a change and show the tags table on every feature"
+                    }
+                },
+                "question": "Show the raw OpenStreetMap-tags?",
+                "questionHint": "<b>Tags</b> are attributes that every element has. This is the technical data that is stored in the database. You don't need this information to edit with MapComplete, but advanced users might want to use this as reference."
+            },
            "translation-completeness": {
                "mappings": {
                    "0": {
--- a/langs/nb_NO.json
+++ b/langs/nb_NO.json
@ -75,7 +75,6 @@
            "addNew": "Legg til {category} her",
            "backToSelect": "Velg en annen kategori",
            "confirmButton": "Legg til en {category} her.<br/><div class='alert'>Din endring er synlig for alle</div>",
-            "confirmIntro": "<h3>Legg til {title} her?</h3>Punktet du oppretter her vil være <b>synlig for alle</b>. Kun legg til ting på kartet hvis de virkelig finnes. Mange programmer bruker denne dataen.",
            "disableFilters": "Skru av alle filtre",
            "disableFiltersExplanation": "Det kan hende noen funksjoner er skjult av et filter",
            "hasBeenImported": "Dette punktet har allerede blitt importert",
--- a/langs/nl.json
+++ b/langs/nl.json
@ -92,7 +92,8 @@
            "addNew": "Voeg {category} toe",
            "backToSelect": "Selecteer een andere categorie",
            "confirmButton": "Voeg een {category} toe<br><div class=\"alert\">Je toevoeging is voor iedereen zichtbaar</div>",
-            "confirmIntro": "<h3>Voeg een {title} toe?</h3>Het object dat je toevoegt, is <b>zichtbaar voor iedereen</b>. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan.",
+            "confirmTitle": "Voeg een {title} toe?",
+            "confirmWarning": "Het object dat je toevoegt, is <b>zichtbaar voor iedereen</b>. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan.",
            "disableFilters": "Zet alle filters af",
            "disableFiltersExplanation": "Interessepunten kunnen verborgen zijn door een filter",
            "hasBeenImported": "Dit object is reeds geïmporteerd",
--- a/langs/pl.json
+++ b/langs/pl.json
@ -25,7 +25,6 @@
        "add": {
            "addNew": "Dodaj nową {category} tutaj",
            "confirmButton": "Dodaj tutaj {category}.<br><div class=\"alert\">Twój dodatek jest widoczny dla wszystkich</div>",
-            "confirmIntro": "<h3>Czy dodać tutaj {title}?</h3> Punkt, który tutaj utworzysz, będzie <b>widoczny dla wszystkich<b>. Proszę, dodawaj rzeczy do mapy tylko wtedy, gdy naprawdę istnieją. Wiele aplikacji korzysta z tych danych.</b></b>",
            "intro": "Kliknąłeś gdzieś, gdzie nie są jeszcze znane żadne dane.<br>",
            "layerNotEnabled": "Warstwa {layer} nie jest włączona. Włącz tę warstwę, aby dodać punkt",
            "openLayerControl": "Otwórz okno sterowania warstwą",
--- a/langs/pt.json
+++ b/langs/pt.json
@ -81,7 +81,6 @@
            "addNew": "Adicionar {category} aqui",
            "backToSelect": "Selecione uma categoria diferente",
            "confirmButton": "Adicione uma {category} aqui.<br><div class=\"alert\">Esta adição será visível a todos</div>",
-            "confirmIntro": "<h3>Adicionar {title} aqui?</h3>O elemento que criar aqui será <b>visível a todos</b>. Por favor, só adicione coisas ao mapa se elas realmente existirem. Muitas aplicações usam estes dados.",
            "disableFilters": "Desativar todos os filtros",
            "disableFiltersExplanation": "Alguns elementos podem estar escondidos por um filtro",
            "hasBeenImported": "Este elemento já foi importado",
--- a/langs/pt_BR.json
+++ b/langs/pt_BR.json
@ -39,7 +39,6 @@
        "add": {
            "addNew": "Adicione {category} aqui",
            "confirmButton": "Adicione uma {category} aqui.<br><div class=\"alert\">Sua adição é visível para todos</div>",
-            "confirmIntro": "<h3>Adicionar um {title} aqui?</h3>O ponto que você criar aqui será <b>visível para todos</b>. Por favor, só adicione coisas ao mapa se elas realmente existirem. Muitos aplicativos usam esses dados.",
            "intro": "Você clicou em algum lugar onde ainda não há dados conhecidos.<br>",
            "layerNotEnabled": "A camada {layer} não está habilitada. Habilite esta camada para adicionar um ponto",
            "openLayerControl": "Abra a caixa de controle da camada",
--- a/langs/ru.json
+++ b/langs/ru.json
@ -32,7 +32,6 @@
        "add": {
            "addNew": "Добавить новую {category} здесь",
            "confirmButton": "Добавить {category} сюда.<br><div class=\"alert\">Ваш вклад будет виден каждому</div>",
-            "confirmIntro": "<h3>Добавить {title} сюда?</h3>Точка будет <b>видна всем</b>. Пожалуйста, добавляйте только то, что действительно существует. Много приложений используют эти данные.",
            "intro": "Вы нажали туда, где ещё нет данных.<br>",
            "layerNotEnabled": "Слой {layer} не включён. Включите этот слой чтобы добавить точку",
            "openLayerControl": "Открыть панель управления слоями",
--- a/langs/zh_Hant.json
+++ b/langs/zh_Hant.json
@ -55,7 +55,6 @@
        "add": {
            "addNew": "在這裡新增新的 {category}",
            "confirmButton": "在此新增 {category}。<br><div class=\"alert\">大家都可以看到您新增的內容</div>",
-            "confirmIntro": "<h3>在這裡新增 {title} ？</h3>你在這裡新增的圖徵<b>所有人都看得到</b>。請只有在確定有物件存在的情形下才新增上去，許多應用程式都使用這份資料。",
            "disableFilters": "關閉所有篩選器",
            "disableFiltersExplanation": "有些圖徵可能被篩選器隱藏",
            "hasBeenImported": "這個圖徵已經被匯入了",
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@ -909,10 +909,6 @@ video {
  margin-bottom: 2rem;
 }

-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .-ml-6 {
  margin-left: -1.5rem;
 }
@ -929,6 +925,10 @@ video {
  margin-top: -3rem;
 }

+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .box-border {
  box-sizing: border-box;
 }
@ -1281,6 +1281,11 @@ video {
  gap: 1rem;
 }

+.gap-x-2 {
+  -webkit-column-gap: 0.5rem;
+          column-gap: 0.5rem;
+}
+
 .gap-y-1 {
  row-gap: 0.25rem;
 }
@ -1445,9 +1450,9 @@ video {
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }

-.border-lime-500 {
+.border-gray-600 {
  --tw-border-opacity: 1;
-  border-color: rgb(132 204 22 / var(--tw-border-opacity));
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }

 .border-opacity-50 {
@ -1537,16 +1542,16 @@ video {
  padding-bottom: 1rem;
 }

-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
 }

+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
@ -1671,6 +1676,10 @@ video {
  font-weight: 600;
 }

+.font-normal {
+  font-weight: 400;
+}
+
 .uppercase {
  text-transform: uppercase;
 }
@ -1812,12 +1821,6 @@ video {
  transition-duration: 150ms;
 }

-.transition-\[color\2c background-color\2c box-shadow\] {
-  transition-property: color,background-color,box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -1830,6 +1833,12 @@ video {
  transition-duration: 150ms;
 }

+.transition-\[color\2c background-color\2c box-shadow\] {
+  transition-property: color,background-color,box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@ -1910,14 +1919,14 @@ li::marker {
 }

 h1 {
-  font-size: x-large;
+  font-size: xx-large;
  margin-top: 0.6em;
  margin-bottom: 0.4em;
  font-weight: bold;
 }

 h2 {
-  font-size: large;
+  font-size: x-large;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  font-weight: bold;
@ -1976,32 +1985,6 @@ input {
 * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
 */

-button.disabled {
-  cursor: default;
-  border: 2px dashed var(--button-background);
-  background: unset;
-  color: unset;
-  box-shadow: none;
-}
-
-button.disabled:hover {
-  cursor: default;
-  border: 2px dashed var(--button-background);
-  background: unset;
-  color: unset;
-}
-
-button:hover {
-  border: 2px solid var(--catch-detail-color-contrast);
-  background-color: var(--catch-detail-color);
-  color: var(--catch-detail-foregroundcolor);
-}
-
-button:hover img {
-  background: var(--low-interaction-background);
-  border-radius: 100rem;
-}
-
 button {
  display: inline-flex;
  line-height: 1.25rem;
@ -2011,14 +1994,14 @@ button {
  padding-right: 0.6rem;
  font-size: large;
  font-weight: bold;
-  color: var(--button-foreground);
-  background: var(--button-background);
  /*-- invisible border: rendered on hover*/
  border: 2px solid var(--button-background);
  border-radius: 0.5rem;
  transition: all 250ms;
  --tw-text-opacity: 1;
  --tw-bg-opacity: 1;
+  background: var(--low-interaction-background);
+  color: var(--low-interaction-foreground);
 }

 button .button-shadow {
@ -2035,8 +2018,58 @@ button.selected svg path {
  fill: var(--catch-detail-foregroundcolor) !important;
 }

-button svg path {
+button:not(.no-image-background) svg path {
+  fill: var(--interactive-foreground) !important;
+  transition: all 250ms;
+}
+
+.interactive button {
+  background: var(--interactive-background);
+  color: var(--interactive-foreground);
+}
+
+button:hover {
+  background-color: var(--catch-detail-color);
+  color: var(--catch-detail-foregroundcolor);
+  border: 2px solid var(--catch-detail-color-contrast);
+}
+
+button:hover:not(.no-image-background) img {
+  background: var(--low-interaction-background);
+  border-radius: 100rem;
+}
+
+button:hover:not(.no-image-background) svg path {
+  fill: var(--catch-detail-foregroundcolor) !important;
+}
+
+button.disabled:hover:not(.no-image-background) svg path {
+  fill: var(--low-interaction-foreground) !important;
+}
+
+button.primary {
+  color: var(--button-foreground);
+  background: var(--button-background);
+}
+
+button.primary:not(.no-image-background) svg path {
  fill: var(--button-foreground) !important;
+  transition: all 250ms;
+}
+
+button.disabled {
+  cursor: default;
+  border: 2px dashed var(--button-background);
+  background: unset;
+  color: unset;
+  box-shadow: none;
+}
+
+button.disabled:hover {
+  cursor: default;
+  border: 2px dashed var(--button-background);
+  background: unset;
+  color: unset;
 }

 .interactive button.disabled svg path {
@ -2051,50 +2084,6 @@ button svg path {
  fill: var(--foreground-color) !important;
 }

-button.disabled.secondary:hover {
-  background: unset;
-  color: unset;
-}
-
-button.secondary {
-  background: var(--low-interaction-background);
-  color: var(--low-interaction-foreground);
-  border-color: var(--button-background);
-}
-
-.interactive button.secondary {
-  background: var(--interactive-background);
-  color: var(--interactive-foreground);
-}
-
-button.secondary svg path {
-  fill: var(--low-interaction-foreground) !important;
-  transition: all 250ms;
-}
-
-button.secondary.disabled {
-  background: unset;
-  color: var(--low-interaction-foreground);
-}
-
-button.secondary.disabled svg path {
-  fill: var(--low-interaction-foreground) !important;
-}
-
-button.secondary:hover {
-  background-color: var(--catch-detail-color);
-  color: var(--catch-detail-foregroundcolor);
-  border-color: var(--catch-detail-color-contrast);
-}
-
-button.secondary:hover svg path {
-  fill: var(--catch-detail-foregroundcolor) !important;
-}
-
-button.secondary.disabled:hover svg path {
-  fill: var(--low-interaction-foreground) !important;
-}
-
 label {
  /**
     * Label should _contain_ the input element
@ -2135,13 +2124,19 @@ label.checked {
  border: 2px solid var(--foreground-color);
 }

-.active-links a{
-  /*
-    * Let a 'link' mimick a secondary button, but not entirely
-    */
-  display: block;
+.links-w-full a {
+  display: flex;
+  -webkit-column-gap: 0.25rem;
+          column-gap: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
  width: 100%;
-  height: 100%;
+}
+
+.links-as-button a{
+  /*
+    * Let a 'link' mimick a button, but not entirely
+    */
  padding: 3px;
  margin: 0;
  background: var(--low-interaction-background);
@ -2150,13 +2145,13 @@ label.checked {
  border-radius: 0.5rem;
 }

-.active-links a:hover {
+.links-as-button a:hover {
  background-color: var(--interactive-background);
  color: var(--catch-detail-foregroundcolor);
  border-color: var(--catch-detail-color-contrast);
 }

-.active-links a:hover svg path {
+.links-as-button a:hover svg path {
  fill: var(--catch-detail-foregroundcolor) !important;
 }

@ -2169,12 +2164,15 @@ label.checked {

 .thanks {
  /* The class to indicate 'operation successful' or 'thank you for contributing' */
-  background-color: #43d904;
  font-weight: bold;
  border-radius: 1em;
  margin: 0.25em;
  text-align: center;
-  padding: 0.15em 0.3em;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border: 3px dotted #58cd27;
+  background-color: #58cd2722;
 }

 .alert {
@ -2186,6 +2184,7 @@ label.checked {
  margin: 0.25em;
  text-align: center;
  padding: 0.15em 0.3em;
+  border: 2px dotted #ff9143;
 }

 .subtle {