From 88be44b47285670ce731ef9092c4fda00616919c Mon Sep 17 00:00:00 2001
From: Maxim Voloshin <mvoloshin@atlassian.com>
Date: Wed, 19 Oct 2016 15:31:13 +0300
Subject: [PATCH 1/2] Relocated "HD" label

---
 css/_variables.scss           |  2 ++
 css/_videolayout_default.scss | 24 ++++++++++++++++--------
 index.html                    |  2 +-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/css/_variables.scss b/css/_variables.scss
index 0c8a54d33..b923e3745 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -46,6 +46,8 @@ $dominantSpeakerBg: #165ecc;
 $raiseHandBg: #D6D61E;
 $audioLevelBg: #44A5FF;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
+$videoStateIndicatorColor: $defaultColor;
+$videoStateIndicatorBackground: $tooltipBg;
 
 /**
  * Feedback Modal
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 71879a7a8..8f4f59984 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -546,16 +546,24 @@
                     0px 0px 1px rgba(0,0,0,0.3);
 }
 
+.video-state-indicator {
+    background: $videoStateIndicatorBackground;
+    color: $videoStateIndicatorColor;
+    font-size: 13px;
+    line-height: 1.4;
+    text-align: center;
+    display: block;
+    min-width: 37px;
+    padding: 10px 0;
+    border-radius: 50%;
+}
+
 #videoResolutionLabel {
     display: none;
     position: absolute;
-    top: 5px;
-    right: 5px;
-    background: rgba(0,0,0,.5);
-    padding: 10px;
-    color: rgba(255,255,255,.5);
+    top: 30px;
+    right: 30px;
     z-index: 1011;
-    border-radius: 50%;
 }
 
 .centeredVideoLabel {
@@ -580,8 +588,8 @@
 }
 
 .moveToCorner {
-    top: 5px;
-    right: 50px; /*leave free space for the HD label*/
+    top: 30px;
+    right: 80px; /*leave free space for the HD label*/
     margin-right: 0px;
     margin-left: auto;
     background: rgba(0,0,0,.3);
diff --git a/index.html b/index.html
index 1bb4941a5..3d6c68348 100644
--- a/index.html
+++ b/index.html
@@ -240,7 +240,7 @@
                     <video id="largeVideo" muted="true" autoplay></video>
                 </div>
                 <span id="localConnectionMessage"></span>
-                <span id="videoResolutionLabel">HD</span>
+                <span id="videoResolutionLabel" class="video-state-indicator">HD</span>
                 <span id="recordingLabel" class="centeredVideoLabel">
                     <span id="recordingLabelText"></span>
                     <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>

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 2/2] 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>