fix(moderation) fix ui styles for advanced moderation context menu (#9758)
This commit is contained in:
parent
ddbf334930
commit
8e4a22bdbf
|
@ -21,7 +21,8 @@ import { MuteEveryonesVideoDialog } from '../../video-menu/components';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ContextMenu,
|
ContextMenu,
|
||||||
ContextMenuItem
|
ContextMenuItem,
|
||||||
|
ContextMenuItemGroup
|
||||||
} from './web/styled';
|
} from './web/styled';
|
||||||
|
|
||||||
const useStyles = makeStyles(() => {
|
const useStyles = makeStyles(() => {
|
||||||
|
@ -33,11 +34,11 @@ const useStyles = makeStyles(() => {
|
||||||
right: 0,
|
right: 0,
|
||||||
top: '-8px',
|
top: '-8px',
|
||||||
transform: 'translateY(-100%)',
|
transform: 'translateY(-100%)',
|
||||||
width: '238px'
|
width: '283px'
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
marginLeft: '52px',
|
color: '#C2C2C2',
|
||||||
lineHeight: '40px'
|
padding: '10px 16px 10px 52px'
|
||||||
},
|
},
|
||||||
paddedAction: {
|
paddedAction: {
|
||||||
marginLeft: '36px;'
|
marginLeft: '36px;'
|
||||||
|
@ -74,17 +75,18 @@ export const FooterContextMenu = ({ onMouseLeave }: Props) => {
|
||||||
<ContextMenu
|
<ContextMenu
|
||||||
className = { classes.contextMenu }
|
className = { classes.contextMenu }
|
||||||
onMouseLeave = { onMouseLeave }>
|
onMouseLeave = { onMouseLeave }>
|
||||||
<ContextMenuItem
|
<ContextMenuItemGroup>
|
||||||
id = 'participants-pane-context-menu-stop-video'
|
<ContextMenuItem
|
||||||
onClick = { muteAllVideo }>
|
id = 'participants-pane-context-menu-stop-video'
|
||||||
<Icon
|
onClick = { muteAllVideo }>
|
||||||
size = { 20 }
|
<Icon
|
||||||
src = { IconVideoOff } />
|
size = { 20 }
|
||||||
<span>{ t('participantsPane.actions.stopEveryonesVideo') }</span>
|
src = { IconVideoOff } />
|
||||||
</ContextMenuItem>
|
<span>{ t('participantsPane.actions.stopEveryonesVideo') }</span>
|
||||||
|
</ContextMenuItem>
|
||||||
|
</ContextMenuItemGroup>
|
||||||
{ isModerationSupported && !allModerators ? (
|
{ isModerationSupported && !allModerators ? (
|
||||||
<>
|
<ContextMenuItemGroup>
|
||||||
<div className = { classes.text }>
|
<div className = { classes.text }>
|
||||||
{t('participantsPane.actions.allow')}
|
{t('participantsPane.actions.allow')}
|
||||||
</div>
|
</div>
|
||||||
|
@ -106,7 +108,7 @@ export const FooterContextMenu = ({ onMouseLeave }: Props) => {
|
||||||
<span>{ t('participantsPane.actions.startModeration') }</span>
|
<span>{ t('participantsPane.actions.startModeration') }</span>
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
)}
|
)}
|
||||||
</>
|
</ContextMenuItemGroup>
|
||||||
) : undefined
|
) : undefined
|
||||||
}
|
}
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
|
|
|
@ -99,7 +99,7 @@ export const ContextMenuItem = styled.div`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
padding: 8px 16px;
|
padding: 10px 16px;
|
||||||
|
|
||||||
& > *:not(:last-child) {
|
& > *:not(:last-child) {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
|
|
Loading…
Reference in New Issue