From 7b825d3a9e9a9c03a590ce2ba449f7912639e563 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Mon, 12 Aug 2024 09:01:47 -0500 Subject: [PATCH] Merge pull request #19758 from overleaf/jel-modal-light-touch [web] Update group modal on plans page light touch redesign GitOrigin-RevId: 26cce2996bed263c46d06b1b1fced8206fc9d8c1 --- .../subscriptions/plans-light-design.pug | 2 +- .../light-redesign/_group_plan_modal.pug | 116 +++++++++++++++ .../app/plans/plans-light-touch-redesign.less | 132 ++++++++++++++---- .../stylesheets/app/plans/plans-v2.less | 59 -------- .../stylesheets/components/modals.less | 41 ++++++ services/web/locales/en.json | 2 + 6 files changed, 261 insertions(+), 91 deletions(-) create mode 100644 services/web/app/views/subscriptions/plans/light-redesign/_group_plan_modal.pug diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug index 0b011058d8..bb7bf13a18 100644 --- a/services/web/app/views/subscriptions/plans-light-design.pug +++ b/services/web/app/views/subscriptions/plans-light-design.pug @@ -51,6 +51,6 @@ block content include ./plans/_faq_new - include ./plans/_group_plan_modal + include ./plans/light-redesign/_group_plan_modal != moduleIncludes("contactModalGeneral-marketing", locals) diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_group_plan_modal.pug b/services/web/app/views/subscriptions/plans/light-redesign/_group_plan_modal.pug new file mode 100644 index 0000000000..779d010660 --- /dev/null +++ b/services/web/app/views/subscriptions/plans/light-redesign/_group_plan_modal.pug @@ -0,0 +1,116 @@ +div.modal.fade.group-customize-subscription-modal.website-redesign-modal(tabindex="-1" role="dialog" data-ol-group-plan-modal) + .modal-dialog(role="document") + .modal-content + .modal-header + button.close( + type="button" + data-dismiss="modal" + aria-label=translate("close") + ) + i.material-symbols(aria-hidden="true") close + h1.modal-title #{translate("customize_your_group_subscription")} + h2.modal-subtitle #{translate("save_30_percent_or_more_uppercase")} + .modal-body + .container-fluid + .row + .col-md-6.text-center + .circle.circle-lg + .group-price + span(data-ol-group-plan-display-price) ... + span  /#{translate('year')} + .group-price-per-user(data-ol-group-plan-price-per-user=translate('per_user')) ... + .group-modal-features + | #{translate('each_user_will_have_access_to')}: + ul.list-unstyled + li( + hidden=(groupPlanModalDefaults.plan_code !== 'collaborator') + data-ol-group-plan-plan-code='collaborator' + ) + strong #{translate("collabs_per_proj", {collabcount:10})} + li( + hidden=(groupPlanModalDefaults.plan_code !== 'professional') + data-ol-group-plan-plan-code='professional' + ) + strong #{translate("unlimited_collabs")} + li.list-item-pro-features-header #{translate('all_premium_features')} + li #{translate('sync_dropbox_github')} + li #{translate('full_doc_history')} + li #{translate('track_changes')} + li + #{translate('more_lowercase')} + .col-md-6 + form.form(data-ol-group-plan-form) + .form-group + label(for='plan_code') + | #{translate('plan')} + for plan_code in groupPlanModalOptions.plan_codes + label.group-plan-option + input( + type="radio" + name="plan_code" + checked=(plan_code.code === groupPlanModalDefaults.plan_code) + value=plan_code.code + data-ol-group-plan-code=plan_code.code + ) + span #{translate(plan_code.i18n)} + .form-group + label(for='size') + | #{translate('number_of_users')} + select.form-control( + id="size" + event-tracking="groups-modal-group-size" + event-tracking-mb="true" + event-tracking-trigger="click" + event-tracking-element="select" + ) + for size in groupPlanModalOptions.sizes + option( + value=size + selected=(size === groupPlanModalDefaults.size) + ) #{size} + .form-group(data-ol-group-plan-form-currency) + label(for='currency') + | #{translate('currency')} + select.form-control(id="currency") + for currency in groupPlanModalOptions.currencies + option( + value=currency.code + selected=(currency.code === groupPlanModalDefaults.currency) + ) #{currency.display} + .form-group + label(for='usage') + | #{translate('educational_discount_for_groups_of_ten_or_more')} + label.group-plan-educational-discount + input( + id="usage" + type="checkbox" + autocomplete="off" + event-tracking="groups-modal-edu-discount" + event-tracking-mb="true" + event-tracking-trigger="click" + event-tracking-element="checkbox" + ) + span #{translate('educational_discount_disclaimer')} + + .row + .col-md-12.text-center + .educational-discount-section + div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount) + .applied(hidden=true data-ol-group-plan-educational-discount-applied) + | #{translate('educational_discount_applied')} + .ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible) + | #{translate('educational_discount_available_for_groups_of_ten_or_more')} + .modal-footer + .text-center + button.btn.btn-primary.btn-lg( + data-ol-purchase-group-plan + event-tracking="form-submitted-groups-modal-purchase-click" + event-tracking-mb="true" + event-tracking-trigger="click" + ) #{translate('purchase_now_lowercase')} + br + p #{translate('need_more_than_x_licenses', {x: '50'})} + |   + button.btn.btn-inline-link( + data-ol-open-contact-form-for-more-than-50-licenses + ) #{translate('please_get_in_touch')} + diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less index 00fe54fcba..8d78053deb 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less +++ b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less @@ -23,42 +23,112 @@ } } - .circle { - font-size: 1.5rem; - font-weight: 700; - padding: 46px 18px; - margin: 0 auto @line-height-computed; - text-shadow: 0 -1px 1px darken(@link-color, 10%); - width: 120px; - height: 120px; - border-radius: 50%; - background-color: @brand-secondary; - color: white; - white-space: nowrap; - line-height: 1; - - .small { - color: rgba(255, 255, 255, 0.85); - font-size: @font-size-base * 0.8; + .group-customize-subscription-modal { + .modal-footer { + .btn-lg { + margin-bottom: var(--spacing-05); + } } - } - .circle-lg { - height: 180px; - padding: 70px 8px; - width: 180px; - } + .btn-inline-link { + font-weight: normal; + // TODO: add to .website-redesign + // copied .inline-green-link style + color: var(--green-50); + 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; - .circle-subtext { - font-size: 1rem; - } + &:hover { + color: var(--green-60); + } - .circle-img { - float: right; + // for accessibility with keyboard navigation + &:focus { + outline: 2px solid var(--green-50); + outline-offset: 1px; + } + } + .circle { + font-size: var(--font-size-05); + line-height: var(--line-height-04); + padding: 46px 18px; + margin: 0 auto @line-height-computed; + width: 120px; + height: 120px; + border-radius: 50%; + background-color: var(--green-50); + color: white; + white-space: nowrap; - @media (max-width: @screen-sm-max) { - float: left; - margin: 0 15px; + .group-price { + font-weight: 600; + } + .group-price-per-user { + font-size: var(--font-size-02); + line-height: var(--line-height-02); + font-weight: 400; + } + } + + .circle-lg { + height: 180px; + padding: 70px 8px; + width: 180px; + } + + .group-plan-option { + display: block; + margin-bottom: var(--spacing-04); + } + + label span { + font-size: var(--font-size-03); + line-height: var(--line-height-03); + font-weight: 400; + padding-left: var( + --spacing-04 + ); // TODO: move to standard input styling for checkbox and radio + } + + input[type='checkbox'], + input[type='radio'] { + // TODO: move to standard input styling for checkbox + accent-color: var(--green-50); + } + + input[type='checkbox'] { + // TODO: move to standard input styling for checkbox + + height: 16px; + width: 16px; + } + + .form-group { + margin-bottom: var(--spacing-06); // TODO: move to main .form-group CSS + } + + .group-plan-educational-discount { + font-weight: normal; + } + + .educational-discount-section { + margin-top: var(--spacing-06); + } + + .group-modal-features { + font-size: var(--font-size-02); + line-height: var(--line-height-02); + + ul { + margin-bottom: 0; + } + + ul, + .list-item-pro-features-header { + margin-top: var(--spacing-06); + } } } diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less index 6537a6c856..df68237c80 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans/plans-v2.less @@ -80,65 +80,6 @@ } } -.plans-page { - p { - color: var(--neutral-70); - margin-bottom: @line-height-computed; - } - - .plans-header { - h1, - h2 { - color: var(--neutral-70); - } - } - - .circle { - font-size: 1.5rem; - font-weight: 700; - padding: 46px 18px; - margin: 0 auto @line-height-computed; - text-shadow: 0 -1px 1px darken(@link-color, 10%); - width: 120px; - height: 120px; - border-radius: 50%; - background-color: @green-70; - color: white; - white-space: nowrap; - line-height: 1; - - .small { - color: rgba(255, 255, 255, 0.85); - font-size: @font-size-base * 0.8; - } - } - - .circle-lg { - height: 180px; - padding: 70px 8px; - width: 180px; - } - - .circle-subtext { - font-size: 1rem; - } - - .circle-img { - float: right; - - @media (max-width: @screen-sm-max) { - float: left; - margin: 0 15px; - } - } - - @media (max-width: @screen-xs-max) { - [data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] { - display: none; - } - } -} - .plans-v2-top-switch ul.plans-v2-nav { display: flex; justify-content: center; diff --git a/services/web/frontend/stylesheets/components/modals.less b/services/web/frontend/stylesheets/components/modals.less index 16a1a89cb5..960c67ead0 100755 --- a/services/web/frontend/stylesheets/components/modals.less +++ b/services/web/frontend/stylesheets/components/modals.less @@ -166,3 +166,44 @@ width: @modal-lg; } } + +.website-redesign-modal { + .modal-title { + font-size: var(--font-size-05); + line-height: var(--line-height-04); + margin-bottom: var(--spacing-02); + } + .modal-subtitle { + font-size: var(--font-size-03); + line-height: var(--line-height-03); + margin: 0; + } + + .modal-body, + .modal-footer { + padding: var(--spacing-06); + } + .modal-header { + border-bottom: 1px solid var(--neutral-20); + } + .modal-footer { + border-top: 1px solid var(--neutral-20); + background-color: transparent; + p:last-child { + margin-bottom: 0; + } + } + .close { + color: var(--neutral-90); + font-size: var(--font-size-05); + line-height: var(--line-height-02); + opacity: 1; + height: 36px; + width: 36px; + padding: var(--spacing-04); + &:hover { + background-color: var(--neutral-10); + border-radius: 50%; + } + } +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index ee38af53bc..62f57fda9f 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1217,6 +1217,7 @@ "more": "More", "more_actions": "More actions", "more_info": "More Info", + "more_lowercase": "more", "more_options": "More options", "more_options_for_border_settings_coming_soon": "More options for border settings coming soon.", "more_project_collaborators": "<0>More project <0>collaborators", @@ -1542,6 +1543,7 @@ "publishing": "Publishing", "pull_github_changes_into_sharelatex": "Pull GitHub changes into __appName__", "purchase_now": "Purchase Now", + "purchase_now_lowercase": "Purchase now", "push_sharelatex_changes_to_github": "Push __appName__ changes to GitHub", "quoted_text_in": "Quoted text in", "raw_logs": "Raw logs",