From c4361ed7daa10f14bdf10ad2c2a0aa383c3f46c9 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Thu, 21 Feb 2019 17:27:51 +0000
Subject: [PATCH] feat(css): configurable Videolayot and overflow menu.

---
 css/_toolbars.scss            | 12 +++++++-----
 css/_variables.scss           |  5 +++++
 css/_videolayout_default.scss |  1 +
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 05d2b2a38..4b330b58b 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -153,15 +153,16 @@
         .overflow-menu {
             font-size: 1.2em;
             list-style-type: none;
+            background-color: $overflowMenuBG;
             /**
              * Undo atlaskit padding by reducing margins.
              */
-            margin: -15px -24px;
+            margin: -16px -24px;
             padding: 4px 0;
 
             .overflow-menu-item {
                 align-items: center;
-                color: #B8C7E0;
+                color: $overflowMenuItemColor;
                 cursor: pointer;
                 display: flex;
                 font-size: 14px;
@@ -175,7 +176,8 @@
                 }
 
                 &:hover {
-                    background: #313D52;
+                    background-color: $overflowMenuItemHoverBG;
+                    color: $overflowMenuItemHoverColor;
                 }
 
                 &.unclickable {
@@ -191,9 +193,9 @@
             }
 
             .beta-tag {
-                background: #B8C7E0;
+                background: $overflowMenuItemColor;
                 border-radius: 2px;
-                color: $newToolbarBackgroundColor;
+                color: $overflowMenuBG;
                 font-size: 11px;
                 font-weight: bold;
                 margin-left: 8px;
diff --git a/css/_variables.scss b/css/_variables.scss
index 97ca22838..f243bdff5 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -43,6 +43,10 @@ $newToolbarHangupFontSize: 32px;
 $newToolbarSize: 40px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
+$overflowMenuBG: initial;
+$overflowMenuItemHoverBG: #313D52;
+$overflowMenuItemHoverColor: #B8C7E0;
+$overflowMenuItemColor: #B8C7E0;
 
 /**
  * Video layout
@@ -59,6 +63,7 @@ $audioLevelShadow: rgba(9, 36, 77, 0.9);
 $videoStateIndicatorColor: $defaultColor;
 $videoStateIndicatorBackground: $toolbarBackground;
 $videoStateIndicatorSize: 40px;
+$remoteVideoMenuIconLeft: initial;
 
 /**
  * Feedback Modal
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 0f6b163ec..19b2abee5 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -412,6 +412,7 @@
 
     >i{
         cursor: hand;
+        margin-left: $remoteVideoMenuIconLeft;
     }
 }
 .remote-video-menu-trigger {