UX: add link for email login below username, remove button (#12118)

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

@@ -12,6 +12,10 @@
   display: none;
 }
 
+#discourse-modal:not(.has-alt-auth) .modal-inner-container {
+  max-width: 28em; // prevents long alerts from expanding the modal width
+}
+
 .login-modal:not(.hidden).has-alt-auth.no-local-login {
   min-width: fit-content;
   background: var(--secondary);
@@ -107,12 +111,12 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      margin-bottom: 1em;
+      margin-bottom: 0.8em;
       &:last-child {
         margin-bottom: 2em;
       }
       input {
-        padding: 0.75em 0.5em;
+        padding: 0.75em 0.77em;
         border-radius: 0.25em;
         min-width: 250px;
         box-shadow: none;
@@ -149,6 +153,19 @@
       input.alt-placeholder:invalid {
         color: var(--primary);
       }
+
+      #email-login-link {
+        opacity: 0;
+      }
+
+      #forgot-password-link,
+      #email-login-link {
+        font-size: $font-down-1;
+      }
+      input.value-entered + label.alt-placeholder + #email-login-link {
+        opacity: 1;
+        transition: opacity 0.5s;
+      }
       .tip:not(:empty) + label.more-info {
         display: none;
       }

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

@@ -51,6 +51,7 @@ $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;
@@ -64,6 +65,7 @@ $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