From 6df5903e0f369b47ba6acb148b4aa5f78948d7f7 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 30 Apr 2020 10:51:08 +0100
Subject: [PATCH] Checkout Block Order Summary Styles
 (https://github.com/woocommerce/woocommerce-blocks/pull/2355)

* Update checkout styles

* remove item prices from summary
---
 .../checkout/sidebar/order-summary-item.js    | 11 +---
 .../blocks/cart-checkout/checkout/style.scss  | 63 ++++++++++---------
 2 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
index 0afa8f42194..a318f184bc9 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
@@ -27,8 +27,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
 	} = cartItem;
 
 	const currency = getCurrency( prices );
-	const regularPrice = parseInt( prices.regular_price, 10 );
-	const purchasePrice = parseInt( prices.price, 10 );
 	const linePrice = Dinero( {
 		amount: parseInt( prices.raw_prices.price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
@@ -40,7 +38,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
 	return (
 		<div className="wc-block-order-summary-item">
 			<div className="wc-block-order-summary-item__image">
-				<ProductImage image={ images.length ? images[ 0 ] : {} } />
 				<div className="wc-block-order-summary-item__quantity">
 					<Label
 						label={ quantity }
@@ -51,6 +48,7 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
 						) }
 					/>
 				</div>
+				<ProductImage image={ images.length ? images[ 0 ] : {} } />
 			</div>
 			<div className="wc-block-order-summary-item__description">
 				<div className="wc-block-order-summary-item__header">
@@ -61,13 +59,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
 						value={ linePrice }
 					/>
 				</div>
-				<div className="wc-block-order-summary-item__prices">
-					<ProductPrice
-						currency={ currency }
-						regularValue={ regularPrice }
-						value={ purchasePrice }
-					/>
-				</div>
 				<ProductLowStockBadge lowStockRemaining={ lowStockRemaining } />
 				<ProductMetadata summary={ summary } variation={ variation } />
 			</div>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
index 300b16c1e8e..dbdce77ab04 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
@@ -13,6 +13,12 @@
 	}
 }
 
+.wc-block-checkout__main {
+	fieldset.wc-block-checkout-step:first-child {
+		margin-top: $gap-small;
+	}
+}
+
 .wc-block-checkout__sidebar {
 	.wc-block-order-summary {
 		border: none;
@@ -49,20 +55,32 @@
 
 	.wc-block-order-summary-item {
 		display: table-row;
+		> div {
+			border-bottom: 1px solid $core-grey-light-600;
+		}
+		&:last-child {
+			> div {
+				border-bottom: none;
+			}
+		}
 	}
 
 	.wc-block-order-summary-item__image,
 	.wc-block-order-summary-item__description {
-		border-bottom: 1px solid $core-grey-light-600;
 		display: table-cell;
-		padding-top: $gap;
 		vertical-align: top;
 	}
 
 	.wc-block-order-summary-item__image {
-		width: 72px;
+		width: #{$gap-large * 2};
+		padding-top: $gap;
 		padding-bottom: $gap;
 		position: relative;
+
+		> img {
+			width: #{$gap-large * 2};
+			max-width: #{$gap-large * 2};
+		}
 	}
 
 	.wc-block-order-summary-item__quantity {
@@ -78,29 +96,32 @@
 		min-height: 22px;
 		position: absolute;
 		justify-content: center;
-		right: -11px;
-		top: #{$gap - 11px};
 		min-width: 22px;
+		right: -10px;
+		margin: -10px 0 0 0;
 	}
 
 	.wc-block-order-summary-item__description {
-		padding-left: $gap;
+		padding-left: $gap-large;
+		padding-top: $gap;
+		line-height: $gap-large;
+
+		.wc-block-product-metadata {
+			line-height: $gap;
+			margin-top: #{ ( $gap-large - $gap ) / 2 };
+		}
 	}
 
 	.wc-block-order-summary-item__header {
 		display: flex;
+		flex-wrap: wrap;
 	}
 
 	.wc-block-product-name {
 		flex-grow: 1;
-		margin-right: 0.5em;
 		// Required by IE11.
 		flex-basis: 0;
 	}
-
-	.wc-block-order-summary-item__prices {
-		font-size: 0.875em;
-	}
 }
 
 .wc-block-component-express-checkout-continue-rule {
@@ -336,25 +357,5 @@
 		.wc-block-order-summary__row {
 			padding: 0 $gap;
 		}
-
-		.wc-block-order-summary-item:last-child {
-			.wc-block-order-summary-item__image,
-			.wc-block-order-summary-item__description {
-				border-bottom: none;
-			}
-		}
-
-		.wc-block-order-summary-item__image {
-			width: 48px;
-
-			// Required by IE11.
-			> img {
-				width: 48px;
-			}
-		}
-
-		.wc-block-order-summary-item__description {
-			padding-left: $gap-small;
-		}
 	}
 }