feat(native): New mobile release UI fixes (#12592)

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

@@ -66,6 +66,9 @@ const Button: React.FC<IProps> = ({
     }
 
     if (type === TERTIARY) {
+        buttonLabelStyles
+            = disabled ? styles.buttonLabelTertiaryDisabled : styles.buttonLabelTertiary;
+
         return (
             <TouchableRipple
                 accessibilityLabel = { accessibilityLabel }

react/features/base/ui/components/native/buttonStyles.ts

@@ -23,15 +23,15 @@ export default {
         ...buttonLabel
     },
 
-    buttonContent: {
-        height: BUTTON_HEIGHT
-    },
-
     buttonLabelDisabled: {
         ...buttonLabel,
         color: BaseTheme.palette.text03
     },
 
+    buttonContent: {
+        height: BUTTON_HEIGHT
+    },
+
     buttonDisabled: {
         ...button,
         backgroundColor: BaseTheme.palette.actionDisabled
@@ -54,6 +54,13 @@ export default {
 
     buttonLabelTertiary: {
         ...buttonLabel,
-        color: BaseTheme.palette.text01
+        color: BaseTheme.palette.text01,
+        textAlign: 'center'
+    },
+
+    buttonLabelTertiaryDisabled: {
+        ...buttonLabel,
+        color: BaseTheme.palette.text03,
+        textAlign: 'center'
     }
 };

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

@@ -79,7 +79,7 @@ class ChatInputBar extends Component<Props, State> {
                 ] }>
                 <Input
                     blurOnSubmit = { false }
-                    customStyles = {{ input: styles.customInput }}
+                    customStyles = {{ container: styles.customInputContainer }}
                     multiline = { false }
                     onBlur = { this._onFocused(false) }
                     onChange = { this._onChangeText }

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

@@ -124,8 +124,8 @@ export default {
         width: '100%'
     },
 
-    customInput: {
+    customInputContainer: {
-        width: 272
+        width: '75%'
     },
 
     messageBubble: {

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

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { Component } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 

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

@@ -100,7 +100,6 @@ class LonelyMeetingExperience extends PureComponent<Props> {
                         icon = { this._renderAddPeopleIcon }
                         labelKey = 'lonelyMeetingExperience.button'
                         onClick = { this._onPress }
-                        style = { styles.lonelyButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 ) }
             </View>

react/features/conference/components/native/carmode/TitleBar.tsx

@@ -66,14 +66,13 @@ const TitleBar = (props: IProps): JSX.Element => {
                     <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
                     <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
                 </View>
-
                 {
                     props._meetingNameEnabled
                     && <View style = { styles.roomNameView as StyleProp<ViewStyle> }>
                         <Text
                             numberOfLines = { 1 }
                             style = { styles.roomName }>
-                            {props._meetingName}
+                            { props._meetingName }
                         </Text>
                     </View>
                 }

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

@@ -84,10 +84,6 @@ export default {
         underlayColor: 'transparent'
     },
 
-    lonelyButton: {
-        borderRadius: BaseTheme.spacing[4]
-    },
-
     lonelyMeetingContainer: {
         alignSelf: 'stretch',
         alignItems: 'center',
@@ -210,7 +206,9 @@ export default {
     },
 
     insecureRoomNameLabel: {
-        backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR
+        backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR,
+        borderRadius: BaseTheme.shape.borderRadius,
+        height: 32
     },
 
     raisedHandsCountLabel: {

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

@@ -107,7 +107,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     };
 
     const { PRIMARY, TERTIARY } = BUTTON_TYPES;
-    const joinButtonDisabled = isJoining || (!displayName && isDisplayNameMandatory);
+    const joinButtonDisabled = !displayName && isDisplayNameMandatory;
 
     useEffect(() => {
         BackHandler.addEventListener('hardwareBackPress', goBack);
@@ -156,6 +156,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                             { roomName }
                         </Text>
                     </View>
+                    {/* @ts-ignore */}
                     <LargeVideo />
                 </View>
             }
@@ -171,6 +172,7 @@ 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') }
@@ -179,14 +181,14 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                         accessibilityLabel = 'prejoin.joinMeeting'
                         disabled = { joinButtonDisabled }
                         labelKey = 'prejoin.joinMeeting'
-                        onClick = { onJoin }
+                        // @ts-ignore
+                        onClick = { !isJoining && onJoin }
                         style = { styles.joinButton }
                         type = { PRIMARY } />
                     <Button
                         accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
                         disabled = { joinButtonDisabled }
                         labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
-                        labelStyle = { styles.joinLowBandwidthLabel }
                         onClick = { onJoinLowBandwidth }
                         type = { TERTIARY } />
                 </View>

react/features/prejoin/components/styles.js

@@ -3,13 +3,7 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 export default {
     joinButton: {
-        marginTop: BaseTheme.spacing[3]
+        marginVertical: BaseTheme.spacing[3]
-    },
-
-    joinLowBandwidthLabel: {
-        color: BaseTheme.palette.text01,
-        marginTop: BaseTheme.spacing[3],
-        textAlign: 'center'
     },
 
     buttonStylesBorderless: {

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

@@ -1,5 +1,3 @@
-// @flow
-
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
@@ -11,7 +9,7 @@ const BUTTON_SIZE = 48;
  * The style of toolbar buttons.
  */
 const toolbarButton = {
-    borderRadius: 3,
+    borderRadius: BaseTheme.shape.borderRadius,
     borderWidth: 0,
     flex: 0,
     flexDirection: 'row',