ref(ui-components) Update ContextMenu and move it to base/ui (#12318)

css/_drawer.scss

@@ -24,8 +24,6 @@
 }
 
 .drawer-menu {
-    background: #242528;
-    border-radius: 16px 16px 0 0;
     overflow-y: auto;
     margin-bottom: env(safe-area-inset-bottom, 0);
     width: 100%;

react/features/base/components/index.js

@@ -1,3 +1 @@
-export { default as ContextMenu } from './context-menu/ContextMenu';
-export { default as ContextMenuItemGroup } from './context-menu/ContextMenuItemGroup';
 export { default as ListItem } from './participants-pane-list/ListItem';

react/features/base/toolbox/components/ToolboxItem.web.js

@@ -2,9 +2,9 @@
 
 import React, { Fragment } from 'react';
 
-import ContextMenuItem from '../../components/context-menu/ContextMenuItem';
 import { Icon } from '../../icons';
 import { Tooltip } from '../../tooltip';
+import ContextMenuItem from '../../ui/components/web/ContextMenuItem';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props as AbstractToolboxItemProps } from './AbstractToolboxItem';

react/features/base/ui/components/web/ContextMenu.tsx

@@ -5,13 +5,13 @@ import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from '
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { getComputedOuterHeight } from '../../../participants-pane/functions';
+import { getComputedOuterHeight } from '../../../../participants-pane/functions';
 // @ts-ignore
-import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
+import { Drawer, JitsiPortal } from '../../../../toolbox/components/web';
 // @ts-ignore
