UX: login modal adjustments (#12552)

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

@@ -21,10 +21,10 @@
   background: var(--secondary);
   #login-buttons:not(.hidden) {
     .btn.btn-social,
-    .btn,
-    .login-with-email-button {
+    .btn {
       border: 1px solid var(--primary-low-mid);
-      &:hover {
+      &:hover,
+      &:focus {
         background: var(--primary-very-low);
       }
     }

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

@@ -110,21 +110,6 @@
   }
 }
 
-// slide in
-@keyframes slidein {
-  from {
-    transform: translateY(-20%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-.create-account.in .modal-inner-container,
-.login-modal.in .modal-inner-container {
-  animation: slidein 0.3s;
-}
-
 .inline-modal {
   .modal-inner-container {
     border: 1px solid var(--secondary-medium);

app/assets/stylesheets/common/components/buttons.scss

@@ -161,19 +161,14 @@
 // Social buttons
 // --------------------------------------------------
 
-.btn-social,
-.login-with-email-button {
-  border-radius: 0.25em;
+.btn-social {
   color: #000;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid transparent;
-  &:hover {
-    color: #000 !important;
-    background: #ececec !important;
-    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
-    .d-icon {
-      color: inherit !important;
-    }
+  &:hover,
+  &:focus {
+    box-shadow: shadow("card");
+    outline: 1px solid #000;
   }
   &[href] {
     color: var(--secondary);

app/assets/stylesheets/desktop/login.scss

@@ -22,8 +22,21 @@
     min-height: 75px;
     order: 2;
 
+    &:focus-within,
+    &:hover {
+      button:not(:hover):not(:focus) {
+        opacity: 0.75;
+      }
+    }
+
     button {
-      margin: 0.35em;
+      margin: 0.35em 0;
+      &:first-of-type {
+        margin-top: 0;
+      }
+      &:last-of-type {
+        margin-bottom: 0;
+      }
       &:lang(zh_CN) {
         min-width: 200px;
       }
@@ -72,7 +85,8 @@
       .login-with-email-button {
         border: 1px solid var(--primary-low-mid);
         margin-bottom: 0.5em;
-        &:hover {
+        &:hover,
+        &:focus {
           background: var(--primary-very-low) !important;
         }
       }
@@ -103,7 +117,8 @@
             .d-icon {
               color: #000 !important;
             }
-            &:hover {
+            &:hover,
+            &:focus {
               box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
               .d-icon {
                 color: #000 !important;

config/locales/client.en.yml

@@ -1774,9 +1774,9 @@ en:
       confirm_button: Finish Login
 
     login:
-      header_title: "Welcome Back"
+      header_title: "Welcome back"
       subheader_title: "Log in to your account"
-      title: "Log In"
+      title: "Log in"
       username: "User"
       password: "Password"
       second_factor_title: "Two-Factor Authentication"