a4a update pressable plan selection

Automattic · Apr 1, 2024 · 348c656 · 348c656
1 parent 30a9365
commit 348c656
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 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
@@ -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
@@ -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
@@ -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 {