feat(prejoin/native): ui updates (#12368)

* feat(prejoin/native): ui updates

react/features/mobile/navigation/screenOptions.js

@@ -199,7 +199,9 @@ export const preJoinScreenOptions = {
     headerStyle: {
         backgroundColor: BaseTheme.palette.screen02Header
     },
-    headerTitle: ''
+    headerTitleStyle: {
+        color: BaseTheme.palette.text01
+    }
 };
 
 /**

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

@@ -121,7 +121,8 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
 
     useLayoutEffect(() => {
         navigation.setOptions({
-            headerLeft
+            headerLeft,
+            headerTitle: t('prejoin.joinMeeting')
         });
     }, [ navigation ]);
 
@@ -152,18 +153,17 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
                 isFocused
                 && <View style = { largeVideoContainerStyles }>
                     <LargeVideo />
-                </View>
-            }
-            <View style = { contentContainerStyles }>
-                <View style = { styles.formWrapper as StyleProp<ViewStyle> }>
-                    <Text style = { styles.preJoinTitle as StyleProp<TextStyle> }>
-                        { t('prejoin.joinMeeting') }
-                    </Text>
+                    <View style = { styles.displayRoomNameBackdrop }>
                         <Text
                             numberOfLines = { 1 }
                             style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
                             { roomName }
                         </Text>
+                    </View>
+                </View>
+            }
+            <View style = { contentContainerStyles }>
+                <View style = { styles.formWrapper as StyleProp<ViewStyle> }>
                     <TextInput
                         onChangeText = { onChangeDisplayName }
                         placeholder = { t('dialog.enterDisplayName') }
@@ -175,14 +175,13 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
                         disabled = { joinButtonDisabled }
                         labelKey = 'prejoin.joinMeeting'
                         onClick = { onJoin }
-                        style = { styles.prejoinButton }
+                        style = { styles.joinButton }
                         type = { PRIMARY } />
                     <Button
                         accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
                         disabled = { joinButtonDisabled }
                         labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
                         onClick = { onJoinLowBandwidth }
-                        style = { styles.prejoinButton }
                         type = { SECONDARY } />
                 </View>
                 <View style = { toolboxContainerStyles }>

react/features/prejoin/components/styles.js

@@ -2,15 +2,9 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 const SECONDARY_COLOR = BaseTheme.palette.border04;
 
-const preJoinText = {
-    ...BaseTheme.typography.heading5,
-    color: BaseTheme.palette.text01,
-    textAlign: 'center'
-};
-
 export default {
-    prejoinButton: {
-        marginTop: BaseTheme.spacing[3]
+    joinButton: {
+        marginVertical: BaseTheme.spacing[3]
     },
 
     buttonStylesBorderless: {
@@ -21,7 +15,7 @@ export default {
         style: {
             flexDirection: 'row',
             justifyContent: 'center',
-            marginHorizontal: BaseTheme.spacing[3],
+            margin: BaseTheme.spacing[3],
             height: 24,
             width: 24
         },
@@ -38,47 +32,45 @@ export default {
     },
 
     largeVideoContainer: {
-        minHeight: '50%'
+        minHeight: '60%'
     },
 
     largeVideoContainerWide: {
         height: '100%',
         marginRight: 'auto',
         position: 'absolute',
-        width: '50%'
+        width: '60%'
     },
 
     contentContainer: {
         alignSelf: 'center',
         display: 'flex',
         justifyContent: 'center',
-        minHeight: '50%',
-        paddingHorizontal: BaseTheme.spacing[3],
+        minHeight: '40%',
+        padding: BaseTheme.spacing[3],
         width: 400
     },
 
     contentContainerWide: {
-        alignItems: 'center',
+        alignSelf: 'center',
         height: '100%',
         justifyContent: 'center',
-        left: '50%',
-        paddingHorizontal: BaseTheme.spacing[3],
+        left: '60%',
+        padding: BaseTheme.spacing[3],
         position: 'absolute',
-        width: '50%'
+        width: '40%'
     },
 
     toolboxContainer: {
         alignSelf: 'center',
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: BaseTheme.spacing[3]
+        justifyContent: 'center'
     },
 
     toolboxContainerWide: {
         flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: BaseTheme.spacing[3]
+        justifyContent: 'center'
     },
 
     formWrapper: {
@@ -94,15 +86,22 @@ export default {
         borderWidth: 2,
         color: BaseTheme.palette.text06,
         height: BaseTheme.spacing[7],
-        marginTop: BaseTheme.spacing[3],
         textAlign: 'center'
     },
 
-    preJoinTitle: {
-        ...preJoinText
+    preJoinRoomName: {
+        ...BaseTheme.typography.heading5,
+        color: BaseTheme.palette.text01,
+        textAlign: 'center'
     },
 
-    preJoinRoomName: {
-        ...preJoinText
+    displayRoomNameBackdrop: {
+        alignSelf: 'center',
+        backgroundColor: BaseTheme.palette.ui16,
+        bottom: BaseTheme.spacing[3],
+        borderRadius: 4,
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingVertical: BaseTheme.spacing[1],
+        position: 'absolute'
     }
 };