diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug index 1d6cb29b1c..156318b089 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -113,7 +113,8 @@ mixin plans_table(period, config) +table_price_group_professional() when 'group_organization' .plans-table-comments-icon - i.fa.fa-comments-o + .match-non-discounted-price-alignment   + i.material-symbols.material-symbols-outlined(aria-hidden="true") forum when 'student_free' +table_head_price('free', period) when 'student_student' @@ -241,15 +242,15 @@ mixin plans_table(period, config) +table_cell(feature, plan) mixin table_individual(period) - table.card.plans-table.plans-table-individual + table.plans-table.plans-table-individual +plans_table(period, plansConfig.individual) mixin table_group - table.card.plans-table.plans-table-group + table.plans-table.plans-table-group +plans_table('annual', plansConfig.group) mixin table_student(period) - table.card.plans-table.plans-table-student + table.plans-table.plans-table-student +plans_table(period, plansConfig.student) //- free plan mixins @@ -284,9 +285,9 @@ mixin table_price_group_collaborator() .plans-table-price-container s +gen_localized_price_for_plan_view('collaborator', 'annual') - p.plans-v2-table-price + p.plans-table-price span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator} - p.plans-v2-table-price-period-label + p.plans-table-price-period-label | #{translate('per_user_year')} //- group_professional plan mixins @@ -301,16 +302,16 @@ mixin table_price_group_professional() .plans-table-price-container s +gen_localized_price_for_plan_view('professional', 'annual') - p.plans-v2-table-price + p.plans-table-price span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional} - p.plans-v2-table-price-period-label + p.plans-table-price-period-label | #{translate('per_user_year')} //- group mixins mixin table_head_group_total_per_year(groupPlan) - var initialLicenseSize = '2' - span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]} + span.plans-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]} |   for licenseSize in groupPlanModalOptions.sizes span( @@ -324,7 +325,7 @@ mixin table_short_feature_list_group_organization(additionalEventSegmentation) li #{translate("best_choices_companies_universities_non_profits")} li #{translate("for_groups_or_site_wide")} li - a( + a.inline-green-link( target="_blank" href="/for/contact-sales" event-tracking="plans-page-click" @@ -401,9 +402,11 @@ mixin table_head_price(plan, period) if plan !== 'free' && period === 'annual' s +gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve') - p.plans-v2-table-price + else + .match-non-discounted-price-alignment   + p.plans-table-price +gen_localized_price_for_plan_view(plan, period) - p.plans-v2-table-price-period-label + p.plans-table-price-period-label if period == 'annual' | #{translate("per_year")} else @@ -431,11 +434,11 @@ mixin table_cell(feature, plan) //- CTA mixins mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period) - a.btn.plans-v2-table-btn-buy( + a.btn( data-ol-start-new-subscription=subscriptionPlan data-ol-event-tracking-key=eventTrackingKey data-ol-item-view=period - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) if (period === 'monthly') span #{translate("try_for_free")} @@ -444,15 +447,15 @@ mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period mixin btn_buy_individual_free() if (!getSessionUser()) - a.btn.plans-v2-table-btn-buy( + a.btn( href="/register" - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) span #{translate("try_for_free")} else - a.btn.plans-v2-table-btn-buy.invisible( + a.btn.invisible( aria-hidden="true" - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) @@ -466,31 +469,31 @@ mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalE +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period) mixin btn_buy_group_collaborator(highlighted, eventTrackingKey) - a.btn.plans-v2-table-btn-buy( + a.btn( data-ol-start-new-subscription='group_collaborator' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view='annual' data-ol-has-custom-href data-ol-location='table-header' - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) span.hidden-desktop #{translate("customize")} span.hidden-mobile #{translate("customize_your_plan")} mixin btn_buy_group_professional(highlighted, eventTrackingKey) - a.btn.plans-v2-table-btn-buy( + a.btn( data-ol-start-new-subscription='group_professional' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view='annual' data-ol-has-custom-href data-ol-location='table-header' - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) span.hidden-desktop #{translate("customize")} span.hidden-mobile #{translate("customize_your_plan")} mixin btn_buy_group_organization(highlighted, eventTrackingKey) - a.btn.plans-v2-table-btn-buy( + a.btn( data-ol-start-new-subscription='group_organization' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view='annual' @@ -498,25 +501,25 @@ mixin btn_buy_group_organization(highlighted, eventTrackingKey) data-ol-location='table-header' href='/for/contact-sales' target='_blank' - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) span #{translate("contact_us_lowercase")} mixin btn_buy_student_free(highlighted) if (!getSessionUser()) - a.btn.plans-v2-table-btn-buy( + a.btn( href="/register" - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) span #{translate("try_for_free")} mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) - a.btn.plans-v2-table-btn-buy( + a.btn( data-ol-start-new-subscription='student' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view=period data-ol-location='card' - class=(highlighted ? 'btn-primary' : 'btn-default') + class=(highlighted ? 'btn-primary' : 'btn-secondary') ) if (period === 'monthly') span #{translate("try_for_free")} @@ -528,16 +531,15 @@ mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegm mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan) - var buttonSegmentation = plan + '-link' - var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation)) - small.plans-table-th-content-additional-link - | #{translate("or")} - a( - href="/for/contact-sales" - target="_blank" - event-tracking=eventTrackingKey - event-tracking-mb="true" - event-tracking-trigger="click" - event-segmentation=segmentation - ) #{translate("contact_us_lowercase")} + + a.btn.btn-bg-ghost( + href="/for/contact-sales" + target="_blank" + event-tracking=eventTrackingKey + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation=segmentation + ) #{translate("contact_us_lowercase")} mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period) - var buttonSegmentation = plan + '-link' @@ -545,15 +547,14 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p - var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'} - var itmReferrer = itm_referrer ? { itm_referrer } : {} - var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer}) - small.plans-table-th-content-additional-link - | #{translate("or")} - a( - href=`/user/subscription/new?${qs.toString()}` - event-tracking=eventTrackingKey - event-tracking-mb="true" - event-tracking-trigger="click" - event-segmentation=segmentation - ) #{translate("buy_now_no_exclamation_mark")} + + a.btn.btn-bg-ghost( + href=`/user/subscription/new?${qs.toString()}` + event-tracking=eventTrackingKey + event-tracking-mb="true" + event-tracking-trigger="click" + event-segmentation=segmentation + ) #{translate("buy_now_no_exclamation_mark")} //- table header and control mixins 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 a98af55010..3d034a1916 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 @@ -333,14 +333,8 @@ } .plans-table-comments-icon { - height: 65px; - i { - font-size: 50px; - } - - @media (max-width: @screen-xs-max) { - height: 58px; + font-size: 64px; } } @@ -468,6 +462,13 @@ table-layout: fixed; width: 100%; + .plans-table-th-content, + .plans-table-price, + .plans-table-comments-icon, + .plans-table-th-content-benefit { + color: var(--neutral-90); + } + // cannot add border to td,th directly due to highlighted column border td > div, th > div { @@ -552,6 +553,26 @@ padding: var(--spacing-05) var(--spacing-08); } + tr.plans-table-price-row > td > div > div { + padding-top: 0; + padding-bottom: var(--spacing-06); + } + tr.plans-table-short-feature-list > td > div > div { + padding-top: 0; + padding-bottom: 0; + + @media (max-width: @screen-xs-max) { + padding-bottom: var(--spacing-06); + } + } + tr.plans-table-cta-desktop > td > div > div { + padding-top: var(--spacing-08); + } + tr.plans-table-cta-mobile > td > div > div { + padding-top: 0; + padding-bottom: var(--spacing-06); + } + // We want these `div` inside `th` and `td` to have a 100% height since // white backgrounds are defined here: // 1. `td > div.plans-table-cell` @@ -866,12 +887,14 @@ } } + .plans-table-btn-buy-container-desktop, + .plans-table-btn-buy-container-mobile { + gap: var(--spacing-04); + } + .plans-table-btn-buy-container-desktop { - margin-top: auto; display: flex; flex-direction: column; - min-height: 60px; - @media (max-width: @screen-xs-max) { display: none; } @@ -883,112 +906,62 @@ @media (max-width: @screen-xs-max) { display: flex; flex-direction: column; - min-height: 50px; - margin-top: @padding-sm; } } - .plans-v2-table-btn-buy { - padding: 4px 15px 5px; - - @media (min-width: (@screen-xs-max+1)) { - .hidden-desktop { - display: none; - } + @media (min-width: (@screen-xs-max+1)) { + .hidden-desktop { + display: none; } - - @media (max-width: @screen-sm-max) { - font-size: @font-size-small; - } - - @media (max-width: @screen-xs-max) { - padding-left: 9px; - padding-right: 9px; - // truncating group plans long button text for mobile - .hidden-mobile { - display: none; - } + } + @media (max-width: @screen-xs-max) { + .hidden-mobile { + display: none; } } - p.plans-table-th-content-benefit, ul.plans-table-th-content-benefit { - padding-top: 15px; - font-size: @font-size-small; - font-family: @font-family-sans-serif; - line-height: 23px; + font-size: var(--font-size-02); + line-height: var(--line-height-02); hyphens: auto; - } - - ul.plans-table-th-content-benefit { padding-left: 15px; text-align: left; margin-bottom: 0; - - li a { - color: @ol-blue-gray-3; - text-decoration: underline; - } } // this class should only appear on the group table - .plans-v2-group-total-price { + .plans-group-total-price { font-weight: 700; } - .plans-table-price-container { - position: relative; - + .plans-table-price-row { + .match-non-discounted-price-alignment, s { - position: absolute; - left: 0; - top: -27px; - font-weight: 700; - font-size: @font-size-small; - line-height: 42px; - display: flex; - justify-content: center; - width: 100%; - color: @ol-blue-gray-2; - - @media (max-width: @screen-xs-max) { - font-size: @font-size-extra-small; - } + display: block; + font-weight: 600; + font-size: var(--font-size-02); + line-height: var(--line-height-02); + color: var(--neutral-60); } - } - p.plans-v2-table-price-period-label { - margin: 0; - font-size: @font-size-small; - line-height: 23px; - color: @ol-blue-gray-3; - } - - p.plans-v2-table-price { - margin: 0; - - span { - font-weight: 700; - font-size: 32px; - line-height: 42px; - - @media (max-width: @screen-xs-max) { - line-height: 35px; - font-size: @font-size-large; + .plans-table-price-container { + p.plans-table-price-period-label { + margin: 0; + font-size: var(--font-size-02); + line-height: var(--line-height-02); + color: @ol-blue-gray-3; + font-weight: 400; } - } - } - small.plans-table-th-content-additional-link { - text-transform: lowercase; - margin-top: @margin-xs; - font-size: @font-size-extra-small; - height: 16px; - font-family: @font-family-sans-serif; + p.plans-table-price { + margin: 0; - a { - color: @ol-blue-gray-5; - text-decoration: underline; + span { + font-weight: 600; + font-size: var(--font-size-07); + line-height: var(--line-height-06); + } + } } } @@ -1095,11 +1068,12 @@ @media (max-width: @screen-xs-max) { display: flex; - width: 100vw; + width: 100%; top: 0; left: 0; z-index: @z-index-plans-page-table-header-mobile; height: 42px; + border-bottom: @table-border; // separate sticky class because we want to remove the class (to visually remove the sticky header) // with javascript whenever the table is not visible anymore @@ -1114,18 +1088,17 @@ flex: 1 1 0px; span { - margin: @margin-xs; - border-bottom: 1px solid #cccccc; height: 100%; display: flex; align-items: center; justify-content: center; - font-family: @font-family-serif; @media (max-width: @screen-xs-max) { - font-size: @font-size-small; + color: var(--neutral-90); + font-size: var(--font-size-03); + font-weight: 600; text-align: center; - line-height: 19px; + line-height: var(--line-height-02); } } }