From 40a3514733b3983631881d9762fdb90bc0143336 Mon Sep 17 00:00:00 2001
From: Nestor Soriano <konamiman@konamiman.com>
Date: Fri, 27 Nov 2020 13:11:28 +0100
Subject: [PATCH 1/4] Add 2021 theme compatibility for the "My Account - Add
 payment method" page:

- Make payment method name and images properly aligned with
  the radio button
- Adjust font sizes and margins
---
 assets/css/twenty-twenty-one.scss | 55 ++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss
index 851e0423aac..3eb6d967c16 100644
--- a/assets/css/twenty-twenty-one.scss
+++ b/assets/css/twenty-twenty-one.scss
@@ -2528,6 +2528,59 @@ a.reset_variations {
 		p:first-of-type {
 			margin-bottom: 2rem;
 		}
+
+		#add_payment_method {
+			ul {
+				list-style-type: none !important;
+			}
+
+			.woocommerce-PaymentMethod {
+				margin-bottom: 1.5rem;
+			}
+		}
+
+		input[type=radio] {
+			float: left;
+			margin-top: 0.5rem;
+			margin-right: 0.5rem;
+		}
+
+		label {
+			font-size: 1.5rem;
+			display: flex;
+			justify-content: flex-end;
+
+			img {
+				margin-left: 10px !important;
+			}
+
+			img:first-child {
+				margin-left: auto !important;
+			}
+
+			img:last-child {
+				margin-right: 5px !important;
+			}
+		}
+
+		.woocommerce-PaymentBox {
+			p, label {
+				font-size: 1.3rem;
+			}
+
+			p {
+				margin-bottom: 1.5rem;
+			}
+
+			br {
+				display: none;
+			}
+
+			.woocommerce_error {
+				margin-top: 1rem;
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	.woocommerce-MyAccount-navigation-link {
@@ -2603,7 +2656,7 @@ a.reset_variations {
 			&:active {
 				color: var(--global--color-background);
 				background: var(--global--color-primary);
-				
+
 			}
 		}
 	}

From 526dd62b9c4dee6be47ccda2998b6d142e94053f Mon Sep 17 00:00:00 2001
From: Nestor Soriano <konamiman@konamiman.com>
Date: Mon, 30 Nov 2020 09:50:23 +0100
Subject: [PATCH 2/4] Add 2021 theme compatibility for the "My Account -
 Payment methods" page:

- Remove table borders
- Make buttons have transparent background, dark on hover
- Make buttons pile vertically, not horizontally
- Adjust margins
---
 assets/css/_mixins.scss           | 12 ++++++++++
 assets/css/twenty-twenty-one.scss | 40 +++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss
index a3698c27401..af8fe1de4b0 100644
--- a/assets/css/_mixins.scss
+++ b/assets/css/_mixins.scss
@@ -267,3 +267,15 @@
 		color: rgba(#000, 0.75);
 	}
 }
+
+@mixin inversebuttoncolors {
+	background-color: transparent !important;
+	color: var(--button--color-text-hover) !important;
+
+	&:hover {
+		background-color: var(--button--color-background) !important;
+		color: var(--button--color-text) !important;
+		text-decoration: none !important;
+	}
+}
+
diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss
index 3eb6d967c16..0fdad1c4237 100644
--- a/assets/css/twenty-twenty-one.scss
+++ b/assets/css/twenty-twenty-one.scss
@@ -1906,6 +1906,46 @@ a.reset_variations {
 	}
 }
 
+.account-payment-methods-table {
+	padding-top: 0 !important;
+	margin-bottom: 1rem;
+
+	table,
+	tr {
+		border-style: hidden;
+	}
+
+	tr:nth-child(2n+1) {
+
+		td {
+
+			background: darken(#D1E4DD, 3%);
+		}
+	}
+
+	td.payment-method-actions {
+		padding-right: 0.5rem;
+		padding-left: 0.5rem;
+		padding-top: 0.3rem;
+		padding-bottom: 0.3rem;
+
+		display: grid;
+		border: none;
+
+		font-size: 0;
+
+		a {
+			width: 100%;
+			padding-top: 0.3rem !important;
+			padding-bottom: 0.3rem !important;
+			margin-top: 0.5rem !important;
+			margin-bottom: 0.5rem !important;
+
+			@include inversebuttoncolors();
+		}
+	}
+}
+
 
 .woocommerce-terms-and-conditions-wrapper {
 	margin-bottom: 5rem;

From 4393319c610b773f0cd2232a64104045d9c982cf Mon Sep 17 00:00:00 2001
From: Jonathan Sadowski <sadowski@automattic.com>
Date: Thu, 3 Dec 2020 13:52:30 -0600
Subject: [PATCH 3/4] 2021 compat: Update payment methods table background on
 account page to support dark mode

---
 assets/css/twenty-twenty-one.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss
index 0fdad1c4237..d8b1e513f9a 100644
--- a/assets/css/twenty-twenty-one.scss
+++ b/assets/css/twenty-twenty-one.scss
@@ -1918,8 +1918,11 @@ a.reset_variations {
 	tr:nth-child(2n+1) {
 
 		td {
-
-			background: darken(#D1E4DD, 3%);
+			background: var(--global--color-background);
+			filter: brightness(88%);
+			.is-dark-theme & {
+				filter:	brightness(112%);
+			}
 		}
 	}
 

From 9d0da2a16ce10c0300211f91ec95f9515d28481f Mon Sep 17 00:00:00 2001
From: Jonathan Sadowski <sadowski@automattic.com>
Date: Thu, 3 Dec 2020 13:56:46 -0600
Subject: [PATCH 4/4] 2021 compat: Fix payment methods table background mobile
 styling

---
 assets/css/twenty-twenty-one.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss
index d8b1e513f9a..572c40a4ba9 100644
--- a/assets/css/twenty-twenty-one.scss
+++ b/assets/css/twenty-twenty-one.scss
@@ -1915,6 +1915,12 @@ a.reset_variations {
 		border-style: hidden;
 	}
 
+	tr:nth-child(2n) {
+		td {
+			background: transparent !important;
+		}
+	}
+
 	tr:nth-child(2n+1) {
 
 		td {