diff --git a/css/_drawer.scss b/css/_drawer.scss
index 981826494..00c685aec 100644
--- a/css/_drawer.scss
+++ b/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%;
diff --git a/react/features/base/components/index.js b/react/features/base/components/index.js
index d862ff40d..1460748d9 100644
--- a/react/features/base/components/index.js
+++ b/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';
diff --git a/react/features/base/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js
index d27db0d94..b6c3e4fd3 100644
--- a/react/features/base/toolbox/components/ToolboxItem.web.js
+++ b/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';
diff --git a/react/features/base/components/context-menu/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx
similarity index 87%
rename from react/features/base/components/context-menu/ContextMenu.tsx
rename to react/features/base/ui/components/web/ContextMenu.tsx
index 220a8b1dc..d8fcf92a4 100644
--- a/react/features/base/components/context-menu/ContextMenu.tsx
+++ b/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'
}
}
};
diff --git a/react/features/base/components/context-menu/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx
similarity index 82%
rename from react/features/base/components/context-menu/ContextMenuItem.tsx
rename to react/features/base/ui/components/web/ContextMenuItem.tsx
index bbce8289b..1fef83761 100644
--- a/react/features/base/components/context-menu/ContextMenuItem.tsx
+++ b/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 } />}
- {text}
+ {text}
);
};
diff --git a/react/features/base/components/context-menu/ContextMenuItemGroup.tsx b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx
similarity index 87%
rename from react/features/base/components/context-menu/ContextMenuItemGroup.tsx
rename to react/features/base/ui/components/web/ContextMenuItemGroup.tsx
index fd9e43ea9..9f251ec54 100644
--- a/react/features/base/components/context-menu/ContextMenuItemGroup.tsx
+++ b/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
}
}
};
diff --git a/react/features/base/components/context-menu/useContextMenu.js b/react/features/base/ui/hooks/useContextMenu.ts
similarity index 82%
rename from react/features/base/components/context-menu/useContextMenu.js
rename to react/features/base/ui/hooks/useContextMenu.ts
index 84d7c14e0..a9acb4c62 100644
--- a/react/features/base/components/context-menu/useContextMenu.js
+++ b/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 = {|
- /**
- * Target elements against which positioning calculations are made.
- */
- offsetTarget?: HTMLElement,
+type RaiseContext = {
/**
* The entity for which the menu is context menu is raised.
*/
- entity?: string | Object,
-|};
+ entity?: string | Object;
+
+ /**
+ * Target elements against which positioning calculations are made.
+ */
+ 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 ]);
diff --git a/react/features/connection-stats/components/ConnectionStatsTable.tsx b/react/features/connection-stats/components/ConnectionStatsTable.tsx
index e93c4cb43..0ca1a14a8 100644
--- a/react/features/connection-stats/components/ConnectionStatsTable.tsx
+++ b/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;
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js b/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js
index 73660485c..2671a2d8c 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomContextMenu.js
+++ b/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';
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js b/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js
index 446c9fd3e..99bf16b1a 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js
+++ b/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,
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx
index ef706446e..78c24aa2d 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx
+++ b/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) => {
diff --git a/react/features/participants-pane/components/web/FooterContextMenu.tsx b/react/features/participants-pane/components/web/FooterContextMenu.tsx
index 295f04c82..de2de03a6 100644
--- a/react/features/participants-pane/components/web/FooterContextMenu.tsx
+++ b/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 {
diff --git a/react/features/participants-pane/components/web/LobbyParticipantItem.tsx b/react/features/participants-pane/components/web/LobbyParticipantItem.tsx
index 1441c5b80..e69575efd 100644
--- a/react/features/participants-pane/components/web/LobbyParticipantItem.tsx
+++ b/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';
diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx
index ebd949f01..83a86bcd7 100644
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/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';
diff --git a/react/features/toolbox/components/web/Drawer.tsx b/react/features/toolbox/components/web/Drawer.tsx
index a57bdc466..7959da128 100644
--- a/react/features/toolbox/components/web/Drawer.tsx
+++ b/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'
}
};
});
diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx
index 8c068ab0c..b38b00466 100644
--- a/react/features/toolbox/components/web/Toolbox.tsx
+++ b/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
diff --git a/react/features/video-menu/components/web/AskToUnmuteButton.js b/react/features/video-menu/components/web/AskToUnmuteButton.js
index b119b628e..04a085e0c 100644
--- a/react/features/video-menu/components/web/AskToUnmuteButton.js
+++ b/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 = {
diff --git a/react/features/video-menu/components/web/ConnectionStatusButton.js b/react/features/video-menu/components/web/ConnectionStatusButton.js
index 7f87fa58b..a73889e44 100644
--- a/react/features/video-menu/components/web/ConnectionStatusButton.js
+++ b/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 = {
diff --git a/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx b/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx
index 428f254d9..b2426a590 100644
--- a/react/features/video-menu/components/web/FakeParticipantContextMenu.tsx
+++ b/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
diff --git a/react/features/video-menu/components/web/FlipLocalVideoButton.js b/react/features/video-menu/components/web/FlipLocalVideoButton.js
index e357f5d2f..40406ae51 100644
--- a/react/features/video-menu/components/web/FlipLocalVideoButton.js
+++ b/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}.
diff --git a/react/features/video-menu/components/web/GrantModeratorButton.js b/react/features/video-menu/components/web/GrantModeratorButton.js
index 2a02ee35c..3174c34a6 100644
--- a/react/features/video-menu/components/web/GrantModeratorButton.js
+++ b/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
diff --git a/react/features/video-menu/components/web/HideSelfViewVideoButton.js b/react/features/video-menu/components/web/HideSelfViewVideoButton.js
index 407be980d..b579cba06 100644
--- a/react/features/video-menu/components/web/HideSelfViewVideoButton.js
+++ b/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}.
diff --git a/react/features/video-menu/components/web/KickButton.js b/react/features/video-menu/components/web/KickButton.js
index dbd5c8204..23ea04879 100644
--- a/react/features/video-menu/components/web/KickButton.js
+++ b/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';
diff --git a/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx b/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx
index f991ac318..c52ce112f 100644
--- a/react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx
+++ b/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';
diff --git a/react/features/video-menu/components/web/MuteButton.js b/react/features/video-menu/components/web/MuteButton.js
index 5430d7f48..0c29ff64a 100644
--- a/react/features/video-menu/components/web/MuteButton.js
+++ b/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
diff --git a/react/features/video-menu/components/web/MuteEveryoneElseButton.js b/react/features/video-menu/components/web/MuteEveryoneElseButton.js
index 4b51545b7..83c988e09 100644
--- a/react/features/video-menu/components/web/MuteEveryoneElseButton.js
+++ b/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';
diff --git a/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js b/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js
index 6a264d516..1ec6797be 100644
--- a/react/features/video-menu/components/web/MuteEveryoneElsesVideoButton.js
+++ b/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';
diff --git a/react/features/video-menu/components/web/MuteVideoButton.js b/react/features/video-menu/components/web/MuteVideoButton.js
index ead634025..11150091d 100644
--- a/react/features/video-menu/components/web/MuteVideoButton.js
+++ b/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
diff --git a/react/features/video-menu/components/web/ParticipantContextMenu.tsx b/react/features/video-menu/components/web/ParticipantContextMenu.tsx
index 9a4c79c1d..9743f9f11 100644
--- a/react/features/video-menu/components/web/ParticipantContextMenu.tsx
+++ b/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
diff --git a/react/features/video-menu/components/web/PrivateMessageMenuButton.js b/react/features/video-menu/components/web/PrivateMessageMenuButton.js
index cc7c28df0..518ebfef6 100644
--- a/react/features/video-menu/components/web/PrivateMessageMenuButton.js
+++ b/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,
diff --git a/react/features/video-menu/components/web/RemoteControlButton.js b/react/features/video-menu/components/web/RemoteControlButton.js
index 31c5e4702..8ea2b09e1 100644
--- a/react/features/video-menu/components/web/RemoteControlButton.js
+++ b/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.
diff --git a/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx b/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx
index 344a7510f..331e65041 100644
--- a/react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx
+++ b/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'
}
diff --git a/react/features/video-menu/components/web/SendToRoomButton.js b/react/features/video-menu/components/web/SendToRoomButton.js
index a1f100523..d3b9677a8 100644
--- a/react/features/video-menu/components/web/SendToRoomButton.js
+++ b/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 = {
diff --git a/react/features/video-menu/components/web/TogglePinToStageButton.js b/react/features/video-menu/components/web/TogglePinToStageButton.js
index 59381e9cb..dc954dc4d 100644
--- a/react/features/video-menu/components/web/TogglePinToStageButton.js
+++ b/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';