UX: login; smaller titles, more consistent spacing, other fixes (#12317)

* Fixes an issue where long translations cause layout issues

* Fixes an issue where the alignment shifts when switching between signup/login

* Makes some of the margin/padding more consistent

* Removes duplicate .login-modal and .create-account classes and replaces them with .login-modal-body and .create-account-body

* Adds another color transformation so we could remove prefers-color-scheme... the problem with that was that my OS' UI might be set to something different than my Discourse preferences (prefers-color-scheme only responds to OS UI settings)

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

@@ -2,7 +2,7 @@ import Component from "@ember/component";
 import cookie from "discourse/lib/cookie";
 
 export default Component.extend({
-  classNames: ["create-account"],
+  classNames: ["create-account-body"],
 
   userInputFocus(event) {
     let label = event.target.parentElement.previousElementSibling;

app/assets/javascripts/discourse/app/controllers/login.js

@@ -87,13 +87,12 @@ export default Controller.extend(ModalFunctionality, {
     canLoginLocal,
     showSecurityKey
   ) {
-    const classes = ["login-modal"];
+    const classes = ["login-modal-body"];
     if (awaitingApproval) {
       classes.push("awaiting-approval");
     }
     if (hasAtLeastOneLoginButton && !showSecondFactor && !showSecurityKey) {
       classes.push("has-alt-auth");
-      document.querySelector("#discourse-modal").classList.add("has-alt-auth");
     }
     if (!canLoginLocal) {
       classes.push("no-local-login");

app/assets/javascripts/discourse/tests/acceptance/auth-complete-test.js

@@ -29,7 +29,7 @@ acceptance("Auth Complete", function (needs) {
     );
 
     assert.ok(
-      exists("#discourse-modal div.create-account"),
+      exists("#discourse-modal div.create-account-body"),
       "it shows the registration modal"
     );
   });
@@ -41,7 +41,7 @@ acceptance("Auth Complete", function (needs) {
     assert.equal(currentRouteName(), "login", "it redirects to the login page");
 
     assert.ok(
-      exists("#discourse-modal div.create-account"),
+      exists("#discourse-modal div.create-account-body"),
       "it shows the registration modal"
     );
   });

app/assets/javascripts/discourse/tests/acceptance/create-account-external-test.js

@@ -24,7 +24,7 @@ acceptance("Create Account - external auth", function (needs) {
     await visit("/");
 
     assert.ok(
-      exists("#discourse-modal div.create-account"),
+      exists("#discourse-modal div.create-account-body"),
       "it shows the registration modal"
     );
 
@@ -36,7 +36,7 @@ acceptance("Create Account - external auth", function (needs) {
     await visit("/");
 
     assert.ok(
-      exists("#discourse-modal div.create-account"),
+      exists("#discourse-modal div.create-account-body"),
       "it shows the registration modal"
     );
 

app/assets/stylesheets/color_definitions.scss

@@ -90,6 +90,7 @@
   --primary-low-mid-or-secondary-low: #{$primary-low-mid-or-secondary-low};
   --primary-or-primary-low-mid: #{$primary-or-primary-low-mid};
   --highlight-low-or-medium: #{$highlight-low-or-medium};
+  --tertiary-or-tertiary-low: #{$tertiary-or-tertiary-low};
   --tertiary-low-or-tertiary-high: #{$tertiary-low-or-tertiary-high};
   --tertiary-med-or-tertiary: #{$tertiary-med-or-tertiary};
   --secondary-or-primary: #{$secondary-or-primary};

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

@@ -12,7 +12,7 @@
   display: none;
 }
 
-#discourse-modal.login-modal:not(.has-alt-auth) .modal-inner-container {
+#discourse-modal.login-modal-body:not(.has-alt-auth) .modal-inner-container {
   max-width: 28em; // prevents long alerts from expanding the modal width
 }
 
@@ -88,9 +88,13 @@
       color: #000000;
       justify-content: flex-start;
       min-width: fit-content;
+      margin-bottom: 0.5em;
     }
   }
   .modal-footer {
+    .btn-primary {
+      margin-right: 1.5em;
+    }
     .inline-spinner {
       display: inline-flex;
     }
@@ -130,6 +134,7 @@
       }
       label.more-info {
         color: var(--primary-medium);
+        min-height: 1.4em; // prevents height increase due to tips
       }
       label.alt-placeholder {
         color: var(--primary-medium);
@@ -228,8 +233,12 @@
   }
 }
 
+#login-link,
 #new-account-link {
   cursor: pointer;
+  padding-left: 0;
+  text-align: left;
+  // the second button can wrap in some locales, and this helps alignment
 }
 
 .create-account {
@@ -238,6 +247,10 @@
     margin-top: 0.5em;
   }
 
+  .create-account-body {
+    max-width: 40em;
+  }
+
   .user-field {
     input[type="text"] {
       margin-bottom: 0;

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -99,6 +99,8 @@ $highlight-low-or-medium: dark-light-choose(
   $highlight-medium
 ) !default;
 
+$tertiary-or-tertiary-low: dark-light-choose($tertiary, $tertiary-low) !default;
+
 $tertiary-low-or-tertiary-high: dark-light-choose(
   $tertiary-low,
   $tertiary-high

app/assets/stylesheets/common/foundation/variables.scss

@@ -51,7 +51,6 @@ $base-font-family: var(--font-family) !default;
 $heading-font-family: var(--heading-font-family) !default;
 
 // Font-size defintions, multiplier ^ (step / interval)
-$font-up-7: 2.639em;
 $font-up-6: 2.296em;
 $font-up-5: 2em;
 $font-up-4: 1.7511em;
@@ -65,7 +64,6 @@ $font-down-3: 0.6599em;
 $font-down-4: 0.5745em;
 $font-down-5: 0.5em;
 $font-down-6: 0.4355em;
-$font-down-7: 0.3789em;
 
 // inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
 // with base at 15px, the below gives 16.05px

app/assets/stylesheets/desktop/login.scss

@@ -5,12 +5,7 @@
 .create-account {
   .modal-body {
     &.has-alt-auth {
-      background: var(--tertiary);
+      background: var(--tertiary-or-tertiary-low);
-    }
-    @media (prefers-color-scheme: dark) {
-      &.has-alt-auth {
-        background: rgba(var(--tertiary-rgb), 0.5);
-      }
     }
   }
   .btn-flat.btn.modal-close svg {
@@ -91,62 +86,17 @@
   }
 }
 
-.login-modal.modal-body:not(.hidden).second-factor {
-  .login-left-side {
-    max-width: 350px;
-  }
-  .modal-footer {
-    margin-top: 1em;
-  }
-}
-
 // styles used on
 // login modal only
 .login-modal:not(.hidden) {
   padding: 0 !important;
-  &.has-alt-auth {
+  .login-modal-body.has-alt-auth {
     min-width: 700px;
     .login-left-side {
       align-self: stretch;
       width: calc(60% - 4em);
-      padding: 3em 3em 2.5em;
-    }
-  }
-  .login-left-side {
-    background: var(--secondary);
-    width: calc(100% - 4em);
-    display: flex;
-    flex-direction: column;
-    padding: 3em 3em 2.5em;
-    .login-welcome-header {
-      .login-title {
-        line-height: $line-height-small;
-        font-size: $font-up-7;
-      }
-      .login-subheader {
-        font-size: 1.125em !important;
-      }
-    }
-    #credentials {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start !important;
-    }
-    #login-form {
-      margin: 3em 0 1.25em 0;
-    }
-    .modal-footer {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      padding: 0;
-      border: 0;
-    }
     }
     .login-right-side {
-    display: none;
-  }
-  &.has-alt-auth .login-right-side {
       width: 35%;
       display: flex;
       flex-direction: column;
@@ -169,6 +119,39 @@
         }
       }
     }
+  }
+  .login-left-side {
+    background: var(--secondary);
+    width: calc(100% - 4em);
+    display: flex;
+    flex-direction: column;
+    padding: 3em 3em 2.5em;
+    .login-welcome-header {
+      .login-title {
+        line-height: $line-height-small;
+        font-size: $font-up-6;
+      }
+      .login-subheader {
+        font-size: 1.125em !important;
+      }
+    }
+    #credentials {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start !important;
+    }
+    #login-form {
+      margin: 3em 0 1.25em 0;
+    }
+    .modal-footer {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      padding: 0;
+      border: 0;
+    }
+  }
+
   .modal-body,
   #credentials {
     display: flex;
@@ -180,7 +163,7 @@
   }
 }
 
