From 70861465e16d2a8d158f9230aa2e6736ce87ba1c Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Thu, 20 Oct 2016 13:43:05 +0300
Subject: [PATCH] Editions in jitsi popover styles

---
 ...ection-info.scss => _connection-info.scss} | 16 +++++
 css/_jitsi_popover.scss                       | 58 +++----------------
 css/_variables.scss                           |  5 --
 css/themes/_light.scss                        |  6 ++
 modules/UI/videolayout/ConnectionIndicator.js | 12 ++--
 5 files changed, 35 insertions(+), 62 deletions(-)
 rename css/{connection-info.scss => _connection-info.scss} (59%)

diff --git a/css/connection-info.scss b/css/_connection-info.scss
similarity index 59%
rename from css/connection-info.scss
rename to css/_connection-info.scss
index 323ad8873..9f097c34b 100644
--- a/css/connection-info.scss
+++ b/css/_connection-info.scss
@@ -23,4 +23,20 @@
     td:nth-child(n-1) {
         padding-left: 5px;
     }
+
+    &__icon {
+        margin-right: 2px;
+    }
+
+    &__download
+    {
+        @extend .connection-info__icon;
+        color: $downloadConnectionIconColor;
+    }
+
+    &__upload
+    {
+        @extend .connection-info__icon;
+        color: $uploadConnectionIconColor;
+    }
 }
diff --git a/css/_jitsi_popover.scss b/css/_jitsi_popover.scss
index 7df8ae868..dcb2e4157 100644
--- a/css/_jitsi_popover.scss
+++ b/css/_jitsi_popover.scss
@@ -19,35 +19,6 @@
     margin-top: -10px;
     margin-bottom: 35px;
 
-    &__title {
-        text-align: left;
-        margin: 0;
-        padding: 0;
-    }
-
-    &__content {
-        padding: em(5) em(10);
-        font-size: em(14);
-        white-space:pre-wrap;
-        text-align: center;
-    }
-
-    &__icon {
-        margin-right: 2px;
-    }
-
-    &__green
-    {
-        @extend .jitsipopover__icon;
-        color: #4abd04;
-    }
-
-    &__orange
-    {
-        @extend .jitsipopover__icon;
-        color: #ffa800;
-    }
-
     &__menu-padding {
         height: 35px;
         width: 100px;
@@ -62,33 +33,18 @@
         margin: 10px auto;
     }
 
-    &__clear {
+    > .arrow {
         position: absolute;
         display: block;
+        left: 50%;
+        bottom: -5px;
+        margin-left: -5px;
         width: 0;
         height: 0;
         border-color: transparent;
-        border-style: solid;
-    }
-
-    > .arrow {
-        border-width: 5px 2.5px 0 2.5px;
-        left: 50%;
-        margin-left: -5px;
-        @extend .jitsipopover__clear;
-        border-bottom-width: 0;
         border-top-color: $popoverBg;
-        bottom: -5px;
-
-
-        &:after {
-            border-width: 5px;
-            content: " ";
-            bottom: 1px;
-            margin-left: -5px;
-            @extend .jitsipopover__clear;
-            border-bottom-width: 0;
-            border-top-color: $popoverBg;
-        }
+        border-style: solid;
+        border-width: 5px;
+        border-bottom-width: 0;
     }
 }
diff --git a/css/_variables.scss b/css/_variables.scss
index 8051438ec..1a6ad3d56 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,8 +1,3 @@
-/**
-* Theme
-*/
-@import 'themes/main';
-
 /**
  * Style variables
  */
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
index 630602d9b..26841d3f5 100644
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -22,6 +22,12 @@ $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
 
+/**
+* Connection indicator
+**/
+$downloadConnectionIconColor: #4abd04;
+$uploadConnectionIconColor: #ffa800;
+
 /**
  * Dialog colors
  **/
diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js
index f9744fa37..f3de53b1e 100644
--- a/modules/UI/videolayout/ConnectionIndicator.js
+++ b/modules/UI/videolayout/ConnectionIndicator.js
@@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () {
         packetLoss = "N/A";
     } else {
 
-        packetLoss = "<span class='jitsipopover__green'>&darr;</span>" +
+        packetLoss = "<span class='connection-info__download'>&darr;</span>" +
             (this.packetLoss.download !== null ?
                 this.packetLoss.download : "N/A") +
-            "% <span class='jitsipopover__orange'>&uarr;</span>" +
+            "% <span class='connection-info__upload'>&uarr;</span>" +
             (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
             "%";
     }
@@ -104,8 +104,8 @@ ConnectionIndicator.prototype.generateText = function () {
                     </span>
                 </td>
                 <td>
-                    <span class='jitsipopover__green'>&darr;</span>${downloadBitrate}
-                    <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
+                    <span class='connection-info__download'>&darr;</span>${downloadBitrate}
+                    <span class='connection-info__upload'>&uarr;</span>${uploadBitrate}
                 </td>
             </tr>
             <tr>
@@ -242,9 +242,9 @@ ConnectionIndicator.prototype.generateText = function () {
             "<span data-i18n='connectionindicator.bandwidth'>" +
             translate("connectionindicator.bandwidth") + "</span>" +
             "</td><td>" +
-            "<span class='jitsipopover__green'>&darr;</span>" +
+            "<span class='connection-info__download'>&darr;</span>" +
             downloadBandwidth +
-            " <span class='jitsipopover__orange'>&uarr;</span>" +
+            " <span class='connection-info__upload'>&uarr;</span>" +
             uploadBandwidth + "</td></tr>";
 
         result += transport + "</table>";