feat(css): configurable Videolayot and overflow menu.

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;

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

css/_videolayout_default.scss

@@ -412,6 +412,7 @@
 
     >i{
         cursor: hand;
+        margin-left: $remoteVideoMenuIconLeft;
     }
 }
 .remote-video-menu-trigger {