From 48a6472b3bbb1879ea9941db4d43a2a39eeb5dc1 Mon Sep 17 00:00:00 2001
From: Calinteodor <calin.chitu@8x8.com>
Date: Fri, 25 Nov 2022 13:59:45 +0200
Subject: [PATCH] feat(lobby/prejoin/native): style updates (#12615)

feat(lobby/prejoin/native): style updates (#12615)
---
 lang/main.json                                |   1 -
 .../components/native/Conference.js           |   2 +-
 .../native/KnockingParticipantList.js         | 104 ++++-----
 .../lobby/components/native/LobbyScreen.js    |  96 ++++----
 .../lobby/components/native/styles.js         | 216 ++++--------------
 .../old-client-notification/functions.ts      |   1 +
 .../native/BreakoutRoomParticipantItem.js     |   1 -
 .../components/native/LobbyParticipantItem.js |  29 ++-
 .../components/native/LobbyParticipantList.js |   4 +-
 .../native/MeetingParticipantItem.js          |   5 -
 .../components/native/ParticipantItem.js      |  12 +-
 .../components/native/styles.js               |  28 ++-
 .../prejoin/components/native/Prejoin.tsx     |  50 ++--
 .../prejoin/components/{ => native}/styles.js |   9 +-
 14 files changed, 194 insertions(+), 364 deletions(-)
 rename react/features/prejoin/components/{ => native}/styles.js (93%)

diff --git a/lang/main.json b/lang/main.json
index eea77a9731..300040a145 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -563,7 +563,6 @@
     "lobby": {
         "admit": "Admit",
         "admitAll": "Admit all",
-        "allow": "Allow",
         "backToKnockModeButton": "Ask to join",
         "chat": "Chat",
         "dialogTitle": "Lobby mode",
diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js
index 363f72c9f0..15f01fc644 100644
--- a/react/features/conference/components/native/Conference.js
+++ b/react/features/conference/components/native/Conference.js
@@ -462,7 +462,7 @@ class Conference extends AbstractConference<Props, State> {
                         {/* eslint-disable-next-line react/jsx-no-bind */}
                         <AlwaysOnLabels createOnPress = { this._createOnPress } />
                     </View>
-                    {this._renderNotificationsContainer()}
+                    { this._renderNotificationsContainer() }
                     <KnockingParticipantList />
                 </SafeAreaView>
 
diff --git a/react/features/lobby/components/native/KnockingParticipantList.js b/react/features/lobby/components/native/KnockingParticipantList.js
index e8c9aadb88..28f8edd8ee 100644
--- a/react/features/lobby/components/native/KnockingParticipantList.js
+++ b/react/features/lobby/components/native/KnockingParticipantList.js
@@ -1,21 +1,22 @@
-// @flow
-
 import React, { PureComponent } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 
-import { Avatar } from '../../../base/avatar';
-import { translate } from '../../../base/i18n';
-import { isLocalParticipantModerator } from '../../../base/participants';
+import { translate } from '../../../base/i18n/functions';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux';
-import { handleLobbyChatInitialized } from '../../../chat/actions.any';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { handleLobbyChatInitialized } from '../../../chat/actions.native';
 import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../../mobile/navigation/routes';
-import { setKnockingParticipantApproval } from '../../actions';
-import { HIDDEN_EMAILS } from '../../constants';
+import ParticipantItem
+    from '../../../participants-pane/components/native/ParticipantItem';
+import { setKnockingParticipantApproval } from '../../actions.native';
 import { getKnockingParticipants, getLobbyEnabled, showLobbyChatButton } from '../../functions';
 
 import styles from './styles';
 
+
 /**
  * Props type of the component.
  */
@@ -44,12 +45,7 @@ export type Props = {
     /**
      * The Redux Dispatch function.
      */
-    dispatch: Function,
-
-    /**
-     * Function to be used to translate i18n labels.
-     */
-    t: Function
+    dispatch: Function
 };
 
 /**
@@ -74,68 +70,47 @@ class KnockingParticipantList extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _participants, _visible, _showChatButton, t } = this.props;
+        const { _participants, _visible, _showChatButton } = this.props;
 
         if (!_visible) {
             return null;
         }
 
         return (
-            <ScrollView
-                style = { styles.knockingParticipantList }>
+            <>
                 { _participants.map(p => (
                     <View
                         key = { p.id }
                         style = { styles.knockingParticipantListEntry }>
-                        <Avatar
+                        <ParticipantItem
                             displayName = { p.name }
-                            size = { 48 }
-                            url = { p.loadableAvatarUrl } />
-                        <View style = { styles.knockingParticipantListDetails }>
-                            <Text style = { styles.knockingParticipantListText }>
-                                { p.name }
-                            </Text>
-                            { p.email && !HIDDEN_EMAILS.includes(p.email) && (
-                                <Text style = { styles.knockingParticipantListText }>
-                                    { p.email }
-                                </Text>
-                            ) }
-                        </View>
-                        <TouchableOpacity
-                            onPress = { this._onRespondToParticipant(p.id, true) }
-                            style = { [
-                                styles.knockingParticipantListButton,
-                                styles.knockingParticipantListPrimaryButton
-                            ] }>
-                            <Text style = { styles.knockingParticipantListText }>
-                                { t('lobby.allow') }
-                            </Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            onPress = { this._onRespondToParticipant(p.id, false) }
-                            style = { [
-                                styles.knockingParticipantListButton,
-                                styles.knockingParticipantListSecondaryButton
-                            ] }>
-                            <Text style = { styles.knockingParticipantListText }>
-                                { t('lobby.reject') }
-                            </Text>
-                        </TouchableOpacity>
-                        {_showChatButton(p) ? (
-                            <TouchableOpacity
-                                onPress = { this._onInitializeLobbyChat(p.id) }
-                                style = { [
-                                    styles.knockingParticipantListButton,
-                                    styles.knockingParticipantListSecondaryButton
-                                ] }>
-                                <Text style = { styles.knockingParticipantListText }>
-                                    { t('lobby.chat') }
-                                </Text>
-                            </TouchableOpacity>
-                        ) : null}
+                            isKnockingParticipant = { true }
+                            key = { p.id }
+                            participantID = { p.id }>
+                            <Button
+                                labelKey = { 'lobby.admit' }
+                                onClick = { this._onRespondToParticipant(p.id, true) }
+                                style = { styles.lobbyButtonAdmit }
+                                type = { BUTTON_TYPES.PRIMARY } />
+                            {
+                                _showChatButton(p)
+                                    ? (
+                                        <Button
+                                            labelKey = { 'lobby.chat' }
+                                            onClick = { this._onInitializeLobbyChat(p.id) }
+                                            style = { styles.lobbyButtonChat }
+                                            type = { BUTTON_TYPES.SECONDARY } />
+                                    ) : null
+                            }
+                            <Button
+                                labelKey = { 'lobby.reject' }
+                                onClick = { this._onRespondToParticipant(p.id, false) }
+                                style = { styles.lobbyButtonReject }
+                                type = { BUTTON_TYPES.DESTRUCTIVE } />
+                        </ParticipantItem>
                     </View>
                 )) }
-            </ScrollView>
+            </>
         );
     }
 
@@ -168,6 +143,7 @@ class KnockingParticipantList extends PureComponent<Props> {
             if (this.props._isPollsDisabled) {
                 return navigate(screen.conference.chat);
             }
+
             navigate(screen.conference.chatandpolls.main);
         };
     }
diff --git a/react/features/lobby/components/native/LobbyScreen.js b/react/features/lobby/components/native/LobbyScreen.js
index b4cf73c298..91302baa1a 100644
--- a/react/features/lobby/components/native/LobbyScreen.js
+++ b/react/features/lobby/components/native/LobbyScreen.js
@@ -16,6 +16,7 @@ import { LargeVideo } from '../../../large-video/components';
 import { navigate }
     from '../../../mobile/navigation/components/lobby/LobbyNavigationContainerRef';
 import { screen } from '../../../mobile/navigation/routes';
+import { preJoinStyles } from '../../../prejoin/components/native/styles';
 import AudioMuteButton from '../../../toolbox/components/AudioMuteButton';
 import VideoMuteButton from '../../../toolbox/components/VideoMuteButton';
 import AbstractLobbyScreen, {
@@ -48,32 +49,39 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      * @inheritdoc
      */
     render() {
-        const { _aspectRatio } = this.props;
+        const { _aspectRatio, _roomName } = this.props;
         let contentWrapperStyles;
         let contentContainerStyles;
         let largeVideoContainerStyles;
 
         if (_aspectRatio === ASPECT_RATIO_NARROW) {
-            contentWrapperStyles = styles.contentWrapper;
-            largeVideoContainerStyles = styles.largeVideoContainer;
+            contentWrapperStyles = preJoinStyles.contentWrapper;
+            largeVideoContainerStyles = preJoinStyles.largeVideoContainer;
             contentContainerStyles = styles.contentContainer;
         } else {
-            contentWrapperStyles = styles.contentWrapperWide;
-            largeVideoContainerStyles = styles.largeVideoContainerWide;
-            contentContainerStyles = styles.contentContainerWide;
+            contentWrapperStyles = preJoinStyles.contentWrapperWide;
+            largeVideoContainerStyles = preJoinStyles.largeVideoContainerWide;
+            contentContainerStyles = preJoinStyles.contentContainerWide;
         }
 
         return (
             <JitsiScreen
-                safeAreaInsets = { [ 'left' ] }
+                safeAreaInsets = { [ 'right' ] }
                 style = { contentWrapperStyles }>
                 <BrandingImageBackground />
                 <View style = { largeVideoContainerStyles }>
+                    <View style = { preJoinStyles.displayRoomNameBackdrop }>
+                        <Text
+                            numberOfLines = { 1 }
+                            style = { preJoinStyles.preJoinRoomName }>
+                            { _roomName }
+                        </Text>
+                    </View>
                     <LargeVideo />
                 </View>
                 <View style = { contentContainerStyles }>
-                    { this._renderContent() }
                     { this._renderToolbarButtons() }
+                    { this._renderContent() }
                 </View>
             </JitsiScreen>
         );
@@ -122,15 +130,10 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      */
     _renderJoining() {
         return (
-            <View>
+            <View style = { styles.lobbyWaitingFragmentContainer }>
                 <Text style = { styles.lobbyTitle }>
                     { this.props.t('lobby.joiningTitle') }
                 </Text>
-                <Text
-                    numberOfLines = { 1 }
-                    style = { styles.lobbyRoomName }>
-                    { this.props._roomName }
-                </Text>
                 <LoadingIndicator
                     color = { BaseTheme.palette.icon01 }
                     style = { styles.loadingIndicator } />
@@ -153,7 +156,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
 
         return (
             <Input
-                customStyles = {{ input: styles.customInput }}
+                customStyles = {{ input: preJoinStyles.customInput }}
                 onChange = { this._onChangeDisplayName }
                 placeholder = { t('lobby.nameField') }
                 value = { displayName } />
@@ -178,19 +181,15 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
         const { _passwordJoinFailed, t } = this.props;
 
         return (
-            <View style = { styles.formWrapper }>
-                <Input
-                    autoCapitalize = 'none'
-                    autoCompleteType = 'off'
-                    customStyles = {{ input: styles.customInput }}
-                    onChange = { this._onChangePassword }
-                    placeholder = { t('lobby.passwordField') }
-                    secureTextEntry = { true }
-                    value = { this.state.password } />
-                { _passwordJoinFailed && <Text style = { styles.fieldError }>
-                    { t('lobby.invalidPassword') }
-                </Text> }
-            </View>
+            <Input
+                autoCapitalize = 'none'
+                autoCompleteType = 'off'
+                customStyles = {{ input: styles.customInput }}
+                error = { _passwordJoinFailed }
+                onChange = { this._onChangePassword }
+                placeholder = { t('lobby.passwordField') }
+                secureTextEntry = { true }
+                value = { this.state.password } />
         );
     }
 
@@ -201,20 +200,20 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      */
     _renderPasswordJoinButtons() {
         return (
-            <View style = { styles.passwordJoinButtonsWrapper }>
-                <Button
-                    accessibilityLabel = 'lobby.backToKnockModeButton'
-                    labelKey = 'lobby.backToKnockModeButton'
-                    onClick = { this._onSwitchToKnockMode }
-                    style = { styles.lobbyButton }
-                    type = { BUTTON_TYPES.PRIMARY } />
+            <View style = { styles.passwordJoinButtons }>
                 <Button
                     accessibilityLabel = 'lobby.passwordJoinButton'
                     disabled = { !this.state.password }
-                    labelKey = 'lobby.passwordJoinButton'
+                    labelKey = { 'lobby.passwordJoinButton' }
                     onClick = { this._onJoinWithPassword }
-                    style = { styles.lobbyButton }
+                    style = { preJoinStyles.joinButton }
                     type = { BUTTON_TYPES.PRIMARY } />
+                <Button
+                    accessibilityLabel = 'lobby.backToKnockModeButton'
+                    labelKey = 'lobby.backToKnockModeButton'
+                    onClick = { this._onSwitchToKnockMode }
+                    style = { preJoinStyles.joinButton }
+                    type = { BUTTON_TYPES.TERTIARY } />
             </View>
         );
     }
@@ -225,21 +224,12 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      * @inheritdoc
      */
     _renderToolbarButtons() {
-        const { _aspectRatio } = this.props;
-        let toolboxContainerStyles;
-
-        if (_aspectRatio === ASPECT_RATIO_NARROW) {
-            toolboxContainerStyles = styles.toolboxContainer;
-        } else {
-            toolboxContainerStyles = styles.toolboxContainerWide;
-        }
-
         return (
-            <View style = { toolboxContainerStyles }>
+            <View style = { preJoinStyles.toolboxContainer }>
                 <AudioMuteButton
-                    styles = { styles.buttonStylesBorderless } />
+                    styles = { preJoinStyles.buttonStylesBorderless } />
                 <VideoMuteButton
-                    styles = { styles.buttonStylesBorderless } />
+                    styles = { preJoinStyles.buttonStylesBorderless } />
             </View>
         );
     }
@@ -254,14 +244,14 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
         const { displayName } = this.state;
 
         return (
-            <View style = { styles.standardButtonWrapper }>
+            <View style = { styles.formWrapper }>
                 {
                     _knocking && _isLobbyChatActive
                     && <Button
                         accessibilityLabel = 'toolbar.openChat'
                         labelKey = 'toolbar.openChat'
                         onClick = { this._onNavigateToLobbyChat }
-                        style = { styles.openChatButton }
+                        style = { preJoinStyles.joinButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
                 {
@@ -271,7 +261,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                         disabled = { !displayName }
                         labelKey = 'lobby.knockButton'
                         onClick = { this._onAskToJoin }
-                        style = { styles.lobbyButton }
+                        style = { preJoinStyles.joinButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
                 {
@@ -280,7 +270,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                         accessibilityLabel = 'lobby.enterPasswordButton'
                         labelKey = 'lobby.enterPasswordButton'
                         onClick = { this._onSwitchToPasswordMode }
-                        style = { styles.enterPasswordButton }
+                        style = { preJoinStyles.joinButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
             </View>
diff --git a/react/features/lobby/components/native/styles.js b/react/features/lobby/components/native/styles.js
index a502002290..de75626c16 100644
--- a/react/features/lobby/components/native/styles.js
+++ b/react/features/lobby/components/native/styles.js
@@ -1,32 +1,8 @@
-// @flow
-
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
-const SECONDARY_COLOR = BaseTheme.palette.border04;
-
-const lobbyText = {
-    ...BaseTheme.typography.heading5,
-    color: BaseTheme.palette.text01,
-    textAlign: 'center'
-};
 
 export default {
 
-    buttonStylesBorderless: {
-        iconStyle: {
-            color: BaseTheme.palette.icon01,
-            fontSize: 24
-        },
-        style: {
-            flexDirection: 'row',
-            justifyContent: 'center',
-            marginHorizontal: BaseTheme.spacing[3],
-            height: 24,
-            width: 24
-        },
-        underlayColor: 'transparent'
-    },
-
     lobbyChatWrapper: {
         backgroundColor: BaseTheme.palette.ui01,
         alignItems: 'stretch',
@@ -35,118 +11,32 @@ export default {
         height: '100%'
     },
 
-    lobbyChatHeader: {
-        flexDirection: 'row',
-        padding: 20
-    },
-
-    lobbyChatTitle: {
-        color: BaseTheme.palette.text01,
-        fontSize: 20,
-        fontWeight: 'bold',
-        flexShrink: 1
-    },
-
-    lobbyChatCloseButton: {
-        fontSize: 24,
-        marginLeft: BaseTheme.spacing[3],
-        marginTop: BaseTheme.spacing[1],
-        color: BaseTheme.palette.icon01
-    },
-
-    contentWrapper: {
-        flex: 1
-    },
-
-    contentWrapperWide: {
-        flex: 1,
-        flexDirection: 'row'
-    },
-
-    largeVideoContainer: {
-        minHeight: '50%'
-    },
-
-    largeVideoContainerWide: {
-        height: '100%',
-        marginRight: 'auto',
-        position: 'absolute',
-        width: '50%'
+    passwordJoinButtons: {
+        top: 40
     },
 
     contentContainer: {
-        alignSelf: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        minHeight: '50%',
-        paddingHorizontal: BaseTheme.spacing[3],
-        width: 400
-    },
-
-    contentContainerWide: {
-        alignItems: 'center',
-        height: '100%',
-        justifyContent: 'center',
-        left: '50%',
-        paddingHorizontal: BaseTheme.spacing[3],
-        position: 'absolute',
-        width: '50%'
-    },
-
-    toolboxContainer: {
         alignItems: 'center',
+        backgroundColor: BaseTheme.palette.uiBackground,
+        bottom: 0,
         display: 'flex',
-        flexDirection: 'row',
+        height: 388,
         justifyContent: 'center',
-        marginTop: BaseTheme.spacing[3]
-    },
-
-    toolboxContainerWide: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: BaseTheme.spacing[3]
-    },
-
-    displayNameText: {
-        fontWeight: 'bold',
-        marginVertical: 10
-    },
-
-    editButton: {
-        alignSelf: 'flex-end',
-        paddingHorizontal: 10
-    },
-
-    editIcon: {
-        color: 'black',
-        fontSize: 16
+        position: 'absolute',
+        width: '100%',
+        zIndex: 1
     },
 
     formWrapper: {
-        alignSelf: 'stretch',
-        justifyContent: 'center',
-        marginTop: 38
+        alignItems: 'center',
+        justifyContent: 'center'
     },
 
     customInput: {
-        marginHorizontal: BaseTheme.spacing[3],
-        textAlign: 'center'
-    },
-
-    fieldError: {
-        color: BaseTheme.palette.warning03,
-        marginLeft: BaseTheme.spacing[3],
-        fontSize: 16
-    },
-
-    fieldLabel: {
-        ...BaseTheme.typography.heading6,
-        color: BaseTheme.palette.text01,
-        textAlign: 'center'
-    },
-
-    standardButtonWrapper: {
-        alignSelf: 'stretch'
+        position: 'relative',
+        textAlign: 'center',
+        top: BaseTheme.spacing[6],
+        width: 352
     },
 
     joiningMessage: {
@@ -155,84 +45,58 @@ export default {
         textAlign: 'center'
     },
 
-    passwordJoinButtonsWrapper: {
-        alignItems: 'stretch',
-        alignSelf: 'stretch',
-        marginHorizontal: BaseTheme.spacing[3]
-    },
-
     loadingIndicator: {
         marginBottom: BaseTheme.spacing[3]
     },
 
-    participantBox: {
-        alignItems: 'center',
-        alignSelf: 'stretch',
-        borderColor: SECONDARY_COLOR,
-        borderRadius: 4,
-        borderWidth: 1,
-        marginVertical: 18,
-        paddingVertical: 12
-    },
-
-    lobbyButton: {
-        marginTop: BaseTheme.spacing[3]
-    },
-
-    openChatButton: {
-        marginHorizontal: BaseTheme.spacing[3],
-        marginTop: BaseTheme.spacing[3]
-    },
-
-    enterPasswordButton: {
-        marginHorizontal: BaseTheme.spacing[3],
-        marginTop: BaseTheme.spacing[3]
-    },
-
     // KnockingParticipantList
 
     knockingParticipantList: {
-        alignSelf: 'stretch',
-        backgroundColor: 'rgba(22, 38, 55, 0.8)',
-        flexDirection: 'column'
+        backgroundColor: BaseTheme.palette.ui01
     },
 
-    knockingParticipantListButton: {
-        borderRadius: 4,
-        marginHorizontal: 3,
-        paddingHorizontal: 10,
-        paddingVertical: 5
-    },
 
     knockingParticipantListDetails: {
         flex: 1,
-        marginLeft: 10
+        marginLeft: BaseTheme.spacing[2]
     },
 
     knockingParticipantListEntry: {
         alignItems: 'center',
-        flexDirection: 'row',
-        padding: 10
+        backgroundColor: BaseTheme.palette.ui01,
+        flexDirection: 'row'
+    },
+
+    knockingParticipantListText: {
+        color: 'white'
     },
 
-    knockingParticipantListPrimaryButton: {
-        backgroundColor: 'rgb(3, 118, 218)'
+    lobbyButtonAdmit: {
+        position: 'absolute',
+        right: 184,
+        top: 6
     },
 
-    knockingParticipantListSecondaryButton: {
-        backgroundColor: 'transparent'
+    lobbyButtonChat: {
+        position: 'absolute',
+        right: 104,
+        top: 6
     },
 
-    knockingParticipantListText: {
-        color: 'white'
+    lobbyButtonReject: {
+        position: 'absolute',
+        right: 16,
+        top: 6
     },
 
     lobbyTitle: {
-        ...lobbyText
+        ...BaseTheme.typography.heading5,
+        color: BaseTheme.palette.text01,
+        marginBottom: BaseTheme.spacing[3],
+        textAlign: 'center'
     },
 
-    lobbyRoomName: {
-        ...lobbyText,
-        marginBottom: BaseTheme.spacing[2]
+    lobbyWaitingFragmentContainer: {
+        height: 260
     }
 };
diff --git a/react/features/old-client-notification/functions.ts b/react/features/old-client-notification/functions.ts
index cd6d26f2ac..e1598a27f0 100644
--- a/react/features/old-client-notification/functions.ts
+++ b/react/features/old-client-notification/functions.ts
@@ -10,6 +10,7 @@ export function isOldJitsiMeetElectronApp() {
         return false;
     }
 
+    // @ts-ignore
     const match = navigator.userAgent.match(/(JitsiMeet)\s*\/\s*((\d+)\.[^\s]*)/);
 
     if (!Array.isArray(match) || match.length < 3) {
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.js b/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.js
index 975f886259..950614c289 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.js
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/BreakoutRoomParticipantItem.js
@@ -33,7 +33,6 @@ const BreakoutRoomParticipantItem = ({ item, room }: Props) => {
     return (
         <ParticipantItem
             displayName = { item.displayName || defaultRemoteDisplayName }
-            isKnockingParticipant = { false }
             isModerator = { isParticipantModerator(item) }
             key = { item.jid }
             onPress = { onPress }
diff --git a/react/features/participants-pane/components/native/LobbyParticipantItem.js b/react/features/participants-pane/components/native/LobbyParticipantItem.js
index c4e9fd306f..3655bb4c96 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantItem.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantItem.js
@@ -1,18 +1,14 @@
-// @flow
-
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { hasRaisedHand } from '../../../base/participants';
 import Button from '../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.native';
-import { approveKnockingParticipant } from '../../../lobby/actions.native';
-import { showContextMenuReject } from '../../actions.native';
-import { MEDIA_STATE } from '../../constants';
+import { setKnockingParticipantApproval } from '../../../lobby/actions.native';
 
 import ParticipantItem from './ParticipantItem';
 import styles from './styles';
 
+
 type Props = {
 
     /**
@@ -23,25 +19,26 @@ type Props = {
 
 export const LobbyParticipantItem = ({ participant: p }: Props) => {
     const dispatch = useDispatch();
-    const admit = useCallback(() => dispatch(approveKnockingParticipant(p.id), [ dispatch ]));
-    const openContextMenuReject = useCallback(() => dispatch(showContextMenuReject(p), [ dispatch ]));
+    const admit = useCallback(() => dispatch(setKnockingParticipantApproval(p.id, true), [ dispatch ]));
+    const reject = useCallback(() => dispatch(setKnockingParticipantApproval(p.id, false), [ dispatch ]));
 
     return (
         <ParticipantItem
-            audioMediaState = { MEDIA_STATE.NONE }
             displayName = { p.name }
             isKnockingParticipant = { true }
-            local = { p.local }
-            onPress = { openContextMenuReject }
-            participant = { p }
-            participantID = { p.id }
-            raisedHand = { hasRaisedHand(p) }
-            videoMediaState = { MEDIA_STATE.NONE }>
+            key = { p.id }
+            participantID = { p.id } >
+            <Button
+                accessibilityLabel = 'lobby.reject'
+                labelKey = 'lobby.reject'
+                onClick = { reject }
+                style = { styles.lobbyButtonReject }
+                type = { BUTTON_TYPES.DESTRUCTIVE } />
             <Button
                 accessibilityLabel = 'lobby.admit'
                 labelKey = 'lobby.admit'
                 onClick = { admit }
-                style = { styles.participantActionsButtonAdmit }
+                style = { styles.lobbyButtonAdmit }
                 type = { BUTTON_TYPES.PRIMARY } />
         </ParticipantItem>
     );
diff --git a/react/features/participants-pane/components/native/LobbyParticipantList.js b/react/features/participants-pane/components/native/LobbyParticipantList.js
index c2411dc31a..0f30d23904 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantList.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantList.js
@@ -32,8 +32,8 @@ const LobbyParticipantList = () => {
     const title = (
         <View style = { styles.lobbyListDetails } >
             <Text style = { styles.lobbyListDescription }>
-                {t('participantsPane.headings.waitingLobby',
-                        { count: participants.length })}
+                { t('participantsPane.headings.waitingLobby',
+                        { count: participants.length }) }
             </Text>
             {
                 participants.length > 1 && (
diff --git a/react/features/participants-pane/components/native/MeetingParticipantItem.js b/react/features/participants-pane/components/native/MeetingParticipantItem.js
index 7c9e1249ec..0885cb656c 100644
--- a/react/features/participants-pane/components/native/MeetingParticipantItem.js
+++ b/react/features/participants-pane/components/native/MeetingParticipantItem.js
@@ -1,5 +1,3 @@
-// @flow
-
 import React, { PureComponent } from 'react';
 
 import { translate } from '../../../base/i18n';
@@ -152,7 +150,6 @@ class MeetingParticipantItem extends PureComponent<Props> {
                 audioMediaState = { _audioMediaState }
                 disableModeratorIndicator = { _disableModeratorIndicator }
                 displayName = { _displayName }
-                isKnockingParticipant = { false }
                 isModerator = { _isModerator }
                 local = { _local }
                 onPress = { this._onPress }
@@ -202,5 +199,3 @@ function mapStateToProps(state, ownProps): Object {
 
 
 export default translate(connect(mapStateToProps)(MeetingParticipantItem));
-
-
diff --git a/react/features/participants-pane/components/native/ParticipantItem.js b/react/features/participants-pane/components/native/ParticipantItem.js
index d045f78757..3f37f26623 100644
--- a/react/features/participants-pane/components/native/ParticipantItem.js
+++ b/react/features/participants-pane/components/native/ParticipantItem.js
@@ -77,7 +77,7 @@ function ParticipantItem({
     children,
     displayName,
     disableModeratorIndicator,
-    isKnockingParticipant,
+    isKnockingParticipant = false,
     isModerator,
     local,
     onPress,
@@ -109,11 +109,11 @@ function ParticipantItem({
                             numberOfLines = { 1 }
                             style = { styles.participantName }>
                             { displayName }
-                            {local && ` (${t('chat.you')})` }
+                            { local && ` (${t('chat.you')})` }
                         </Text>
                     </View>
-                    {isModerator && !disableModeratorIndicator
-                        && <Text style = { styles.moderatorLabel }>{t('videothumbnail.moderator')}</Text>
+                    { isModerator && !disableModeratorIndicator
+                        && <Text style = { styles.moderatorLabel }>{ t('videothumbnail.moderator') }</Text>
                     }
                 </View>
                 {
@@ -121,8 +121,8 @@ function ParticipantItem({
                     && <>
                         { raisedHand && <RaisedHandIndicator /> }
                         <View style = { styles.participantStatesContainer }>
-                            <View style = { styles.participantStateVideo }>{VideoStateIcons[videoMediaState]}</View>
-                            <View>{AudioStateIcons[audioMediaState]}</View>
+                            <View style = { styles.participantStateVideo }>{ VideoStateIcons[videoMediaState] }</View>
+                            <View>{ AudioStateIcons[audioMediaState] }</View>
                         </View>
                     </>
                 }
diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js
index 2b3267b3f3..5c28e4e3c7 100644
--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@@ -56,6 +56,12 @@ const contextMenuItem = {
 export default {
 
     participantActionsButtonAdmit: {
+        marginRight: BaseTheme.spacing[3],
+        position: 'absolute',
+        right: 88
+    },
+
+    participantActionsButtonReject: {
         marginRight: BaseTheme.spacing[3],
         position: 'absolute',
         right: 0
@@ -69,8 +75,6 @@ export default {
 
     participantContainer: {
         alignItems: 'center',
-        borderBottomColor: BaseTheme.palette.field01Hover,
-        borderBottomWidth: 2,
         display: 'flex',
         flexDirection: 'row',
         height: BaseTheme.spacing[9],
@@ -81,6 +85,8 @@ export default {
 
     participantContent: {
         alignItems: 'center',
+        borderBottomColor: BaseTheme.palette.field01Hover,
+        borderBottomWidth: 2.4,
         display: 'flex',
         flexDirection: 'row',
         height: '100%',
@@ -145,7 +151,17 @@ export default {
     },
 
     lobbyListContent: {
-        height: '16%'
+        height: '24%'
+    },
+
+    lobbyButtonAdmit: {
+        position: 'absolute',
+        right: 16
+    },
+
+    lobbyButtonReject: {
+        position: 'absolute',
+        right: 104
     },
 
     lobbyListDescription: {
@@ -170,11 +186,11 @@ export default {
     },
 
     meetingListContainer: {
-        height: '58%'
+        height: '56%'
     },
 
     meetingListFullContainer: {
-        height: '82%'
+        height: '80%'
     },
 
     meetingListDescription: {
@@ -183,7 +199,7 @@ export default {
     },
 
     collapsibleRoomContainer: {
-        height: '30%'
+        height: '32%'
     },
 
     participantsPaneContainer: {
diff --git a/react/features/prejoin/components/native/Prejoin.tsx b/react/features/prejoin/components/native/Prejoin.tsx
index fe36418e4a..f7a810b4de 100644
--- a/react/features/prejoin/components/native/Prejoin.tsx
+++ b/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>
     );
diff --git a/react/features/prejoin/components/styles.js b/react/features/prejoin/components/native/styles.js
similarity index 93%
rename from react/features/prejoin/components/styles.js
rename to react/features/prejoin/components/native/styles.js
index 63dc530a0c..49f83f9d93 100644
--- a/react/features/prejoin/components/styles.js
+++ b/react/features/prejoin/components/native/styles.js
@@ -1,7 +1,7 @@
-import BaseTheme from '../../base/ui/components/BaseTheme.native';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 
-export default {
+export const preJoinStyles = {
 
     joinButton: {
         marginTop: BaseTheme.spacing[3],
@@ -78,11 +78,6 @@ export default {
         width: 148
     },
 
-    formWrapper: {
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-
     customInput: {
         textAlign: 'center',
         width: 352