RNMobile: Fix slider and stepper text inputs in dark mode (#33402)

WordPress · Jul 16, 2021 · 9a9e709 · 9a9e709
1 parent b66e4c5
commit 9a9e709
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/packages/components/src/mobile/bottom-sheet/range-text-input.native.js b/packages/components/src/mobile/bottom-sheet/range-text-input.native.js
@@ -176,9 +176,9 @@ class RangeTextInput extends Component {
 			styles.textInputDark
 		);
 
-		const verticalBorderStyle = getStylesFromColorScheme(
-			styles.verticalBorder,
-			styles.verticalBorderDark
+		const textInputIOSStyle = getStylesFromColorScheme(
+			styles.textInputIOS,
+			styles.textInputIOSDark
 		);
 
 		const inputBorderStyles = [
@@ -188,7 +188,10 @@ class RangeTextInput extends Component {
 		];
 
 		const valueFinalStyle = [
-			! isIOS ? inputBorderStyles : verticalBorderStyle,
+			Platform.select( {
+				android: inputBorderStyles,
+				ios: textInputIOSStyle,
+			} ),
 			{
 				width: 50 * fontScale,
 			},

diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -174,14 +174,16 @@
 
 // Range Text Input
 
-.verticalBorder {
+.textInputIOS {
 	border-right-width: 1px;
 	text-align: center;
 	border-color: $light-gray-400;
+	color: $gray-dark;
 }
 
-.verticalBorderDark {
+.textInputIOSDark {
 	border-color: $gray-70;
+	color: $white;
 }
 
 .textInputContainer {

diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
@@ -126,4 +126,7 @@ module.exports = {
 	arrow: {
 		color: 'red',
 	},
+	textInput: {
+		color: 'black',
+	},
 };