fix(lobby/native) style updates and local video fix

react/features/lobby/components/native/LobbyScreen.js

@@ -9,8 +9,6 @@ import { LoadingIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
 import BaseTheme from '../../../base/ui/components/BaseTheme';
-import InviteButton
-    from '../../../invite/components/add-people-dialog/native/InviteButton';
 import { LargeVideo } from '../../../large-video/components';
 import HeaderNavigationButton
     from '../../../mobile/navigation/components/HeaderNavigationButton';
@@ -64,24 +62,23 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      */
     render() {
         const { _aspectRatio } = this.props;
-        let contentStyles;
+        let contentWrapperStyles;
-        let largeVideoContainerStyles;
         let contentContainerStyles;
+        let largeVideoContainerStyles;
 
         if (_aspectRatio === ASPECT_RATIO_NARROW) {
+            contentWrapperStyles = styles.contentWrapper;
             largeVideoContainerStyles = styles.largeVideoContainer;
             contentContainerStyles = styles.contentContainer;
         } else {
-            contentStyles = styles.contentWide;
+            contentWrapperStyles = styles.contentWrapperWide;
             largeVideoContainerStyles = styles.largeVideoContainerWide;
             contentContainerStyles = styles.contentContainerWide;
         }
 
         return (
             <JitsiScreen
-                safeAreaInsets = { [ 'right' ] }
+                style = { contentWrapperStyles }>
-                style = { styles.contentWrapper }>
-                <View style = { contentStyles }>
                 <View style = { largeVideoContainerStyles }>
                     <LargeVideo />
                 </View>
@@ -89,7 +86,6 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                     { this._renderContent() }
                     { this._renderToolbarButtons() }
                 </View>
-                </View>
             </JitsiScreen>
         );
     }
@@ -137,7 +133,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      */
     _renderJoining() {
         return (
-            <View style = { styles.formWrapper }>
+            <View>
                 <LoadingIndicator
                     color = { BaseTheme.palette.icon01 }
                     style = { styles.loadingIndicator } />
@@ -159,15 +155,11 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
         const { displayName } = this.state;
 
         return (
-            <View style = { styles.formWrapper }>
-                <Text style = { styles.fieldLabel }>
-                    { t('lobby.nameField') }
-                </Text>
             <TextInput
                 onChangeText = { this._onChangeDisplayName }
+                placeholder = { t('lobby.nameField') }
                 style = { styles.field }
                 value = { displayName } />
-            </View>
         );
     }
 
@@ -190,13 +182,11 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
 
         return (
             <View style = { styles.formWrapper }>
-                <Text style = { styles.fieldLabel }>
-                    { this.props.t('lobby.passwordField') }
-                </Text>
                 <TextInput
                     autoCapitalize = 'none'
                     autoCompleteType = 'off'
                     onChangeText = { this._onChangePassword }
+                    placeholder = { t('lobby.passwordField') }
                     secureTextEntry = { true }
                     style = { styles.field }
                     value = { this.state.password } />
@@ -263,8 +253,6 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                     styles = { styles.buttonStylesBorderless } />
                 <VideoMuteButton
                     styles = { styles.buttonStylesBorderless } />
-                <InviteButton
-                    styles = { styles.buttonStylesBorderless } />
             </View>
         );
     }

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

@@ -15,12 +15,12 @@ export default {
 
     buttonStylesBorderless: {
         iconStyle: {
-            backgroundColor: BaseTheme.palette.action02Active,
+            backgroundColor: 'transparent',
             color: BaseTheme.palette.icon01,
             fontSize: 24
         },
         style: {
-            backgroundColor: BaseTheme.palette.action02Active,
+            backgroundColor: 'transparent',
             flexDirection: 'row',
             justifyContent: 'center',
             marginHorizontal: BaseTheme.spacing[3],
@@ -57,24 +57,21 @@ export default {
     },
 
     contentWrapper: {
-        backgroundColor: BaseTheme.palette.ui02,
         flex: 1
     },
 
-    contentWide: {
+    contentWrapperWide: {
-        backgroundColor: BaseTheme.palette.ui02,
         flex: 1,
         flexDirection: 'row'
     },
 
     largeVideoContainer: {
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center',
         minHeight: '50%'
     },
 
     largeVideoContainerWide: {
+        position: 'absolute',
+        marginRight: 'auto',
         height: '100%',
         width: '50%'
     },
@@ -82,12 +79,17 @@ export default {
     contentContainer: {
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        minHeight: '50%'
     },
 
     contentContainerWide: {
         justifyContent: 'center',
-        marginHorizontal: BaseTheme.spacing[2],
+        marginHorizontal: BaseTheme.spacing[6],
+        marginVertical: BaseTheme.spacing[3],
+        height: '100%',
+        left: '50%',
+        position: 'absolute',
         width: '50%'
     },
 
@@ -96,21 +98,13 @@ export default {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: BaseTheme.spacing[4]
+        marginTop: BaseTheme.spacing[3]
     },
 
     toolboxContainerWide: {
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: BaseTheme.spacing[4]
+        marginTop: BaseTheme.spacing[3]
-    },
-
-    dialogTitle: {
-        fontSize: 18,
-        fontWeight: 'bold',
-        margin: 'auto',
-        marginVertical: BaseTheme.spacing[3],
-        textAlign: 'center'
     },
 
     displayNameText: {
@@ -128,14 +122,21 @@ export default {
         fontSize: 16
     },
 
+    formWrapper: {
+        alignSelf: 'stretch',
+        marginTop: 45
+    },
+
     field: {
+        alignSelf: 'stretch',
         backgroundColor: BaseTheme.palette.field02,
         borderColor: SECONDARY_COLOR,
         borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 2,
         height: BaseTheme.spacing[7],
         marginHorizontal: BaseTheme.spacing[3],
-        padding: BaseTheme.spacing[2]
+        padding: BaseTheme.spacing[2],
+        textAlign: 'center'
     },
 
     fieldError: {
@@ -147,28 +148,17 @@ export default {
     fieldLabel: {
         ...BaseTheme.typography.heading6,
         color: BaseTheme.palette.text01,
-        marginVertical: BaseTheme.spacing[4],
         textAlign: 'center'
     },
 
-    formWrapper: {
-        alignSelf: 'stretch'
-    },
-
     standardButtonWrapper: {
         alignSelf: 'stretch',
-        marginHorizontal: BaseTheme.spacing[3]
+        marginHorizontal: 12
-    },
-
-    joiningContainer: {
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center'
     },
 
     joiningMessage: {
         color: BaseTheme.palette.text01,
-        marginBottom: BaseTheme.spacing[2],
+        marginHorizontal: BaseTheme.spacing[3],
         textAlign: 'center'
     },
 
@@ -179,7 +169,7 @@ export default {
     },
 
     loadingIndicator: {
-        marginVertical: BaseTheme.spacing[4]
+        marginBottom: BaseTheme.spacing[4]
     },
 
     participantBox: {