diff --git a/services/web/app/views/_mixins/formMessages.pug b/services/web/app/views/_mixins/formMessages.pug
index a9531595cb..9ea239277a 100644
--- a/services/web/app/views/_mixins/formMessages.pug
+++ b/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
diff --git a/services/web/frontend/stylesheets/app/login-register.less b/services/web/frontend/stylesheets/app/login-register.less
index af0edfbfc9..c9abeafa8c 100644
--- a/services/web/frontend/stylesheets/app/login-register.less
+++ b/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);
+ }
+ }
+ }
}
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index 6c5d602b5a..404ab9cca1 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/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 {
diff --git a/services/web/frontend/stylesheets/core/utilities.less b/services/web/frontend/stylesheets/core/utilities.less
index 245ece443d..f2502a7a19 100755
--- a/services/web/frontend/stylesheets/core/utilities.less
+++ b/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;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index d1e0beb470..2bf9b43a8e 100644
--- a/services/web/locales/en.json
+++ b/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",
diff --git a/services/web/public/img/ol-brand/overleaf-green.svg b/services/web/public/img/ol-brand/overleaf-green.svg
new file mode 100644
index 0000000000..b8a0cb7f78
--- /dev/null
+++ b/services/web/public/img/ol-brand/overleaf-green.svg
@@ -0,0 +1,16 @@
+
diff --git a/services/web/public/img/website-redesign/sticky-tag-register.svg b/services/web/public/img/website-redesign/sticky-tag-register.svg
new file mode 100644
index 0000000000..3c67a7319f
--- /dev/null
+++ b/services/web/public/img/website-redesign/sticky-tag-register.svg
@@ -0,0 +1,8 @@
+