From 2acdbc088b73eb27dbe9f428b2f88a42e223f2d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Mon, 8 Feb 2021 14:42:56 +0100
Subject: [PATCH] Align Place Order button to the right
 (https://github.com/woocommerce/woocommerce-blocks/pull/3803)

* Fix Place Order button alignment

* Change order of Place Order and Return to Cart buttons
---
 .../js/blocks/cart-checkout/checkout/block.js     |  2 +-
 .../checkout/form/order-notes/style.scss          | 14 ++++++++++++--
 .../js/blocks/cart-checkout/checkout/style.scss   | 15 ++++++---------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
index 899be332c52..b9cbe7ecac1 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
@@ -141,7 +141,6 @@ const Checkout = ( { attributes, scrollToTop } ) => {
 						allowCreateAccount={ allowCreateAccount }
 					/>
 					<div className="wc-block-checkout__actions">
-						<PlaceOrderButton />
 						{ attributes.showReturnToCart && (
 							<ReturnToCartButton
 								link={ getSetting(
@@ -150,6 +149,7 @@ const Checkout = ( { attributes, scrollToTop } ) => {
 								) }
 							/>
 						) }
+						<PlaceOrderButton />
 					</div>
 					{ attributes.showPolicyLinks && <Policies /> }
 				</Main>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss
index 52bfc2590eb..13d0a97084a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/order-notes/style.scss
@@ -1,6 +1,16 @@
 .wc-block-checkout__add-note {
-	padding: $gap $gap 0 9px;
-	margin-bottom: $gap;
+	margin: em($gap-large) 0 em($gap-large) 9px;
+}
+
+.is-mobile,
+.is-small,
+.is-medium {
+	.wc-block-checkout__add-note {
+		@include with-translucent-border(1px 0);
+		margin-bottom: em($gap);
+		margin-top: em($gap);
+		padding: em($gap) 0;
+	}
 }
 
 .wc-block-checkout__add-note .wc-block-components-textarea {
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 c133730c2b7..01c841944ee 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
@@ -14,15 +14,14 @@
 
 .wc-block-checkout__actions {
 	display: flex;
-	flex-direction: column;
-	margin: 0 0 $gap-large*2;
-	padding-left: 9px;
+	justify-content: space-between;
+	align-items: center;
+	margin-left: 9px;
 
 	.wc-block-components-checkout-place-order-button {
 		width: 50%;
 		padding: 1em;
 		height: auto;
-		margin-bottom: 44px;
 
 		.wc-block-components-button__text {
 			line-height: 24px;
@@ -147,10 +146,8 @@
 
 .is-large {
 	.wc-block-checkout__actions {
-		padding-right: 36px;
+		@include with-translucent-border(1px 0 0);
+		margin-right: $gap-large;
+		padding-top: em($gap-large);
 	}
 }
-
-.wc-block-checkout__actions {
-	margin-top: $gap;
-}