fix(toolbar) Fix styles (#12863)

css/_settings-button.scss

@@ -30,24 +30,24 @@
     right: -4px;
     top: -3px;
 
-   &:hover {
+    &:hover {
         background: #F2F3F4;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
-        &> svg {
-            fill: #000;
+        & > svg {
+            fill: #040404;
         }
 
         &.settings-button-small-icon--disabled {
             background: #36383C;
 
             &> svg {
-               fill: #929292;
-           }
+                fill: #929292;
+            }
         }
     }
 
-    &> svg {
+    & > svg {
         fill: #fff;
     }
 

css/_toolbars.scss

@@ -120,12 +120,16 @@
     margin: 8px 0;
 }
 
-.hangup-button {
-    background-color: $hangupColor;
+div.hangup-button {
+    background-color: #CB2233;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: $hangupHoverColor;
+            background-color: #E04757;
+        }
+
+        &:active {
+            background-color: #A21B29;
         }
     }
 
@@ -134,12 +138,16 @@
     }
 }
 
-.hangup-menu-button {
-    background-color: $hangupColor;
+div.hangup-menu-button {
+    background-color: #CB2233;
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            background-color: $hangupHoverColor;
+            background-color: #E04757;
+        }
+
+        &:active {
+            background-color: #A21B29;
         }
     }
 

css/_variables.scss

@@ -4,8 +4,6 @@
  * Style variables
  */
 $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$hangupColor:#DD3849;
-$hangupHoverColor: #F25363;
 
 /**
  * Size variables.

react/features/base/ui/constants.web.ts

@@ -228,7 +228,11 @@ export const commonStyles = (theme: Theme) => {
 
             '@media (hover: hover) and (pointer: fine)': {
                 '&:hover': {
-                    background: theme.palette.ui04
+                    backgroundColor: theme.palette.ui04
+                },
+
+                '&:active': {
+                    backgroundColor: theme.palette.ui03
                 }
             },
             [theme.breakpoints.down(320)]: {
@@ -237,7 +241,7 @@ export const commonStyles = (theme: Theme) => {
             },
 
             '&.toggled': {
-                background: theme.palette.ui03
+                backgroundColor: theme.palette.ui03
             },
 
             '&.disabled': {
@@ -265,7 +269,15 @@ export const commonStyles = (theme: Theme) => {
             padding: 6,
             textAlign: 'center' as const,
             pointerEvents: 'all' as const,
-            boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)'
+            boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
+
+            '& > div': {
+                marginRight: theme.spacing(2),
+
+                '&:last-of-type': {
+                    marginRight: 0
+                }
+            }
         }
     };
 };

react/features/participants-pane/components/web/ParticipantsCounter.tsx

@@ -16,8 +16,8 @@ const useStyles = makeStyles()(theme => {
             ...withPixelLineHeight(theme.typography.labelBold),
             pointerEvents: 'none',
             position: 'absolute',
-            right: '-3px',
-            top: '-2px'
+            right: '-4px',
+            top: '-3px'
         }
     };
 });