From 32f43e3d84193814ef41e5ffa91c5041c2124635 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Wed, 19 Apr 2023 22:45:10 +0530
Subject: [PATCH] fix/8651: Use body background color as the Cart block sticky
 footer background color
 (https://github.com/woocommerce/woocommerce-blocks/pull/9103)

* Use body background color as the Cart block sticky footer background color

* Reduce the opacity of box-shadow.

* Fix the Proceed to Checkout button cut off.
---
 .../cart/inner-blocks/proceed-to-checkout-block/block.tsx | 8 +++++++-
 .../inner-blocks/proceed-to-checkout-block/style.scss     | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
index bae80a62df5..57b57bcba4b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
@@ -86,6 +86,9 @@ const Block = ( {
 		</Button>
 	);
 
+	// Get the body background color to use as the sticky container background color.
+	const backgroundColor = getComputedStyle( document.body ).backgroundColor;
+
 	return (
 		<div className={ classnames( 'wc-block-cart__submit', className ) }>
 			{ positionReferenceElement }
@@ -95,7 +98,10 @@ const Block = ( {
 			</div>
 			{ /* If the positionReferenceElement is below the viewport, display the sticky container. */ }
 			{ positionRelativeToViewport === 'below' && (
-				<div className="wc-block-cart__submit-container wc-block-cart__submit-container--sticky">
+				<div
+					className="wc-block-cart__submit-container wc-block-cart__submit-container--sticky"
+					style={ { backgroundColor } }
+				>
 					{ submitContainerContents }
 				</div>
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
index 2bcd5aa9685..06ef7f37a35 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
@@ -30,10 +30,11 @@
 		position: fixed;
 		width: 100%;
 		z-index: 9999;
+		box-sizing: border-box;
 
 		&::before {
 			box-shadow: 0 -10px 20px 10px currentColor;
-			color: color.adjust($gray-400, $alpha: -0.5);
+			color: color.adjust($gray-400, $alpha: -0.7);
 			content: "";
 			height: 100%;
 			left: 0;