user input adjustments (#19446)

app/assets/javascripts/discourse/app/components/create-account.js

@@ -5,20 +5,22 @@ import { bind } from "discourse-common/utils/decorators";
 export default Component.extend({
   classNames: ["create-account-body"],
 
+  // used for animating the label inside of inputs
   userInputFocus(event) {
-    const controls = event.target.parentElement;
-    if (!controls.classList.contains("value-entered")) {
-      controls.classList.toggle("value-entered");
+    const userField = event.target.parentElement.parentElement;
+    if (!userField.classList.contains("value-entered")) {
+      userField.classList.toggle("value-entered");
     }
   },
 
+  // used for animating the label inside of inputs
   userInputFocusOut(event) {
-    const controls = event.target.parentElement;
+    const userField = event.target.parentElement.parentElement;
     if (
       event.target.value.length === 0 &&
-      controls.classList.contains("value-entered")
+      userField.classList.contains("value-entered")
     ) {
-      controls.classList.toggle("value-entered");
+      userField.classList.toggle("value-entered");
     }
   },
 

app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs

@@ -1,9 +1,9 @@
 <div class="controls">
-  <Input id={{concat "user-" this.elementId}} @value={{this.value}} maxlength={{this.site.user_field_max_length}} />
   <label class="control-label" for={{concat "user-" this.elementId}}>
     {{this.field.name}}
     {{#if this.field.required}}<span class="required">*</span>{{/if}}
   </label>
-  <InputTip @validation={{this.validation}} />
+  <Input id={{concat "user-" this.elementId}} @value={{this.value}} maxlength={{this.site.user_field_max_length}} />
+  <InputTip @validation={{this.validation}} class={{unless this.validation " hidden"}} />
   <div class="instructions">{{html-safe this.field.description}}</div>
 </div>

app/assets/stylesheets/common/base/discourse.scss

@@ -570,9 +570,8 @@ table {
     @include clearfix;
   }
 
-  .control-label {
+  .control-label:not(.checkbox-label) {
     font-family: var(--heading-font-family);
-
     font-weight: bold;
     font-size: var(--font-up-2);
     line-height: var(--line-height-large);

app/assets/stylesheets/common/base/user.scss

@@ -311,10 +311,11 @@
     margin-bottom: 10px;
 
     .controls {
-      label {
+      label:not(.checkbox-label) {
         width: auto;
         text-align: left;
         font-weight: normal;
+        font-weight: bold;
       }
 
       .instructions {