From d09a8b18964ebb2e7f51548dd68338ffad918e03 Mon Sep 17 00:00:00 2001
From: Maxim Voloshin <mvoloshin@atlassian.com>
Date: Wed, 19 Oct 2016 19:36:10 +0300
Subject: [PATCH] Adjusted styles for "Live Streaming" indicator.

---
 css/_recording.scss           |  2 +-
 css/_toolbars.scss            |  2 +-
 css/_variables.scss           |  3 ++-
 css/_videolayout_default.scss | 46 +++++++++++++----------------------
 index.html                    |  4 +--
 5 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/css/_recording.scss b/css/_recording.scss
index 0f58bb789..aa56227a7 100644
--- a/css/_recording.scss
+++ b/css/_recording.scss
@@ -1,4 +1,4 @@
 .recordingSpinner {
     display: none;
-    vertical-align: text-bottom;
+    vertical-align: top;
 }
\ No newline at end of file
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index f8d000e2f..22ac3f049 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -1,5 +1,5 @@
 .toolbar {
-    background-color: rgba(0,0,0,0.5);
+    background-color: $toolbarBackground;
     position: relative;
     z-index: $toolbarZ;
     height: 100%;
diff --git a/css/_variables.scss b/css/_variables.scss
index b923e3745..8d32abb26 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -27,6 +27,7 @@ $defaultBackground: #474747;
 $tooltipBg: rgba(0,0,0, 0.7);
 
 // Toolbar
+$toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
@@ -47,7 +48,7 @@ $raiseHandBg: #D6D61E;
 $audioLevelBg: #44A5FF;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
 $videoStateIndicatorColor: $defaultColor;
-$videoStateIndicatorBackground: $tooltipBg;
+$videoStateIndicatorBackground: $toolbarBackground;
 
 /**
  * Feedback Modal
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 8f4f59984..5bfc3f5e7 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -550,51 +550,39 @@
     background: $videoStateIndicatorBackground;
     color: $videoStateIndicatorColor;
     font-size: 13px;
-    line-height: 1.4;
+    line-height: 20px;
     text-align: center;
-    display: block;
-    min-width: 37px;
-    padding: 10px 0;
+    min-width: 40px;
+    height: 40px;
+    padding: 10px 5px;
     border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
 }
 
-#videoResolutionLabel {
+#videoResolutionLabel,
+.centeredVideoLabel {
     display: none;
-    position: absolute;
-    top: 30px;
-    right: 30px;
     z-index: 1011;
 }
 
 .centeredVideoLabel {
-    display: none;
-    position: absolute;
     bottom: 45%;
-    top: auto;
-    right: auto;
-    left: auto;
-    line-height: 28px;
-    height: 28px;
-    width: auto;
-    padding: 5px;
-    margin-right: auto;
-    margin-left: auto;
-    background: rgba(0,0,0,.5);
-    color: #FFF;
-    z-index: 1011;
     border-radius: 2px;
     -webkit-transition: all 2s 2s linear;
     transition: all 2s 2s linear;
+
+    &.moveToCorner {
+        bottom: auto;
+    }
 }
 
 .moveToCorner {
+    position: absolute;
     top: 30px;
-    right: 80px; /*leave free space for the HD label*/
-    margin-right: 0px;
-    margin-left: auto;
-    background: rgba(0,0,0,.3);
-    color: rgba(255,255,255,.5);
+    right: 30px;
 }
 
-.hidden {
-}
+.moveToCorner + .moveToCorner {
+    right: 80px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3d6c68348..db8160e88 100644
--- a/index.html
+++ b/index.html
@@ -240,8 +240,8 @@
                     <video id="largeVideo" muted="true" autoplay></video>
                 </div>
                 <span id="localConnectionMessage"></span>
-                <span id="videoResolutionLabel" class="video-state-indicator">HD</span>
-                <span id="recordingLabel" class="centeredVideoLabel">
+                <span id="videoResolutionLabel" class="video-state-indicator moveToCorner">HD</span>
+                <span id="recordingLabel" class="video-state-indicator centeredVideoLabel">
                     <span id="recordingLabelText"></span>
                     <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
                 </span>