Update discount price presentation to match jetpack.com (#35424)

* Move discounted price to the right * changelog
Automattic · Feb 2, 2024 · 11a5145 · 11a5145
1 parent 8821d6d
commit 11a5145
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -308,10 +308,10 @@ const ProductDetailCard = ( {
 				{ needsPurchase && discountPrice && (
 					<>
 						<div className={ styles[ 'price-container' ] }>
+							<Price value={ discountPrice } currency={ currencyCode } isOld={ false } />
 							{ discountPrice < price && (
 								<Price value={ price } currency={ currencyCode } isOld={ true } />
 							) }
-							<Price value={ discountPrice } currency={ currencyCode } isOld={ false } />
 						</div>
 						<Text className={ styles[ 'price-description' ] }>{ priceDescription }</Text>
 					</>

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss
@@ -117,7 +117,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
-	color: var( --jp-text-color);
+	color: var( --jp-black );
 }
 
 .price {
@@ -128,7 +128,7 @@
 	}
 
 	&.is-old {
-		color: var( --jp-gray-20);
+		color: var( --jp-gray-20 );
 
 		&:after {
 			content: " ";

diff --git a/projects/packages/my-jetpack/changelog/update-discount-price-presentation b/projects/packages/my-jetpack/changelog/update-discount-price-presentation
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Small visual change
+
+