From a594aac0783284a50eef3b959c488f953073bf73 Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Fri, 3 Feb 2023 13:30:38 +0200
Subject: [PATCH] fix(toolbar) Fix styles (#12863)

---
 css/_settings-button.scss                     | 12 +++++------
 css/_toolbars.scss                            | 20 +++++++++++++------
 css/_variables.scss                           |  2 --
 react/features/base/ui/constants.web.ts       | 18 ++++++++++++++---
 .../components/web/ParticipantsCounter.tsx    |  4 ++--
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/css/_settings-button.scss b/css/_settings-button.scss
index 3ef42c57b..1ba1ed68e 100644
--- a/css/_settings-button.scss
+++ b/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;
     }
 
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 47ce8baae..18d8314e7 100644
--- a/css/_toolbars.scss
+++ b/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;
         }
     }
 
diff --git a/css/_variables.scss b/css/_variables.scss
index aeb6e0cb4..dfe48669b 100644
--- a/css/_variables.scss
+++ b/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.
diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts
index 28181ce60..8af0a6eb4 100644
--- a/react/features/base/ui/constants.web.ts
+++ b/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
+                }
+            }
         }
     };
 };
diff --git a/react/features/participants-pane/components/web/ParticipantsCounter.tsx b/react/features/participants-pane/components/web/ParticipantsCounter.tsx
index 4c433a4f5..c9a8c3a55 100644
--- a/react/features/participants-pane/components/web/ParticipantsCounter.tsx
+++ b/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'
         }
     };
 });