From 59445de392b6269ceb4e59e9aed1b086a290c675 Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Tue, 13 Aug 2024 13:14:19 +0100 Subject: [PATCH] Plans Page new design - Implement href for all of the CTA buttons for mobile screen (#19858) * simplifying the logic of button rendering that matches the desktop version * removing the plans_page_new_btn_buy_now_free mixin and adding the class .plans-cta-buttons-gap * adding .plans-cta-buttons-gap to the desktop version * changing table-header to mobile-card while calling the function * adding styling into .plans-new-table-cta and removing plans-cta-buttons-gap usage from desktop version * moving .plans-cta-buttons-gap into .plans-card-cta-container-monthly-annual * renaming the gap class to .plans-card-cta-buttons-container and using nth-child approach * using the nth-child approach in .plans-new-table-cta GitOrigin-RevId: 692814af8d8cf4dda0ea53dea9a3fe4adcf1dcd3 --- .../app/plans/plans-new-design.less | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 5077af49e2..0d7d44fb6f 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -412,6 +412,9 @@ .plans-new-table-cta { margin-top: auto; + a:nth-child(2) { + margin-top: var(--spacing-04); + } } } @@ -676,12 +679,6 @@ margin-top: var(--spacing-06); } - .additional-link-buy-btn-container { - text-align: center; - width: 100%; - padding-top: var(--spacing-04); - } - .highlighted-plans-card { border: 2px solid var(--green-50) !important; } @@ -758,6 +755,15 @@ } } + .plans-card-cta-container-monthly-annual { + margin-top: var(--spacing-08); + .plans-card-cta-buttons-container { + a:nth-child(2) { + margin-top: var(--spacing-04); + } + } + } + .group-members-picker-container-mobile { margin-top: var(--spacing-08); }