From 348c656725743e1e821919a58d790a5e5aad46e8 Mon Sep 17 00:00:00 2001 From: Andrii <lysenkoa.work@gmail.com> Date: Mon, 1 Apr 2024 12:19:16 -0700 Subject: [PATCH] a4a update pressable plan selection --- .../plan-selection/filter.tsx | 39 ++++++++++--------- .../plan-selection/style.scss | 34 ++++++++++++++++ .../products-overview/product-card/style.scss | 12 ++++++ 3 files changed, 66 insertions(+), 19 deletions(-) diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx index 6458e2928cd63..564fd2aa625bb 100644 --- a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx +++ b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx @@ -69,27 +69,28 @@ export default function PlanSelectionFilter( { selectedPlan, plans, onSelectPlan return ( <section className="pressable-overview-plan-selection__filter"> <div className="pressable-overview-plan-selection__filter-type"> - <strong className="pressable-overview-plan-selection__filter-label"> + <p className="pressable-overview-plan-selection__filter-label"> { translate( 'Filter by:' ) } - </strong> + </p> + <div className="pressable-overview-plan-selection__filter-buttons"> + <Button + className={ classNames( 'pressable-overview-plan-selection__filter-button', { + 'is-selected': filterType === FILTER_TYPE_INSTALL, + } ) } + onClick={ onSelectInstallFilterType } + > + { translate( 'WordPress installs' ) } + </Button> - <Button - className={ classNames( 'pressable-overview-plan-selection__filter-button', { - 'is-selected': filterType === FILTER_TYPE_INSTALL, - } ) } - onClick={ onSelectInstallFilterType } - > - { translate( 'WordPress installs' ) } - </Button> - - <Button - className={ classNames( 'pressable-overview-plan-selection__filter-button', { - 'is-selected': filterType === FILTER_TYPE_VISITS, - } ) } - onClick={ onSelectVisitFilterType } - > - { translate( 'Number of visits' ) } - </Button> + <Button + className={ classNames( 'pressable-overview-plan-selection__filter-button', { + 'is-selected': filterType === FILTER_TYPE_VISITS, + } ) } + onClick={ onSelectVisitFilterType } + > + { translate( 'Number of visits' ) } + </Button> + </div> </div> <A4ASlider value={ selectedOption } onChange={ onSelectOption } options={ options } /> diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss index 18b89686aa65a..c4f07fea7b0d7 100644 --- a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss +++ b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss @@ -112,6 +112,40 @@ align-items: center; justify-content: center; + + .pressable-overview-plan-selection__filter-label { + font-weight: 600; + font-size: 1rem; + margin: 0; + } + + .pressable-overview-plan-selection__filter-buttons { + button:first-child { + margin-inline-end: 1rem; + } + } + + @include breakpoint-deprecated( "<660px" ) { + display: block; + margin: 0; + text-align: center; + + .pressable-overview-plan-selection__filter-label { + width: 100%; + margin-block-end: 0.5rem; + } + + .pressable-overview-plan-selection__filter-buttons { + display: inline-flex; + justify-content: space-around; + width: 100%; + button { + width: 50%; + text-align: center; + justify-content: center; + } + } + } } .components-button.pressable-overview-plan-selection__filter-button { diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss b/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss index 93d60a18f2c89..dd7f11ffacb0f 100644 --- a/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss +++ b/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss @@ -88,6 +88,18 @@ button.product-card__select-button { width: 100%; justify-content: space-between; gap: 0.5rem; + + @include breakpoint-deprecated( "<660px" ) { + display: block; + + .product-card__select-button { + margin-block-start: 0.5rem; + width: 100%; + justify-content: center; + text-align: center; + font-size: 1rem; + } + } } .product-card__heading {