diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug index d171a024c8..b8584a04df 100644 --- a/services/web/app/views/subscriptions/plans-light-design.pug +++ b/services/web/app/views/subscriptions/plans-light-design.pug @@ -38,6 +38,8 @@ block content +currency_and_payment_methods() + include ./plans/_university_info + //- TODO: changing .plans-page-quote-row-hidden causes flickering on page load .plans-page-quote-row(data-ol-show-for-plan-type="individual") +collinsQuote1() @@ -48,9 +50,6 @@ block content .plans-page-quote-row.plans-page-quote-row-hidden(data-ol-show-for-plan-type="student") +collinsQuote2() - - include ./plans/_university_info - include ./plans/_faq_new include ./plans/light-redesign/_group_plan_modal 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 e706851bb5..b706d0d87e 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -18,8 +18,8 @@ mixin currency_and_payment_methods() .row.plans-payment-methods.text-centered .col-xs-12 p - | #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })} - | #{translate("subject_to_additional_vat")} + b #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })} + |  #{translate("subject_to_additional_vat")} .plans-payment-methods-icons img(src=buildImgPath('/other-brands/logo_mastercard.svg') aria-hidden="true") 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 7f35bb5d9a..7f9a0cdbb5 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 @@ -1,5 +1,6 @@ // m-a stands for: monthly annual -@plans-m-a-switch-height: 20px; +@plans-m-a-switch-height: 34px; +@plans-m-a-switch-padding: 2px; @plans-highlighted-text-height-desktop: 32px; @plans-highlighted-text-height-mobile: 41px; @plans-learn-more-link-color: hsl(206, 100%, 52%); @@ -247,7 +248,7 @@ label { position: relative; display: inline-block; - width: 34px; + width: 60px; height: @plans-m-a-switch-height; margin: 0 var(--spacing-05); @@ -266,7 +267,7 @@ } input:checked + span::before { - transform: translateX(14px); + transform: translateX(26px); } span { @@ -282,10 +283,12 @@ &::before { position: absolute; content: ''; - height: 16px; - width: 16px; - left: 2px; - bottom: 2px; + height: @plans-m-a-switch-height - @plans-m-a-switch-padding - + @plans-m-a-switch-padding; + width: @plans-m-a-switch-height - @plans-m-a-switch-padding - + @plans-m-a-switch-padding; + left: @plans-m-a-switch-padding; + bottom: @plans-m-a-switch-padding; background-color: @white; transition: 0.4s; border-radius: 50%;