Address design feedback for ProductsSelector and ProductCard (#37028)

* Address design feedback for products selector in Jetpack Connect flow

* Clean up and fix issues in product price CSS

Author: delawski

client/components/product-card/style.scss

@@ -79,13 +79,8 @@
 	font-size: 22px;
 	line-height: 24px;
 
-	.product-card:not( .is-purchased ) & {
-		color: var( --color-primary-50 );
-	}
-
 	@include breakpoint( '>660px' ) {
 		font-size: 17px;
-		font-weight: 400;
 	}
 
 	em,
@@ -94,6 +89,14 @@
 		font-weight: 600;
 		font-style: italic;
 	}
+
+	.product-card:not( .is-purchased ) & {
+		color: var( --color-primary-50 );
+
+		@include breakpoint( '>660px' ) {
+			font-weight: 600;
+		}
+	}
 }
 
 .product-card__subtitle {
@@ -112,42 +115,89 @@
 	display: flex;
 	flex-flow: row wrap;
 	align-items: baseline;
+}
 
+.product-card {
 	.plan-price {
 		margin-right: 0.333em;
-	}
 
-	@include breakpoint( '>660px' ) {
-		.plan-price,
-		.plan-price__currency-symbol,
-		.plan-price__integer,
-		.plan-price__fraction {
-			font-size: 14px;
-			vertical-align: baseline;
+		&,
+		& * {
+			@include breakpoint( '>660px' ) {
+				font-size: 14px;
+				vertical-align: baseline;
+			}
 		}
 	}
 }
 
 .product-card__billing-timeframe {
-	width: 100%;
 	font-size: 13px;
-	font-style: italic;
 	font-weight: 400;
 	line-height: 13px;
 	color: var( --color-text-subtle );
 
-	@include breakpoint( '>660px' ) {
-		width: auto;
+	@include breakpoint( '<660px' ) {
+		font-style: italic;
+	}
+
+	@include breakpoint( '>960px' ) {
 		font-size: 12px;
 	}
 
-	&.is-discounted {
-		@include breakpoint( '>960px' ) {
+	.is-discounted & {
+		@include breakpoint( '>660px' ) {
 			color: var( --color-success );
 		}
 	}
 }
 
+// Adjust price group styles when part of product card header
+.product-card__header {
+	.plan-price,
+	.plan-price * {
+		@include breakpoint( '>660px' ) {
+			font-weight: 600;
+		}
+	}
+
+	.product-card__billing-timeframe {
+		width: 100%;
+
+		@include breakpoint( '>660px' ) {
+			width: auto;
+			font-size: 12px;
+			font-weight: 600;
+		}
+	}
+}
+
+// Adjust price group styles when part of product option
+.product-card__option {
+	.plan-price,
+	.plan-price * {
+		font-size: 16px;
+		font-weight: 400;
+		vertical-align: baseline;
+
+		@include breakpoint( '>960px' ) {
+			font-size: 14px;
+		}
+	}
+
+	.is-discounted .product-card__billing-timeframe {
+		color: var( --color-success );
+	}
+
+	@include breakpoint( '>960px' ) {
+		.plan-price.is-discounted,
+		.plan-price.is-discounted *,
+		.is-discounted .product-card__billing-timeframe {
+			color: var( --color-text-subtle );
+		}
+	}
+}
+
 // Description
 .product-card__description {
 	font-size: 14px;
@@ -223,35 +273,6 @@
 	}
 }
 
-// Adjust price group styles when part of product option
-.product-card__option {
-	.plan-price,
-	.plan-price__currency-symbol,
-	.plan-price__integer,
-	.plan-price__fraction {
-		font-size: 16px;
-		font-weight: 400;
-		vertical-align: baseline;
-
-		@include breakpoint( '>960px' ) {
-			font-size: 14px;
-		}
-	}
-
-	.product-card__billing-timeframe {
-		width: auto;
-		font-size: 13px;
-
-		@include breakpoint( '>960px' ) {
-			font-size: 12px;
-		}
-	}
-
-	.product-card__price-group.is-discounted .product-card__billing-timeframe {
-		color: var( --color-success );
-	}
-}
-
 // Action
 .product-card__action {
 	margin: 16px auto;

client/jetpack-connect/style.scss

@@ -1097,12 +1097,15 @@ body.is-section-jetpack-connect .layout.is-jetpack-woocommerce-flow {
 	}
 }
 
-// <ProductCard /> overrides
-.is-section-jetpack-connect {
-	.product-card {
-		@include breakpoint( '>660px' ) {
-			text-align: left;
-		}
+// ProductSelector and ProductCard overrides
+.is-section-jetpack-connect .product-selector {
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+.is-section-jetpack-connect .product-card {
+	@include breakpoint( '>660px' ) {
+		text-align: left;
 	}
 
 	.product-card__header {
@@ -1112,8 +1115,12 @@ body.is-section-jetpack-connect .layout.is-jetpack-woocommerce-flow {
 	}
 
 	.product-card__header-primary {
-		padding-top: 20px;
-		padding-bottom: 20px;
+		padding-top: 13px;
+		padding-bottom: 14px;
+
+		@include breakpoint( '<660px' ) {
+			justify-content: center;
+		}
 	}
 
 	.product-card__header-secondary {
@@ -1138,34 +1145,49 @@ body.is-section-jetpack-connect .layout.is-jetpack-woocommerce-flow {
 
 		@include breakpoint( '>660px' ) {
 			font-size: 22px;
-			font-weight: 600;
 		}
 	}
 
 	.product-card__price-group {
 		justify-content: center;
 	}
 
-	.plan-price.is-discounted,
-	.plan-price.is-discounted .plan-price__currency-symbol,
-	.product-card__price-group.is-discounted .product-card__billing-timeframe,
-	.product-card__option .product-card__price-group.is-discounted .product-card__billing-timeframe {
+	.plan-price,
+	.plan-price *,
+	.product-card__billing-timeframe,
+	.product-card__option .product-card__price-group .product-card__billing-timeframe {
 		color: var( --color-neutral-70 );
+		font-style: normal;
+		vertical-align: baseline;
 	}
 
-	@include breakpoint( '>660px' ) {
+	.plan-price.is-original,
+	.plan-price.is-original * {
+		color: var( --color-neutral-light );
+	}
+
+	.product-card__header {
 		.plan-price,
-		.plan-price__currency-symbol,
-		.plan-price__integer,
-		.plan-price__fraction,
+		.plan-price *,
 		.product-card__billing-timeframe {
-			font-size: 14px;
-			font-weight: 600;
-			font-style: normal;
+			font-size: 16px;
+			font-weight: 500;
+			line-height: 20px;
+
+			@include breakpoint( '>660px' ) {
+				font-size: 20px;
+				font-weight: 600;
+			}
 		}
+	}
 
+	.product-card__option {
+		.plan-price.is-discounted,
+		.plan-price.is-discounted *,
 		.product-card__billing-timeframe {
-			color: var( --color-neutral-70 );
+			@include breakpoint( '>660px' ) {
+				font-weight: 600;
+			}
 		}
 	}