fix(toolbox): Fix always on top toolbar

css/_audio-preview.scss

@@ -72,7 +72,7 @@
 
                 &--selected {
                     padding-left: 18px;
-                    background: #131519;
+                    background: $newToolbarBackgroundColor;
                 }
             }
 
@@ -104,7 +104,7 @@
                 padding-left: 48px;
 
                 &--selected {
-                    background: #131519;
+                    background: $newToolbarBackgroundColor;
                     padding-left: 18px;
                 }
             }

css/_mini_toolbox.scss

@@ -23,44 +23,10 @@
     flex-direction: row;
     left: 50%;
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     transform: translateX(-50%);
-
-    .toolbox-button {
-        &:first-child {
-            .toolbox-icon {
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-            }
-        }
-
-        &:nth-child(2) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        &:last-child {
-            .toolbox-icon {
-                border-top-right-radius: 3px;
-                border-bottom-right-radius: 3px;
-            }
-        }
-    }
 }
 
 .filmstrip-toolbox {
     flex-direction: column;
-
-    .toolbox-button {
-        &:nth-child(1) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
-        .toolbox-icon {
-            border-radius: 3px;
-        }
-    }
-}
+}

css/_toolbars.scss

@@ -75,6 +75,7 @@
 
         &> div {
             padding: 0;
+            background: $menuBG;
         }
     }
 }
@@ -104,7 +105,7 @@
 
 
 .toolbox-content-items {
-    background: #131519;
+    background: $newToolbarBackgroundColor;
     box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
     border-radius: 6px;
     margin: 0 auto;

css/_variables.scss

@@ -38,7 +38,7 @@ $presence-idle: rgb(172, 172, 172);
 /**
  * Toolbar
  */
-$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
+$newToolbarBackgroundColor: #131519;
 $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
 $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
 $AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);

react/features/always-on-top/Toolbar.js

@@ -48,7 +48,7 @@ export default class Toolbar extends Component<Props> {
 
         return (
             <div
-                className = { `always-on-top-toolbox ${className}` }
+                className = { `toolbox-content-items always-on-top-toolbox ${className}` }
                 onMouseOut = { onMouseOut }
                 onMouseOver = { onMouseOver }>
                 <AudioMuteButton />

react/features/toolbox/components/web/Toolbox.js

@@ -1134,7 +1134,9 @@ class Toolbox extends Component<Props, State> {
 
         if (this._shouldShowButton('chat')) {
             buttons.has('chat')
-                ? mainMenuAdditionalButtons.push(<div className = 'toolbar-button-with-badge'>
+                ? mainMenuAdditionalButtons.push(<div
+                    className = 'toolbar-button-with-badge'
+                    key = 'chatcontainer'>
                     <ToolbarButton
                         accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
                         icon = { IconChat }