Good progress on styling post-registration form

frontend-reactive/app/components/util/mail-entry.hbs

@@ -1,11 +1,18 @@
 <div class="mail-entry {{@wrapper-classes}}">
   <label>
     Email
-    <Input @type="text" @value={{this.args.data.mail}} placeholder="Email address" {{on "change" (fn this.checkMail)}}/>
+    <!--<div class="filling-spacer"/>-->
+    <Input
+      class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
+      @type="text"
+      @value={{this.args.data.mail}}
+      placeholder="Email address"
+      {{on "change" this.checkMail}}
+    />
   </label>
   {{#if this.mailOk}}
-    <p class="mail-ok">O</p>
+    <p class="mail-ok mail-status">&#10004;</p>
   {{else}}
-    <p class="mail-error">X</p>
+    <p class="mail-error mail-status">X</p>
   {{/if}}
 </div>

frontend-reactive/app/components/util/mail-entry.ts

@@ -1,27 +1,27 @@
-import { action } from '@ember/object'
-import { map } from '@ember/object/computed'
-import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
+import { action } from '@ember/object';
+import { map } from '@ember/object/computed';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-const re = /.+@\S+\.\S+/
+const re = /.+@\S+\.\S+/;
 
 export interface UtilMailEntrySignature {
   // The arguments accepted by the component
   Args: {
-    data: { mail: string; valid: boolean }
-  }
+    data: { mail: string; valid: boolean };
+  };
   // Any blocks yielded by the component
   Blocks: {
-    default: []
-  }
+    default: [];
+  };
   // The element to which `...attributes` is applied in the component template
-  Element: null
+  Element: null;
 }
 
 export default class UtilMailEntry extends Component<UtilMailEntrySignature> {
-  @tracked mailOk = this.args.data.valid
+  @tracked mailOk = this.args.data.valid;
   @action checkMail() {
-    this.args.data.valid = re.test(this.args.data.mail)
-    this.mailOk = this.args.data.valid
+    this.args.data.valid = re.test(this.args.data.mail);
+    this.mailOk = this.args.data.valid;
   }
 }

frontend-reactive/app/components/util/multiselect.hbs

@@ -5,6 +5,7 @@
       <Input
         @type="checkbox"
         name="{{element.name}}"
+        class="{{@input-classes}}"
         @checked={{element.checked}}
         {{on "change" this.onChange}}
       />

frontend-reactive/app/components/util/string-array.hbs

@@ -2,8 +2,9 @@
   <ul>
     {{#each this.args.list as |element index|}}
       <li>
-        <div class="string-array-element-wrapper">
+        <div class="string-array-element-wrapper {{@element-wrapper-classes}}">
           <Input
+            class="{{@element-classes}}"
             @type="text"
             @value={{element.value}}
           />