From bc9f5773fbd336ceb7101a2bfe46259afd201aaf Mon Sep 17 00:00:00 2001
From: Calin Chitu <calinte2002@yahoo.co.uk>
Date: Fri, 30 Jul 2021 16:26:07 +0300
Subject: [PATCH] feat(participants-pane) changed to standard header

---
 lang/main.json                                |  1 +
 .../components/native/ParticipantsPane.js     | 20 ++++------------
 .../components/native/styles.js               | 24 -------------------
 3 files changed, 6 insertions(+), 39 deletions(-)

diff --git a/lang/main.json b/lang/main.json
index 56871ddac..b6cc52a44 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -592,6 +592,7 @@
     },
     "participantsPane": {
         "close": "Close",
+        "header": "Participants",
         "headings": {
             "lobby": "Lobby ({{count}})",
             "participantsList": "Meeting participants ({{count}})",
diff --git a/react/features/participants-pane/components/native/ParticipantsPane.js b/react/features/participants-pane/components/native/ParticipantsPane.js
index 76e53562c..e4735faa5 100644
--- a/react/features/participants-pane/components/native/ParticipantsPane.js
+++ b/react/features/participants-pane/components/native/ParticipantsPane.js
@@ -7,7 +7,7 @@ import { Button } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { openDialog } from '../../../base/dialog';
-import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
+import { Icon, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import {
     getParticipantCount,
@@ -40,21 +40,11 @@ const ParticipantsPane = () => {
 
     return (
         <JitsiModal
-            hideHeaderWithNavigation = { true }
+            headerProps = {{
+                headerLabelKey: 'participantsPane.header'
+            }}
+            onClose = { closePane }
             style = { styles.participantsPane }>
-            <View style = { styles.header }>
-                <Button
-                    /* eslint-disable-next-line react/jsx-no-bind */
-                    icon = { () =>
-                        (<Icon
-                            size = { 20 }
-                            src = { IconClose } />)
-                    }
-                    labelStyle = { styles.closeIcon }
-                    mode = 'contained'
-                    onPress = { closePane }
-                    style = { styles.closeButton } />
-            </View>
             <ScrollView>
                 <LobbyParticipantList />
                 <MeetingParticipantList />
diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js
index 589318ad1..e6fd7f13a 100644
--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@@ -213,19 +213,6 @@ export default {
         marginLeft: BaseTheme.spacing[3]
     },
 
-    header: {
-        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.ui01,
-        top: BaseTheme.spacing[0],
-        display: 'flex',
-        flexDirection: 'row',
-        height: BaseTheme.spacing[10],
-        paddingRight: BaseTheme.spacing[3],
-        position: 'relative',
-        right: BaseTheme.spacing[0],
-        left: BaseTheme.spacing[0]
-    },
-
     footer: {
         alignItems: 'center',
         backgroundColor: BaseTheme.palette.ui01,
@@ -240,17 +227,6 @@ export default {
         left: BaseTheme.spacing[0]
     },
 
-    closeButton: {
-        ...smallButton,
-        marginLeft: 'auto'
-    },
-
-    closeIcon: {
-        ...buttonContent,
-        height: BaseTheme.spacing[5],
-        marginLeft: 'auto'
-    },
-
     inviteButton: {
         backgroundColor: BaseTheme.palette.action01,
         marginTop: BaseTheme.spacing[2],