fix(rn,lobby) match button style

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

@@ -42,10 +42,34 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      * @inheritdoc
      */
     render() {
+        const { _aspectRatio } = this.props;
+        let contentStyles;
+        let largeVideoContainerStyles;
+        let contentContainerStyles;
+
+        if (_aspectRatio === ASPECT_RATIO_NARROW) {
+            largeVideoContainerStyles = styles.largeVideoContainer;
+            contentContainerStyles = styles.contentContainer;
+        } else {
+            contentStyles = styles.contentWide;
+            largeVideoContainerStyles = styles.largeVideoContainerWide;
+            contentContainerStyles = styles.contentContainerWide;
+        }
+
         return (
-            <>
-                { this._renderLobby() }
-            </>
+            <JitsiScreen
+                safeAreaInsets = { [ 'right' ] }
+                style = { styles.contentWrapper }>
+                <View style = { contentStyles }>
+                    <View style = { largeVideoContainerStyles }>
+                        <LargeVideo />
+                    </View>
+                    <View style = { contentContainerStyles }>
+                        { this._renderContent() }
+                        { this._renderToolbarButtons() }
+                    </View>
+                </View>
+            </JitsiScreen>
         );
     }
 
@@ -73,8 +97,6 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
 
     _renderToolbarButtons: () => React$Element<*>;
 
-    _renderLobby: () => React$Element<*>;
-
     _onNavigateToLobbyChat: () => void;
 
     /**
@@ -87,43 +109,6 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
         navigate(screen.lobby.chat);
     }
 
-    /**
-     * Renders the lobby.
-     *
-     * @inheritdoc
-     */
-    _renderLobby() {
-        const { _aspectRatio } = this.props;
-        let contentStyles;
-        let largeVideoContainerStyles;
-        let contentContainerStyles;
-
-        if (_aspectRatio === ASPECT_RATIO_NARROW) {
-            largeVideoContainerStyles = styles.largeVideoContainer;
-            contentContainerStyles = styles.contentContainer;
-        } else {
-            contentStyles = styles.contentWide;
-            largeVideoContainerStyles = styles.largeVideoContainerWide;
-            contentContainerStyles = styles.contentContainerWide;
-        }
-
-        return (
-            <JitsiScreen
-                safeAreaInsets = { [ 'right' ] }
-                style = { styles.contentWrapper }>
-                <View style = { contentStyles }>
-                    <View style = { largeVideoContainerStyles }>
-                        <LargeVideo />
-                    </View>
-                    <View style = { contentContainerStyles }>
-                        { this._renderContent() }
-                        { this._renderToolbarButtons() }
-                    </View>
-                </View>
-            </JitsiScreen>
-        );
-    }
-
     /**
      * Renders the joining (waiting) fragment of the screen.
      *

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

@@ -7,8 +7,9 @@ const SECONDARY_COLOR = BaseTheme.palette.border04;
 export default {
     button: {
         alignItems: 'center',
-        borderRadius: 4,
+        borderRadius: BaseTheme.shape.borderRadius,
         padding: BaseTheme.spacing[2],
+        height: BaseTheme.spacing[7],
         width: '100%'
     },
 
@@ -70,7 +71,7 @@ export default {
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'center',
-        minHeight: '50%'
+        minHeight: '45%'
     },
 
     largeVideoContainerWide: {
@@ -132,6 +133,7 @@ export default {
         borderColor: SECONDARY_COLOR,
         borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 2,
+        height: BaseTheme.spacing[7],
         marginHorizontal: BaseTheme.spacing[3],
         padding: BaseTheme.spacing[2]
     },
@@ -143,6 +145,7 @@ export default {
     },
 
     fieldLabel: {
+        ...BaseTheme.typography.heading6,
         color: BaseTheme.palette.text01,
         marginVertical: BaseTheme.spacing[4],
         textAlign: 'center'
@@ -200,7 +203,9 @@ export default {
     },
 
     primaryButtonText: {
-        color: BaseTheme.palette.text01
+        ...BaseTheme.typography.labelButtonLarge,
+        color: BaseTheme.palette.text01,
+        lineHeight: 30
     },
 
     primaryText: {
@@ -216,7 +221,9 @@ export default {
     },
 
     cancelButtonText: {
-        color: BaseTheme.palette.text01
+        ...BaseTheme.typography.labelButtonLarge,
+        color: BaseTheme.palette.text01,
+        lineHeight: 30
     },
 
     // KnockingParticipantList