fix(moderation) fix ui styles for advanced moderation context menu (#9758)

react/features/participants-pane/components/FooterContextMenu.js

@@ -21,7 +21,8 @@ import { MuteEveryonesVideoDialog } from '../../video-menu/components';
 
 import {
     ContextMenu,
-    ContextMenuItem
+    ContextMenuItem,
+    ContextMenuItemGroup
 } from './web/styled';
 
 const useStyles = makeStyles(() => {
@@ -33,11 +34,11 @@ const useStyles = makeStyles(() => {
             right: 0,
             top: '-8px',
             transform: 'translateY(-100%)',
-            width: '238px'
+            width: '283px'
         },
         text: {
-            marginLeft: '52px',
-            lineHeight: '40px'
+            color: '#C2C2C2',
+            padding: '10px 16px 10px 52px'
         },
         paddedAction: {
             marginLeft: '36px;'
@@ -74,17 +75,18 @@ export const FooterContextMenu = ({ onMouseLeave }: Props) => {
         <ContextMenu
             className = { classes.contextMenu }
             onMouseLeave = { onMouseLeave }>
-            <ContextMenuItem
-                id = 'participants-pane-context-menu-stop-video'
-                onClick = { muteAllVideo }>
-                <Icon
-                    size = { 20 }
-                    src = { IconVideoOff } />
-                <span>{ t('participantsPane.actions.stopEveryonesVideo') }</span>
-            </ContextMenuItem>
-
+            <ContextMenuItemGroup>
+                <ContextMenuItem
+                    id = 'participants-pane-context-menu-stop-video'
+                    onClick = { muteAllVideo }>
+                    <Icon
+                        size = { 20 }
+                        src = { IconVideoOff } />
+                    <span>{ t('participantsPane.actions.stopEveryonesVideo') }</span>
+                </ContextMenuItem>
+            </ContextMenuItemGroup>
             { isModerationSupported && !allModerators ? (
-                <>
+                <ContextMenuItemGroup>
                     <div className = { classes.text }>
                         {t('participantsPane.actions.allow')}
                     </div>
@@ -106,7 +108,7 @@ export const FooterContextMenu = ({ onMouseLeave }: Props) => {
                             <span>{ t('participantsPane.actions.startModeration') }</span>
                         </ContextMenuItem>
                     )}
-                </>
+                </ContextMenuItemGroup>
             ) : undefined
             }
         </ContextMenu>

react/features/participants-pane/components/web/styled.js

@@ -99,7 +99,7 @@ export const ContextMenuItem = styled.div`
   cursor: pointer;
   display: flex;
   min-height: 40px;
-  padding: 8px 16px;
+  padding: 10px 16px;
 
   & > *:not(:last-child) {
     margin-right: 16px;