UI: improve styling, esp for standalone privacyPage

src/UI/Base/TitledPanel.svelte

@@ -1,7 +1,14 @@
 <div class="flex h-full flex-col">
-  <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
+  <div class="low-interaction flex items-center justify-between p-4 drop-shadow-md">
-    <slot name="title" />
+
-  </h2>
+    <div class="flex gap-x-2">
+      <slot name="title-start" />
+      <h2 class="m-0">
+        <slot name="title" />
+      </h2>
+    </div>
+    <slot name="title-end" />
+  </div>
 
   <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
     <slot />

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -283,7 +283,7 @@
     }
     dispatch("saved", { config, applied: selectedTags })
     const change = new ChangeTagAction(tags.data.id, selectedTags, tags.data, {
-      theme: tags.data["_orig_theme"] ?? state.theme.id,
+      theme: tags.data["_orig_theme"] ?? state.theme?.id,
       changeType: "answer",
     })
     freeformInput.set(undefined)
@@ -340,7 +340,7 @@
   }
 
   let disabledInTheme =
-    state.userRelatedState?.getThemeDisabled(state.theme.id, layer?.id) ??
+    state.userRelatedState?.getThemeDisabled(state.theme?.id, layer?.id) ??
     new UIEventSource<string[]>([])
   let menuIsOpened = new UIEventSource(false)
 

src/UI/PrivacyGui.svelte

@@ -9,29 +9,37 @@
   import type { SpecialVisualizationState } from "./SpecialVisualization"
   import { OsmConnection } from "../Logic/Osm/OsmConnection"
   import UserRelatedState from "../Logic/State/UserRelatedState"
+  import Title from "./Popup/Title.svelte"
+  import TitledPanel from "./Base/TitledPanel.svelte"
+  import Back from "../assets/svg/Back.svelte"
 
   const osmConnection = new OsmConnection()
   let state: SpecialVisualizationState = {
     osmConnection,
-    userRelatedState: new UserRelatedState(osmConnection),
+    userRelatedState: new UserRelatedState(osmConnection)
   }
 </script>
 
-<main>
+<main class="h-screen">
-  <div class="flex h-screen flex-col overflow-hidden px-4">
+  <TitledPanel>
-    <div class="flex justify-between">
+    <a slot="title-start" class="button p-0" style="padding:0" href="..">
-      <h2 class="flex items-center">
+      <Back class="w-6 h-6 m-2" />
-        <EyeIcon class="w-6 pr-2" />
-        <Tr t={Translations.t.privacy.title} />
-      </h2>
-      <LanguagePicker availableLanguages={Translations.t.privacy.intro.SupportedLanguages()} />
-    </div>
-    <div class="h-full overflow-auto border border-gray-500 p-4">
-      <PrivacyPolicy {state} />
-    </div>
-    <a class="button flex" href={Utils.HomepageLink()}>
-      <Add class="h-6 w-6" />
-      <Tr t={Translations.t.general.backToIndex} />
     </a>
-  </div>
+    <div slot="title" class="flex items-center">
+      <EyeIcon class="w-6 pr-2" />
+      <Tr t={Translations.t.privacy.title} />
+    </div>
+
+    <LanguagePicker slot="title-end" availableLanguages={Translations.t.privacy.intro.SupportedLanguages()} />
+    <PrivacyPolicy {state} />
+
+    <div class="flex h-screen flex-col overflow-hidden px-4">
+
+      <a class="button flex" href={Utils.HomepageLink()}>
+        <Add class="h-6 w-6" />
+        <Tr t={Translations.t.general.backToIndex} />
+      </a>
+    </div>
+  </TitledPanel>
+
 </main>

src/UI/StylesheetTestGui.svelte

@@ -25,6 +25,13 @@
     <div class="thanks">Thank you! Operation successful</div>
     <Login class="h-12 w-12" />
     <Loading>Loading...</Loading>
+    Dropdown:
+    <Dropdown cls="m-2" value={new UIEventSource(undefined)}>
+      <option value="a">Option A</option>
+      <option value="b">Option B</option>
+
+    </Dropdown>
+
 
     <div class="low-interaction flex flex-col">
       <h2>Low interaction</h2>
@@ -38,6 +45,13 @@
       </div>
       <div class="subtle">Subtle</div>
 
+      Dropdown:
+      <Dropdown cls="m-2" value={new UIEventSource(undefined)}>
+        <option value="a">Option A</option>
+        <option value="b">Option B</option>
+
+      </Dropdown>
+
       <div class="flex">
         <button class="primary">
           <Community class="h-6 w-6" />

src/index.css

@@ -33,10 +33,13 @@
     --low-interaction-background-50: #eeeeee90;
     --low-interaction-foreground: black;
     --low-interaction-contrast: #ff00ff;
+    --low-interaction-border: #dcdcdc;
 
     --interactive-background: #dddddd;
     --interactive-foreground: black;
     --interactive-contrast: #ff00ff;
+    --interaction-border: #bfbfbf;
+
 
     --button-background: #282828;
     --button-background-hover: #484848;
@@ -47,14 +50,6 @@
     --disabled: #B8B8B8;
     --disabled-font: #B8B8B8;
 
-    /**
-       * Base colour of interactive elements, mainly the 'subtle button'
-       * @deprecated
-       */
-    --subtle-detail-color: #dbeafe;
-    --subtle-detail-color-contrast: black;
-    --subtle-detail-color-light-contrast: lightgrey;
-
     --catch-detail-color: black; /*#3a3aeb;*/
     --catch-detail-foregroundcolor: white;
     --catch-detail-color-contrast: #fb3afb;
@@ -149,10 +144,6 @@ input[type="text"] {
  * and some interactive elements
  */
 
-.subtle-background {
-    background: var(--subtle-detail-color);
-    color: var(--subtle-detail-color-contrast);
-}
 
 .normal-background {
     background: var(--background-color);
@@ -309,11 +300,17 @@ button.unstyled, .button-unstyled button {
 }
 
 select {
-    border: 2px solid #00000000;
+    border: 2px solid var(--low-interaction-border);
     color: var(--foreground-color) !important;
     background-color: var(--low-interaction-background) !important;
 }
 
+.low-interaction select {
+    border: 2px solid var(--interaction-border);
+    color: var(--foreground-color) !important;
+    background-color: var(--interactive-background) !important;
+}
+
 select:hover {
     border-color: var(--catch-detail-color-contrast);
 }
@@ -387,17 +384,6 @@ h2.group {
     background-color: #58cd2722;
 }
 
-.badge {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    border-radius: 999rem;
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    border: 1px solid var(--subtle-detail-color-light-contrast);
-    background-color: var(--low-interaction-background);
-}
-
 .alert {
     /* The class to convey important information, e.g. 'invalid', 'something went wrong', 'warning: testmode', ... */
     background-color: var(--alert-color);
@@ -555,7 +541,7 @@ a.link-underline {
 .disable-links a {
     pointer-events: none;
     text-decoration: none !important;
-    color: var(--subtle-detail-color-contrast) !important;
+    color: var(--foreground-color) !important;
 }
 
 .enable-links a {