[RN] Recolor AudioRoutePickerDialog

react/features/base/styles/components/styles/ColorPalette.js

@@ -24,7 +24,7 @@ export const ColorPalette = {
     darkGrey: '#555555',
     green: '#40b183',
     lightGrey: '#AAAAAA',
-    lighterGrey: '#EEEEEE',
+    overflowMenuItemUnderlay: '#EEEEEE',
     red: '#D00000',
     transparent: 'rgba(0, 0, 0, 0)',
     white: 'white',

react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js

@@ -7,10 +7,10 @@ import { connect } from 'react-redux';
 
 import { hideDialog, BottomSheet } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
-
 import { Icon } from '../../../base/font-icons';
+import { ColorPalette } from '../../../base/styles';
 
-import styles, { UNDERLAY_COLOR } from './styles';
+import styles from './styles';
 
 /**
  * Type definition for a single entry in the device list.
@@ -210,7 +210,7 @@ class AudioRoutePickerDialog extends Component<Props, State> {
             <TouchableHighlight
                 key = { device.type }
                 onPress = { this._onSelectDeviceFn(device) }
-                underlayColor = { UNDERLAY_COLOR } >
+                underlayColor = { ColorPalette.overflowMenuItemUnderlay } >
                 <View style = { styles.deviceRow } >
                     <Icon
                         name = { iconName }

react/features/mobile/audio-mode/components/styles.js

@@ -2,13 +2,6 @@
 
 import { ColorPalette, createStyleSheet } from '../../../base/styles';
 
-/**
- * Underlay color for the buttons on the sheet.
- *
- * @type {string}
- */
-export const UNDERLAY_COLOR = '#eee';
-
 /**
  * The React {@code Component} styles of {@code AudioRoutePickerDialog}.
  *
@@ -30,6 +23,7 @@ export default createStyleSheet({
      * Style for the {@code Icon} element in a row.
      */
     deviceIcon: {
+        color: ColorPalette.white,
         fontSize: 24
     },
 
@@ -37,6 +31,7 @@ export default createStyleSheet({
      * Style for the {@code Text} element in a row.
      */
     deviceText: {
+        color: ColorPalette.white,
         fontSize: 16,
         marginLeft: 32
     },

react/features/toolbox/components/native/styles.js

@@ -176,5 +176,5 @@ export const overflowMenuItemStyles = {
     iconStyle: overflowMenuStyles.icon,
     labelStyle: overflowMenuStyles.label,
     style: overflowMenuStyles.container,
-    underlayColor: '#eee'
+    underlayColor: ColorPalette.overflowMenuItemUnderlay
 };