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

This commit is contained in:
Avram Tudor 2021-08-20 11:23:37 +03:00 committed by GitHub
parent ddbf334930
commit 8e4a22bdbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 16 deletions

View File

@ -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>

View File

@ -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;