fix(context-menu) Minor style fixes (#12874)

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

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

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`,

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 } />}
-            <span className = { cx(textClassName) }>{text}</span>
+            <span className = { cx(styles.text, textClassName) }>{text}</span>
         </div>
     );
 };

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

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',

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

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