From b2eecf3bb05cd81c4837d21ec03411a58e860e05 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Wed, 22 Dec 2021 18:03:58 +0700
Subject: [PATCH] Fix: Mini Cart: Default content for empty state
 (https://github.com/woocommerce/woocommerce-blocks/pull/5421)

---
 .../mini-cart-contents/editor.scss             |  6 ++++--
 .../blocks/cart-checkout/mini-cart/style.scss  | 14 +++++---------
 .../block-template-parts/mini-cart.html        | 18 +++++++++++++++---
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss
index dd1196aedb0..238dc147ad7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss
@@ -1,13 +1,15 @@
 .wp-block-woocommerce-mini-cart-contents {
 	max-width: 480px;
-	margin: 0 auto;
+	/* We need to override the margin top here to simulate the layout of
+	the mini cart contents on the front end. */
+	margin: 0 auto !important;
 }
 
 .wp-block-woocommerce-filled-mini-cart-contents-block {
 	.block-editor-block-list__layout {
 		display: flex;
 		flex-direction: column;
-		min-height: calc(100vh - 2 * $gap-largest);
+		min-height: 100vh;
 	}
 }
 
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss
index 92e4991409a..65fce374d96 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -66,9 +66,8 @@
 
 	.wc-block-mini-cart__items {
 		flex-grow: 1;
-		margin-right: -$gap;
 		overflow-y: auto;
-		padding-right: $gap;
+		padding: 0 $gap;
 
 		.wc-block-cart-items__row:last-child::after {
 			content: none;
@@ -83,21 +82,18 @@
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
-	padding: $gap-largest $gap;
+	padding: 0;
+	justify-content: center;
 }
 
 .wc-block-mini-cart__title {
 	@include font-size(large);
-	margin-top: 0;
+	margin: $gap-largest $gap 0;
 }
 
 .wc-block-mini-cart__footer {
 	border-top: 1px solid $gray-300;
-	margin-bottom: -$gap-largest;
-	margin-left: -$gap;
-	margin-right: -$gap;
-	padding: $gap-large;
-
+	padding: $gap-large $gap;
 }
 
 .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
diff --git a/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html b/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html
index 0581e824b45..c2400ba76ed 100644
--- a/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html
+++ b/plugins/woocommerce-blocks/templates/block-template-parts/mini-cart.html
@@ -10,9 +10,21 @@
 
 	<!-- wp:woocommerce/empty-mini-cart-contents-block -->
 	<div class="wp-block-woocommerce-empty-mini-cart-contents-block">
-		<!-- wp:heading -->
-		<h2 id="empty-mini-cart-content">Empty mini cart content</h2>
-		<!-- /wp:heading -->
+		<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">
+			<strong>Your cart is currently empty!</strong>
+		</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:buttons -->
+		<div class="wp-block-buttons">
+			<!-- wp:button {"align":"center","className":"is-style-outline"} -->
+			<div class="wp-block-button aligncenter is-style-outline">
+				<a href="/" class="wp-block-button__link">Start shopping</a>
+			</div>
+			<!-- /wp:button -->
+		</div>
+		<!-- /wp:buttons -->
 	</div>
 	<!-- /wp:woocommerce/empty-mini-cart-contents-block -->
 </div>