feat(participants-pane) hide admit all if less than 2 participants

- Fixed admitMultiple action for mobile
- Added token color for button
- Hide Admit all button if less than 2 knocking participants

react/features/participants-pane/components/native/LobbyParticipantList.js

@@ -3,7 +3,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
-import { Button } from 'react-native-paper';
+import { Button, withTheme } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { admitMultiple } from '../../../lobby/actions.native';
@@ -12,17 +12,25 @@ import { getLobbyState } from '../../../lobby/functions';
 import { LobbyParticipantItem } from './LobbyParticipantItem';
 import styles from './styles';
 
-export const LobbyParticipantList = () => {
+type Props = {
+
+    /**
+     * Theme used for styles.
+     */
+    theme: Object
+};
+
+const LobbyParticipantList = ({ theme }: Props) => {
     const {
         lobbyEnabled,
         knockingParticipants: participants
     } = useSelector(getLobbyState);
-
     const dispatch = useDispatch();
     const admitAll = useCallback(() =>
         dispatch(admitMultiple(participants)),
-        [ dispatch ]);
+        [ dispatch, participants ]);
     const { t } = useTranslation();
+    const { palette } = theme;
 
     if (!lobbyEnabled || !participants.length) {
         return null;
@@ -35,14 +43,17 @@ export const LobbyParticipantList = () => {
                     {t('participantsPane.headings.waitingLobby',
                         { count: participants.length })}
                 </Text>
-                <Button
-                    color = '#3D3D3D'
-                    labelStyle = { styles.admitAllParticipantsActionButtonLabel }
-                    mode = 'text'
-                    onPress = { admitAll }
-                    style = { styles.admitAllParticipantsActionButton }>
-                    {t('lobby.admitAll')}
-                </Button>
+                {
+                    participants.length > 1 && (
+                        <Button
+                            color = { palette.action02 }
+                            labelStyle = { styles.admitAllParticipantsActionButtonLabel }
+                            mode = 'text'
+                            onPress = { admitAll }>
+                            {t('lobby.admitAll')}
+                        </Button>
+                    )
+                }
             </View>
             {
                 participants.map(p => (
@@ -54,3 +65,5 @@ export const LobbyParticipantList = () => {
         </View>
     );
 };
+
+export default withTheme(LobbyParticipantList);

react/features/participants-pane/components/native/ParticipantsPane.js

@@ -18,7 +18,7 @@ import MuteEveryoneDialog
 import { close } from '../../actions.native';
 
 import { ContextMenuMore } from './ContextMenuMore';
-import { LobbyParticipantList } from './LobbyParticipantList';
+import LobbyParticipantList from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
 import styles from './styles';
 

react/features/participants-pane/components/native/styles.js

@@ -116,10 +116,6 @@ export default {
         textTransform: 'capitalize'
     },
 
-    admitAllParticipantsActionButton: {
-        marginLeft: 'auto'
-    },
-
     participantContainer: {
         alignItems: 'center',
         borderBottomColor: BaseTheme.palette.field01Hover,

react/features/participants-pane/components/web/LobbyParticipantList.js

@@ -53,9 +53,13 @@ export const LobbyParticipantList = () => {
             <div className = { classes.heading }>
                 {t('participantsPane.headings.lobby', { count: participants.length })}
             </div>
-            <div
-                className = { classes.link }
-                onClick = { admitAll }>{t('lobby.admitAll')}</div>
+            {
+                participants.length > 1 && (
+                    <div
+                        className = { classes.link }
+                        onClick = { admitAll }>{t('lobby.admitAll')}</div>
+                )
+            }
         </div>
         <div>
             {participants.map(p => (