UX: Improve custom field layout on signup

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

@@ -1,4 +1,5 @@
-<label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}}</label>
+<label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}}   {{#if field.required}}<span class='required'>*</span>{{/if}}
+</label>
 <div class='controls'>
   <label class="control-label checkbox-label">{{input id=(concat 'user-' elementId) checked=value type="checkbox"}} <span>{{{field.description}}}</span></label>
 </div>

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

@@ -1,6 +1,6 @@
-<label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}}</label>
+<label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}} {{#if field.required}}<span class='required'>*</span>{{/if}}
+</label>
 <div class='controls'>
   {{combo-box id=(concat 'user-' elementId) content=field.options value=value none=noneLabel}}
-  {{#if field.required}}<span class='required'>*</span>{{/if}}
   <div class="instructions">{{{field.description}}}</div>
 </div>

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

@@ -1,6 +1,6 @@
-<label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}}</label>
+<label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}} {{#if field.required}}<span class='required'>*</span>{{/if}}
+</label>
 <div class='controls'>
   {{input id=(concat 'user-' elementId) value=value maxlength=site.user_field_max_length}}
-  {{#if field.required}}<span class='required'>*</span>{{/if}}
   <div class="instructions">{{{field.description}}}</div>
 </div>

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

@@ -121,8 +121,10 @@ input {
   &[type="checkbox"] {
     margin-top: 0.17em;
     margin-right: 0.43em;
+    margin-left: 0.1em;
     line-height: $line-height-small;
     cursor: pointer;
+    flex-shrink: 0; // Adding for safety, Safari will shrink checkboxes
   }
   &[type="submit"],
   &[type="reset"],

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

@@ -71,33 +71,40 @@ $input-width: 220px;
     margin-top: 0.5em;
   }
 
-  .user-field.confirm {
+  .user-fields {
-    margin-top: 20px;
+    margin-top: 0.75em;
+    padding-top: 0.25em;
+    border-top: 1px solid $primary-low;
   }
 
   .user-field {
     > label {
       width: $label-width;
       float: left;
+      margin-top: 0.75em;
+      margin-bottom: 0;
+      padding-top: 5px;
     }
     input[type="text"] {
-      width: $input-width;
       margin-bottom: 0;
+      width: 100%;
     }
+
+    .select-kit {
+      width: 100%;
+    }
+
     .controls {
+      padding-top: 5px;
       margin-left: $label-width;
-      margin-bottom: 15px;
       label {
         width: auto;
         text-align: left;
         font-weight: normal;
-        float: auto;
       }
       .instructions {
+        margin-top: 0.15em;
         color: dark-light-choose($primary-medium, $secondary-medium);
-        margin: 0;
-        font-size: $font-down-1;
-        font-weight: normal;
         line-height: $line-height-medium;
       }
     }

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

@@ -297,7 +297,6 @@
         width: auto;
         text-align: left;
         font-weight: normal;
-        float: auto;
       }
 
       .instructions {
@@ -313,10 +312,10 @@
 
 .user-field {
   .required {
-    text-align: top;
+    vertical-align: top;
     color: $danger;
     font-weight: bold;
-    font-size: $font-up-2;
+    margin-left: 0.25em;
   }
 }
 

app/assets/stylesheets/desktop/login.scss

@@ -6,12 +6,11 @@
   #login-buttons:not(.hidden) {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     flex-basis: 40%;
     align-items: center;
     min-height: 175px;
     border-left: 1px solid $primary-low;
-    padding: 15px;
+    padding: 0 15px;
     order: 2;
 
     button {
@@ -23,6 +22,26 @@
     }
   }
 
+  .login-modal {
+    #login-buttons:not(.hidden) {
+      button {
+        &:first-of-type {
+          margin-top: 3.2em;
+        }
+        &:last-of-type {
+          margin-bottom: 2.5em;
+        }
+      }
+    }
+  }
+
+  .create-account {
+    #login-buttons:not(.hidden) {
+      justify-content: flex-start;
+      padding-top: 1.5em;
+    }
+  }
+
   #login-form {
     flex: 1 0 auto;
     padding: 0 15px;
@@ -115,19 +134,10 @@
 
     > label {
       width: auto;
-      font-weight: bold;
-    }
-
-    .select-kit {
-      width: 242px; // match text-input width
     }
 
     .controls {
       margin-left: 0;
-
-      .instructions {
-        margin-top: 5px;
-      }
     }
   }
 
@@ -161,11 +171,6 @@
   .tos-agree {
     margin-bottom: 12px;
   }
-
-  .user-fields {
-    border-top: 1px solid $primary-low;
-    padding-top: 20px;
-  }
 }
 
 .login-form {

app/assets/stylesheets/mobile/login.scss

@@ -42,7 +42,7 @@
   }
 
   table {
-    // width: 100%;
+    width: 100%;
     padding: 10px;
   }
 
@@ -144,9 +144,10 @@
     }
   }
 
-  #login-buttons + .login-form {
+  #login-buttons {
-    border-top: 1px solid $primary-low;
+    border-bottom: 1px solid $primary-low;
   }
+
   .login-form {
     margin-bottom: 0.75em;
   }
@@ -154,34 +155,19 @@
 
 .create-account {
   .user-fields {
-    margin-top: 10px;
-    padding-top: 15px;
-    border-top: 1px solid $primary-low;
     display: flex;
     flex-direction: column;
   }
 
-  .user-field.confirm {
-    margin-top: 10px;
-  }
-
   .user-field {
     display: flex;
     flex-direction: column;
 
-    .required {
-      display: none; // needs more work
-    }
     > label {
       width: auto;
-      font-weight: bold;
     }
     .controls {
       margin-left: 0;
-
-      .instructions {
-        margin-top: 5px;
-      }
     }
   }
 }