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 c5218653c2..bb790b885c 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -133,14 +133,14 @@ mixin plans_table(period, config) ) .plans-table-cell-divider //- all cells need 2 layers of divs for handling border and padding. See .plans-table in CSS for more details - div + .plans-table-cell-divider-content b.plans-table-divider-label #{translate(featuresPerSection.dividerLabel)} //- will only appear on screen width >= 768px (using CSS) - i.fa.fa-question-circle( + i.material-symbols.material-symbols-outlined.icon-sm( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" - ) + ) help //- will only appear on screen width < 768px (using CSS) span.plans-table-divider-learn-more-container span ( @@ -168,11 +168,11 @@ mixin plans_table(period, config) if feature.info span #{translate(feature.feature)} //- will only appear on screen width >= 768px (using CSS) - i.fa.fa-question-circle.plans-table-feature-question-icon( + i.material-symbols.material-symbols-outlined.icon-sm.plans-table-feature-question-icon( data-toggle="tooltip" title=translate(feature.info), data-placement="right" - ) + ) help //- will only appear on screen width < 768px (using CSS) span.plans-table-feature-learn-more-container span ( @@ -236,9 +236,9 @@ mixin table_head_group_total_per_year(groupPlan) mixin group_plans_license_picker() form.plans-license-picker-form(data-ol-plans-v2-license-picker-form) - .plans-v2-license-picker-select-container + .plans-license-picker-select-container span #{translate("number_of_users_with_colon")} - select.plans-v2-license-picker-select( + select( name="plans-v2-license-picker-select" id="plans-v2-license-picker-select" autocomplete="off" @@ -256,7 +256,7 @@ mixin group_plans_license_picker() option(value="20") 20 option(value="50") 50 .plans-v2-license-picker-educational-discount - label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label) + label(data-ol-plans-v2-license-picker-educational-discount-label) input.plans-v2-license-picker-educational-discount-checkbox( type="checkbox" id="license-picker-educational-discount" @@ -269,11 +269,12 @@ mixin group_plans_license_picker() ) span #{translate("apply_educational_discount")} //- will only appear on screen width >= 768px (using CSS) - i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon( + i.material-symbols.material-symbols-outlined.icon-sm( data-toggle="tooltip" title=translate("apply_educational_discount_info"), data-placement="bottom" - ) + ) help + //- will only appear on screen width < 768px (using CSS) span.plans-v2-license-picker-educational-discount-learn-more-container span ( diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js index 444f57f5b0..8204f66eb1 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js @@ -78,6 +78,13 @@ export function updateMainGroupPlanPricing() { ) .classList.toggle('disabled', notEligibleForEducationalDiscount) + formEl + .querySelector('.plans-v2-license-picker-educational-discount') + .classList.toggle( + 'total-licenses-not-eligible-for-discount', + notEligibleForEducationalDiscount + ) + formEl.querySelector( '[data-ol-plans-v2-license-picker-educational-discount-input]' ).disabled = notEligibleForEducationalDiscount 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 5c80c839fb..3e37555023 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 @@ -337,90 +337,107 @@ } .plans-license-picker-form { - margin-top: 25px; + margin-top: var(--spacing-08); display: flex; align-items: center; justify-content: center; width: 100%; + font-size: var(--font-size-03); + line-height: var(--line-height-03); - @media (max-width: @screen-xs-max) { - font-size: @font-size-small; - margin-top: 15px; - flex-direction: column; + .plans-license-picker-select-container { + span { + font-weight: 700; + } } - } - .plans-v2-license-picker-select { - background-color: @white; - border: 1px solid #cccccc; - width: 64px; - height: 30px; - margin: 0 @margin-sm; - padding-left: @padding-sm; + select { + background-color: @white; + border: 1px solid var(--neutral-60); + border-radius: var(--border-radius-base-new); + width: 53px; + height: 31px; + margin-left: var(--spacing-04); + padding: 5.5px var(--spacing-04); + font-size: var(--font-size-02); + line-height: var(--line-height-02); - @media (max-width: @screen-xs-max) { - margin: 0 15px; + @media (max-width: @screen-xs-max) { + margin: 0 15px; + } } - } - .plans-v2-license-picker-educational-discount { - display: flex; - align-items: center; + i { + margin-left: var(--spacing-04); - @media (max-width: @screen-xs-max) { - margin-top: 15px; + @media (max-width: @screen-xs-max) { + display: none; + } } - } - .plans-v2-license-picker-educational-discount-label { - margin-bottom: 0; - display: flex; - align-items: center; - font-weight: normal; + //- element is selected by shared JS with default variant + .plans-v2-license-picker-educational-discount { + display: flex; + align-items: center; + margin-left: var(--spacing-06); - &.disabled span { - color: @ol-blue-gray-2; + &.total-licenses-not-eligible-for-discount { + display: none; + } + + @media (max-width: @screen-xs-max) { + margin-top: 15px; + } } - } - input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox { - margin-top: 0; - margin-right: @margin-sm; + label { + margin-bottom: 0; + display: flex; + align-items: center; + font-weight: normal; - @media (max-width: @screen-xs-max) { - margin-right: 25px; - // scale the checkbox to around 30px width and height - transform: scale(2.307); + &.disabled span { + color: var(--neutral-40); + } } - } - i.plans-v2-license-picker-educational-discount-question-icon { - margin-left: @margin-xs; + input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox { + margin-top: 0; + margin-right: var(--spacing-04); - @media (max-width: @screen-xs-max) { + @media (max-width: @screen-xs-max) { + margin-right: 25px; + // scale the checkbox to around 30px width and height + transform: scale(2.307); + } + } + + span.plans-v2-license-picker-educational-discount-learn-more-container { display: none; - } - } - span.plans-v2-license-picker-educational-discount-learn-more-container { - display: none; + @media (max-width: @screen-xs-max) { + margin-left: 5px; + display: inline; + // this white-space is important to ensure the "learn more" text won't get separated by a newline + white-space: nowrap; + + span.plans-v2-license-picker-educational-discount-learn-more-text { + color: @plans-learn-more-link-color; + } + + .tooltip { + // force white-space to have initial value since the `white-space: nowrap` rule + // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above + // will also affect every child inside of it, including the generated tooltip + white-space: initial; + } + } + } @media (max-width: @screen-xs-max) { - margin-left: 5px; - display: inline; - // this white-space is important to ensure the "learn more" text won't get separated by a newline - white-space: nowrap; - - span.plans-v2-license-picker-educational-discount-learn-more-text { - color: @plans-learn-more-link-color; - } - - .tooltip { - // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above - // will also affect every child inside of it, including the generated tooltip - white-space: initial; - } + font-size: var(--font-size-02); + margin-top: var(--spacing-06); + flex-direction: column; } } @@ -447,7 +464,11 @@ } .plans-table-group { - margin-top: 26px + @plans-highlighted-text-height-desktop; + margin-top: 40px + @plans-highlighted-text-height-desktop; + + @media (max-width: @screen-xs-max) { + margin-top: 40px + @plans-highlighted-text-height-mobile; + } } .plans-table { @@ -732,6 +753,12 @@ tr.plans-table-divider { background-color: var(--neutral-10); + .plans-table-cell-divider-content { + display: flex; + align-items: center; + justify-content: center; + } + // direct child selector to NOT affect the generated tooltip td > div { text-align: center; @@ -1067,7 +1094,8 @@ .plans-table-sticky-header-without-switch { margin-bottom: -107px; - margin-top: @plans-table-sticky-header-size; + margin-top: @plans-highlighted-text-height-mobile + 40px + + @table-border-size; } .plans-table-sticky-header-with-switch {