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