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 bb790b885c..1aebd2642c 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -15,20 +15,22 @@ mixin gen_localized_price_for_plan_view(plan, view) span #{formatCurrency(settings.localizedPlanPricing[recommendedCurrency][plan][view], recommendedCurrency, language, true)} mixin currency_and_payment_methods() - .row.row-spaced-large.text-centered + .row.plans-payment-methods.text-centered .col-xs-12 - p.text-centered - strong #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })} - |   - span #{translate("subject_to_additional_vat")} - i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true")   - span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Mastercard' })} - i.fa.fa-cc-visa.fa-2x(aria-hidden="true")   - span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Visa' })} - i.fa.fa-cc-amex.fa-2x(aria-hidden="true")   - span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Amex' })} - i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")   - span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })} + p + | #{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") + span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Mastercard' })} + img(src=buildImgPath('/other-brands/logo_visa.svg') aria-hidden="true") + span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Visa' })} + img(src=buildImgPath('/other-brands/logo_amex.svg') aria-hidden="true") + span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Amex' })} + img(src=buildImgPath('/other-brands/logo_paypal.svg') aria-hidden="true") + span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })} + mixin plans_table(period, config) - var maxColumn = config.maxColumn || 4 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 6abc2d3ecc..0ca8c97736 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 @@ -1207,4 +1207,18 @@ .plans-page-quote-row { margin: var(--spacing-13) 0; } + + .plans-payment-methods { + margin-top: var(--spacing-08); + margin-bottom: var(--spacing-09); + p { + margin-bottom: 0; + } + .plans-payment-methods-icons { + display: flex; + gap: var(--spacing-04); + justify-content: center; + margin-top: var(--spacing-05); + } + } }