updates in connection indicator styles

css/_jitsi_popover.scss

@@ -32,9 +32,8 @@
         text-align: center;
     }
 
-
     &__icon {
-        margin-right: 5px;
+        margin-right: 2px;
     }
 
     &__green
@@ -56,8 +55,7 @@
         bottom: -35px;
     }
 
-    &__showmore
-    {
+    &__showmore {
         display: block;
         text-align: center;
         width: 90px;
@@ -74,22 +72,23 @@
     }
 
     > .arrow {
-        border-width: 5px;
+        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;
-        @extend .jitsipopover__clear;
+
 
         &:after {
             border-width: 5px;
             content: " ";
             bottom: 1px;
             margin-left: -5px;
+            @extend .jitsipopover__clear;
             border-bottom-width: 0;
             border-top-color: $popoverBg;
-            @extend .jitsipopover__clear;
         }
     }
 }

css/_videolayout_default.scss

@@ -261,29 +261,6 @@
     height: 13px;
 }
 
-.connection_info
-{
-    float: left;
-    padding-bottom: 5px;
-}
-
-.connection_info > table
-{
-    white-space: nowrap;
-}
-
-.connection_info, .connection_info > table
-{
-    text-align: left;
-    font-size: 12px;
-    font-weight: 400;
-    color: $popoverFontColor;
-
-    td {
-        padding: 5px 0;
-    }
-}
-
 #localVideoContainer>span.status:hover,
 #localVideoContainer .displayname:hover {
     cursor: text;

css/connection-info.scss

@@ -0,0 +1,26 @@
+%connection-info {
+    text-align: left;
+    font-size: 12px;
+    font-weight: 400;
+    color: $popoverFontColor;
+
+    td {
+        padding: 2px 0;
+    }
+}
+
+.connection-info
+{
+    float: left;
+    padding-bottom: 5px;
+    @extend %connection-info;
+
+    > table {
+        white-space: nowrap;
+        @extend %connection-info;
+    }
+
+    td:nth-child(n-1) {
+        padding-left: 5px;
+    }
+}

css/main.scss

@@ -61,5 +61,6 @@
 @import 'shortcuts/main';
 @import 'buttons/button-control';
 @import "modals/invite/invite";
+@import "connection-info";
 
 /* Modules END */

modules/UI/videolayout/ConnectionIndicator.js

@@ -95,15 +95,8 @@ ConnectionIndicator.prototype.generateText = function () {
         return `${width}x${height}`;
     }).join(', ') || 'N/A';
 
-    let headerKey = 'connectionindicator.header';
     let result = (
-        `<table style='width:100%'>
-            <tr>
-                <td>
-                    <span class="jitsipopover__title"
-                        data-i18n="">${translate(headerKey)}</span>
-                </td>
-            </tr>
+        `<table class="connection-info__container" style='width:100%'>
             <tr>
                 <td>
                     <span data-i18n='connectionindicator.bitrate'>
@@ -111,10 +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='jitsipopover__green'>&darr;</span>${downloadBitrate}
+                    <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
                 </td>
             </tr>
             <tr>
@@ -245,7 +236,7 @@ ConnectionIndicator.prototype.generateText = function () {
 
         }
 
-        result += "<table  style='width:100%'>" +
+        result += "<table class='connection-info__container' style='width:100%'>" +
             "<tr>" +
             "<td>" +
             "<span data-i18n='connectionindicator.bandwidth'>" +
@@ -292,7 +283,7 @@ ConnectionIndicator.prototype.create = function () {
         this.connectionIndicatorContainer);
     this.popover = new JitsiPopover(
         $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
-        {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
+        {content: "<div class=\"connection-info\" data-i18n='connectionindicator.na'>" +
             APP.translation.translateString("connectionindicator.na") + "</div>",
             skin: "black"});
 
@@ -405,9 +396,9 @@ ConnectionIndicator.prototype.updatePopoverData = function (force) {
     // popover is visible or we force to do so.
     if(this.popover.popoverShown || force) {
         this.popover.updateContent(
-            `<div class="connection_info">${this.generateText()}</div>`
+            `<div class="connection-info">${this.generateText()}</div>`
         );
-        APP.translation.translateElement($(".connection_info"));
+        APP.translation.translateElement($(".connection-info"));
     }
 };