From c4cdacc7024143964e51a2838c7714e53b235d2c Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Wed, 28 Jan 2026 13:27:02 +0100 Subject: [PATCH] Align subscription, login, restricted, and invite pages with website redesign (#31045) * Replace the black Overleaf logo to the green one * Move subscription, login, restricted, invite views to website-redesign layout * Remove the Storybook showcase of all the layouts --------- Co-authored-by: Antoine Clausse GitOrigin-RevId: b07581834921750c9c6de44f05beb0dd9eafba23 --- .../web/app/views/subscriptions/add-seats.pug | 5 +- .../canceled-subscription-react.pug | 5 +- .../views/subscriptions/dashboard-react.pug | 5 +- .../manually-collected-subscription.pug | 5 +- .../missing-billing-information.pug | 5 +- .../views/subscriptions/preview-change.pug | 5 +- .../subscriptions/subtotal-limit-exceeded.pug | 5 +- .../successful-subscription-react.pug | 5 +- .../subscriptions/team/group-invites.pug | 5 +- .../subscriptions/team/invite-managed.pug | 5 +- .../app/views/subscriptions/team/invite.pug | 5 +- .../subscriptions/team/invite_logged_out.pug | 45 ++-- .../upgrade-group-subscription-react.pug | 5 +- services/web/app/views/user/login.pug | 87 +++--- services/web/app/views/user/restricted.pug | 5 +- .../components/navbar/default-navbar.tsx | 4 +- .../frontend/stories/page-layouts.stories.tsx | 248 ------------------ 17 files changed, 121 insertions(+), 328 deletions(-) delete mode 100644 services/web/frontend/stories/page-layouts.stories.tsx diff --git a/services/web/app/views/subscriptions/add-seats.pug b/services/web/app/views/subscriptions/add-seats.pug index 8fc20a4f11..62f1f2f1b3 100644 --- a/services/web/app/views/subscriptions/add-seats.pug +++ b/services/web/app/views/subscriptions/add-seats.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/group-management/add-seats' @@ -21,5 +24,5 @@ block append meta ) block content - main#main-content.content.content-alt + main#main-content.content #add-seats-root diff --git a/services/web/app/views/subscriptions/canceled-subscription-react.pug b/services/web/app/views/subscriptions/canceled-subscription-react.pug index a33732e1f6..5d152d7776 100644 --- a/services/web/app/views/subscriptions/canceled-subscription-react.pug +++ b/services/web/app/views/subscriptions/canceled-subscription-react.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/canceled-subscription' @@ -7,4 +10,4 @@ block append meta meta(name='ol-user' data-type='json' content=user) block content - main#subscription-canceled-root.content.content-alt + main#subscription-canceled-root.content diff --git a/services/web/app/views/subscriptions/dashboard-react.pug b/services/web/app/views/subscriptions/dashboard-react.pug index 4048a0fa11..12ab2d272c 100644 --- a/services/web/app/views/subscriptions/dashboard-react.pug +++ b/services/web/app/views/subscriptions/dashboard-react.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/dashboard' @@ -91,5 +94,5 @@ block append meta meta(name='ol-groupPlans' data-type='json' content=groupPlans) block content - main#main-content.content.content-alt + main#main-content.content #subscription-dashboard-root diff --git a/services/web/app/views/subscriptions/manually-collected-subscription.pug b/services/web/app/views/subscriptions/manually-collected-subscription.pug index 892ded0d7c..2c70558e9c 100644 --- a/services/web/app/views/subscriptions/manually-collected-subscription.pug +++ b/services/web/app/views/subscriptions/manually-collected-subscription.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/group-management/manually-collected-subscription' @@ -9,4 +12,4 @@ block append meta meta(name='ol-errorType' data-type='string' content=errorType) block content - main#manually-collected-subscription-root.content.content-alt + main#manually-collected-subscription-root.content diff --git a/services/web/app/views/subscriptions/missing-billing-information.pug b/services/web/app/views/subscriptions/missing-billing-information.pug index d0a0e05ae8..27e545d0a0 100644 --- a/services/web/app/views/subscriptions/missing-billing-information.pug +++ b/services/web/app/views/subscriptions/missing-billing-information.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/group-management/missing-billing-information' @@ -8,4 +11,4 @@ block append meta meta(name='ol-groupName' data-type='string' content=groupName) block content - main#missing-billing-information-root.content.content-alt + main#missing-billing-information-root.content diff --git a/services/web/app/views/subscriptions/preview-change.pug b/services/web/app/views/subscriptions/preview-change.pug index 1e125c982b..c11da743e7 100644 --- a/services/web/app/views/subscriptions/preview-change.pug +++ b/services/web/app/views/subscriptions/preview-change.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/preview-change' @@ -23,5 +26,5 @@ block append meta ) block content - main#main-content.content.content-alt + main#main-content.content #subscription-preview-change diff --git a/services/web/app/views/subscriptions/subtotal-limit-exceeded.pug b/services/web/app/views/subscriptions/subtotal-limit-exceeded.pug index df734232d6..4f36d86012 100644 --- a/services/web/app/views/subscriptions/subtotal-limit-exceeded.pug +++ b/services/web/app/views/subscriptions/subtotal-limit-exceeded.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/group-management/subtotal-limit-exceeded' @@ -8,4 +11,4 @@ block append meta meta(name='ol-groupName' data-type='string' content=groupName) block content - main#subtotal-limit-exceeded-root.content.content-alt + main#subtotal-limit-exceeded-root.content diff --git a/services/web/app/views/subscriptions/successful-subscription-react.pug b/services/web/app/views/subscriptions/successful-subscription-react.pug index 9437b93b67..63103e3df2 100644 --- a/services/web/app/views/subscriptions/successful-subscription-react.pug +++ b/services/web/app/views/subscriptions/successful-subscription-react.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/successful-subscription' @@ -9,4 +12,4 @@ block append meta meta(name='ol-user' data-type='json' content=user) block content - main#subscription-success-root.content.content-alt + main#subscription-success-root.content diff --git a/services/web/app/views/subscriptions/team/group-invites.pug b/services/web/app/views/subscriptions/team/group-invites.pug index 18286fd403..1033ee16d3 100644 --- a/services/web/app/views/subscriptions/team/group-invites.pug +++ b/services/web/app/views/subscriptions/team/group-invites.pug @@ -1,5 +1,8 @@ extends ../../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/group-invites' @@ -8,4 +11,4 @@ block append meta meta(name='ol-user' data-type='json' content=user) block content - main#group-invites-root.content.content-alt.team-invite + main#group-invites-root.content.team-invite diff --git a/services/web/app/views/subscriptions/team/invite-managed.pug b/services/web/app/views/subscriptions/team/invite-managed.pug index 4010731c3f..c1f7794b49 100644 --- a/services/web/app/views/subscriptions/team/invite-managed.pug +++ b/services/web/app/views/subscriptions/team/invite-managed.pug @@ -1,5 +1,8 @@ extends ../../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/invite-managed' @@ -20,4 +23,4 @@ block append meta meta(name='ol-usersSubscription' data-type='json' content=usersSubscription) block content - main#invite-managed-root.content.content-alt.team-invite + main#invite-managed-root.content.team-invite diff --git a/services/web/app/views/subscriptions/team/invite.pug b/services/web/app/views/subscriptions/team/invite.pug index 717ccef611..93f5c02a81 100644 --- a/services/web/app/views/subscriptions/team/invite.pug +++ b/services/web/app/views/subscriptions/team/invite.pug @@ -1,5 +1,8 @@ extends ../../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/invite' @@ -22,4 +25,4 @@ block append meta meta(name='ol-user' data-type='json' content=user) block content - main#invite-root.content.content-alt + main#invite-root.content diff --git a/services/web/app/views/subscriptions/team/invite_logged_out.pug b/services/web/app/views/subscriptions/team/invite_logged_out.pug index 71d173d73a..62833d0045 100644 --- a/services/web/app/views/subscriptions/team/invite_logged_out.pug +++ b/services/web/app/views/subscriptions/team/invite_logged_out.pug @@ -1,31 +1,32 @@ extends ../../layout-marketing +block vars + - isWebsiteRedesign = true + block append meta meta(name='ol-user' data-type='json' content=user) block content - main#main-content.content.content-alt.team-invite + main#main-content.content.team-invite .container .row - .col-lg-8.m-auto - .card.text-center - .card-body - .page-header - h1.text-center !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])} + .col-lg-8.m-auto.text-center + .page-header + h1 !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])} - if accountExists - div - p #{translate("invited_to_group_login_benefits", {appName: appName})} - p #{translate("invited_to_group_login", {emailAddress: emailAddress})} - p - a.btn.btn-primary( - href=`/login?redir=/subscription/invites/${inviteToken}${groupSSOActive ? "&hide_sso_login=true" : ""}` - ) #{translate("login_to_accept_invitation")} - else - div - p #{translate("invited_to_group_register_benefits", {appName: appName})} - p #{translate("invited_to_group_register", {inviterName: inviterName})} - p - a.btn.btn-primary( - href=`/register?redir=/subscription/invites/${inviteToken}${groupSSOActive ? "&hide_sso_login=true" : ""}` - ) #{translate("register_to_accept_invitation")} + if accountExists + div + p #{translate("invited_to_group_login_benefits", {appName: appName})} + p #{translate("invited_to_group_login", {emailAddress: emailAddress})} + p + a.btn.btn-primary( + href=`/login?redir=/subscription/invites/${inviteToken}${groupSSOActive ? "&hide_sso_login=true" : ""}` + ) #{translate("login_to_accept_invitation")} + else + div + p #{translate("invited_to_group_register_benefits", {appName: appName})} + p #{translate("invited_to_group_register", {inviterName: inviterName})} + p + a.btn.btn-primary( + href=`/register?redir=/subscription/invites/${inviteToken}${groupSSOActive ? "&hide_sso_login=true" : ""}` + ) #{translate("register_to_accept_invitation")} diff --git a/services/web/app/views/subscriptions/upgrade-group-subscription-react.pug b/services/web/app/views/subscriptions/upgrade-group-subscription-react.pug index 08a1618b50..bb516326af 100644 --- a/services/web/app/views/subscriptions/upgrade-group-subscription-react.pug +++ b/services/web/app/views/subscriptions/upgrade-group-subscription-react.pug @@ -1,5 +1,8 @@ extends ../layout-react +block vars + - isWebsiteRedesign = true + block entrypointVar - entrypoint = 'pages/user/subscription/group-management/upgrade-group-subscription' @@ -19,4 +22,4 @@ block append meta ) block content - main#upgrade-group-subscription-root.content.content-alt + main#upgrade-group-subscription-root.content diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug index 621d5f7020..5e8a23b017 100644 --- a/services/web/app/views/user/login.pug +++ b/services/web/app/views/user/login.pug @@ -1,48 +1,49 @@ -extends ../layout-marketing +extends ../layout-website-redesign + +block vars + - isWebsiteRedesign = true block content - main#main-content.content.content-alt + main#main-content.content .container .row .col-lg-6.offset-lg-3.col-xl-4.offset-xl-4 - .card - .card-body - .page-header - if login_support_title - h1 !{login_support_title} - else - h1 #{translate("log_in")} - form(name='loginForm' data-ol-async-form action='/login' method='POST') - input(name='_csrf' type='hidden' value=csrfToken) - +formMessagesNewStyle - +customFormMessageNewStyle('invalid-password-retry-or-reset', 'danger') - | !{translate('email_or_password_wrong_try_again_or_reset', {}, [{ name: 'a', attrs: { href: '/user/password/reset', 'aria-describedby': 'resetPasswordDescription' } }])} - span.visually-hidden(id='resetPasswordDescription') - | #{translate('reset_password_link')} - +customFormMessageNewStyle('password-compromised') - | !{translate('password_compromised_try_again_or_use_known_device_or_reset', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com/passwords', rel: 'noopener noreferrer', target: '_blank'}}, {name: 'a', attrs: {href: '/user/password/reset', target: '_blank'}}])}. - .form-group - label(for='email') #{translate("email")} - input#email.form-control( - name='email' - type='email' - required - autofocus='true' - autocomplete='username' - ) - .form-group - label(for='password') #{translate("password")} - input#password.form-control( - name='password' - type='password' - autocomplete='current-password' - required - ) - .actions - button.btn-primary.btn(type='submit' data-ol-disabled-inflight) - span(data-ol-inflight='idle') #{translate("login")} - span(hidden data-ol-inflight='pending') #{translate("logging_in")}… - a.float-end(href='/user/password/reset') #{translate("forgot_your_password")}? - if login_support_text - hr - p.text-center !{login_support_text} + .page-header + if login_support_title + h1 !{login_support_title} + else + h1 #{translate("log_in")} + form(name='loginForm' data-ol-async-form action='/login' method='POST') + input(name='_csrf' type='hidden' value=csrfToken) + +formMessagesNewStyle + +customFormMessageNewStyle('invalid-password-retry-or-reset', 'danger') + | !{translate('email_or_password_wrong_try_again_or_reset', {}, [{ name: 'a', attrs: { href: '/user/password/reset', 'aria-describedby': 'resetPasswordDescription' } }])} + span.visually-hidden(id='resetPasswordDescription') + | #{translate('reset_password_link')} + +customFormMessageNewStyle('password-compromised') + | !{translate('password_compromised_try_again_or_use_known_device_or_reset', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com/passwords', rel: 'noopener noreferrer', target: '_blank'}}, {name: 'a', attrs: {href: '/user/password/reset', target: '_blank'}}])}. + .form-group + label(for='email') #{translate("email")} + input#email.form-control( + name='email' + type='email' + required + autofocus='true' + autocomplete='username' + ) + .form-group + label(for='password') #{translate("password")} + input#password.form-control( + name='password' + type='password' + autocomplete='current-password' + required + ) + .actions + button.btn-primary.btn(type='submit' data-ol-disabled-inflight) + span(data-ol-inflight='idle') #{translate("login")} + span(hidden data-ol-inflight='pending') #{translate("logging_in")}… + a.float-end(href='/user/password/reset') #{translate("forgot_your_password")}? + if login_support_text + hr + p.text-center !{login_support_text} diff --git a/services/web/app/views/user/restricted.pug b/services/web/app/views/user/restricted.pug index 0140064a99..13f1df982b 100644 --- a/services/web/app/views/user/restricted.pug +++ b/services/web/app/views/user/restricted.pug @@ -1,6 +1,9 @@ -extends ../layout-marketing +extends ../layout-website-redesign include ../_mixins/material_symbol +block vars + - isWebsiteRedesign = true + block content main.content#main-content .container diff --git a/services/web/frontend/js/shared/components/navbar/default-navbar.tsx b/services/web/frontend/js/shared/components/navbar/default-navbar.tsx index a32a8ce40a..f6c8e196dc 100644 --- a/services/web/frontend/js/shared/components/navbar/default-navbar.tsx +++ b/services/web/frontend/js/shared/components/navbar/default-navbar.tsx @@ -14,7 +14,7 @@ import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal' import { UserProvider } from '@/shared/context/user-context' import { X } from '@phosphor-icons/react' import overleafWhiteLogo from '@/shared/svgs/overleaf-white.svg' -import overleafBlackLogo from '@/shared/svgs/overleaf-black.svg' +import overleafGreenLogo from '@/shared/svgs/overleaf-green.svg' import type { CSSPropertiesWithVariables } from '../../../../../types/css-properties-with-variables' function DefaultNavbar( @@ -59,7 +59,7 @@ function DefaultNavbar( style={ { '--navbar-brand-image-default-url': `url("${overleafWhiteLogo}")`, - '--navbar-brand-image-redesign-url': `url("${overleafBlackLogo}")`, + '--navbar-brand-image-redesign-url': `url("${overleafGreenLogo}")`, } as CSSPropertiesWithVariables } aria-label={t('primary')} diff --git a/services/web/frontend/stories/page-layouts.stories.tsx b/services/web/frontend/stories/page-layouts.stories.tsx deleted file mode 100644 index 501f3b7670..0000000000 --- a/services/web/frontend/stories/page-layouts.stories.tsx +++ /dev/null @@ -1,248 +0,0 @@ -import _ from 'lodash' -import { ComponentType } from 'react' -import { Navbar } from 'react-bootstrap' -import OLPageContentCard from '@/shared/components/ol/ol-page-content-card' -import OLRow from '@/shared/components/ol/ol-row' -import OLCol from '@/shared/components/ol/ol-col' -import OLButton from '@/shared/components/ol/ol-button' -import CiamLayout from '@/shared/components/layouts/ciam-layout' - -const lorem = (n: number) => { - const quacks = ['quack', 'quack', 'quack', 'quak'] - let result = '' - if (n >= 1) result += 'Lorem' - if (n >= 2) result += ' epsom' - for (let i = 2; i < n; i++) { - const next = - result.at(-1) === '.' - ? ' ' + _.capitalize(quacks[Math.floor(Math.random() * quacks.length)]) - : quacks[Math.floor(Math.random() * (quacks.length + 1))] - result += next ? ' ' + next : '.' - } - if (result.at(-1) !== '.') result += '.' - return result -} - -const Nav = () => - -export const UnsuportedBrowser = () => ( -
-
-
-
-

Unsupported Browser

-

{lorem(60)}

-
-

{lorem(40)}

-
-
-
-
-) - -export const Error400 = () => ( -
-
-
-
-

Something went wrong, sorry.

-

{lorem(15)}

-
-
-
-
-) - -export const Error404 = () => ( - <> -