diff --git a/css/_popup_menu.scss b/css/_popup_menu.scss index cd319c0d6..17d1ca9e3 100644 --- a/css/_popup_menu.scss +++ b/css/_popup_menu.scss @@ -5,15 +5,15 @@ .popupmenu__contents { .popupmenu__volume-slider { &::-webkit-slider-runnable-track { - background-color: $popupSliderColor; + background-color: #246FE5; } &::-moz-range-track { - background-color: $popupSliderColor; + background-color: #246FE5; } &::-ms-fill-lower { - background-color: $popupSliderColor; + background-color: #246FE5; } } } diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 1bda440c4..2606648f8 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -65,7 +65,6 @@ $errorColor: #c61600; // Popover colors $popoverFontColor: #ffffff !important; -$popupSliderColor: #0376da; // Toolbar $toolbarBackground: rgba(0, 0, 0, 0.5); diff --git a/react/features/base/ui/components/web/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx index 47666191f..44f07f692 100644 --- a/react/features/base/ui/components/web/ContextMenu.tsx +++ b/react/features/base/ui/components/web/ContextMenu.tsx @@ -108,7 +108,7 @@ const useStyles = makeStyles()(theme => { 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)', + boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)', color: theme.palette.text01, ...withPixelLineHeight(theme.typography.bodyShortRegular), marginTop: `${(participantsPaneTheme.panePadding * 2) + theme.typography.bodyShortRegular.fontSize}px`, diff --git a/react/features/base/ui/components/web/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx index 14a86225b..fd78ab883 100644 --- a/react/features/base/ui/components/web/ContextMenuItem.tsx +++ b/react/features/base/ui/components/web/ContextMenuItem.tsx @@ -90,6 +90,10 @@ const useStyles = makeStyles()(theme => { '&:active': { backgroundColor: theme.palette.ui03 + }, + + '&:focus': { + boxShadow: `inset 0 0 0 2px ${theme.palette.action01Hover}` } }, @@ -154,7 +158,7 @@ const ContextMenuItem = ({ className = { styles.contextMenuItemIcon } size = { 20 } src = { icon } />} - {text} + {text} ); }; diff --git a/react/features/base/ui/components/web/ContextMenuItemGroup.tsx b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx index c6a62b567..6e54ee6d7 100644 --- a/react/features/base/ui/components/web/ContextMenuItemGroup.tsx +++ b/react/features/base/ui/components/web/ContextMenuItemGroup.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles()(theme => { }, '& + &:not(:empty)': { - borderTop: `1px solid ${theme.palette.ui04}` + borderTop: `1px solid ${theme.palette.ui03}` }, '&:first-of-type': { diff --git a/react/features/participants-pane/components/web/FooterContextMenu.tsx b/react/features/participants-pane/components/web/FooterContextMenu.tsx index 297e91603..7965782a6 100644 --- a/react/features/participants-pane/components/web/FooterContextMenu.tsx +++ b/react/features/participants-pane/components/web/FooterContextMenu.tsx @@ -25,6 +25,7 @@ import { getParticipantCount, isEveryoneModerator } from '../../../base/participants/functions'; +import { withPixelLineHeight } from '../../../base/styles/functions.web'; import ContextMenu from '../../../base/ui/components/web/ContextMenu'; import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup'; import { isInBreakoutRoom } from '../../../breakout-rooms/functions'; @@ -45,6 +46,7 @@ const useStyles = makeStyles()(theme => { }, text: { + ...withPixelLineHeight(theme.typography.bodyShortRegular), color: theme.palette.text02, padding: '10px 16px', height: '40px', diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index 818ae05e8..9fc11f7bb 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/react/features/toolbox/components/web/Toolbox.tsx @@ -358,7 +358,8 @@ const styles = () => { right: 'auto', margin: 0, marginBottom: '8px', - maxHeight: 'calc(100vh - 100px)' + maxHeight: 'calc(100vh - 100px)', + width: '240px' }, hangupMenu: { diff --git a/react/features/video-menu/components/web/VolumeSlider.tsx b/react/features/video-menu/components/web/VolumeSlider.tsx index 3e685af28..0464c1e0a 100644 --- a/react/features/video-menu/components/web/VolumeSlider.tsx +++ b/react/features/video-menu/components/web/VolumeSlider.tsx @@ -54,23 +54,22 @@ const styles = (theme: Theme) => { cursor: 'pointer', display: 'flex', alignItems: 'center', - padding: '0 5px', + padding: '10px 16px', '&:hover': { - backgroundColor: theme.palette.ui04 + backgroundColor: theme.palette.ui02 } }, icon: { minWidth: '20px', - padding: '5px', + marginRight: '16px', position: 'relative' as const }, sliderContainer: { position: 'relative' as const, - width: '100%', - paddingRight: '5px' + width: '100%' }, slider: {