feat(native): Last mobile release UI fixes (#12603)

* feat(base/modal): order props alphabetically

* feat(base/ui): added ripple color for tertiary button

* feat(prejoin): removed autoFocus from input and adjusted content

* feat(conference): adjusted RaisedHandCountLabel and added extra code spaces

* feat(prejoin): fixed content to fit tablets

* feat(conference): moved header button styles to navigation styles

* feat(mobile/navigation): updated header navigation button styles

* feat(prejoin): updated elements width, removed left inset

react/features/base/modal/components/JitsiKeyboardAvoidingView.js

@@ -53,9 +53,9 @@ const JitsiKeyboardAvoidingView = (
             addBottomPadding = true,
             children,
             contentContainerStyle,
+            disableForcedKeyboardDismiss,
             hasTabNavigator,
             hasBottomTextInput,
-            disableForcedKeyboardDismiss,
             style
         }: Props) => {
     const headerHeight = useHeaderHeight();

react/features/base/modal/components/JitsiScreen.js

@@ -60,10 +60,10 @@ const JitsiScreen = ({
     addBottomPadding,
     contentContainerStyle,
     children,
+    disableForcedKeyboardDismiss = false,
     footerComponent,
     hasTabNavigator = false,
     hasBottomTextInput = false,
-    disableForcedKeyboardDismiss = false,
     safeAreaInsets = [ 'left', 'right' ],
     style
 }: Props) => {

react/features/base/ui/components/native/Button.tsx

@@ -74,7 +74,7 @@ const Button: React.FC<IProps> = ({
                 accessibilityLabel = { accessibilityLabel }
                 disabled = { disabled }
                 onPress = { onPress }
-                rippleColor = 'transparent'
+                rippleColor = { BaseTheme.palette.action03Active }
                 style = { [
                     buttonStyles,
                     style

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

@@ -1,11 +1,9 @@
-// @flow
-
 import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { IconRaiseHand } from '../../../base/icons';
 import { Label } from '../../../base/label';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import styles from './styles';
 

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

@@ -4,7 +4,6 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
 
 const TITLE_BAR_BUTTON_SIZE = 24;
-const HEADER_ACTION_BUTTON_SIZE = 17;
 
 
 /**
@@ -35,29 +34,6 @@ export default {
         margin: 10
     },
 
-    headerNavigationButton: {
-        height: BaseTheme.spacing[6],
-        marginTop: 20,
-        width: BaseTheme.spacing[6]
-    },
-
-    headerNavigationIcon: {
-        marginLeft: 12
-    },
-
-    headerNavigationText: {
-        color: BaseTheme.palette.text01,
-        marginLeft: BaseTheme.spacing[3],
-        fontSize: HEADER_ACTION_BUTTON_SIZE
-    },
-
-    headerNavigationTextBold: {
-        ...BaseTheme.typography.labelButton,
-        color: BaseTheme.palette.text01,
-        marginRight: BaseTheme.spacing[3],
-        fontSize: HEADER_ACTION_BUTTON_SIZE
-    },
-
     /**
      * View that contains the indicators.
      */
@@ -212,12 +188,11 @@ export default {
     },
 
     raisedHandsCountLabel: {
+        alignItems: 'center',
         backgroundColor: BaseTheme.palette.warning02,
         flexDirection: 'row',
-        alignItems: 'center',
         marginLeft: BaseTheme.spacing[0],
-        marginBottom: BaseTheme.spacing[0],
+        marginBottom: BaseTheme.spacing[0]
-        marginRight: BaseTheme.spacing[1]
     },
 
     raisedHandsCountLabelText: {

react/features/filmstrip/components/native/Thumbnail.js

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { PureComponent } from 'react';
 import { Image, View } from 'react-native';
 import type { Dispatch } from 'redux';
@@ -226,11 +224,11 @@ class Thumbnail extends PureComponent<Props> {
                 ] }>
                 { !_isVirtualScreenshare && <ConnectionIndicator participantId = { participantId } /> }
                 { !_isVirtualScreenshare && <RaisedHandIndicator participantId = { participantId } /> }
-                {tileView && isScreenShare && (
+                { tileView && isScreenShare && (
                     <View style = { styles.indicatorContainer }>
                         <ScreenShareIndicator />
                     </View>
-                )}
+                ) }
             </View>);
             indicators.push(<Container
                 key = 'bottom-indicators'
@@ -369,7 +367,7 @@ class Thumbnail extends PureComponent<Props> {
                     _renderDominantSpeakerIndicator && !_isVirtualScreenshare ? styles.thumbnailDominantSpeaker : null
                 ] }
                 touchFeedback = { false }>
-                {_gifSrc ? <Image
+                { _gifSrc ? <Image
                     source = {{ uri: _gifSrc }}
                     style = { styles.thumbnailGif } />
                     : <>

react/features/mobile/navigation/components/HeaderNavigationButton.js

@@ -1,11 +1,11 @@
-// @flow
-
 import React from 'react';
 import { Text, TouchableRipple } from 'react-native-paper';
 
 import { Icon } from '../../../base/icons';
 import type { StyleType } from '../../../base/styles';
-import styles from '../../../conference/components/native/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+import { navigationStyles } from './styles';
 
 type Props = {
 
@@ -55,25 +55,25 @@ const HeaderNavigationButton
                     src ? (
                         <TouchableRipple
                             onPress = { onPress }
-                            rippleColor = { 'transparent' }
                             style = { [
                                 buttonStyle,
-                                styles.headerNavigationButton ] } >
+                                navigationStyles.headerNavigationButtonIcon ] } >
                             <Icon
+                                color = { BaseTheme.palette.link01Active }
                                 size = { 24 }
                                 src = { src }
-                                style = { styles.headerNavigationIcon } />
+                                style = { navigationStyles.headerNavigationIcon } />
                         </TouchableRipple>
                     ) : (
                         <TouchableRipple
                             disabled = { disabled }
                             onPress = { onPress }
-                            rippleColor = { 'transparent' }>
+                            style = { navigationStyles.headerNavigationButtonText } >
                             <Text
                                 style = {
                                     twoActions
-                                        ? styles.headerNavigationTextBold
+                                        ? navigationStyles.headerNavigationTextBold
-                                        : styles.headerNavigationText
+                                        : navigationStyles.headerNavigationText
                                 }>
                                 { label }
                             </Text>

react/features/mobile/navigation/components/styles.js

@@ -4,6 +4,19 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const TEXT_COLOR = BaseTheme.palette.text01;
 
+const HEADER_ACTION_BUTTON_SIZE = 17;
+
+const headerNavigationButton = {
+    alignContent: 'center',
+    height: '100%',
+    justifyItems: 'center'
+};
+
+const headerNavigationText = {
+    color: BaseTheme.palette.link01,
+    fontSize: HEADER_ACTION_BUTTON_SIZE
+};
+
 const unreadCounterDescription = {
     ...BaseTheme.typography.bodyShortBoldLarge,
     color: BaseTheme.palette.text03
@@ -34,6 +47,33 @@ export const navigationStyles = {
         color: TEXT_COLOR
     },
 
+    headerNavigationButtonIcon: {
+        ...headerNavigationButton,
+        paddingTop: 18,
+        width: BaseTheme.spacing[7]
+    },
+
+    headerNavigationButtonText: {
+        ...headerNavigationButton,
+        paddingTop: 10,
+        width: BaseTheme.spacing[10]
+    },
+
+    headerNavigationIcon: {
+        marginLeft: 12
+    },
+
+    headerNavigationText: {
+        ...headerNavigationText,
+        marginLeft: BaseTheme.spacing[3]
+    },
+
+    headerNavigationTextBold: {
+        ...headerNavigationText,
+        ...BaseTheme.typography.labelButton,
+        marginRight: BaseTheme.spacing[3]
+    },
+
     unreadCounterContainer: {
         alignItems: 'center',
         display: 'flex',

react/features/participants-pane/components/native/ParticipantItem.js

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react';
 import type { Node } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -121,7 +119,7 @@ function ParticipantItem({
                 {
                     !isKnockingParticipant
                     && <>
-                        {raisedHand && <RaisedHandIndicator />}
+                        { raisedHand && <RaisedHandIndicator /> }
                         <View style = { styles.participantStatesContainer }>
                             <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMediaState]}</View>
                             <View>{AudioStateIcons[audioMediaState]}</View>

react/features/prejoin/components/native/Prejoin.tsx

@@ -143,7 +143,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     return (
         <JitsiScreen
             addBottomPadding = { false }
-            safeAreaInsets = { [ 'left', 'right' ] }
+            safeAreaInsets = { [ 'right' ] }
             style = { contentWrapperStyles }>
             <BrandingImageBackground />
             {
@@ -172,7 +172,6 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                 <View style = { styles.formWrapper as StyleProp<ViewStyle> }>
                     <Input
                         // @ts-ignore
-                        autoFocus = { true }
                         customStyles = {{ input: styles.customInput }}
                         onChange = { onChangeDisplayName }
                         placeholder = { t('dialog.enterDisplayName') }
@@ -190,6 +189,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                         disabled = { joinButtonDisabled }
                         labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
                         onClick = { onJoinLowBandwidth }
+                        style = { styles.joinButton }
                         type = { TERTIARY } />
                 </View>
             </View>

react/features/prejoin/components/styles.js

@@ -3,7 +3,8 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 export default {
     joinButton: {
-        marginVertical: BaseTheme.spacing[3]
+        marginTop: BaseTheme.spacing[3],
+        width: 352
     },
 
     buttonStylesBorderless: {
@@ -38,33 +39,33 @@ export default {
         height: '100%',
         marginRight: 'auto',
         position: 'absolute',
-        width: '60%'
+        width: '50%'
     },
 
     contentContainer: {
-        alignSelf: 'center',
+        alignItems: 'center',
         backgroundColor: BaseTheme.palette.uiBackground,
         bottom: 0,
         display: 'flex',
-        height: 284,
+        height: 316,
         justifyContent: 'center',
         position: 'absolute',
-        width: 390,
+        width: '100%',
         zIndex: 1
     },
 
     contentContainerWide: {
-        alignSelf: 'center',
+        alignItems: 'center',
         height: '100%',
         justifyContent: 'center',
-        left: '60%',
+        left: '50%',
         padding: BaseTheme.spacing[3],
         position: 'absolute',
-        width: '40%'
+        width: '50%'
     },
 
     toolboxContainer: {
-        alignSelf: 'center',
+        alignItems: 'center',
         backgroundColor: BaseTheme.palette.ui01,
         borderRadius: BaseTheme.shape.borderRadius,
         display: 'flex',
@@ -82,13 +83,13 @@ export default {
     },
 
     formWrapper: {
-        alignSelf: 'stretch',
+        alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'center'
-        marginHorizontal: BaseTheme.spacing[3]
     },
 
     customInput: {
-        textAlign: 'center'
+        textAlign: 'center',
+        width: 352
     },
 
     preJoinRoomName: {