From 7556d47b5c597fd4a744354c1c875060fb8f8fd3 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 12 Apr 2021 11:03:36 +0100
Subject: [PATCH] Fix TwentyX styling issues for cart/checkout form fields
 (https://github.com/woocommerce/woocommerce-blocks/pull/4046)

* Fix checkbox styling in 2020 and 2017 themes by setting input font size

* 2017 button hover style fixes

* Fix editor dark inputs

* Restore dark color
---
 .../components/checkbox-control/style.scss    |  9 +++++++-
 .../components/quantity-selector/style.scss   | 17 +++++++++++++--
 .../js/base/components/select/style.scss      | 21 ++++++++++++++++++-
 .../js/base/components/text-input/style.scss  |  8 +++++++
 .../packages/checkout/panel/style.scss        |  7 ++++++-
 5 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
index 23a9e81d1fd..6cb72b0bcab 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
@@ -6,6 +6,7 @@
 	position: relative;
 
 	.wc-block-components-checkbox__input[type="checkbox"] {
+		font-size: 1em;
 		appearance: none;
 		border: 2px solid $input-border-gray;
 		border-radius: 2px;
@@ -24,6 +25,11 @@
 			border-color: $input-border-gray;
 		}
 
+		&::before,
+		&::after {
+			content: "";
+		}
+
 		&:not(:checked) + .wc-block-components-checkbox__mark {
 			display: none;
 		}
@@ -75,7 +81,8 @@
 	}
 
 	.wc-block-components-checkbox__input[type="checkbox"]:checked,
-	.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"]:checked {
+	.has-dark-controls
+	.wc-block-components-checkbox__input[type="checkbox"]:checked {
 		background-color: #fff;
 		border-color: var(--form--border-color);
 	}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
index 747a9de4c84..3a7095e9eea 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
@@ -67,6 +67,7 @@
 		-webkit-appearance: none;
 		margin: 0;
 	}
+
 	.wc-block-components-quantity-selector__button {
 		@include reset-button;
 		@include font-size(regular);
@@ -75,6 +76,7 @@
 		color: $gray-900;
 		font-style: normal;
 		text-align: center;
+		text-decoration: none;
 
 		&:hover,
 		&:focus {
@@ -99,10 +101,21 @@
 			}
 		}
 	}
-	.wc-block-components-quantity-selector__button--minus {
+
+	> .wc-block-components-quantity-selector__button--minus {
 		order: 1;
 	}
-	.wc-block-components-quantity-selector__button--plus {
+
+	> .wc-block-components-quantity-selector__button--plus {
 		order: 3;
 	}
 }
+
+.theme-twentyseventeen {
+	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
+		&:hover,
+		&:focus {
+			background: none transparent;
+		}
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
index 6760a0ae1a3..0514754d5d6 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
@@ -1,8 +1,9 @@
+.wc-block-components-form .wc-block-components-select,
 .wc-block-components-select {
 	height: 3em;
 	position: relative;
 
-	label {
+	label.components-custom-select-control__label {
 		@include reset-typography();
 		@include font-size(regular);
 		line-height: 1.375; // =22px when font-size is 16px.
@@ -70,6 +71,8 @@
 			text-transform: none;
 			white-space: nowrap;
 			width: 100%;
+			opacity: initial;
+			border-radius: 4px;
 			.has-dark-controls & {
 				background: $input-background-dark;
 				border-color: $input-border-dark;
@@ -141,3 +144,19 @@
 		}
 	}
 }
+
+.theme-twentyseventeen {
+	// Extra classes for specificity.
+	&.theme-twentyseventeen.theme-twentyseventeen {
+		.components-custom-select-control__button {
+			background-color: $select-dropdown-light;
+			color: $input-text-active;
+		}
+		.has-dark-controls {
+			.components-custom-select-control__button {
+				background-color: $select-dropdown-dark;
+				color: $input-text-dark;
+			}
+		}
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
index 9a919d7b4e6..3aecc8f856d 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
@@ -1,3 +1,4 @@
+.wc-block-components-form .wc-block-components-text-input,
 .wc-block-components-text-input {
 	position: relative;
 	margin-top: em($gap-large);
@@ -56,11 +57,18 @@
 
 		&:focus {
 			background-color: #fff;
+			color: $input-text-active;
 		}
+
 		.has-dark-controls & {
 			background-color: $input-background-dark;
 			border-color: $input-border-dark;
 			color: $input-text-dark;
+
+			&:focus {
+				background-color: $input-background-dark;
+				color: $input-text-dark;
+			}
 		}
 	}
 
diff --git a/plugins/woocommerce-blocks/packages/checkout/panel/style.scss b/plugins/woocommerce-blocks/packages/checkout/panel/style.scss
index 3021c8654a0..fbb5e82a7aa 100644
--- a/plugins/woocommerce-blocks/packages/checkout/panel/style.scss
+++ b/plugins/woocommerce-blocks/packages/checkout/panel/style.scss
@@ -56,6 +56,11 @@
 
 .theme-twentytwenty .wc-block-components-panel__button,
 .theme-twentyseventeen .wc-block-components-panel__button {
-	background: transparent;
+	background: none transparent;
 	color: inherit;
+
+	&.wc-block-components-panel__button:hover,
+	&.wc-block-components-panel__button:focus {
+		background: none transparent;
+	}
 }