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: {