Refactoring: overhaul of the visual style with CSS

UI/InputElement/Helpers/FloorSelector.svelte

@@ -69,6 +69,7 @@
     if (index.data === forceIndex) {
       forceIndex = undefined;
     }
+    top = Math.max(top, 0)
   }
 
   Stores.Chronic(50).addCallback(_ => stabilize());
@@ -103,7 +104,7 @@
   <div class="h-full absolute w-min right-0">
     {#each $floors as floor, i}
       <button style={`height: ${HEIGHT}px; width: ${HEIGHT}px`}
-              class={"border-2 border-gray-300 flex content-box justify-center items-center "+(i === (forceIndex ?? $index) ? "selected": "normal-background" )
+              class={"m-0 border-2 border-gray-300 flex content-box justify-center items-center "+(i === (forceIndex ?? $index) ? "selected": "" )
            }
               on:click={() => {forceIndex = i}}
       > {floor}</button>
@@ -119,11 +120,6 @@
 <svelte:window on:mousemove={onMove} on:mouseup={unclick} />
 
 <style>
-    .selected {
-        background: var(--subtle-detail-color);
-        font-weight: bold;
-        border-color: black;
-    }
 
     .draggable {
         user-select: none;

UI/InputElement/ValidatedInput.svelte

@@ -22,6 +22,7 @@
     // The type changed -> reset some values
     validator = Validators.get(type)
     _value.setData(value.data ?? "")
+    console.log("REseting validated input, _value is ", _value.data, validator?.getFeedback(_value.data, getCountry))
     feedback =  feedback?.setData(validator?.getFeedback(_value.data, getCountry));
     _placeholder = placeholder ?? validator?.getPlaceholder() ?? type
   }

UI/InputElement/Validator.ts

@@ -44,8 +44,13 @@ export abstract class Validator {
     /**
      * Gets a piece of feedback. By default, validation.<type> will be used, resulting in a generic 'not a valid <type>'.
      * However, inheritors might overwrite this to give more specific feedback
+     *
+     * Returns 'undefined' if the element is valid
      */
-    public getFeedback(s: string, requestCountry?: () => string): Translation {
+    public getFeedback(s: string, requestCountry?: () => string): Translation | undefined {
+        if(this.isValid(s)){
+            return undefined
+        }
         const tr = Translations.t.validation[this.name]
         if (tr !== undefined) {
             return tr["feedback"]

UI/InputElement/Validators/PhoneValidator.ts

@@ -10,6 +10,9 @@ export default class PhoneValidator extends Validator {
 
 
     getFeedback(s: string, requestCountry?: () => string): Translation {
+        if(this.isValid(s, requestCountry)){
+            return undefined
+        }
         const tr = Translations.t.validation.phone
         const generic = tr.feedback
         if(requestCountry){