From 0ac2ddd686a041b5beec4b5c91ba73c8c8d6e119 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Fri, 13 Jun 2025 13:22:21 +0200 Subject: [PATCH] Migrate onboarding/bonus/beta program templates to Bootstrap 5 (#26344) * Migrate the Try Premium for free page to Bootstrap 5 * Migrate the Overleaf Beta Program page to Bootstrap 5 * Fix buttons alignment on smaller screen size * Migrate the Overleaf Bonus Program page to Bootstrap 5 GitOrigin-RevId: 811db783af6a86ab472aae95e075bfa301786a31 --- .../web/app/views/_mixins/back_to_btns.pug | 2 +- .../web/app/views/beta_program/opt_in.pug | 131 +++++++++--------- services/web/app/views/referal/bonus.pug | 82 ++++++----- .../stylesheets/bootstrap-5/pages/all.scss | 2 + .../stylesheets/bootstrap-5/pages/bonus.scss | 62 +++++++++ .../bootstrap-5/pages/try-premium.scss | 42 ++++++ 6 files changed, 213 insertions(+), 108 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/bonus.scss create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/try-premium.scss diff --git a/services/web/app/views/_mixins/back_to_btns.pug b/services/web/app/views/_mixins/back_to_btns.pug index 287a76acd7..dacd9ea7a2 100644 --- a/services/web/app/views/_mixins/back_to_btns.pug +++ b/services/web/app/views/_mixins/back_to_btns.pug @@ -1,4 +1,4 @@ mixin back-to-btns(settingsAnchor) - .d-flex.gap-3 + .d-flex.flex-column.flex-sm-row.gap-3 a.btn.btn-secondary(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')} a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')} diff --git a/services/web/app/views/beta_program/opt_in.pug b/services/web/app/views/beta_program/opt_in.pug index e766083a1b..3122dc127f 100644 --- a/services/web/app/views/beta_program/opt_in.pug +++ b/services/web/app/views/beta_program/opt_in.pug @@ -1,75 +1,76 @@ extends ../layout-marketing include ../_mixins/back_to_btns -block vars - - bootstrap5PageStatus = 'disabled' - block content main.content.content-alt#main-content .container.beta-opt-in-wrapper .row - .col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + .col-lg-10.offset-lg-1.col-xl-8.offset-xl-2 .card - .page-header - h1 - | #{translate("sharelatex_beta_program")} - .beta-opt-in - .container-fluid - .row - .col-md-12 - if user.betaProgram - p.text-center - strong #{translate("beta_program_already_participating")}. - p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}. - else - p.text-center - strong #{translate("beta_program_not_participating")}. - p !{translate("beta_program_benefits", {}, ['strong'])} + .card-body + .page-header + h1 + | #{translate("sharelatex_beta_program")} + .beta-opt-in + .container-fluid + .row + .col-lg-12 + if user.betaProgram + p.text-center + strong #{translate("beta_program_already_participating")}. + p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}. + else + p.text-center + strong #{translate("beta_program_not_participating")}. + p !{translate("beta_program_benefits", {}, ['strong'])} - p #[strong How it works:] - ul - li #{translate("beta_program_badge_description")} #[span(aria-label=translate("beta_feature_badge") role="img").beta-badge] - li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}. - li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}. - li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}. - p !{translate("note_features_under_development", {}, ['strong'])}. + p #[strong How it works:] + ul + li + | #{translate("beta_program_badge_description")}  + span.badge.bg-warning-light-bg.text-warning(aria-label=translate("beta_feature_badge")) + span.badge-content β + li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}. + li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}. + li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}. + p !{translate("note_features_under_development", {}, ['strong'])}. - .row.text-center - .col-md-12 - if user.betaProgram - form( - data-ol-regular-form - method="post" - action="/beta/opt-out" - novalidate - ) - input(type="hidden", name="_csrf", value=csrfToken) - .form-group - a( - href="https://forms.gle/CFEsmvZQTAwHCd3X9" - target="_blank" - rel="noopener noreferrer" - ).btn.btn-primary.btn-lg #{translate("give_feedback")} - .form-group - button.btn.btn-secondary-info.btn-secondary.btn-sm( - type="submit" - data-ol-disabled-inflight - ) - span(data-ol-inflight="idle") #{translate("beta_program_opt_out_action")} - span(hidden data-ol-inflight="pending") #{translate("processing")}… - else - form( - data-ol-regular-form - method="post", - action="/beta/opt-in" - ) - input(type="hidden", name="_csrf", value=csrfToken) - .form-group - button.btn.btn-primary( - type="submit" - data-ol-disabled-inflight - ) - span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")} - span(hidden data-ol-inflight="pending") #{translate("joining")}… - .page-separator - +back-to-btns() + .row.text-center + .col-lg-12 + if user.betaProgram + form( + data-ol-regular-form + method="post" + action="/beta/opt-out" + novalidate + ) + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + a( + href="https://forms.gle/CFEsmvZQTAwHCd3X9" + target="_blank" + rel="noopener noreferrer" + ).btn.btn-primary.btn-lg #{translate("give_feedback")} + .form-group + button.btn.btn-secondary-info.btn-secondary.btn-sm( + type="submit" + data-ol-disabled-inflight + ) + span(data-ol-inflight="idle") #{translate("beta_program_opt_out_action")} + span(hidden data-ol-inflight="pending") #{translate("processing")}… + else + form( + data-ol-regular-form + method="post", + action="/beta/opt-in" + ) + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + button.btn.btn-primary( + type="submit" + data-ol-disabled-inflight + ) + span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")} + span(hidden data-ol-inflight="pending") #{translate("joining")}… + .page-separator + +back-to-btns() diff --git a/services/web/app/views/referal/bonus.pug b/services/web/app/views/referal/bonus.pug index ecd5a7160a..b1b2ccde41 100644 --- a/services/web/app/views/referal/bonus.pug +++ b/services/web/app/views/referal/bonus.pug @@ -1,49 +1,47 @@ extends ../layout-marketing -block vars - - bootstrap5PageStatus = 'disabled' - block content .content.content-alt#main-content - .container.bonus + .container#bonus .row - .col-md-8.col-md-offset-2 + .col-lg-8.offset-lg-2 .card - .container-fluid - .row - .col-md-10.col-md-offset-1 - if (refered_user_count > 0) - p.thanks The Overleaf Bonus Program has been discontinued, but you'll continue to have access to the features you already earned. - else - p.thanks The Overleaf Bonus Program has been discontinued. - p.thanks Please contact us if you have any questions. - - if (refered_user_count > 0) - .row.ab-bonus - .col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 30px; margin-top: 20px;") - - for (var i = 0; i <= 10; i++) { - if (refered_user_count == i) - .number(style="left: "+i+"0%").active #{i} - else - .number(style="left: "+i+"0%") #{i} - - } - - .row.ab-bonus - .col-md-10.col-md-offset-1.bonus-banner - .progress - .progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%") - - .row.ab-bonus - .col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 110px;") - .perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")} - .perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")} - .perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")} - .perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")} - .row   - - .row.ab-bonus - .col-md-10.col-md-offset-1.bonus-banner.bonus-status - if (refered_user_count == 1) - p.thanks You’ve introduced 1 person to #{settings.appName}. + .card-body + .container-fluid + .row + .col-lg-10.offset-lg-1 + if (refered_user_count > 0) + p.thanks The Overleaf Bonus Program has been discontinued, but you'll continue to have access to the features you already earned. else - p.thanks You’ve introduced #{refered_user_count} people to #{settings.appName}. + p.thanks The Overleaf Bonus Program has been discontinued. + p.thanks Please contact us if you have any questions. + + if (refered_user_count > 0) + .row.ab-bonus + .col-lg-10.offset-lg-1(style="position: relative; height: 30px; margin-top: 20px;") + - for (var i = 0; i <= 10; i++) { + if (refered_user_count == i) + .number(style="left: "+i+"0%").active #{i} + else + .number(style="left: "+i+"0%") #{i} + - } + + .row.ab-bonus + .col-lg-10.offset-lg-1 + .progress + .progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%") + + .row.ab-bonus + .col-lg-10.offset-lg-1(style="position: relative; height: 110px;") + .perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")} + .perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")} + .perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")} + .perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")} + .row   + + .row.ab-bonus + .col-lg-10.offset-lg-1.bonus-status + if (refered_user_count == 1) + p.thanks You’ve introduced 1 person to #{settings.appName}. + else + p.thanks You’ve introduced #{refered_user_count} people to #{settings.appName}. diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index f10f00842d..1efb360402 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -53,3 +53,5 @@ @import 'admin/admin'; @import 'admin/project-url-lookup'; @import 'add-secondary-email-prompt'; +@import 'try-premium'; +@import 'bonus'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/bonus.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/bonus.scss new file mode 100644 index 0000000000..2e6830bc8b --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/bonus.scss @@ -0,0 +1,62 @@ +#bonus { + margin-top: var(--spacing-06); + + p.thanks { + margin-top: var(--spacing-04); + text-align: center; + } + + .number { + position: absolute; + margin-left: -13px; + width: 26px; + padding: var(--spacing-01) 0; + text-align: center; + background-color: #ddd; + + &.active { + background-color: var(--bg-info-01); + color: var(--content-primary-dark); + } + + border-radius: 3px; + } + + .progress { + margin-top: var(--spacing-05); + margin-left: calc(var(--spacing-06) * -1); + margin-right: calc(var(--spacing-06) * -1); + height: 30px; + } + + .perk { + position: absolute; + background-color: var(--bg-light-tertiary); + border-radius: var(--border-radius-base); + text-align: center; + padding: var(--spacing-02); + min-width: min-content; + width: 110px; + margin-left: calc(var(--spacing-11) * -1); + font-size: 14px; + + &::before { + border-bottom: var(--spacing-04) solid var(--bg-light-tertiary); + border-left: var(--spacing-04) solid transparent; + border-right: var(--spacing-04) solid transparent; + content: ''; + position: absolute; + left: var(--spacing-10); + top: calc(var(--spacing-04) * -1); + } + + &.active { + color: white; + background-color: var(--bg-info-01); + + &::before { + border-bottom: var(--spacing-04) solid var(--border-active); + } + } + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/try-premium.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/try-premium.scss new file mode 100644 index 0000000000..339fb364bd --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/try-premium.scss @@ -0,0 +1,42 @@ +.try-premium-page { + .try-premium-logo-container { + padding: 0 var(--spacing-08); + display: flex; + justify-content: space-evenly; + } + + .try-premium-third-party-logo { + width: 36px; + height: 36px; + } + + .try-premium-page-list-wrapper { + display: flex; + justify-content: center; + align-items: center; + padding-bottom: var(--spacing-06); + } + + .try-premium-page-list { + padding-inline-start: 0; + display: flex; + align-items: center; + flex-direction: column; + + @include media-breakpoint-up(sm) { + flex-direction: row; + justify-content: space-between; + width: 100%; + max-width: 500px; + } + + ul { + margin-bottom: 0; + width: 300px; + + @include media-breakpoint-up(sm) { + width: unset; + } + } + } +}