feat(toolbox/conference/audio-mode/chat/native): UI fixes and updates (#12375)

feat(toolbox/conference/audio-mode/chat/native): UI fixes and updates

react/features/base/dialog/components/native/styles.js

@@ -2,13 +2,11 @@ import { StyleSheet } from 'react-native';
 
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 import { ColorSchemeRegistry, schemeColor } from '../../../color-scheme';
-import { BoxModel, ColorPalette } from '../../../styles';
+import { BoxModel } from '../../../styles';
 import { PREFERRED_DIALOG_SIZE } from '../../constants';
 
 const BORDER_RADIUS = 5;
 
-export const FIELD_UNDERLINE = ColorPalette.transparent;
-
 /**
  * NOTE: These Material guidelines based values are currently only used in
  * dialogs (and related) but later on it would be nice to export it into a base
@@ -16,7 +14,7 @@ export const FIELD_UNDERLINE = ColorPalette.transparent;
  */
 export const MD_FONT_SIZE = 16;
 export const MD_ITEM_HEIGHT = 48;
-export const MD_ITEM_MARGIN_PADDING = 16;
+export const MD_ITEM_MARGIN_PADDING = BaseTheme.spacing[3];
 
 /**
  * Reusable (colored) style for text in any branded dialogs.
@@ -28,7 +26,7 @@ const brandedDialogText = {
 };
 
 const brandedDialogLabelStyle = {
-    color: ColorPalette.white,
+    color: BaseTheme.palette.text01,
     flexShrink: 1,
     fontSize: MD_FONT_SIZE,
     opacity: 0.90
@@ -41,7 +39,7 @@ const brandedDialogItemContainerStyle = {
 };
 
 const brandedDialogIconStyle = {
-    color: ColorPalette.white,
+    color: BaseTheme.palette.icon01,
     fontSize: 24
 };
 
@@ -61,7 +59,7 @@ export const inputDialog = {
  */
 export const bottomSheetStyles = {
     sheetAreaCover: {
-        backgroundColor: ColorPalette.transparent,
+        backgroundColor: 'transparent',
         flex: 1
     },
 
@@ -115,7 +113,7 @@ export const bottomSheetStyles = {
         /**
          * Additional style that is not directly used as a style object.
          */
-        underlayColor: ColorPalette.toggled
+        underlayColor: BaseTheme.palette.underlay01
     },
 
     /**

react/features/chat/components/native/MessageRecipient.js

@@ -16,6 +16,7 @@ import AbstractMessageRecipient, {
     type Props as AbstractProps
 } from '../AbstractMessageRecipient';
 
+
 type Props = AbstractProps & {
 
     /**
@@ -132,7 +133,8 @@ class MessageRecipient extends AbstractMessageRecipient<Props> {
                     }) }
                 </Text>
                 <TouchableHighlight
-                    onPress = { this._onResetPrivateMessageRecipient }>
+                    onPress = { this._onResetPrivateMessageRecipient }
+                    underlayColor = { 'transparent' }>
                     <Icon
                         src = { IconCancelSelection }
                         style = { _styles.messageRecipientCancelIcon } />

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

@@ -81,7 +81,7 @@ export default {
             padding: 12,
             fontSize: TITLE_BAR_BUTTON_SIZE
         },
-        underlayColor: BaseTheme.spacing.underlay01
+        underlayColor: 'transparent'
     },
 
     lonelyButton: {
@@ -116,7 +116,7 @@ export default {
             padding: 12,
             fontSize: TITLE_BAR_BUTTON_SIZE
         },
-        underlayColor: BaseTheme.spacing.underlay01
+        underlayColor: 'transparent'
     },
 
     titleBarSafeViewColor: {

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

@@ -14,7 +14,7 @@ import {
     IconDeviceSpeaker
 } from '../../../base/icons';
 import { connect } from '../../../base/redux';
-import { ColorPalette } from '../../../base/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import styles from './styles';
 
@@ -240,12 +240,18 @@ class AudioRoutePickerDialog extends Component<Props, State> {
     _renderDevice(device: Device) {
         const { icon, selected, text } = device;
         const selectedStyle = selected ? styles.selectedText : {};
+        const borderRadiusHighlightStyles = {
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16
+        };
+        const speakerDeviceIsNotSelected = device.type !== 'SPEAKER';
 
         return (
             <TouchableHighlight
                 key = { device.type }
                 onPress = { this._onSelectDeviceFn(device) }
-                underlayColor = { ColorPalette.overflowMenuItemUnderlay } >
+                style = { speakerDeviceIsNotSelected && borderRadiusHighlightStyles }
+                underlayColor = { BaseTheme.palette.underlay01 } >
                 <View style = { styles.deviceRow } >
                     <Icon
                         src = { icon }

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

@@ -1,7 +1,8 @@
 // @flow
 
 import { MD_ITEM_HEIGHT } from '../../../base/dialog';
-import { ColorPalette, createStyleSheet } from '../../../base/styles';
+import { createStyleSheet } from '../../../base/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 /**
  * The React {@code Component} styles of {@code AudioRoutePickerDialog}.
@@ -18,30 +19,30 @@ export default createStyleSheet({
         alignItems: 'center',
         flexDirection: 'row',
         height: MD_ITEM_HEIGHT,
-        marginLeft: 16
+        marginLeft: BaseTheme.spacing[3]
     },
 
     /**
      * Style for the {@code Icon} element in a row.
      */
     deviceIcon: {
-        color: ColorPalette.white,
+        color: BaseTheme.palette.icon01,
-        fontSize: 24
+        fontSize: BaseTheme.spacing[4]
     },
 
     /**
      * Style for the {@code Text} element in a row.
      */
     deviceText: {
-        color: ColorPalette.white,
+        color: BaseTheme.palette.text01,
         fontSize: 16,
-        marginLeft: 32
+        marginLeft: BaseTheme.spacing[5]
     },
 
     /**
      * Style for a row which is marked as selected.
      */
     selectedText: {
-        color: ColorPalette.blue
+        color: BaseTheme.palette.action01
     }
 });

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

@@ -126,7 +126,8 @@ ColorSchemeRegistry.register('Toolbox', {
         style: {
             ...toolbarButton,
             backgroundColor: 'transparent'
-        }
+        },
+        underlayColor: 'transparent'
     },
 
     backgroundToggle: {
@@ -199,6 +200,7 @@ ColorSchemeRegistry.register('Toolbox', {
         iconStyle: whiteToolbarButtonIcon,
         style: {
             ...toolbarButton
-        }
+        },
+        underlayColor: 'transparent'
     }
 });