feat(lobby/prejoin/native): style updates (#12615)

feat(lobby/prejoin/native): style updates (#12615)

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

@@ -10,8 +10,7 @@ import {
     StyleProp,
     Text,
     TextStyle,
-    View,
-    ViewStyle
+    View
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -45,8 +44,9 @@ import AudioMuteButton from '../../../toolbox/components/AudioMuteButton';
 import VideoMuteButton from '../../../toolbox/components/VideoMuteButton';
 import { isDisplayNameRequired } from '../../functions';
 import { IPrejoinProps } from '../../types';
+
 // @ts-ignore
-import styles from '../styles';
+import { preJoinStyles as styles } from './styles';
 
 
 const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
@@ -166,29 +166,27 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                         // @ts-ignore
                         styles = { styles.buttonStylesBorderless } />
                 </View>
-                <View style = { styles.formWrapper as StyleProp<ViewStyle> }>
-                    <Input
-                        // @ts-ignore
-                        customStyles = {{ input: styles.customInput }}
-                        onChange = { onChangeDisplayName }
-                        placeholder = { t('dialog.enterDisplayName') }
-                        value = { displayName } />
-                    <Button
-                        accessibilityLabel = 'prejoin.joinMeeting'
-                        disabled = { joinButtonDisabled }
-                        labelKey = 'prejoin.joinMeeting'
-                        // @ts-ignore
-                        onClick = { !isJoining && onJoin }
-                        style = { styles.joinButton }
-                        type = { PRIMARY } />
-                    <Button
-                        accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
-                        disabled = { joinButtonDisabled }
-                        labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
-                        onClick = { onJoinLowBandwidth }
-                        style = { styles.joinButton }
-                        type = { TERTIARY } />
-                </View>
+                <Input
+                    // @ts-ignore
+                    customStyles = {{ input: styles.customInput }}
+                    onChange = { onChangeDisplayName }
+                    placeholder = { t('dialog.enterDisplayName') }
+                    value = { displayName } />
+                <Button
+                    accessibilityLabel = 'prejoin.joinMeeting'
+                    disabled = { joinButtonDisabled }
+                    labelKey = 'prejoin.joinMeeting'
+                    // @ts-ignore
+                    onClick = { !isJoining && onJoin }
+                    style = { styles.joinButton }
+                    type = { PRIMARY } />
+                <Button
+                    accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
+                    disabled = { joinButtonDisabled }
+                    labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
+                    onClick = { onJoinLowBandwidth }
+                    style = { styles.joinButton }
+                    type = { TERTIARY } />
             </View>
         </JitsiScreen>
     );

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

@@ -0,0 +1,104 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+
+export const preJoinStyles = {
+
+    joinButton: {
+        marginTop: BaseTheme.spacing[3],
+        width: 352
+    },
+
+    buttonStylesBorderless: {
+        iconStyle: {
+            color: BaseTheme.palette.icon01,
+            fontSize: 24
+        },
+        style: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            margin: BaseTheme.spacing[3],
+            height: 24,
+            width: 24
+        },
+        underlayColor: 'transparent'
+    },
+
+    contentWrapper: {
+        flex: 1
+    },
+
+    contentWrapperWide: {
+        flex: 1,
+        flexDirection: 'row'
+    },
+
+    largeVideoContainer: {
+        height: '60%'
+    },
+
+    largeVideoContainerWide: {
+        height: '100%',
+        marginRight: 'auto',
+        position: 'absolute',
+        width: '50%'
+    },
+
+    contentContainer: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.uiBackground,
+        bottom: 0,
+        display: 'flex',
+        height: 316,
+        justifyContent: 'center',
+        position: 'absolute',
+        width: '100%',
+        zIndex: 1
+    },
+
+    contentContainerWide: {
+        alignItems: 'center',
+        height: '100%',
+        justifyContent: 'center',
+        left: '50%',
+        padding: BaseTheme.spacing[3],
+        position: 'absolute',
+        width: '50%'
+    },
+
+    toolboxContainer: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.ui01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        display: 'flex',
+        flexDirection: 'row',
+        height: 60,
+        justifyContent: 'space-between',
+        marginBottom: BaseTheme.spacing[3],
+        paddingHorizontal: BaseTheme.spacing[2],
+        width: 148
+    },
+
+    customInput: {
+        textAlign: 'center',
+        width: 352
+    },
+
+    preJoinRoomName: {
+        ...BaseTheme.typography.heading5,
+        color: BaseTheme.palette.text01,
+        textAlign: 'center'
+    },
+
+    displayRoomNameBackdrop: {
+        alignSelf: 'center',
+        backgroundColor: BaseTheme.palette.uiBackground,
+        borderRadius: BaseTheme.shape.borderRadius,
+        marginTop: BaseTheme.spacing[3],
+        opacity: 0.7,
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingVertical: BaseTheme.spacing[1],
+        position: 'absolute',
+        width: 243,
+        zIndex: 1
+    }
+};