Fixes some styles and variables (#1809)

* Fixes some toolbox/toolbar styles and variables

* [squash] Fixes variable name to fit better its purpose

* [squash] Fixes secondary toolbar variable name

css/_side_toolbar_container.scss

@@ -2,7 +2,7 @@
  * Toolbar side panel main container element.
  */
 #sideToolbarContainer {
-    background-color: rgba(0,0,0,0.8);
+    background-color: $sideToolbarContainerBg;
     height: 100%;
     left: $defaultToolbarSize;
     max-width: $sidebarWidth;

css/_toolbars.scss

@@ -19,74 +19,6 @@
     vertical-align: middle;
 }
 
- /**
-  * Toolbar button styles.
-  */
-.button {
-    color: #FFFFFF;
-    cursor: pointer;
-    z-index: $zindex1;
-    display: inline-block;
-    font-size: $toolbarFontSize !important;
-    height: 50px;
-    line-height: 50px !important;
-    position: relative;
-    text-align: center;
-    top:0px;
-    vertical-align: middle;
-    width: 50px;
-
-    &_hangup {
-        color: $hangupColor;
-        font-size: $hangupFontSize !important;
-    }
-
-    &[disabled] {
-        opacity: 0.5;
-    }
-
-    &:hover, &:active {
-        cursor: pointer;
-        text-decoration: none;
-    }
-
-    &:not(.toggled) {
-        &:hover, &:active {
-            // sum opacity with background layer should give us 0.8
-            background: $toolbarSelectBackground;
-        }
-    }
-
-    &.toggled {
-        background: $toolbarToggleBackground;
-
-        &.icon-camera {
-            @extend .icon-camera-disabled;
-        }
-
-        &.icon-full-screen {
-            @extend .icon-exit-full-screen;
-        }
-
-        &.icon-microphone {
-            @extend .icon-mic-disabled;
-        }
-
-        &.icon-visibility {
-            @extend .icon-visibility-off;
-        }
-    }
-
-    &.unclickable {
-        cursor: default;
-
-        &:hover, &:active, &.selected {
-            background: none;
-            cursor: default;
-        }
-    }
-}
-
 .toolbar-container {
     display: block;
     left:0;
@@ -104,28 +36,85 @@
  * Common toolbar styles.
  */
 .toolbar {
-    background-color: $toolbarBackground;
+    color: $modalTextColor;
     height: 100%;
     pointer-events: auto;
     position: relative;
     z-index: $toolbarZ;
 
     /**
-     * Splitter button in the toolbar.
+     * Toolbar button styles.
      */
-    &__splitter {
-        background: $splitterColor;
+    .button {
+        color: $toolbarButtonColor;
+        cursor: pointer;
+        z-index: $zindex1;
         display: inline-block;
-        height: 50%;
-        margin: 0 $splitterToolbarButtonMargin;
+        font-size: $toolbarFontSize;
+        height: $defaultToolbarSize;
+        line-height: $defaultToolbarSize;
+        position: relative;
+        text-align: center;
+        top:0px;
         vertical-align: middle;
-        width: 1px;
+        width: $defaultToolbarSize;
+
+        &_hangup {
+            color: $hangupColor;
+            font-size: $hangupFontSize;
+        }
+
+        &[disabled] {
+            opacity: 0.5;
+        }
+
+        &:hover, &:active {
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        &:not(.toggled) {
+            &:hover, &:active {
+                // sum opacity with background layer should give us 0.8
+                background: $toolbarSelectBackground;
+            }
+        }
+
+        &.toggled {
+            background: $toolbarToggleBackground;
+
+            &.icon-camera {
+                @extend .icon-camera-disabled;
+            }
+
+            &.icon-full-screen {
+                @extend .icon-exit-full-screen;
+            }
+
+            &.icon-microphone {
+                @extend .icon-mic-disabled;
+            }
+
+            &.icon-visibility {
+                @extend .icon-visibility-off;
+            }
+        }
+
+        &.unclickable {
+            cursor: default;
+
+            &:hover, &:active, &.selected {
+                background: none;
+                cursor: default;
+            }
+        }
     }
 
     /**
      * Primary toolbar styles.
      */
     &_primary {
+        background-color: $toolbarBackground;
         position: absolute;
         left: 50%;
         top: 30px;
@@ -155,6 +144,7 @@
      * Secondary toolbar styles.
      */
     &_secondary {
+        background-color: $secondaryToolbarBg;
         position: absolute;
         align-items: center;
         box-sizing: border-box;
@@ -174,8 +164,14 @@
         width: $defaultToolbarSize;
         -webkit-transform: translateX(-100%);
 
+        .button {
+            font-size: $secToolbarFontSize;
+            height: $secToolbarLineHeight;
+            line-height: $secToolbarLineHeight;
+        }
+
         .button.toggled:not(.icon-raised-hand):not(.button-active) {
-            background: $toolbarSelectBackground;
+            background: $secondaryToolbarBg;
             cursor: pointer;
             text-decoration: none;
 
@@ -257,11 +253,15 @@
     }
 }
 
+#toolbar_button_profile {
+    height: $toolbarAvatarSize + 2*$toolbarAvatarPadding;
+}
+
 a.button>#avatar {
     border-radius: 50%;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    width: 30px;
+    padding-bottom: $toolbarAvatarPadding;
+    padding-top: $toolbarAvatarPadding;
+    width: $toolbarAvatarSize;
 }
 
 #feedbackButton {

css/_variables.scss

@@ -35,15 +35,12 @@ $tooltipBg: rgba(0,0,0, 0.7);
  */
 $defaultToolbarSize: 50px;
 $defaultFilmStripOnlyToolbarSize: 37px;
-$splitterToolbarButtonMargin: 18px;
-$toolbarBackground: rgba(0, 0, 0, 0.5);
-$toolbarBadgeBackground: #165ECC;
-$toolbarBadgeColor: #FFFFFF;
+$secToolbarFontSize: 1.9em;
+$secToolbarLineHeight: 45px;
+$toolbarAvatarPadding: 10px;
+$toolbarAvatarSize: 40px;
 $toolbarFontSize: 1.9em;
-$toolbarSelectBackground: rgba(0, 0, 0, .6);
-$toolbarTitleColor: #FFFFFF;
 $toolbarTitleFontSize: 19px;
-$toolbarToggleBackground: #12499C;
 
 /**
  * Main controls

css/themes/_light.scss

@@ -91,7 +91,18 @@ $popoverFontColor: #ffffff;
 $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
 
 // Toolbar
+$secondaryToolbarBg: rgba(0, 0, 0, 0.5);
+// TOFIX: Once moved to react rename to match the side panel class name.
+$sideToolbarContainerBg: rgba(0, 0, 0, 0.75);
 $splitterColor: #ccc;
+$toolbarBackground: rgba(0, 0, 0, 0.5);
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+$toolbarButtonColor: #FFFFFF;
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarTitleColor: #FFFFFF;
+$toolbarToggleBackground: #12499C;
+
 
 /**
  * Forms