Refactoring: removal of many obsolete css classes

UI/Popup/DeleteWizard.ts

@@ -108,9 +108,7 @@ export default class DeleteWizard extends Toggle {
         const deleteOptionPicker = DeleteWizard.constructMultipleChoice(options, tagsSource, state)
         const deleteDialog = new Combine([
             new Title(
-                new SubstitutedTranslation(t.whyDelete, tagsSource, state).SetClass(
-                    "question-text"
-                ),
+                new SubstitutedTranslation(t.whyDelete, tagsSource, state),
                 3
             ),
             deleteOptionPicker,

UI/Popup/LanguageElement.ts

@@ -143,7 +143,7 @@ export class LanguageElement implements SpecialVisualization {
 
             const saveButton = new SaveButton(
                 selector.GetValue().map((lngs) => (lngs.length > 0 ? "true" : undefined)),
-                state.osmConnection
+                state
             ).onClick(() => {
                 const selectedLanguages = selector.GetValue().data
                 const currentLanguages = foundLanguages.data

UI/Popup/SaveButton.ts

@@ -1,10 +1,11 @@
-import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+import {Store} from "../../Logic/UIEventSource"
 import Translations from "../i18n/Translations"
-import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+import {OsmConnection} from "../../Logic/Osm/OsmConnection"
 import Toggle from "../Input/Toggle"
 import BaseUIElement from "../BaseUIElement"
 import Combine from "../Base/Combine"
 import Svg from "../../Svg"
+import {LoginToggle} from "./LoginButton";
 
 export class EditButton extends Toggle {
     constructor(osmConnection: OsmConnection, onClick: () => void) {
@@ -19,10 +20,13 @@ export class EditButton extends Toggle {
     }
 }
 
-export class SaveButton extends Toggle {
+export class SaveButton extends LoginToggle {
     constructor(
         value: Store<any>,
-        osmConnection: OsmConnection,
+        state: {
+            readonly osmConnection?: OsmConnection
+            readonly featureSwitchUserbadge?: Store<boolean>
+        },
         textEnabled?: BaseUIElement,
         textDisabled?: BaseUIElement
     ) {
@@ -30,11 +34,6 @@ export class SaveButton extends Toggle {
             throw "No event source for savebutton, something is wrong"
         }
 
-        const pleaseLogin = Translations.t.general.loginToStart
-            .Clone()
-            .SetClass("login-button-friendly")
-            .onClick(() => osmConnection?.AttemptLogin())
-
         const isSaveable = value.map((v) => v !== false && (v ?? "") !== "")
 
         const saveEnabled = (textEnabled ?? Translations.t.general.save.Clone()).SetClass(`btn`)
@@ -43,6 +42,6 @@ export class SaveButton extends Toggle {
         )
 
         const save = new Toggle(saveEnabled, saveDisabled, isSaveable)
-        super(save, pleaseLogin, osmConnection?.isLoggedIn ?? new ImmutableStore(false))
+        super(save, Translations.t.general.loginToStart, state)
     }
 }

UI/Reviews/ReviewForm.ts

@@ -44,9 +44,7 @@ export default class ReviewForm extends LoginToggle {
 
         const saveButton = new Toggle(
             Translations.t.reviews.no_rating.SetClass("block alert"),
-            new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save, {
-                extraClasses: "border-attention-catch",
-            })
+            new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save)
                 .OnClickWithLoading(
                     Translations.t.reviews.saving_review.SetClass("alert"),
                     async () => {

UI/Reviews/SingleReview.ts

@@ -13,13 +13,15 @@ export default class SingleReview extends Combine {
         const reviewAuthor =
             review.metadata.nickname ??
             (review.metadata.given_name ?? "") + (review.metadata.family_name ?? "")
+        const authorElement =   new FixedUiElement(reviewAuthor).SetClass("font-bold")
+
         super([
             new Combine([SingleReview.GenStars(review.rating)]),
             new FixedUiElement(review.opinion),
             new Combine([
                 new Combine([
-                    new FixedUiElement(reviewAuthor).SetClass("font-bold"),
-                    review.metadata.is_affiliated
+                    authorElement,
+                     review.metadata.is_affiliated
                         ? Translations.t.reviews.affiliated_reviewer_warning
                         : "",
                 ]).SetStyle("margin-right: 0.5em"),
@@ -29,15 +31,15 @@ export default class SingleReview extends Combine {
                     )}-${Utils.TwoDigits(date.getDate())} ${Utils.TwoDigits(
                         date.getHours()
                     )}:${Utils.TwoDigits(date.getMinutes())}`
-                ).SetClass("subtle-lighter"),
+                ).SetClass("subtle"),
             ]).SetClass("flex mb-4 justify-end"),
         ])
         this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element")
         review.madeByLoggedInUser.addCallbackAndRun((madeByUser) => {
             if (madeByUser) {
-                this.SetClass("border-attention-catch")
+                authorElement.SetClass("thanks")
             } else {
-                this.RemoveClass("border-attention-catch")
+                authorElement.RemoveClass("thanks")
             }
         })
     }

UI/SpecialVisualizations.ts

@@ -129,7 +129,7 @@ class NearbyImageVis implements SpecialVisualization {
             }
             saveButton = new SaveButton(
                 selectedImage,
-                state.osmConnection,
+                state,
                 confirmText,
                 t.noImageSelected
             )

UI/StylesheetTestGui.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+
+
+</script>
+
+<div>
+
+    <h1> Stylesheet testing grounds </h1>
+
+    This document exists to explore the style hierarchy.
+
+    <div class="normal-background">
+        <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>.
+        <span class="alert">Alert: something went wrong</span>
+        <span class="thanks">Thank you! Operation successful</span>
+    </div>
+
+    <div class="low-interaction flex flex-col">
+        <h2>Low interaction</h2>
+        <p>
+            There are <span class="literal-code">low-interaction</span> areas, where some buttons might appear.
+        </p>
+
+        <button class="btn">Main action</button>
+        <button class="btn-secondary">Secondary action</button>
+        <button class="btn-disabled">Disabled</button>
+        <input type="text">
+
+        <div>
+            <input id="html" name="fav_language" type="radio" value="HTML">
+            <label for="html">HTML</label><br>
+            <input id="css" name="fav_language" type="radio" value="CSS">
+            <label for="css">CSS</label><br>
+            <input id="javascript" name="fav_language" type="radio" value="JavaScript">
+            <label for="javascript">JavaScript</label>
+        </div>
+
+        <span class="alert">Alert: something went wrong</span>
+        <span class="thanks">Thank you! Operation successful</span>
+    </div>
+
+    <div class="interactive flex flex-col">
+        <h2>Interactive area</h2>
+        <p>
+            There are <span class="literal-code">interactive</span> areas, where some buttons might appear.
+        </p>
+
+        <button class="btn">Main action</button>
+        <button class="btn-secondary">Secondary action</button>
+        <button class="btn-disabled">Disabled</button>
+        <span class="alert">Alert: something went wrong</span>
+        <span class="thanks">Thank you! Operation successful</span>
+    </div>
+
+</div>