-.login-modal.second-factor.modal-body {
+.login-modal-body.second-factor {
   max-width: 30em;
   .login-left-side {
     width: 100%;
@@ -191,6 +174,20 @@
   #new-account-link {
     display: none;
   }
+  .modal-footer {
+    margin-top: 1em;
+  }
+}
+
+.login-form {
+  .tip {
+    &:not(:empty) {
+      min-height: 1.75em;
+      &.bad .svg-icon {
+        vertical-align: middle;
+      }
+    }
+  }
 }
 
 // styles used on the
@@ -200,14 +197,17 @@
   .create-account {
     position: relative;
     .modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown) {
-      max-height: 65vh !important;
+      max-height: 70vh !important;
       overflow: hidden;
     }
   }
+  .modal-footer {
+    padding: 2em 3em;
+  }
   .has-alt-auth .create-account-form {
     display: grid;
     grid-template-columns: 65% 35%;
-    grid-template-rows: 20% 80%;
+    grid-template-rows: auto 1fr;
     grid-template-areas:
       "header login-buttons"
       "form login-buttons";
@@ -216,6 +216,22 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    position: relative;
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 65%;
+      pointer-events: none;
+      bottom: 0;
+      left: 0;
+      height: 1em;
+      background-image: linear-gradient(
+        to bottom,
+        rgba(var(--secondary-rgb), 0),
+        rgba(var(--secondary-rgb), 1)
+      );
+    }
   }
   .create-account-login-buttons {
     display: none;
@@ -226,6 +242,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     h3 {
       color: var(--secondary);
       text-align: center;
@@ -234,9 +251,6 @@
       button:first-of-type {
         margin-top: 0;
       }
-      button {
-        margin-bottom: 1em;
-      }
     }
   }
   .modal-body {
@@ -245,9 +259,11 @@
   }
   .login-welcome-header {
     grid-area: header;
-    padding: 1em;
+    padding: 3em 3em 1em;
+
     .login-title {
-      font-size: 2.75em;
+      font-size: $font-up-6;
+      line-height: $line-height-medium;
     }
     .login-subheader {
       font-size: 1.125em !important;
@@ -264,27 +280,11 @@
   .has-alt-auth .login-form,
   .login-form {
     background: var(--secondary);
-    padding: 1em;
+    padding: 2em 3em 0;
+
     grid-area: form;
     overflow-y: scroll;
-    &:after {
+
-      content: "";
-      display: block;
-      position: absolute;
-      width: 65%;
-      pointer-events: none;
-      z-index: 100;
-      margin-left: -1em;
-      height: 1em;
-    }
-    &:after {
-      bottom: 93px;
-      background-image: linear-gradient(
-        to bottom,
-        rgba(var(--secondary-rgb), 0),
-        rgba(var(--secondary-rgb), 1)
-      );
-    }
     .input-group {
       margin-bottom: 1em;
       input {
@@ -363,17 +363,6 @@
   }
 }
 
-.login-form {
-  .tip {
-    &:not(:empty) {
-      min-height: 1.75em;
-      &.bad .svg-icon {
-        vertical-align: middle;
-      }
-    }
-  }
-}
-
 .password-reset,
 .email-login,
 .invites-show {

app/assets/stylesheets/mobile/login.scss

@@ -17,6 +17,14 @@
     padding: 0;
   }
 
+  label {
+    margin: 0;
+  }
+
+  .tip:not(:empty) {
+    min-height: 1.4em; // prevents height jump when tips appear
+  }
+
   .login-welcome-header {
     padding: 1.5em 1em;
     margin: 0 auto;
@@ -65,7 +73,7 @@
 
     .input-group {
       input {
-        height: 2.25em;
+        height: 2.5em;
         margin-bottom: 0.25em;
       }
       margin-bottom: 1em;
@@ -121,6 +129,7 @@
     box-sizing: border-box;
     margin: 0 auto;
     font-size: $font-down-1;
+    padding: 1.25em;
   }
 
   .alert.alert-error {