Editions in jitsi popover styles

css/connection-info.scss → 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;
+    }
 }

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-top-color: $popoverBg;
         border-style: solid;
-    }
-
-    > .arrow {
-        border-width: 5px 2.5px 0 2.5px;
-        left: 50%;
-        margin-left: -5px;
-        @extend .jitsipopover__clear;
+        border-width: 5px;
         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;
-        }
     }
 }

css/_variables.scss

@@ -1,8 +1,3 @@
-/**
-* Theme
-*/
-@import 'themes/main';
-
 /**
  * Style variables
  */

css/themes/_light.scss

@@ -22,6 +22,12 @@ $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
 
+/**
+* Connection indicator
+**/
+$downloadConnectionIconColor: #4abd04;
+$uploadConnectionIconColor: #ffa800;
+
 /**
  * Dialog colors
  **/

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>";