rn,remote-video-menu: make UI consistent with other menus

react/features/remote-video-menu/components/native/RemoteVideoMenu.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { Text, View } from 'react-native';
 
 import { Avatar } from '../../../base/avatar';
@@ -68,7 +68,7 @@ let RemoteVideoMenu_;
 /**
  * Class to implement a popup menu that opens upon long pressing a thumbnail.
  */
-class RemoteVideoMenu extends Component<Props> {
+class RemoteVideoMenu extends PureComponent<Props> {
     /**
      * Constructor of the component.
      *
@@ -78,6 +78,7 @@ class RemoteVideoMenu extends Component<Props> {
         super(props);
 
         this._onCancel = this._onCancel.bind(this);
+        this._renderMenuHeader = this._renderMenuHeader.bind(this);
     }
 
     /**
@@ -94,32 +95,15 @@ class RemoteVideoMenu extends Component<Props> {
             styles: this.props._bottomSheetStyles.buttons
         };
 
-        const buttons = [];
-
-        if (!_disableRemoteMute) {
-            buttons.push(<MuteButton { ...buttonProps } />);
-        }
-
-        buttons.push(<GrantModeratorButton { ...buttonProps } />);
-
-        if (!_disableKick) {
-            buttons.push(<KickButton { ...buttonProps } />);
-        }
-
-        buttons.push(<PinButton { ...buttonProps } />);
-        buttons.push(<PrivateMessageButton { ...buttonProps } />);
-
         return (
-            <BottomSheet onCancel = { this._onCancel }>
+            <BottomSheet
-                <View style = { styles.participantNameContainer }>
+                onCancel = { this._onCancel }
-                    <Avatar
+                renderHeader = { this._renderMenuHeader }>
-                        participantId = { participant.id }
+                { !_disableRemoteMute && <MuteButton { ...buttonProps } /> }
-                        size = { AVATAR_SIZE } />
+                { !_disableKick && <KickButton { ...buttonProps } /> }
-                    <Text style = { styles.participantNameLabel }>
+                <GrantModeratorButton { ...buttonProps } />
-                        { this.props._participantDisplayName }
+                <PinButton { ...buttonProps } />
-                    </Text>
+                <PrivateMessageButton { ...buttonProps } />
-                </View>
-                { buttons }
             </BottomSheet>
         );
     }
@@ -141,6 +125,31 @@ class RemoteVideoMenu extends Component<Props> {
 
         return false;
     }
+
+    _renderMenuHeader: () => React$Element<any>;
+
+    /**
+     * Function to render the menu's header.
+     *
+     * @returns {React$Element}
+     */
+    _renderMenuHeader() {
+        const { _bottomSheetStyles, participant } = this.props;
+
+        return (
+            <View
+                style = { [
+                    _bottomSheetStyles.sheet,
+                    styles.participantNameContainer ] }>
+                <Avatar
+                    participantId = { participant.id }
+                    size = { AVATAR_SIZE } />
+                <Text style = { styles.participantNameLabel }>
+                    { this.props._participantDisplayName }
+                </Text>
+            </View>
+        );
+    }
 }
 
 /**

react/features/remote-video-menu/components/native/styles.js

@@ -10,10 +10,13 @@ import { ColorPalette, createStyleSheet } from '../../../base/styles';
 export default createStyleSheet({
     participantNameContainer: {
         alignItems: 'center',
-        borderBottomColor: ColorPalette.darkGrey,
+        borderBottomColor: ColorPalette.lightGrey,
         borderBottomWidth: 1,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
         flexDirection: 'row',
-        height: MD_ITEM_HEIGHT
+        height: MD_ITEM_HEIGHT,
+        paddingLeft: MD_ITEM_MARGIN_PADDING
     },
 
     participantNameLabel: {