feat(conference) UI updates for mobile navigation bar (#10437)

* feat(conference) updated native navigation bar and toolbox styles

react/features/base/ui/Tokens.js

@@ -34,6 +34,7 @@ export const colors = {
     surface11: '#FFF',
     surface12: '#AAAAAA',
     surface13: '#495258',
+    surface14: '#555555',
 
     success04: '#189B55',
     success05: '#1EC26A',
@@ -67,6 +68,7 @@ export const colorMap = {
     ui04: 'surface05',
     ui05: 'surface06',
     ui12: 'surface11',
+    ui13: 'surface14',
 
     // Primary buttons
     action01: 'primary05',
@@ -168,6 +170,9 @@ export const colorMap = {
     // Tertiary color for disabled actions
     icon03: 'surface07',
 
+    // Quaternary color for disabled actions
+    icon04: 'surface14',
+
     // Error message
     iconError: 'error06',
 

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

@@ -254,7 +254,8 @@ class Conference extends AbstractConference<Props, *> {
             _connecting,
             _largeVideoParticipantId,
             _reducedUI,
-            _shouldDisplayTileView
+            _shouldDisplayTileView,
+            _toolboxVisible
         } = this.props;
 
         if (_reducedUI) {
@@ -304,7 +305,10 @@ class Conference extends AbstractConference<Props, *> {
 
                 <SafeAreaView
                     pointerEvents = 'box-none'
-                    style = { styles.navBarSafeView }>
+                    style = {
+                        _toolboxVisible
+                            ? styles.navBarSafeViewColor
+                            : styles.navBarSafeViewTransparent }>
                     <NavigationBar />
                     { this._renderNotificationsContainer() }
                     <KnockingParticipantList />

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

@@ -6,6 +6,17 @@ export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.warning03;
 
 const NAVBAR_BUTTON_SIZE = 24;
 
+
+/**
+ * The styles of the safe area view that contains the navigation bar.
+ */
+const navBarSafeView = {
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+};
+
 /**
  * The styles of the feature conference.
  */
@@ -43,16 +54,21 @@ export default {
     },
 
     inviteButtonContainer: {
+        borderRadius: 3,
+        height: BaseTheme.spacing[7],
         position: 'absolute',
+        marginTop: BaseTheme.spacing[1],
+        marginRight: BaseTheme.spacing[1],
         top: 0,
         right: 0,
-        zIndex: 1
+        zIndex: 1,
+        width: BaseTheme.spacing[7]
     },
 
     inviteButton: {
         iconStyle: {
-            padding: 10,
             color: BaseTheme.palette.icon01,
+            padding: 12,
             fontSize: NAVBAR_BUTTON_SIZE
         },
         underlayColor: BaseTheme.spacing.underlay01
@@ -82,35 +98,41 @@ export default {
     },
 
     pipButtonContainer: {
+        borderRadius: 3,
+        height: BaseTheme.spacing[7],
         position: 'absolute',
+        marginTop: BaseTheme.spacing[1],
+        marginLeft: BaseTheme.spacing[1],
         top: 0,
         left: 0,
-        zIndex: 1
+        zIndex: 1,
+        width: BaseTheme.spacing[7]
     },
 
     pipButton: {
         iconStyle: {
-            padding: 10,
             color: BaseTheme.palette.icon01,
+            padding: 12,
             fontSize: NAVBAR_BUTTON_SIZE
         },
-        underlayColor: BaseTheme.palette.underlay01
+        underlayColor: BaseTheme.spacing.underlay01
     },
 
-    navBarSafeView: {
+    navBarSafeViewColor: {
-        left: 0,
+        ...navBarSafeView,
-        position: 'absolute',
+        backgroundColor: BaseTheme.palette.uiBackground
-        right: 0,
+    },
-        top: 0
+
+    navBarSafeViewTransparent: {
+        ...navBarSafeView
     },
 
     navBarWrapper: {
         alignItems: 'center',
         flex: 1,
         flexDirection: 'row',
-        height: 44,
+        height: BaseTheme.spacing[8],
-        justifyContent: 'center',
+        justifyContent: 'center'
-        paddingHorizontal: 14
     },
 
     roomTimer: {
@@ -121,9 +143,8 @@ export default {
     },
 
     roomTimerView: {
-        backgroundColor: 'rgba(0,0,0,0.8)',
+        backgroundColor: BaseTheme.palette.action02,
-        borderBottomRightRadius: 3,
+        borderRadius: 3,
-        borderTopRightRadius: 3,
         height: 28,
         justifyContent: 'center',
         minWidth: 50
@@ -142,7 +163,8 @@ export default {
         flexShrink: 1,
         height: 28,
         justifyContent: 'center',
-        paddingHorizontal: 10
+        paddingHorizontal: 10,
+        maxWidth: 168
     },
 
     roomNameWrapper: {

react/features/invite/components/add-people-dialog/native/InviteButton.js

@@ -4,7 +4,7 @@ import type { Dispatch } from 'redux';
 
 import { getFeatureFlag, INVITE_ENABLED } from '../../../../base/flags';
 import { translate } from '../../../../base/i18n';
-import { IconAddPeople } from '../../../../base/icons';
+import { IconInviteMore } from '../../../../base/icons';
 import { connect } from '../../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../../base/toolbox/components';
 import { doInvitePeople } from '../../../actions.native';
@@ -23,7 +23,7 @@ type Props = AbstractButtonProps & {
  */
 class InviteButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.shareRoom';
-    icon = IconAddPeople;
+    icon = IconInviteMore;
     label = 'toolbar.shareRoom';
 
     /**

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

@@ -1,7 +1,8 @@
 // @flow
 
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
-import { BoxModel, ColorPalette } from '../../../base/styles';
+import { BoxModel } from '../../../base/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
 
 const BUTTON_SIZE = 48;
 
@@ -27,7 +28,7 @@ const toolbarButton = {
  */
 const toolbarButtonIcon = {
     alignSelf: 'center',
-    color: ColorPalette.darkGrey,
+    color: BaseTheme.palette.icon04,
     fontSize: 24
 };
 
@@ -37,7 +38,7 @@ const toolbarButtonIcon = {
  */
 const whiteToolbarButtonIcon = {
     ...toolbarButtonIcon,
-    color: ColorPalette.white
+    color: BaseTheme.palette.icon01
 };
 
 /**
@@ -56,14 +57,14 @@ const reactionButton = {
  */
 const reactionEmoji = {
     fontSize: 20,
-    color: ColorPalette.white
+    color: BaseTheme.palette.icon01
 };
 
 const reactionMenu = {
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: ColorPalette.black,
+    backgroundColor: BaseTheme.palette.bottomSheet,
     padding: 16
 };
 
@@ -82,7 +83,7 @@ const styles = {
      */
     toolbox: {
         alignItems: 'center',
-        backgroundColor: ColorPalette.darkBackground,
+        backgroundColor: BaseTheme.palette.uiBackground,
         borderTopLeftRadius: 3,
         borderTopRightRadius: 3,
         flexDirection: 'row',
@@ -128,7 +129,7 @@ ColorSchemeRegistry.register('Toolbox', {
     },
 
     backgroundToggle: {
-        backgroundColor: ColorPalette.toggled
+        backgroundColor: BaseTheme.palette.ui13
     },
 
     hangupButtonStyles: {
@@ -137,7 +138,7 @@ ColorSchemeRegistry.register('Toolbox', {
             ...toolbarButton,
             backgroundColor: schemeColor('hangup')
         },
-        underlayColor: ColorPalette.buttonUnderlay
+        underlayColor: BaseTheme.palette.underlay01
     },
 
     reactionDialog: {
@@ -165,21 +166,21 @@ ColorSchemeRegistry.register('Toolbox', {
 
     reactionButton: {
         style: reactionButton,
-        underlayColor: ColorPalette.toggled,
+        underlayColor: BaseTheme.palette.ui13,
         emoji: reactionEmoji
     },
 
     raiseHandButton: {
         style: {
             ...reactionButton,
-            backgroundColor: ColorPalette.toggled,
+            backgroundColor: BaseTheme.palette.ui13,
             width: '100%',
             borderRadius: 6
         },
-        underlayColor: ColorPalette.toggled,
+        underlayColor: BaseTheme.palette.ui13,
         emoji: reactionEmoji,
         text: {
-            color: ColorPalette.white,
+            color: BaseTheme.palette.text01,
             fontWeight: '600',
             marginLeft: 8,
             lineHeight: 24
@@ -192,7 +193,7 @@ ColorSchemeRegistry.register('Toolbox', {
     },
 
     emojiAnimation: {
-        color: ColorPalette.white,
+        color: BaseTheme.palette.icon01,
         position: 'absolute',
         zIndex: 1001,
         elevation: 2,