UI: tweak style to come closer to the fix-my-city design, see #2107

assets/layers/current_view/current_view.json

@@ -5,6 +5,7 @@
   "shownByDefault": false,
   "title": "Current View",
   "popupInFloatover": true,
+  "titleIcons": [],
   "pointRendering": [],
   "lineRendering": [
     {

assets/themes/grb/grb.json

@@ -700,6 +700,7 @@
     {
       "builtin": "current_view",
       "override": {
+        "popupInFloatover": "title",
         "calculatedTags+": [
           "_overlapping=Number(feat.properties.zoom) >= 14 ? overlapWith(feat)('grb').map(ff => ff.feat.properties) : undefined",
           "_applicable_conflate=get(feat)('_overlapping')?.filter(p => p._imported !== 'yes' && (!p['_imported_osm_still_fresh'] || !p['_imported_osm_object_found']) && p['_overlap_absolute'] > 10 && p['_overlap_percentage'] > 80 && p['_reverse_overlap_percentage'] > 80)?.map(p => p.id)",

assets/themes/onwheels/onwheels.json

@@ -598,6 +598,7 @@
     {
       "builtin": "current_view",
       "override": {
+        "popupInFloatover": "title",
         "+pointRendering": [
           {
             "location": [

public/css/index-tailwind-output.css

@@ -5198,23 +5198,22 @@ input[type="range"].range-lg::-moz-range-thumb {
   --low-interaction-background: #eeeeee;
   --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;
+  --interactive-contrast: #cd1dcd;
   --interaction-border: #bfbfbf;
-  --button-background: #282828;
+  --button-background-primary: #191919;
   --button-background-hover: #484848;
-  --button-primary-background-hover: #353535;
+  --button-primary-background-hover: rgba(48, 47, 47, 0.94);
   --button-foreground: white;
-  --button-border-color: #F7F7F7;
+  --button-background: #fafafa;
+  --button-border: #B8B8B8;
   --disabled: #B8B8B8;
   --disabled-font: #B8B8B8;
-  --catch-detail-color: black;
+  --catch-detail-color: var(--background-color);
-  /*#3a3aeb;*/
+  --catch-detail-foregroundcolor: var(--foreground-color);
-  --catch-detail-foregroundcolor: white;
+  --catch-detail-color-contrast: var(--interactive-contrast);
-  --catch-detail-color-contrast: #fb3afb;
   --image-carousel-height: 350px;
   /** Technical value, used by icon.svelte
        */
@@ -5323,7 +5322,7 @@ input[type="text"] {
 }
 
 .border-interactive {
-  border: 2px dashed var(--catch-detail-color-contrast);
+  border: 2px dashed var(--interactive-contrast);
   border-radius: 0.5rem;
 }
 
@@ -5358,11 +5357,14 @@ button, .button {
   align-items: center;
   padding: 0.25rem 1rem;
   margin: 0.25rem;
-  border: 1px solid var(--button-background-hover);
+  background: var(--button-background);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  border: 2px solid var(--button-border);
-  border-radius: 15px;
+  border-radius: 7px;
+  transition: background-color 200ms;
+}
+
+.low-interaction button{
   background: var(--background-color);
-  transition: all 200ms;
 }
 
 .group > button {
@@ -5374,7 +5376,12 @@ button.w-full {
   margin-left: 0;
 }
 
-button:hover:not(.disabled):not(.as-link), .button:hover:not(.disabled):not(.as-link) {
+button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
+  background-color: var(--button-primary-background-hover);
+  border: 2px solid var(--interactive-contrast)
+}
+
+button:hover:not(.disabled):not(.as-link):not(.primary), .button:hover:not(.disabled):not(.as-link):not(.primary) {
   background-color: var(--low-interaction-background);
 }
 
@@ -5388,12 +5395,8 @@ button:focus, .button:focus {
 
 button.primary, .button.primary {
   color: var(--button-foreground);
-  background-color: var(--button-background);
+  background-color: var(--button-background-primary);
-  border-color: var(--button-border-color);
+  border: 2px solid var(--button-background-primary)
-}
-
-button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
-  background-color: var(--button-primary-background-hover);
 }
 
 button.disabled {
@@ -5444,7 +5447,7 @@ button.unstyled, .button-unstyled button {
 /******* Other input elements ******/
 
 .hover-alert:hover {
-  color: var(--catch-detail-color-contrast)
+  color: var(--interactive-contrast)
 }
 
 .links-w-full a:not(.weblate-link), .links-w-full button.as-link {
@@ -5468,7 +5471,7 @@ select {
 }
 
 select:hover {
-  border-color: var(--catch-detail-color-contrast);
+  border-color: var(--interactive-contrast);
 }
 
 .neutral-label {
@@ -5570,17 +5573,6 @@ h2.group {
   background-color: var(--interactive-background);
 }
 
-.information {
-  /* The class to convey important information which does _not_ denote an error... */
-  background-color: var(--low-interaction-background);
-  color: var(--alert-foreground-color);
-  border-radius: 1em;
-  margin: 0.25em;
-  text-align: center;
-  padding: 0.15em 0.3em;
-  border: 3px dotted var(--catch-detail-color-contrast);
-}
-
 .low-interaction .interactive {
   background-color: var(--interactive-background);
 }

src/UI/Base/BackButton.svelte

@@ -15,7 +15,7 @@
 
 <SubtleButton
   on:click={() => dispatch("click")}
-  options={{ extraClasses: twMerge("flex items-center", clss) }}
+  options={{ extraClasses: twMerge("flex items-center justify-start", clss) }}
 >
   <ChevronLeftIcon class={imageClass ?? "h-12 w-12"} slot="image" />
   <slot slot="message" />

src/UI/Base/MapControlButton.svelte

@@ -22,7 +22,7 @@
   use:ariaLabelStore={arialabelString}
   disabled={!$enabled}
   class={twJoin(
-    "pointer-events-auto relative h-fit w-fit rounded-full",
+    "pointer-events-auto relative h-fit w-fit rounded-full border-gray-500",
     cls,
     $enabled ? "" : "disabled"
   )}

src/UI/Base/Searchbar.svelte

@@ -44,7 +44,7 @@
 
 <form class="w-full" on:submit|preventDefault={() => dispatch("search")}>
   <label
-    class="neutral-label normal-background box-shadow flex w-full items-center rounded-full border border-black"
+    class="neutral-label normal-background box-shadow flex w-full items-center rounded-md border border-black"
   >
     <SearchIcon aria-hidden="true" class="ml-2 h-6 w-6 shrink-0" />
 

src/UI/Base/TabbedGroup.svelte

@@ -187,7 +187,7 @@
   }
 
   :global(.tab-selected svg) {
-    fill: var(--catch-detail-color-contrast);
+    fill: var(--interactive-contrast);
   }
 
   :global(.tab-unselected) {

src/UI/Base/TitledPanel.svelte

@@ -1,3 +1,6 @@
+<script >
+  export let contentStyle= ""
+</script>
 <div class="flex h-full flex-col">
   <div class="low-interaction flex items-center justify-between p-4 drop-shadow-md">
     <div class="flex items-center gap-x-2">
@@ -9,7 +12,7 @@
     <slot name="title-end" />
   </div>
 
-  <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
+  <div class={"flex h-full flex-col overflow-auto border-b-2 p-4 "+contentStyle}>
     <slot />
   </div>
 

src/UI/BigComponents/MenuDrawerIndex.svelte

@@ -101,8 +101,8 @@
   {#if onlyLink}
     <InsetSpacer height={AndroidPolyfill.getInsetSizes().top} />
   {/if}
-  <div class="flex justify-between border-b border-black p-2">
+  <div class="flex justify-between items-center border-b border-black p-2">
-    <h2>
+    <h2 class="m-0">
       <Tr t={t.title} />
     </h2>
     <CloseButton

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -25,13 +25,13 @@
 </script>
 
 <div class="low-interaction flex border-b-2 border-black px-3 drop-shadow-md">
-  <div class="h-fit w-full overflow-auto sm:p-2" style="max-height: 20vh;">
+  <div class="h-full w-full overflow-auto sm:p-2 flex items-center" style="max-height: 20vh;">
     {#if $tags._deleted === "yes"}
       <h3 class="p-4">
         <Tr t={Translations.t.delete.deletedTitle} />
       </h3>
     {:else}
-      <div class="flex h-full w-full flex-grow flex-col">
+      <div class="flex h-full w-full flex-grow flex-col justify-center">
         <!-- Title element and  title icons-->
         <h3 class="m-0">
           <a href={`#${$tags?.id}`}>
@@ -40,6 +40,7 @@
             {/if}
           </a>
         </h3>
+        {#if layer.titleIcons.length > 0}
         <div
           class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 pt-0.5 sm:pt-1"
         >
@@ -69,11 +70,12 @@
             </a>
           {/if}
         </div>
+        {/if}
       </div>
     {/if}
   </div>
   <slot name="close-button">
-    <div class="mt-4">
+    <div class="m-2">
       <CloseButton on:click={() => state.selectedElement.setData(undefined)} />
     </div>
   </slot>

src/UI/Favourites/Favourites.svelte

@@ -40,11 +40,9 @@
 </script>
 
 <LoginToggle {state}>
-  <div slot="not-logged-in">
+  <LoginButton slot="not-logged-in" osmConnection={state.osmConnection}>
-    <LoginButton osmConnection={state.osmConnection}>
+    <Tr t={Translations.t.favouritePoi.loginToSeeList} />
-      <Tr t={Translations.t.favouritePoi.loginToSeeList} />
+  </LoginButton>
-    </LoginButton>
-  </div>
 
   <div class="flex flex-col">
     {#if $favourites.length === 0}

src/UI/Popup/AddNewPoint/PresetList.svelte

@@ -100,9 +100,8 @@
   }>()
 </script>
 
-<TitledPanel>
+<TitledPanel contentStyle="interactive">
   <Tr slot="title" t={Translations.t.general.add.intro} />
-
   {#each presets as preset}
     <NextButton on:click={() => dispatch("select", preset)}>
       <ToSvelte slot="image" construct={() => preset.icon} />

src/UI/Popup/LanguageElement/LanguageAnswer.svelte

@@ -6,6 +6,7 @@
   import type { Feature } from "geojson"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
   import * as all_languages from "../../../assets/language_translations.json"
+  import Locale from "../../i18n/Locale"
 
   /**
    * Visualizes a list of the known languages
@@ -22,6 +23,7 @@
   export let layer: LayerConfig | undefined
 
   let [beforeListing, afterListing] = (render_all ?? "{list()}").split("{list()}")
+  let currentLanguage: Store<string> = Locale.language
 </script>
 
 {#if $languages.length === 1}
@@ -30,9 +32,8 @@
     {tags}
     {feature}
     {layer}
-    t={new TypedTranslation({ "*": single_render }).PartialSubsTr(
+    t={new TypedTranslation({ "*": single_render }).PartialSubs(
-      "language()",
+        {"language()": new Translation(all_languages[$languages[0]]).textFor($currentLanguage)}
-      new Translation(all_languages[$languages[0]], undefined)
     )}
   />
 {:else}
@@ -45,9 +46,8 @@
           {tags}
           {feature}
           {layer}
-          t={new TypedTranslation({ "*": item_render }).PartialSubsTr(
+          t={new TypedTranslation({ "*": item_render }).PartialSubs(
-            "language()",
+            {"language()": new Translation(all_languages[language]).textFor($currentLanguage)}
-            new Translation(all_languages[language], undefined)
           )}
         />
       </li>

src/UI/Popup/TagRendering/Questionbox.svelte

@@ -15,6 +15,7 @@
   import TagRenderingQuestionDynamic from "./TagRenderingQuestionDynamic.svelte"
   import LoginToggle from "../../Base/LoginToggle.svelte"
   import AccordionSingle from "../../Flowbite/AccordionSingle.svelte"
+  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   export let layer: LayerConfig
   export let tags: UIEventSource<Record<string, string>>
@@ -180,7 +181,10 @@
           }}
           slot="cancel"
         >
+          <div class="flex items-center">
           <Tr t={Translations.t.general.skip} />
+            <ChevronRightIcon class="w-4 h-4 ml-2" />
+          </div>
         </button>
       </TagRenderingQuestionDynamic>
     {/if}

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -148,6 +148,6 @@
   }
 
   .answer:has(.edit-button:hover) {
-    border: 1px solid var(--catch-detail-color-contrast);
+    border: 1px solid var(--interactive-contrast);
   }
 </style>

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -21,7 +21,7 @@
   /**
    * Css classes to apply
    */
-  export let clss: string = "ml-2"
+  export let clss: string = ""
   export let mapping: {
     readonly if?: TagsFilter
     readonly then: Translation

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -13,7 +13,6 @@
   import SpecialTranslation from "./SpecialTranslation.svelte"
   import TagHint from "../TagHint.svelte"
   import LoginToggle from "../../Base/LoginToggle.svelte"
-  import SubtleButton from "../../Base/SubtleButton.svelte"
   import TagRenderingMappingInput from "./TagRenderingMappingInput.svelte"
   import { Translation } from "../../i18n/Translation"
   import { Unit } from "../../../Models/Unit"
@@ -21,9 +20,8 @@
   import { TagUtils } from "../../../Logic/Tags/TagUtils"
 
   import Search from "../../../assets/svg/Search.svelte"
-  import Login from "../../../assets/svg/Login.svelte"
   import { placeholder } from "../../../Utils/placeholder"
-  import { TrashIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { ChevronRightIcon, TrashIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { Tag } from "../../../Logic/Tags/Tag"
   import { And } from "../../../Logic/Tags/And"
   import { get } from "svelte/store"
@@ -36,6 +34,7 @@
   import DotMenu from "../../Base/DotMenu.svelte"
   import SidebarUnit from "../../Base/SidebarUnit.svelte"
   import { Lists } from "../../../Utils/Lists"
+  import LoginButton from "../../Base/LoginButton.svelte"
 
   export let config: TagRenderingConfig
   export let tags: UIEventSource<Record<string, string>>
@@ -360,7 +359,7 @@
 {#if question !== undefined && $apiState !== "readonly" && $apiState !== "offline"}
   <div class={clss}>
     {#if layer?.isNormal()}
-      <LoginToggle {state}>
+      <LoginToggle {state} hiddenFail ignoreLoading>
         <DotMenu hideBackground={true} open={menuIsOpened}>
           <SidebarUnit>
             {#if $disabledInTheme.indexOf(config.id) >= 0}
@@ -538,7 +537,7 @@
           </div>
         {/if}
 
-        <!-- Save and cancel buttons, in a logintoggle -->
+        <!-- Extra save button, probably for a setting -->
         <LoginToggle {state} ignoreLoading>
           <div class="flex w-full justify-end" slot="not-logged-in">
             {#if config.alwaysForceSaveButton}
@@ -549,10 +548,9 @@
                 <Tr t={Translations.t.general.save} />
               </button>
             {:else}
-              <SubtleButton on:click={() => state?.osmConnection?.AttemptLogin()}>
+              <LoginButton osmConnection={state.osmConnection}>
-                <Login slot="image" class="h-8 w-8" />
                 <Tr t={Translations.t.general.loginToStart} slot="message" />
-              </SubtleButton>
+              </LoginButton>
             {/if}
           </div>
           {#if $feedback !== undefined}
@@ -561,6 +559,7 @@
             </div>
           {/if}
 
+          <!-- Popup to 'mark as unknown' -->
           <Popup shown={unknownModal}>
             <h2 slot="header">
               <Tr t={Translations.t.unknown.title} />
@@ -588,7 +587,7 @@
             </div>
           </Popup>
 
-          <div class="sticky bottom-0 flex flex-wrap justify-between" style="z-index: 11">
+          <div class="sticky bottom-0 flex flex-wrap justify-between mb-2 mt-4" style="z-index: 11">
             {#if $onMarkUnknown?.length > 0 && $isKnown && !matchesEmpty}
               <button class="as-link small text-sm" on:click={() => unknownModal.set(true)}>
                 <Tr t={Translations.t.unknown.markUnknown} />
@@ -596,10 +595,11 @@
             {/if}
 
             <div
-              class="mb-2 mt-4 flex flex-grow flex-wrap-reverse items-stretch justify-end self-end sm:flex-nowrap"
+              class="flex flex-grow flex-wrap-reverse items-stretch justify-end self-end sm:flex-nowrap"
             >
-              <!-- TagRenderingQuestion-buttons -->
               <slot name="cancel" />
+
+              <!-- TagRenderingQuestion-buttons -->
               <slot name="save-button" {selectedTags}>
                 <!-- Save-button / delete button -->
                 {#if config.freeform?.key && !checkedMappings?.some((m) => m) && !$freeformInput && !$freeformInputUnvalidated && $tags[config.freeform.key] && $isKnown}
@@ -619,9 +619,11 @@
                     )}
                   >
                     <Tr t={Translations.t.general.save} />
+                    <ChevronRightIcon class="w-4 h-4 ml-2" />
                   </button>
                 {/if}
               </slot>
+
             </div>
           </div>
           <!-- Taghint + debug info -->

src/UI/SpecialVisualisations/SettingsVisualisations.ts

@@ -1,8 +1,4 @@
-import {
+import { SpecialVisualisationParams, SpecialVisualizationSvelte } from "../SpecialVisualization"
-    SpecialVisualisationParams,
-    SpecialVisualizationState,
-    SpecialVisualizationSvelte,
-} from "../SpecialVisualization"
 import SvelteUIElement from "../Base/SvelteUIElement"
 import Constants from "../../Models/Constants"
 import LogoutButton from "../Base/LogoutButton.svelte"
@@ -17,8 +13,6 @@ import LanguageUtils from "../../Utils/LanguageUtils"
 import LanguagePicker from "../InputElement/LanguagePicker.svelte"
 import PendingChangesIndicator from "../BigComponents/PendingChangesIndicator.svelte"
 import { Utils } from "../../Utils"
-import { Feature } from "geojson"
-import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 import QrCode from "../Popup/QrCode.svelte"
 import ClearGPSHistory from "../BigComponents/ClearGPSHistory.svelte"
 import DisabledQuestions from "../Popup/DisabledQuestions.svelte"

src/UI/SpecialVisualisations/TagrenderingManipulationSpecialVisualisations.ts

@@ -5,7 +5,6 @@ import {
     SpecialVisualizationSvelte,
 } from "../SpecialVisualization"
 import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
-import { Feature } from "geojson"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 import { Translation } from "../i18n/Translation"
 import { VariableUiElement } from "../Base/VariableUIElement"

src/UI/StylesheetTestGui.svelte

@@ -4,32 +4,23 @@
   import Login from "../assets/svg/Login.svelte"
   import Dropdown from "./Base/Dropdown.svelte"
   import { UIEventSource } from "../Logic/UIEventSource"
+  import StylesheetTestUnit from "./StylesheetTestUnit.svelte"
 </script>
 
-<main>
+<main class="w-full h-full p-4">
   <div class="flex flex-col gap-y-2">
     <h1>Stylesheet testing grounds</h1>
 
     This document exists to explore the style hierarchy.
 
+    <div class="border-interactive m-2 p-2">
+
     <h2>Normal background</h2>
     There are a few styles, such as the
     <span class="literal-code">normal-background</span>
     -style which is used if there is nothing special going on. Some general information, with at most
-    <a href="https://example.com" target="_blank">a link to someplace</a>
+      <StylesheetTestUnit/>
-    <div class="subtle">Subtle</div>
+    </div>
-
-    <div class="alert">Alert: something went wrong</div>
-    <div class="warning">Warning</div>
-    <div class="information">Some important information</div>
-    <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,77 +29,9 @@
         areas, where some buttons might appear.
       </p>
 
-      <div class="border-interactive interactive">
-        Highly interactive area (mostly: active question)
-      </div>
-      <div class="subtle">Subtle</div>
 
-      Dropdown:
+      <StylesheetTestUnit/>
-      <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" />
-          Main action
-        </button>
-        <button class="primary disabled">
-          <Community class="h-6 w-6" />
-          Main action (disabled)
-        </button>
-
-        <button class="small">
-          <Community class="h-6 w-6" />
-          Small button
-        </button>
-
-        <button class="small primary">Small button</button>
-        <button class="small primary disabled">Small, disabled button</button>
-      </div>
-      <div class="flex">
-        <button>
-          <Community class="h-6 w-6" />
-          Secondary action
-        </button>
-        <button class="disabled">
-          <Community class="h-6 w-6" />
-          Secondary action (disabled)
-        </button>
-        <button class="as-link">Mimick link</button>
-      </div>
-      <input type="text" />
-
-      <div class="flex flex-col">
-        <label class="checked" for="html">
-          <input id="html" name="fav_language" type="radio" value="HTML" />
-          HTML (mimicks a
-          <span class="literal-code">checked</span>
-          -element)
-          <Dropdown value={new UIEventSource("abc")}>
-            <option>abc</option>
-            <option>def</option>
-          </Dropdown>
-        </label>
-        <label for="css">
-          <input id="css" name="fav_language" type="radio" value="CSS" />
-          CSS
-        </label>
-        <label for="javascript">
-          <input id="javascript" name="fav_language" type="radio" value="JavaScript" />
-          <Community class="h-8 w-8" />
-          JavaScript
-        </label>
-      </div>
-
-      <div class="alert">Alert: something went wrong</div>
-      <div class="warning">Warning</div>
-      <div class="information">Some important information</div>
-      <div class="thanks">Thank you! Operation successful</div>
-
-      <Login class="h-12 w-12" />
-      <Loading>Loading...</Loading>
     </div>
 
     <div class="interactive flex flex-col">
@@ -117,64 +40,9 @@
         There are <span class="literal-code">interactive</span>
         areas, where many buttons and input elements will appear.
       </p>
-      <div class="subtle">Subtle</div>
 
-      <div class="flex">
+      <StylesheetTestUnit/>
-        <button class="primary">
-          <Community class="h-6 w-6" />
-          Main action
-        </button>
-        <button class="primary disabled">
-          <Community class="h-6 w-6" />
-          Main action (disabled)
-        </button>
-        <button class="small">
-          <Community class="h-6 w-6" />
-          Small button
-        </button>
-      </div>
 
-      <div class="flex">
-        <button>
-          <Community class="h-6 w-6" />
-          Secondary action
-        </button>
-        <button class="disabled">
-          <Community class="h-6 w-6" />
-          Secondary action (disabled)
-        </button>
-      </div>
-      <div class="alert">Alert: something went wrong</div>
-      <div class="warning">Warning</div>
-      <div class="information">Some important information</div>
-      <div class="thanks">Thank you! Operation successful</div>
-
-      <Login class="h-12 w-12" />
-      <Loading>Loading...</Loading>
-      <div>
-        <label for="html0">
-          <input id="html0" name="fav_language" type="radio" value="HTML" />
-          HTML
-        </label>
-        <label for="css0">
-          <input id="css0" name="fav_language" type="radio" value="CSS" />
-          CSS
-        </label>
-        <label for="javascript0">
-          <input id="javascript0" name="fav_language" type="radio" value="JavaScript" />
-          JavaScript
-        </label>
-      </div>
-
-      <div class="border-interactive">
-        Area with extreme high interactivity due to `border-interactive`
-      </div>
-
-      <select>
-        <option value="A">A</option>
-        <option value="B">B</option>
-        <option value="C">C</option>
-      </select>
     </div>
   </div>
 </main>

src/UI/StylesheetTestUnit.svelte

@@ -0,0 +1,76 @@
+<script>
+import Login from "../assets/svg/Login.svelte"
+import Loading from "./Base/Loading.svelte"
+import { Dropdown } from "flowbite-svelte"
+import { UIEventSource } from "../Logic/UIEventSource"
+import Community from "../assets/svg/Community.svelte"
+</script>    <a href="https://example.com" target="_blank">a link to someplace</a>
+    <div class="subtle">Subtle</div>
+    <div class="alert">Alert: something went wrong</div>
+    <div class="warning">Warning</div>
+    <div class="thanks">Thank you! Operation successful</div>
+<div class="border-interactive interactive p-2">
+  Area with extreme high interactivity due to <div class="literal-code">border-interactive interactive</div>
+</div>
+    <Login class="h-12 w-12" />
+    <Loading>Loading...</Loading>
+    Dropdown:
+
+<select>
+  <option value="A">A</option>
+  <option value="B">B</option>
+  <option value="C">C</option>
+</select>
+
+      <div class="flex">
+        <button class="primary">
+          <Community class="h-6 w-6" />
+          Main action
+        </button>
+        <button class="primary disabled">
+          <Community class="h-6 w-6" />
+          Main action (disabled)
+        </button>
+
+        <button class="small">
+          <Community class="h-6 w-6" />
+          Small button
+        </button>
+
+        <button class="small primary">Small button</button>
+        <button class="small primary disabled">Small, disabled button</button>
+      </div>
+      <div class="flex">
+        <button>
+          <Community class="h-6 w-6" />
+          Secondary action
+        </button>
+        <button class="disabled">
+          <Community class="h-6 w-6" />
+          Secondary action (disabled)
+        </button>
+        <button class="as-link">Mimick link</button>
+      </div>
+      <input type="text" />
+
+<div class="flex flex-col">
+  <label class="checked" for="html">
+    <input id="html" name="fav_language" type="radio" value="HTML" />
+    HTML (mimicks a
+    <span class="literal-code">checked</span>
+    -element)
+    <Dropdown value={new UIEventSource("abc")}>
+      <option>abc</option>
+      <option>def</option>
+    </Dropdown>
+  </label>
+  <label for="css">
+    <input id="css" name="fav_language" type="radio" value="CSS" />
+    CSS
+  </label>
+  <label for="javascript" class="flex gap-x-2 items-center">
+    <input id="javascript" name="fav_language" type="radio" value="JavaScript" />
+    <Community class="h-8 w-8" />
+    JavaScript
+  </label>
+</div>

src/UI/ThemeViewGUI.svelte

@@ -432,7 +432,9 @@
       {/if}
 
       <ExtraLinkButton {state} />
-      <CompassWidget mapProperties={state.mapProperties} />
+      <div class="m-0.5 md:m-1">
+        <CompassWidget mapProperties={state.mapProperties} />
+      </div>
       <UploadingImageCounter featureId="*" showThankYou={false} {state} />
       <PendingChangesIndicator {state} />
       <If condition={state.featureSwitchIsTesting}>

src/index.css

@@ -32,27 +32,28 @@
     --low-interaction-background: #eeeeee;
     --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;
+    --interactive-contrast: #cd1dcd;
     --interaction-border: #bfbfbf;
 
 
-    --button-background: #282828;
+    --button-background-primary: #191919;
     --button-background-hover: #484848;
-    --button-primary-background-hover: #353535;
+    --button-primary-background-hover: rgba(48, 47, 47, 0.94);
 
     --button-foreground: white;
-    --button-border-color: #F7F7F7;
+    --button-background: #fafafa;
+    --button-border: #B8B8B8;
     --disabled: #B8B8B8;
     --disabled-font: #B8B8B8;
 
-    --catch-detail-color: black; /*#3a3aeb;*/
+    --catch-detail-color: var(--background-color);
-    --catch-detail-foregroundcolor: white;
+    --catch-detail-foregroundcolor: var(--foreground-color);
-    --catch-detail-color-contrast: #fb3afb;
+    --catch-detail-color-contrast: var(--interactive-contrast);
 
     --image-carousel-height: 350px;
 
@@ -161,7 +162,7 @@ input[type="text"] {
 }
 
 .border-interactive {
-    border: 2px dashed var(--catch-detail-color-contrast);
+    border: 2px dashed var(--interactive-contrast);
     border-radius: 0.5rem;
 }
 
@@ -198,16 +199,15 @@ button, .button {
     padding: 0.25rem 1rem;
     margin: 0.25rem;
 
-    background: var(--background-color);
+    background: var(--button-background);
-    border: 1px solid var(--button-background-hover);
+    border: 2px solid var(--button-border);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    border-radius: 7px;
-    border-radius: 15px;
+    transition: background-color 200ms;
-
-    background: var(--background-color);
-    transition: all 200ms;
-
 }
 
+.low-interaction button{
+    background: var(--background-color);
+}
 
 .group > button {
     padding-right: 1rem !important; /*Flowbite workaround */
@@ -217,7 +217,13 @@ button.w-full {
     margin-left: 0;
 }
 
-button:hover:not(.disabled):not(.as-link), .button:hover:not(.disabled):not(.as-link) {
+
+button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
+    background-color: var(--button-primary-background-hover);
+    border: 2px solid var(--interactive-contrast)
+}
+
+button:hover:not(.disabled):not(.as-link):not(.primary), .button:hover:not(.disabled):not(.as-link):not(.primary) {
     background-color: var(--low-interaction-background);
 }
 
@@ -232,13 +238,10 @@ button:focus, .button:focus {
 
 button.primary, .button.primary {
     color: var(--button-foreground);
-    background-color: var(--button-background);
+    background-color: var(--button-background-primary);
-    border-color: var(--button-border-color);
+    border: 2px solid var(--button-background-primary)
 }
 
-button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
-    background-color: var(--button-primary-background-hover);
-}
 
 button.disabled {
     border-color: var(--disabled-font);
@@ -293,7 +296,7 @@ button.unstyled, .button-unstyled button {
 /******* Other input elements ******/
 
 .hover-alert:hover {
-    color: var(--catch-detail-color-contrast)
+    color: var(--interactive-contrast)
 }
 
 .links-w-full a:not(.weblate-link), .links-w-full button.as-link {
@@ -317,7 +320,7 @@ select {
 }
 
 select:hover {
-    border-color: var(--catch-detail-color-contrast);
+    border-color: var(--interactive-contrast);
 }
 
 .neutral-label {
@@ -420,17 +423,6 @@ h2.group {
     background-color: var(--interactive-background);
 }
 
-.information {
-    /* The class to convey important information which does _not_ denote an error... */
-    background-color: var(--low-interaction-background);
-    color: var(--alert-foreground-color);
-    border-radius: 1em;
-    margin: 0.25em;
-    text-align: center;
-    padding: 0.15em 0.3em;
-    border: 3px dotted var(--catch-detail-color-contrast);
-}
-
 .low-interaction .interactive {
     background-color: var(--interactive-background);
 }