Merge pull request #13375 from Expensify/cmartins-fixPickerUpdate

Update picker items
Expensify · Dec 8, 2022 · cb256f9 · cb256f9
2 parents f036c7d + 5634f96
commit cb256f9
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js
@@ -8,7 +8,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import FormHelpMessage from '../FormHelpMessage';
 import Text from '../Text';
 import styles from '../../styles/styles';
-import variables from '../../styles/variables';
+import themeColors from '../../styles/themes/default';
 import pickerStyles from './pickerStyles';
 
 const propTypes = {
@@ -108,14 +108,8 @@ class Picker extends PureComponent {
         // so we might need to color accordingly so it doesn't blend with the background.
         this.placeholder = _.isEmpty(this.props.placeholder) ? {} : {
             ...this.props.placeholder,
-            color: variables.pickerOptionsTextColor,
+            color: themeColors.pickerOptionsTextColor,
         };
-        this.items = _.map(this.props.items, item => (
-            {
-                ...item,
-                color: variables.pickerOptionsTextColor,
-            }
-        ));
     }
 
     componentDidMount() {
@@ -171,7 +165,9 @@ class Picker extends PureComponent {
                     )}
                     <RNPickerSelect
                         onValueChange={this.onInputChange}
-                        items={this.items}
+
+                        // We add a text color to prevent white text on white background dropdown items on Windows
+                        items={_.map(this.props.items, item => ({...item, color: themeColors.pickerOptionsTextColor}))}
                         style={this.props.size === 'normal' ? pickerStyles(this.props.isDisabled) : styles.pickerSmall}
                         useNativeAndroidPickerStyle={false}
                         placeholder={this.placeholder}

diff --git a/src/styles/colors.js b/src/styles/colors.js
@@ -33,6 +33,7 @@ export default {
     greenDefaultButtonHover: '#2C6755',
     greenDefaultButtonPressed: '#467164',
     greenDefaultButtonDisabled: '#8BA69E',
+    midnight: '#002140',
 
     // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR.
     gray1: '#FAFAFA',

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
@@ -59,6 +59,7 @@ const darkTheme = {
     dropUIBG: 'rgba(6,27,9,0.92)',
     dropTransparentOverlay: 'rgba(255,255,255,0)',
     checkBox: colors.green,
+    pickerOptionsTextColor: colors.midnight,
 };
 
 const oldTheme = {

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -81,5 +81,4 @@ export default {
     INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21),
     sliderBarHeight: 8,
     sliderKnobSize: 26,
-    pickerOptionsTextColor: '#002140',
 };