-import { showOverflowDrawer } from '../../../toolbox/functions.web';
-import { withPixelLineHeight } from '../../styles/functions.web';
-import participantsPaneTheme from '../themes/participantsPaneTheme.json';
+import { showOverflowDrawer } from '../../../../toolbox/functions.web';
+import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
+import { withPixelLineHeight } from '../../../styles/functions.web';
 
 type Props = {
 
@@ -86,9 +86,10 @@ const MAX_HEIGHT = 400;
 const useStyles = makeStyles()((theme: Theme) => {
     return {
         contextMenu: {
-            backgroundColor: theme.palette.ui02,
-            borderRadius: `${Number(theme.shape.borderRadius) / 2}px`,
-            boxShadow: '0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25)',
+            backgroundColor: theme.palette.ui01,
+            border: `1px solid ${theme.palette.ui04}`,
+            borderRadius: `${Number(theme.shape.borderRadius)}px`,
+            boxShadow: '0px 4px 25px 4px rgba(20, 20, 20, 0.6)',
             color: theme.palette.text01,
             ...withPixelLineHeight(theme.typography.bodyShortRegular),
             marginTop: `${(participantsPaneTheme.panePadding * 2) + theme.typography.bodyShortRegular.fontSize}px`,
@@ -97,7 +98,8 @@ const useStyles = makeStyles()((theme: Theme) => {
             top: 0,
             zIndex: 2,
             maxHeight: `${MAX_HEIGHT}px`,
-            overflowY: 'auto'
+            overflowY: 'auto',
+            padding: `${theme.spacing(2)} 0`
         },
 
         contextMenuHidden: {
@@ -106,6 +108,7 @@ const useStyles = makeStyles()((theme: Theme) => {
         },
 
         drawer: {
+            paddingTop: '16px',
 
             '& > div': {
                 ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
@@ -113,10 +116,6 @@ const useStyles = makeStyles()((theme: Theme) => {
                 '& svg': {
                     fill: theme.palette.icon01
                 }
-            },
-
-            '& > *:first-child': {
-                paddingTop: '15px!important'
             }
         }
     };

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -4,8 +4,9 @@ import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
-import { showOverflowDrawer } from '../../../toolbox/functions.web';
-import Icon from '../../icons/components/Icon';
+import { showOverflowDrawer } from '../../../../toolbox/functions.web';
+import Icon from '../../../icons/components/Icon';
+import { withPixelLineHeight } from '../../../styles/functions.web';
 
 export type Props = {
 
@@ -86,7 +87,11 @@ const useStyles = makeStyles()((theme: Theme) => {
             },
 
             '&:hover': {
-                backgroundColor: theme.palette.ui04
+                backgroundColor: theme.palette.ui02
+            },
+
+            '&:active': {
+                backgroundColor: theme.palette.ui03
             }
         },
 
@@ -95,13 +100,22 @@ const useStyles = makeStyles()((theme: Theme) => {
         },
 
         contextMenuItemDrawer: {
-            padding: '12px 16px'
+            padding: '13px 16px'
         },
 
         contextMenuItemIcon: {
             '& svg': {
                 fill: theme.palette.icon01
             }
+        },
+
+        text: {
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            color: theme.palette.text01
+        },
+
+        drawerText: {
+            ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
         }
     };
 });
@@ -142,7 +156,7 @@ const ContextMenuItem = ({
                     className = { styles.contextMenuItemIcon }
                     size = { 20 }
                     src = { icon } />}
-            <span className = { textClassName ?? '' }>{text}</span>
+            <span className = { cx(textClassName) }>{text}</span>
         </div>
     );
 };

react/features/base/ui/components/web/ContextMenuItemGroup.tsx

@@ -27,6 +27,14 @@ const useStyles = makeStyles()((theme: Theme) => {
 
             '& + &:not(:empty)': {
                 borderTop: `1px solid ${theme.palette.ui04}`
+            },
+
+            '&:first-of-type': {
+                paddingTop: 0
+            },
+
+            '&:last-of-type': {
+                paddingBottom: 0
             }
         }
     };

react/features/base/ui/hooks/useContextMenu.ts

@@ -1,25 +1,29 @@
-// @flow
-
 import { useCallback, useRef, useState } from 'react';
 
 import { findAncestorByClass } from '../../../participants-pane/functions';
 
-type RaiseContext = {|
+
+type RaiseContext = {
 
     /**
-     * Target elements against which positioning calculations are made.
+     * The entity for which the menu is context menu is raised.
      */
-    offsetTarget?: HTMLElement,
+    entity?: string | Object;
 
     /**
-     * The entity for which the menu is context menu is raised.
+     * Target elements against which positioning calculations are made.
      */
-    entity?: string | Object,
-|};
+    offsetTarget?: HTMLElement | null;
+};
 
 const initialState = Object.freeze({});
 
-const useContextMenu = () => {
+const useContextMenu = (): [(force?: boolean | Object) => void,
+    (entity: string | Object, target: HTMLElement | null) => void,
+    (entity: string | Object) => (e: MouseEvent) => void,
+    () => void,
+    () => void,
+    RaiseContext] => {
     const [ raiseContext, setRaiseContext ] = useState < RaiseContext >(initialState);
     const isMouseOverMenu = useRef(false);
 
@@ -41,7 +45,7 @@ const useContextMenu = () => {
         });
     }, [ raiseContext ]);
 
-    const raiseMenu = useCallback((entity: string | Object, target: EventTarget) => {
+    const raiseMenu = useCallback((entity: string | Object, target: HTMLElement | null) => {
         setRaiseContext({
             entity,
             offsetTarget: findAncestorByClass(target, 'list-item-container')
@@ -55,7 +59,7 @@ const useContextMenu = () => {
         if (raisedEntity && raisedEntity === entity) {
             lowerMenu();
         } else {
-            raiseMenu(entity, e.target);
+            raiseMenu(entity, e.target as HTMLElement);
         }
     }, [ raiseContext ]);
 

react/features/connection-stats/components/ConnectionStatsTable.tsx

@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 
-import ContextMenu from '../../base/components/context-menu/ContextMenu';
 import { isMobileBrowser } from '../../base/environment/utils';
 import { translate } from '../../base/i18n/functions';
+import ContextMenu from '../../base/ui/components/web/ContextMenu';
 
 type DownloadUpload = {
     download: number;

react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js

@@ -5,12 +5,13 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
-import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components';
 import {
     IconClose,
     IconRingGroup
 } from '../../../../../base/icons';
 import { isLocalParticipantModerator } from '../../../../../base/participants';
+import ContextMenu from '../../../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup';
 import { closeBreakoutRoom, moveToRoom, removeBreakoutRoom } from '../../../../../breakout-rooms/actions';
 import { showOverflowDrawer } from '../../../../../toolbox/functions';
 

react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js

@@ -3,9 +3,9 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
-import useContextMenu from '../../../../../base/components/context-menu/useContextMenu';
 import { isLocalParticipantModerator } from '../../../../../base/participants';
 import { equals } from '../../../../../base/redux';
+import useContextMenu from '../../../../../base/ui/hooks/useContextMenu';
 import {
     getBreakoutRooms,
     getBreakoutRoomsConfig,

react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx

@@ -7,9 +7,9 @@ import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { Avatar } from '../../../../../base/avatar';
-// @ts-ignore
-import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
+import ContextMenu from '../../../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup';
 // @ts-ignore
 import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
 // @ts-ignore
@@ -38,17 +38,17 @@ type Props = {
     /**
      * Callback for the mouse entering the component.
      */
-    onEnter: Function;
+    onEnter: () => void;
 
     /**
      * Callback for the mouse leaving the component.
      */
-    onLeave: Function;
+    onLeave: () => void;
 
     /**
      * Callback for making a selection in the menu.
      */
-    onSelect: Function;
+    onSelect: (force?: any) => void;
 };
 
 const useStyles = makeStyles()((theme: Theme) => {

react/features/participants-pane/components/web/FooterContextMenu.tsx

@@ -17,8 +17,6 @@ import {
     isSupported as isAvModerationSupported
     // @ts-ignore
 } from '../../../av-moderation/functions';
-import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 // @ts-ignore
 import { openDialog } from '../../../base/dialog';
 import {
@@ -31,6 +29,8 @@ import {
     getParticipantCount,
     isEveryoneModerator
 } from '../../../base/participants/functions';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 // @ts-ignore
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import {

react/features/participants-pane/components/web/LobbyParticipantItem.tsx

@@ -6,12 +6,12 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons/svg';
 import { hasRaisedHand } from '../../../base/participants/functions';
 import { Participant } from '../../../base/participants/types';
 import Button from '../../../base/ui/components/web/Button';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
 // @ts-ignore
 import { showLobbyChatButton } from '../../../lobby/functions';

react/features/participants-pane/components/web/MeetingParticipants.tsx

@@ -9,8 +9,6 @@ import { makeStyles } from 'tss-react/mui';
 import { IState } from '../../../app/types';
 // @ts-ignore
 import { rejectParticipantAudio } from '../../../av-moderation/actions';
-// @ts-ignore
-import useContextMenu from '../../../base/components/context-menu/useContextMenu';
 import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
 // @ts-ignore
 import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
@@ -19,6 +17,7 @@ import { getParticipantById } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Input from '../../../base/ui/components/web/Input';
+import useContextMenu from '../../../base/ui/hooks/useContextMenu';
 import { normalizeAccents } from '../../../base/util/strings.web';
 // @ts-ignore
 import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';

react/features/toolbox/components/web/Drawer.tsx

@@ -31,8 +31,9 @@ type Props = {
 const useStyles = makeStyles()((theme: Theme) => {
     return {
         drawer: {
-            backgroundColor: theme.palette.ui02,
-            maxHeight: `calc(${DRAWER_MAX_HEIGHT})`
+            backgroundColor: theme.palette.ui01,
+            maxHeight: `calc(${DRAWER_MAX_HEIGHT})`,
+            borderRadius: '24px 24px 0 0'
         }
     };
 });

react/features/toolbox/components/web/Toolbox.tsx

@@ -9,8 +9,6 @@ import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardsh
 import { ACTION_SHORTCUT_TRIGGERED, createShortcutEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { IState } from '../../../app/types';
-import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 // @ts-ignore
 import { getMultipleVideoSendingSupportFeatureFlag, getToolbarButtons } from '../../../base/config';
 // @ts-ignore
@@ -30,6 +28,8 @@ import {
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { getLocalVideoTrack } from '../../../base/tracks';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 // @ts-ignore
 import { toggleChat } from '../../../chat';
 // @ts-ignore

react/features/video-menu/components/web/AskToUnmuteButton.js

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { approveParticipant } from '../../../av-moderation/actions';
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { IconMicrophoneEmpty } from '../../../base/icons';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 
 type Props = {
 

react/features/video-menu/components/web/ConnectionStatusButton.js

@@ -1,10 +1,10 @@
 // @flow
 import React, { useCallback } from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconInfo } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import { renderConnectionStatus } from '../../actions.web';
 
 type Props = {

react/features/video-menu/components/web/FakeParticipantContextMenu.tsx

@@ -8,10 +8,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import TogglePinToStageButton from '../../../../features/video-menu/components/web/TogglePinToStageButton';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
-import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { IconShareVideo } from '../../../base/icons/svg';
 import { Participant } from '../../../base/participants/types';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 // @ts-ignore
 import { stopSharedVideo } from '../../../shared-video/actions.any';
 // @ts-ignore

react/features/video-menu/components/web/FlipLocalVideoButton.js

@@ -2,10 +2,10 @@
 
 import React, { PureComponent } from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
 import { updateSettings } from '../../../base/settings';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 
 /**
  * The type of the React {@code Component} props of {@link FlipLocalVideoButton}.

react/features/video-menu/components/web/GrantModeratorButton.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconCrown } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import AbstractGrantModeratorButton, {
     type Props,
     _mapStateToProps

react/features/video-menu/components/web/HideSelfViewVideoButton.js

@@ -2,10 +2,10 @@
 
 import React, { PureComponent } from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
 import { getHideSelfView, updateSettings } from '../../../base/settings';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 
 /**
  * The type of the React {@code Component} props of {@link HideSelfViewVideoButton}.

react/features/video-menu/components/web/KickButton.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconCloseCircle } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import AbstractKickButton, {
     type Props
 } from '../AbstractKickButton';

react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx

@@ -5,8 +5,6 @@ import { WithTranslation } from 'react-i18next';
 import { batch } from 'react-redux';
 
 import { IState } from '../../../app/types';
-import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { isMobileBrowser } from '../../../base/environment/utils';
 // @ts-ignore
 import { translate } from '../../../base/i18n';
@@ -22,6 +20,8 @@ import { getHideSelfView } from '../../../base/settings';
 // @ts-ignore
 import { getLocalVideoTrack } from '../../../base/tracks';
 import Button from '../../../base/ui/components/web/Button';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 // @ts-ignore
 import ConnectionIndicatorContent from '../../../connection-indicator/components/web/ConnectionIndicatorContent';
 import { THUMBNAIL_TYPE } from '../../../filmstrip/constants';

react/features/video-menu/components/web/MuteButton.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconMicrophoneEmptySlash } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import AbstractMuteButton, {
     type Props,
     _mapStateToProps

react/features/video-menu/components/web/MuteEveryoneElseButton.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconMuteEveryoneElse } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import AbstractMuteEveryoneElseButton, {
     type Props
 } from '../AbstractMuteEveryoneElseButton';

react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconMuteVideoEveryoneElse } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import AbstractMuteEveryoneElsesVideoButton, {
     type Props
 } from '../AbstractMuteEveryoneElsesVideoButton';

react/features/video-menu/components/web/MuteVideoButton.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconVideoOff } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import AbstractMuteVideoButton, {
     type Props,
     _mapStateToProps

react/features/video-menu/components/web/ParticipantContextMenu.tsx

@@ -11,8 +11,6 @@ import { IState } from '../../../app/types';
 import { isSupported as isAvModerationSupported } from '../../../av-moderation/functions';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
-import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { isIosMobileBrowser, isMobileBrowser } from '../../../base/environment/utils';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import { PARTICIPANT_ROLE } from '../../../base/participants/constants';
@@ -20,6 +18,8 @@ import { getLocalParticipant } from '../../../base/participants/functions';
 import { Participant } from '../../../base/participants/types';
 // @ts-ignore
 import { isParticipantAudioMuted } from '../../../base/tracks';
+import ContextMenu from '../../../base/ui/components/web/ContextMenu';
+import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 // @ts-ignore
 import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
 // @ts-ignore

react/features/video-menu/components/web/PrivateMessageMenuButton.js

@@ -2,10 +2,10 @@
 
 import React, { Component } from 'react';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconMessage } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import { openChat } from '../../../chat/';
 import {
     type Props as AbstractProps,

react/features/video-menu/components/web/RemoteControlButton.js

@@ -6,9 +6,9 @@ import {
     createRemoteVideoMenuButtonEvent,
     sendAnalytics
 } from '../../../analytics';
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconRemoteControlStart, IconRemoteControlStop } from '../../../base/icons';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 
 // TODO: Move these enums into the store after further reactification of the
 // non-react RemoteVideo component.

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx

@@ -129,7 +129,6 @@ const styles = () => {
             position: 'relative' as const,
             marginTop: 0,
             right: 'auto',
-            padding: '0',
             marginRight: '4px',
             marginBottom: '4px'
         }

react/features/video-menu/components/web/SendToRoomButton.js

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { createBreakoutRoomsEvent, sendAnalytics } from '../../../analytics';
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { IconRingGroup } from '../../../base/icons';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import { sendParticipantToRoom } from '../../../breakout-rooms/actions';
 
 type Props = {

react/features/video-menu/components/web/TogglePinToStageButton.js

@@ -4,8 +4,8 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { IconPinParticipant, IconUnpin } from '../../../base/icons';
+import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
 import { togglePinStageParticipant } from '../../../filmstrip/actions.web';
 import { getPinnedActiveParticipants } from '../../../filmstrip/functions.web';