UX: styling tweaks, fix typing errors

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;
 }

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>

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>
 

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -28,8 +28,8 @@
 </script>
 
 {#if mapping.icon !== undefined}
-  <div class="inline-flex">
+  <div class="inline-flex items-center">
-    <Icon icon={mapping.icon} clss={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}/>
+    <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}

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;
 }