[RN] Add remote video menu

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

@@ -4,7 +4,11 @@ import React, { Component } from 'react';
 import { Platform } from 'react-native';
 import { connect } from 'react-redux';
 
-import { BottomSheet, hideDialog } from '../../../base/dialog';
+import {
+    BottomSheet,
+    bottomSheetItemStylesCombined,
+    hideDialog
+} from '../../../base/dialog';
 import { AudioRouteButton } from '../../../mobile/audio-mode';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { LiveStreamButton, RecordButton } from '../../../recording';
@@ -13,7 +17,6 @@ import { ClosedCaptionButton } from '../../../subtitles';
 import { TileViewButton } from '../../../video-layout';
 
 import AudioOnlyButton from './AudioOnlyButton';
-import { overflowMenuItemStyles } from './styles';
 import ToggleCameraButton from './ToggleCameraButton';
 
 /**
@@ -63,7 +66,7 @@ class OverflowMenu extends Component<Props> {
         const buttonProps = {
             afterClick: this._onCancel,
             showLabel: true,
-            styles: overflowMenuItemStyles
+            styles: bottomSheetItemStylesCombined
         };
 
         return (

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

@@ -130,51 +130,3 @@ export const toolbarToggledButtonStyles = {
     iconStyle: styles.whiteToolbarButtonIcon,
     style: styles.whiteToolbarButton
 };
-
-// Overflow menu:
-
-/**
- * Styles for the {@code OverflowMenu} items.
- *
- * These have been implemented as per the Material Design guidelines:
- * {@link https://material.io/guidelines/components/bottom-sheets.html}.
- */
-const overflowMenuStyles = createStyleSheet({
-    /**
-     * Container style for a {@code ToolboxItem} rendered in the
-     * {@code OverflowMenu}.
-     */
-    container: {
-        alignItems: 'center',
-        flexDirection: 'row',
-        height: 48
-    },
-
-    /**
-     * Style for the {@code Icon} element in a {@code ToolboxItem} rendered in
-     * the {@code OverflowMenu}.
-     */
-    icon: {
-        color: ColorPalette.white,
-        fontSize: 24
-    },
-
-    /**
-     * Style for the label in a {@code ToolboxItem} rendered in the
-     * {@code OverflowMenu}.
-     */
-    label: {
-        color: ColorPalette.white,
-        flexShrink: 1,
-        fontSize: 16,
-        marginLeft: 32,
-        opacity: 0.90
-    }
-});
-
-export const overflowMenuItemStyles = {
-    iconStyle: overflowMenuStyles.icon,
-    labelStyle: overflowMenuStyles.label,
-    style: overflowMenuStyles.container,
-    underlayColor: ColorPalette.overflowMenuItemUnderlay
-};