Merge pull request #18396 from overleaf/ds-register-login-split-test-2

Website redesign - New round of split test for Register and login page

GitOrigin-RevId: 69fe41b004eabe3efede27da80b9885b0fc2750b

services/web/frontend/stylesheets/app/base.less

@@ -199,4 +199,22 @@
       text-decoration: underline;
     }
   }
+
+  .light-design {
+    .recaptcha-branding {
+      padding: @padding-sm 0;
+      text-align: center; // This is different from above
+      font-size: @font-size-extra-small;
+
+      & > a {
+        color: var(--emerald-green);
+
+        &:hover {
+          color: var(--emerald-green-dark);
+        }
+
+        text-decoration: underline;
+      }
+    }
+  }
 }

services/web/frontend/stylesheets/app/login-register.less

@@ -181,6 +181,11 @@
     }
   }
 
+  .flex-center {
+    display: flex;
+    justify-content: center;
+  }
+
   .login-btn {
     display: flex;
     align-items: center;
@@ -216,8 +221,10 @@
     display: flex;
     position: relative;
 
-    input.form-control {
-      padding-right: 35px;
+    .form-group-password-input {
+      input.form-control {
+        padding-right: 35px;
+      }
     }
 
     .visibility-toggle {
@@ -238,6 +245,10 @@
     }
   }
 
+  .top-padding-computed-2 {
+    padding-top: @line-height-computed * 2;
+  }
+
   .form-group-password-input {
     display: flex;
     flex-direction: column;
@@ -251,6 +262,12 @@
       min-height: 100vh;
     }
 
+    // TODO: One of these two classes should be removed when test is tearing down.
+    .register-content-container-light {
+      .register-content-container;
+      background-color: @white;
+    }
+
     .register-form {
       width: 100%;
       height: 100%;
@@ -338,6 +355,32 @@
     }
   }
 
+  // TODO: This is Temporary class for split test to center align the text, we can remove this during the tear down of the test based on the winner variant.
+  .light-variant {
+    .tos-agreement-notice {
+      text-align: center;
+      font-size: 12px;
+
+      a {
+        color: var(--emerald-green);
+        text-decoration: underline;
+        // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
+        // this will force underline to not skip the descender
+        text-decoration-skip-ink: none;
+
+        &:hover {
+          color: var(--emerald-green-dark);
+        }
+
+        // for accessibility with keyboard navigation
+        &:focus {
+          outline: 2px solid var(--emerald-green);
+          outline-offset: 1px;
+        }
+      }
+    }
+  }
+
   .register-header-logo {
     &:focus {
       outline: 2px solid var(--emerald-green);

services/web/locales/en.json

@@ -431,6 +431,7 @@
   "doing_this_will_verify_affiliation_and_allow_log_in_2": "Doing this will verify your affiliation with <0>__institutionName__</0> and will allow you to log in to <0>__appName__</0> through your institution.",
   "done": "Done",
   "dont_have_account": "Don’t have an account?",
+  "dont_have_account_without_question_mark": "Don’t have an account",
   "download": "Download",
   "download_metadata": "Download Overleaf metadata",
   "download_pdf": "Download PDF",