bottom-sheet: tweak UI

- re-add thepand icon, shaped like a pill
- round top corners

react/features/toolbox/components/native/OverflowMenu.js

@@ -1,11 +1,12 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { Platform } from 'react-native';
+import { Platform, TouchableOpacity, View } from 'react-native';
 import Collapsible from 'react-native-collapsible';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
+import { IconDragHandle } from '../../../base/icons';
 import { CHAT_ENABLED, IOS_RECORDING_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
@@ -23,6 +24,7 @@ import AudioOnlyButton from './AudioOnlyButton';
 import MoreOptionsButton from './MoreOptionsButton';
 import RaiseHandButton from './RaiseHandButton';
 import ToggleCameraButton from './ToggleCameraButton';
+import styles from './styles';
 
 /**
  * The type of the React {@code Component} props of {@link OverflowMenu}.
@@ -99,6 +101,7 @@ class OverflowMenu extends PureComponent<Props, State> {
         this._onCancel = this._onCancel.bind(this);
         this._onSwipe = this._onSwipe.bind(this);
         this._onToggleMenu = this._onToggleMenu.bind(this);
+        this._renderMenuExpandToggle = this._renderMenuExpandToggle.bind(this);
     }
 
     /**
@@ -126,7 +129,8 @@ class OverflowMenu extends PureComponent<Props, State> {
         return (
             <BottomSheet
                 onCancel = { this._onCancel }
-                onSwipe = { this._onSwipe }>
+                onSwipe = { this._onSwipe }
+                renderHeader = { this._renderMenuExpandToggle }>
                 <AudioRouteButton { ...buttonProps } />
                 <ToggleCameraButton { ...buttonProps } />
                 <AudioOnlyButton { ...buttonProps } />
@@ -153,6 +157,28 @@ class OverflowMenu extends PureComponent<Props, State> {
         );
     }
 
+    _renderMenuExpandToggle: () => React$Element<any>;
+
+    /**
+     * Function to render the menu toggle in the bottom sheet header area.
+     *
+     * @returns {React$Element}
+     */
+    _renderMenuExpandToggle() {
+        return (
+            <View
+                style = { [
+                    this.props._bottomSheetStyles.sheet,
+                    styles.expandMenuContainer
+                ] }>
+                <TouchableOpacity onPress = { this._onToggleMenu }>
+                    { /* $FlowFixMeProps */ }
+                    <IconDragHandle style = { this.props._bottomSheetStyles.expandIcon } />
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
     _onCancel: () => boolean;
 
     /**

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

@@ -55,6 +55,18 @@ const whiteToolbarButtonIcon = {
  */
 const styles = {
 
+    expandMenuContainer: {
+        alignItems: 'center',
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        flexDirection: 'column'
+    },
+
+    sheetGestureRecognizer: {
+        alignItems: 'stretch',
+        flexDirection: 'column'
+    },
+
     /**
      * The style of the toolbar.
      */