From 8bf69d30b7efa615f7a61b279bc7cb7eddae4ca8 Mon Sep 17 00:00:00 2001
From: virtuacoplenny <leonard.h.kim@gmail.com>
Date: Tue, 27 Mar 2018 15:30:04 -0700
Subject: [PATCH] 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                   | 17 +++++++++++++++++
 css/_side_toolbar_container.scss |  2 +-
 css/_toolbars.scss               | 16 ++++++++--------
 css/_variables.scss              |  5 ++++-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/css/_chat.scss b/css/_chat.scss
index ade29ecd1..03defc1c2 100644
--- a/css/_chat.scss
+++ b/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;
diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss
index 3b0c161ce..f709f8424 100644
--- a/css/_side_toolbar_container.scss
+++ b/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
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index bace72e91..9aadd0771 100644
--- a/css/_toolbars.scss
+++ b/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 {
diff --git a/css/_variables.scss b/css/_variables.scss
index 6464b0b42..4c809634a 100644
--- a/css/_variables.scss
+++ b/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;