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 {