fix(toolbar): make darker for better text contrast (#2667)

* fix(toolbar): make darker for better text contrast

* squash: borrow some atlaskit colors

css/_chat.scss

@@ -62,6 +62,23 @@
 .localuser {
     color: #087dba;
 }
+.use-new-toolbox {
+    .chatmessage {
+        color: white;
+    }
+
+    .localuser {
+        color: #4C9AFF;
+    }
+
+    .remoteuser {
+        color: #B8C7E0;
+    }
+
+    #usermsg {
+        color: white;
+    }
+}
 
 .errorMessage {
     color: red;

css/_side_toolbar_container.scss

@@ -2,7 +2,7 @@
  * Toolbar side panel main container element.
  */
 .use-new-toolbox #sideToolbarContainer {
-    background-color: rgba(40, 52, 71, 0.5);
+    background-color: $newToolbarBackgroundColor;
 
     /**
      * Make the sidebar flush with the top of the toolbar. Take the size of

css/_toolbars.scss

@@ -265,7 +265,7 @@
  * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
  */
 .new-toolbox {
-    background-color: rgba(40, 52, 71, 0.5);
+    background-color: $newToolbarBackgroundColor;
     bottom: calc((#{$newToolbarSize} * 2) * -1);
     box-sizing: border-box;
     display: flex;
@@ -316,15 +316,15 @@
     }
 
     i:hover {
-        background-color: rgba(40, 52, 71, 0.7);
+        background-color: $newToolbarButtonHoverColor;
     }
 
     i.toggled {
-        background: rgba(40, 52, 71, 1);
+        background: $newToolbarButtonToggleColor;
     }
 
     i.toggled:hover {
-        background-color: rgba(40, 52, 71, 1);
+        background-color: $newToolbarButtonHoverColor;
     }
 
     i.disabled {
@@ -422,7 +422,7 @@
 }
 
 .filmstrip-toolbox {
-    background-color: rgba(40, 52, 71, 0.5);
+    background-color: $newToolbarBackgroundColor;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -438,15 +438,15 @@
     }
 
     i:hover {
-        background-color: rgba(40, 52, 71, 0.7);
+        background-color: $newToolbarButtonHoverColor;
     }
 
     i.toggled {
-        background: rgba(40, 52, 71, 1);
+        background: $newToolbarButtonToggleColor;
     }
 
     i.toggled:hover {
-        background-color: rgba(40, 52, 71, 1);
+        background-color: $newToolbarButtonHoverColor;
     }
 
     .icon-hangup {

css/_variables.scss

@@ -36,8 +36,11 @@ $alwaysOnTopToolbarFontSize: 1em;
 $alwaysOnTopToolbarSize: 30px;
 $defaultToolbarSize: 50px;
 $defaultFilmStripOnlyToolbarSize: 37px;
-$newToolbarSize: 50px;
+$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
+$newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
+$newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
 $newToolbarFontSize: 1.9em;
+$newToolbarSize: 50px;
 $secToolbarFontSize: 1.9em;
 $secToolbarLineHeight: 45px;
 $toolbarAvatarPadding: 10px;