From 16c28e3599b24068dae85868ae465af14ce750be Mon Sep 17 00:00:00 2001
From: Ilyas Foo <foo.ilyas@gmail.com>
Date: Wed, 6 Apr 2022 16:41:27 +0800
Subject: [PATCH] Fix css

---
 .../src/components/WCPayCard/WCPayCard.js     |   5 +-
 .../src/components/WCPayCard/WCPayCard.scss   | 187 +++++++++---------
 2 files changed, 101 insertions(+), 91 deletions(-)

diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js
index 458fd0669c9..a865588b22f 100644
--- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js
+++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js
@@ -95,7 +95,10 @@ export const WCPayCard = ( { children } ) => {
 
 export const WCPayBenefitCard = () => {
 	return (
-		<Card className="woocommerce-task-payment-wcpay" size="large">
+		<Card
+			className="woocommerce-task-payment-wcpay woocommerce-task-payment-wcpay__benefits-card"
+			size="large"
+		>
 			<CardBody>
 				<div className="hstack content-around">
 					<div className="woocommerce-task-payment-wcpay__benefit vstack">
diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss
index fd950b5b4f7..9d375486176 100644
--- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss
+++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss
@@ -1,100 +1,107 @@
-.woocommerce-task-payments .woocommerce-task-payment-wcpay {
+.woocommerce-task-payments {
+	.woocommerce-task-payment-wcpay {
+		.vstack,
+		.hstack {
+			display: flex;
+			&.content-center {
+				justify-content: center;
+			}
 
-	.vstack, .hstack {
-		display: flex;
-		&.content-center {
-			justify-content: center;
+			&.content-around {
+				justify-content: space-around;
+			}
+
+			&.flex-1 {
+				flex: 1;
+			}
 		}
 
-		&.content-around {
-			justify-content: space-around;
+		.vstack {
+			flex-direction: column;
 		}
 
-		&.flex-1 {
-			flex: 1;
+		.hstack {
+			flex-direction: row;
+		}
+
+		.wcpay-hero-image {
+			margin-right: -32px;
+			margin-bottom: -28px;
+		}
+
+		.woocommerce-task-payment-wcpay__heading {
+			letter-spacing: 0.6px;
+			max-width: 250px;
+			margin-right: $gap-small;
+			margin-bottom: $gap;
+		}
+
+		.woocommerce-task-payment-wcpay__description {
+			font-size: 13px;
+			max-width: 325px;
+			margin-right: $gap-small;
+			margin-bottom: $gap-large;
+		}
+
+		.components-card__header {
+			margin-bottom: $gap-small;
+			justify-content: flex-start;
+			padding: 25px;
+
+			.woocommerce-pill {
+				margin-left: $gap-small;
+			}
+		}
+
+		.components-card__footer {
+			flex-direction: column;
+			align-items: flex-start;
+
+			.components-button {
+				margin-top: $gap;
+				margin-left: 0;
+			}
+
+			&,
+			h3 {
+				color: #757575;
+			}
+
+			svg {
+				height: 24px;
+			}
+		}
+
+		.components-card__body {
+			h2 {
+				margin: 0 0 20px 0;
+			}
+		}
+
+		.woocommerce-task-payment-wcpay__accepted {
+			display: flex;
+			margin-top: $gap-small;
+			flex-wrap: wrap;
+			gap: $gap-small;
+
+			h3 {
+				color: #40464d;
+			}
+		}
+
+		.woocommerce-task-payment-wcpay__benefit {
+			svg {
+				margin: 0 auto;
+			}
+			max-width: 170px;
+			text-align: center;
+			font-size: 15px;
+			line-height: 24px;
+			letter-spacing: normal;
 		}
 	}
 
-	.vstack {
-		flex-direction: column;
-	}
-
-	.hstack {
-		flex-direction: row;
-	}
-
-	.wcpay-hero-image {
-		margin-right: -32px;
-		margin-bottom: -28px;
-	}
-
-	.woocommerce-task-payment-wcpay__heading {
-		letter-spacing: 0.6px;
-		max-width: 250px;
-		margin-right: $gap-small;
-		margin-bottom: $gap;
-	}
-
-	.woocommerce-task-payment-wcpay__description {
-		font-size: 13px;
-		max-width: 325px;
-		margin-right: $gap-small;
-		margin-bottom: $gap-large;
-	}
-
-	.components-card__header {
-		margin-bottom: $gap-small;
-		justify-content: flex-start;
-		padding: 25px;
-
-		.woocommerce-pill {
-			margin-left: $gap-small;
-		}
-	}
-
-	.components-card__footer {
-		flex-direction: column;
-		align-items: flex-start;
-
-		.components-button {
-			margin-top: $gap;
-			margin-left: 0;
-		}
-
-		&, h3 {
-			color: #757575;
-		}
-
-		svg {
-			height: 24px;
-		}
-	}
-
-	.components-card__body {
-		h2 {
-			margin: 0 0 20px 0;
-		}
-	}
-
-	.woocommerce-task-payment-wcpay__accepted {
-		display: flex;
-		margin-top: $gap-small;
-		flex-wrap: wrap;
-		gap: $gap-small;
-
-		h3 {
-			color: #40464d;
-		}
-	}
-
-	.woocommerce-task-payment-wcpay__benefit {
-		svg {
-			margin: 0 auto;
-		}
-		max-width: 170px;
-		text-align: center;
-		font-size: 15px;
-		line-height: 24px;
-		letter-spacing: normal;
+	.woocommerce-task-payment-wcpay__benefits-card {
+		margin-bottom: 0;
 	}
 }