Merge pull request #17594 from overleaf/mf-website-redesign-register

[web] Website redesign for register page

GitOrigin-RevId: a8ae7327b1d662cb442e44992c5e2676a23cca3e

services/web/app/views/_mixins/formMessages.pug

@@ -36,6 +36,41 @@ mixin customFormMessage(key, kind)
 		)
 			block
 
+mixin customFormMessageNewStyle(key, kind)
+	if kind === 'success'
+		div.notification.notification-type-success(
+				hidden,
+				data-ol-custom-form-message=key,
+				role="alert"
+				aria-live="polite"
+			)
+			div.notification-icon
+				span.material-symbols(aria-hidden="true") check_circle
+			div.notification-content.text-left
+				block
+	else if kind === 'danger'
+		div.notification.notification-type-error(
+			hidden,
+			data-ol-custom-form-message=key,
+			role="alert"
+			aria-live="polite"
+		)
+			div.notification-icon
+				span.material-symbols(aria-hidden="true") error
+			div.notification-content.text-left
+				block
+	else
+		div.notification.notification-type-warning(
+				hidden,
+				data-ol-custom-form-message=key,
+				role="alert"
+				aria-live="polite"
+			)
+			div.notification-icon
+				span.material-symbols(aria-hidden="true") warning
+			div.notification-content.text-left
+				block
+
 mixin customValidationMessage(key)
 	div.invalid-feedback.mt-2(
 		hidden,
@@ -44,3 +79,13 @@ mixin customValidationMessage(key)
 		i.fa.fa-fw.fa-warning.me-1(aria-hidden="true")
 		div
 			block
+
+mixin customValidationMessageNewStyle(key)
+	div.notification.notification-type-error(
+			hidden,
+			data-ol-custom-form-message=key
+		)
+		div.notification-icon
+			span.material-symbols(aria-hidden="true") error
+		div.notification-content.text-left.small
+			block

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

@@ -158,6 +158,14 @@
     }
   }
 
+  .login-register-hr-text-container {
+    padding: @line-height-computed 0 calc(@line-height-computed / 2) 0;
+  }
+
+  .login-register-error-container {
+    padding-bottom: calc(@line-height-computed / 2);
+  }
+
   .login-register-other-links {
     padding: @line-height-computed 0;
     a {
@@ -241,4 +249,108 @@
     flex-direction: column;
     width: 100%;
   }
+
+  .register-container {
+    .register-content-container {
+      display: flex;
+      background-color: #f2f4f7;
+      min-height: 100vh;
+    }
+
+    .register-form {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      padding-top: @line-height-computed * 7;
+      background-color: @white;
+
+      @media (max-width: @screen-sm-max) {
+        height: 100%;
+        padding-top: @line-height-computed * 2;
+      }
+
+      .login-register-card {
+        max-width: 320px;
+        padding-bottom: @line-height-computed * 5; // for cookie banner
+      }
+    }
+
+    .register-illustration-container {
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .register-illustration {
+        position: absolute;
+        left: 80px;
+
+        // for wide screen
+        @media (min-width: 1700px) {
+          position: relative;
+          left: unset;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+        }
+
+        .register-main-image {
+          max-width: 850px;
+
+          @media (max-width: 1350px) {
+            max-width: 750px;
+          }
+
+          @media (max-width: 1150px) {
+            max-width: 670px;
+          }
+        }
+
+        .sticky-tags {
+          position: absolute;
+          height: 210px;
+          bottom: -135px;
+          right: 130px;
+
+          // for wide screen
+          @media (min-width: 1700px) {
+            right: calc(50% - 300px);
+          }
+        }
+      }
+    }
+  }
+
+  .tos-agreement-notice {
+    text-align: left;
+    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;
+      }
+    }
+  }
+
+  // for accessibility with keyboard navigation
+  .login-register-newsletter {
+    .checkbox {
+      input[type='checkbox']:focus {
+        outline: 1px solid var(--emerald-green);
+      }
+    }
+  }
 }

services/web/frontend/stylesheets/app/website-redesign.less

@@ -11,7 +11,9 @@
   a,
   strong,
   span {
-    font-family: 'Noto Sans', sans-serif;
+    &:not(.material-symbols) {
+      font-family: 'Noto Sans', sans-serif;
+    }
   }
 
   h1 {

services/web/frontend/stylesheets/core/utilities.less

@@ -55,6 +55,10 @@
   width: 100%;
 }
 
+.min-vh-100 {
+  min-height: 100vh;
+}
+
 // Overflow utils
 .overflow-auto {
   overflow: auto !important;

services/web/locales/en.json

@@ -97,6 +97,7 @@
   "all_projects": "All Projects",
   "all_projects_will_be_transferred_immediately": "All projects will be transferred to the new owner immediately.",
   "all_templates": "All Templates",
+  "already_have_an_account": "Already have an account?",
   "already_have_sl_account": "Already have an __appName__ account?",
   "already_subscribed_try_refreshing_the_page": "Already subscribed? Try refreshing the page.",
   "also": "Also",
@@ -329,6 +330,7 @@
   "continue_github_merge": "I have manually merged. Continue",
   "continue_to": "Continue to __appName__",
   "continue_with_free_plan": "Continue with free plan",
+  "continue_with_service": "Continue with __service__",
   "copied": "Copied",
   "copy": "Copy",
   "copy_project": "Copy Project",
@@ -343,6 +345,8 @@
   "create": "Create",
   "create_a_new_password_for_your_account": "Create a new password for your account",
   "create_a_new_project": "Create a new project",
+  "create_account": "Create account",
+  "create_an_account": "Create an account",
   "create_first_admin_account": "Create the first Admin account",
   "create_new_account": "Create new account",
   "create_new_subscription": "Create New Subscription",