Merge pull request #13299 from Expensify/rocio-BackgroundColorWindows

Clean up the code when adding colors for the Picker
Expensify · Dec 5, 2022 · 2e69dac · 2e69dac
2 parents 6380fe8 + 3024576
commit 2e69dac
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js
@@ -7,10 +7,9 @@ import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import FormHelpMessage from '../FormHelpMessage';
 import Text from '../Text';
-import CONST from '../../CONST';
 import styles from '../../styles/styles';
+import variables from '../../styles/variables';
 import pickerStyles from './pickerStyles';
-import getOperatingSystem from '../../libs/getOperatingSystem';
 
 const propTypes = {
     /** Picker label */
@@ -104,28 +103,23 @@ class Picker extends PureComponent {
         };
 
         this.onInputChange = this.onInputChange.bind(this);
-        this.placeholder = this.props.placeholder;
-        this.items = this.props.items;
+
+        // Windows will reuse the text color of the select for each one of the options
+        // 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,
+        };
+        this.items = _.map(this.props.items, item => (
+            {
+                ...item,
+                color: variables.pickerOptionsTextColor,
+            }
+        ));
     }
 
     componentDidMount() {
         this.setDefaultValue();
-
-        // Windows will reuse the text color of the select for each one of the options
-        // so we might need to color accordingly so it doesn't blend with the background.
-        if (getOperatingSystem() === CONST.OS.WINDOWS) {
-            this.placeholder = _.isEmpty(this.placeholder) ? {} : {
-                ...this.placeholder,
-                color: '#002140',
-            };
-
-            this.items = _.map(this.items, item => (
-                {
-                    ...item,
-                    color: '#002140',
-                }
-            ));
-        }
     }
 
     componentDidUpdate(prevProps) {

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