From 40067e35d4c8aaf62409dd1c3a4f6c07423fa25d Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 13 Dec 2023 01:01:56 +0100
Subject: [PATCH] UX: styling tweaks, fix typing errors

---
 public/css/index-tailwind-output.css                |  1 -
 src/UI/Base/Checkbox.svelte                         |  6 +++---
 src/UI/BigComponents/Filterview.svelte              | 13 ++++++-------
 .../Popup/TagRendering/TagRenderingMapping.svelte   |  4 ++--
 src/index.css                                       |  1 -
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 0da20a516d..b1ce0d6981 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -2480,7 +2480,6 @@ label:not(.neutral-label) {
   border-radius: 0.5rem;
   background-color: var(--low-interaction-background);
   width: 100%;
-  display: block;
   box-sizing: border-box;
   transition: all 250ms;
 }
diff --git a/src/UI/Base/Checkbox.svelte b/src/UI/Base/Checkbox.svelte
index 2ff713e2ee..b2efcb5786 100644
--- a/src/UI/Base/Checkbox.svelte
+++ b/src/UI/Base/Checkbox.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store"
+  import { UIEventSource } from "../../Logic/UIEventSource"
 
   /**
    * For some stupid reason, it is very hard to bind inputs
    */
-  export let selected: Writable<boolean>
+  export let selected: UIEventSource<boolean>
   let _c: boolean = selected.data ?? true
   $: selected.set(_c)
 </script>
 
-<label class="no-image-background flex gap-1">
+<label class="no-image-background flex items-center gap-1">
   <input bind:checked={_c} type="checkbox" />
   <slot />
 </label>
diff --git a/src/UI/BigComponents/Filterview.svelte b/src/UI/BigComponents/Filterview.svelte
index f476978167..3df8da5b35 100644
--- a/src/UI/BigComponents/Filterview.svelte
+++ b/src/UI/BigComponents/Filterview.svelte
@@ -7,11 +7,10 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import Checkbox from "../Base/Checkbox.svelte"
   import FilterConfig from "../../Models/ThemeConfig/FilterConfig"
-  import type { Writable } from "svelte/store"
   import If from "../Base/If.svelte"
   import Dropdown from "../Base/Dropdown.svelte"
   import { onDestroy } from "svelte"
-  import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import FilterviewWithFields from "./FilterviewWithFields.svelte"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
@@ -20,24 +19,24 @@
   export let highlightedLayer: Store<string | undefined> = new ImmutableStore(undefined)
   export let zoomlevel: Store<number> = new ImmutableStore(22)
   let layer: LayerConfig = filteredLayer.layerDef
-  let isDisplayed: Store<boolean> = filteredLayer.isDisplayed
+  let isDisplayed: UIEventSource<boolean> = filteredLayer.isDisplayed
 
   /**
    * Gets a UIEventSource as boolean for the given option, to be used with a checkbox
    */
-  function getBooleanStateFor(option: FilterConfig): Writable<boolean> {
+  function getBooleanStateFor(option: FilterConfig): UIEventSource<boolean> {
     const state = filteredLayer.appliedFilters.get(option.id)
     return state.sync(
       (f) => f === 0,
       [],
-      (b) => (b ? 0 : undefined)
+      (b) => (b ? 0 : undefined),
     )
   }
 
   /**
    * Gets a UIEventSource as number for the given option, to be used with a dropdown or radiobutton
    */
-  function getStateFor(option: FilterConfig): Writable<number> {
+  function getStateFor(option: FilterConfig): UIEventSource<number | string> {
     return filteredLayer.appliedFilters.get(option.id)
   }
 
@@ -49,7 +48,7 @@
       } else {
         mainElem?.classList?.remove("glowing-shadow")
       }
-    })
+    }),
   )
 </script>
 
diff --git a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte
index 242f206e7b..dcc867a030 100644
--- a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte
+++ b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte
@@ -28,8 +28,8 @@
 </script>
 
 {#if mapping.icon !== undefined}
-  <div class="inline-flex">
-    <Icon icon={mapping.icon} clss={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}/>
+  <div class="inline-flex items-center">
+    <Icon icon={mapping.icon} clss={twJoin(`mapping-icon-${mapping.iconClass}`, "mx-2")}/>
     <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
   </div>
 {:else if mapping.then !== undefined}
diff --git a/src/index.css b/src/index.css
index efd7af1eee..021c2bea95 100644
--- a/src/index.css
+++ b/src/index.css
@@ -318,7 +318,6 @@ label:not(.neutral-label) {
     border-radius: 0.5rem;
     background-color: var(--low-interaction-background);
     width: 100%;
-    display: block;
     box-sizing: border-box;
     transition: all 250ms;
 }