Fix styling issues introduced in #2597 and #2619 (#2652)

* Move order summary styles to component style.scss

* Fix wrong class name in Order summary

* Move express payment methods a little bit higher

* Fix shipping options panel misaligned in the Cart sidebar

* Add right padding to panel button so text doesn't overlap the arrow

* Fix wrong class name in Order summary (II)

Author: Aljullu

assets/js/base/components/cart-checkout/order-summary/index.js

@@ -10,6 +10,7 @@ import Panel from '@woocommerce/base-components/panel';
  * Internal dependencies
  */
 import OrderSummaryItem from './order-summary-item.js';
+import './style.scss';
 
 const OrderSummary = ( { cartItems = [] } ) => {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
@@ -29,7 +30,7 @@ const OrderSummary = ( { cartItems = [] } ) => {
 			}
 			titleTag="h2"
 		>
-			<div className="wc-block-order-components-summary__content">
+			<div className="wc-block-components-order-summary__content">
 				{ cartItems.map( ( cartItem ) => {
 					return (
 						<OrderSummaryItem

assets/js/base/components/cart-checkout/order-summary/style.scss

@@ -0,0 +1,83 @@
+.wc-block-components-order-summary {
+	border: 0;
+}
+
+.wc-block-components-order-summary__content {
+	display: table;
+	width: 100%;
+}
+
+.wc-block-components-order-summary-item {
+	display: table-row;
+	width: 100%;
+
+	> div {
+		border-bottom: 1px solid $core-grey-light-600;
+	}
+
+	&:last-child {
+		> div {
+			border-bottom: none;
+			padding-bottom: 0;
+		}
+	}
+}
+
+.wc-block-components-order-summary-item__image,
+.wc-block-components-order-summary-item__description {
+	display: table-cell;
+	vertical-align: top;
+}
+
+.wc-block-components-order-summary-item__image {
+	width: #{$gap-large * 2};
+	padding-top: $gap;
+	padding-bottom: $gap;
+	position: relative;
+
+	> img {
+		width: #{$gap-large * 2};
+		max-width: #{$gap-large * 2};
+	}
+}
+
+.wc-block-components-order-summary-item__quantity {
+	@include font-size(smaller);
+	align-items: center;
+	background: #fff;
+	border: 2px solid;
+	border-radius: 1em;
+	box-shadow: 0 0 0 2px #fff;
+	color: #000;
+	display: flex;
+	line-height: 1;
+	min-height: 20px;
+	padding: 0 0.4em;
+	position: absolute;
+	justify-content: center;
+	min-width: 20px;
+	right: 0;
+	top: $gap;
+	transform: translate(50%, -50%);
+	white-space: nowrap;
+	z-index: 1;
+}
+
+.wc-block-components-order-summary-item__description {
+	padding-left: $gap-large;
+	padding-top: $gap;
+	padding-bottom: $gap;
+	line-height: 1.375;
+
+	p,
+	.wc-block-product-metadata {
+		line-height: 1.375;
+		margin-top: #{ ( $gap-large - $gap ) / 2 };
+	}
+}
+
+.wc-block-components-order-summary-item__header {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}

assets/js/base/components/panel/style.scss

@@ -12,6 +12,7 @@
 		margin-bottom: em(6px);
 		margin-top: em(6px);
 		padding-bottom: em($gap-small - 6px);
+		padding-right: #{24px + $gap-smaller};
 		padding-top: em($gap-small - 6px);
 		position: relative;
 		text-align: left;

assets/js/base/components/payment-methods/style.scss

@@ -15,6 +15,7 @@
 		transform: translateY(-50%);
 		position: absolute;
 		top: 0;
+		margin-top: -2px; // Same as container border width.
 	}
 
 	.wc-block-components-express-checkout__content {

assets/js/base/components/sidebar-layout/style.scss

@@ -29,12 +29,6 @@
 			@include reset-box();
 		}
 	}
-
-	.wc-blocks-components-panel__button {
-		> svg {
-			padding-right: $gap;
-		}
-	}
 }
 
 .is-medium,
@@ -58,8 +52,7 @@
 .is-large {
 	.wc-block-sidebar {
 		.wc-block-totals-table-item,
-		.wc-blocks-components-panel__button,
-		.wc-blocks-components-panel__content {
+		.wc-blocks-components-panel {
 			padding-left: $gap;
 			padding-right: $gap;
 		}

assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -266,7 +266,7 @@ table.wc-block-cart-items {
 	.wc-block-sidebar {
 		> .wc-block-cart__totals-title,
 		.wc-block-cart__shipping-calculator,
-		.wc-block-shipping-totals__fieldset,
+		.wc-block-shipping-rates-control__package:not(.wc-blocks-components-panel),
 		> .wc-block-cart__submit-container {
 			padding-left: $gap;
 			padding-right: $gap;

assets/js/blocks/cart-checkout/checkout/style.scss

@@ -28,90 +28,6 @@
 	}
 }
 
-.wc-block-components-order-summary {
-	border: 0;
-}
-
-.wc-block-components-order-summary__content {
-	display: table;
-	width: 100%;
-}
-
-.wc-block-components-order-summary-item {
-	display: table-row;
-	width: 100%;
-
-	> div {
-		border-bottom: 1px solid $core-grey-light-600;
-	}
-
-	&:last-child {
-		> div {
-			border-bottom: none;
-			padding-bottom: 0;
-		}
-	}
-}
-
-.wc-block-components-order-summary-item__image,
-.wc-block-components-order-summary-item__description {
-	display: table-cell;
-	vertical-align: top;
-}
-
-.wc-block-components-order-summary-item__image {
-	width: #{$gap-large * 2};
-	padding-top: $gap;
-	padding-bottom: $gap;
-	position: relative;
-
-	> img {
-		width: #{$gap-large * 2};
-		max-width: #{$gap-large * 2};
-	}
-}
-
-.wc-block-components-order-summary-item__quantity {
-	@include font-size(smaller);
-	align-items: center;
-	background: #fff;
-	border: 2px solid;
-	border-radius: 1em;
-	box-shadow: 0 0 0 2px #fff;
-	color: #000;
-	display: flex;
-	line-height: 1;
-	min-height: 20px;
-	padding: 0 0.4em;
-	position: absolute;
-	justify-content: center;
-	min-width: 20px;
-	right: 0;
-	top: $gap;
-	transform: translate(50%, -50%);
-	white-space: nowrap;
-	z-index: 1;
-}
-
-.wc-block-components-order-summary-item__description {
-	padding-left: $gap-large;
-	padding-top: $gap;
-	padding-bottom: $gap;
-	line-height: 1.375;
-
-	p,
-	.wc-block-product-metadata {
-		line-height: 1.375;
-		margin-top: #{ ( $gap-large - $gap ) / 2 };
-	}
-}
-
-.wc-block-components-order-summary-item__header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-}
-
 .wc-block-components-express-checkout-continue-rule {
 	display: flex;
 	align-items: center;