BEMificated classes and add title

css/_jitsi_popover.scss

@@ -21,7 +21,9 @@
     margin-bottom: 35px;
 
     &__title {
-        text-align: center;
+        text-align: left;
+        margin: 0;
+        padding: 0;
     }
 
     &__content {

modules/UI/util/JitsiPopover.js

@@ -76,7 +76,7 @@ var JitsiPopover = (function () {
      */
     JitsiPopover.prototype.createPopover = function () {
         $("body").append(this.template);
-        $(".jitsipopover > .jitsipopover-content").html(this.options.content);
+        $(".jitsipopover > .jitsipopover__content").html(this.options.content);
         var self = this;
         $(".jitsipopover").on("mouseenter", function () {
             self.popoverIsHovered = true;
@@ -103,7 +103,7 @@ var JitsiPopover = (function () {
                 $(".jitsipopover").css(
                     {top: position.top, left: position.left, display: "table"});
                 $(".jitsipopover > .arrow").css({left: calcLeft});
-                $(".jitsipopover > .jitsiPopupmenuPadding").css(
+                $(".jitsipopover > .jitsipopover__menu-padding").css(
                     {left: calcLeft - 50});
             }
         });

modules/UI/videolayout/ConnectionIndicator.js

@@ -95,21 +95,47 @@ ConnectionIndicator.prototype.generateText = function () {
         return `${width}x${height}`;
     }).join(', ') || 'N/A';
 
-    var result = "<table style='width:100%'>" +
-        "<tr>" +
-        "<td><span data-i18n='connectionindicator.bitrate'>" +
-        translate("connectionindicator.bitrate") + "</span></td>" +
-        "<td><span class='jitsipopover__green'>&darr;</span>" +
-        downloadBitrate + " <span class='jitsipopover__orange'>&uarr;</span>" +
-        uploadBitrate + "</td>" +
-        "</tr><tr>" +
-        "<td><span data-i18n='connectionindicator.packetloss'>" +
-        translate("connectionindicator.packetloss") + "</span></td>" +
-        "<td>" + packetLoss  + "</td>" +
-        "</tr><tr>" +
-        "<td><span data-i18n='connectionindicator.resolution'>" +
-        translate("connectionindicator.resolution") + "</span></td>" +
-        "<td>" + resolutionStr + "</td></tr></table>";
+    let headerKey = 'connectionindicator.header';
+    let result = (
+        `<table style='width:100%'>
+            <tr>
+                <td>
+                    <span class="jitsipopover__title"
+                        data-i18n="">${translate(headerKey)}</span>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.bitrate'>
+                        ${translate("connectionindicator.bitrate")}
+                    </span>
+                </td>
+                <td>
+                    <span class='jitsipopover__green'>&darr;</span>
+                    ${downloadBitrate}
+                    <span class='jitsipopover__orange'>&uarr;</span>
+                    ${uploadBitrate}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.packetloss'>
+                        ${translate("connectionindicator.packetloss")}
+                    </span>
+                </td>
+                <td>${packetLoss}</td>
+            </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.resolution'>
+                        ${translate("connectionindicator.resolution")}
+                    </span>
+                </td>
+                <td>
+                    ${resolutionStr}
+                </td>
+            </tr>
+        </table>`);
 
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
         result += "<a class=\"jitsipopover__showmore link\" " +
@@ -232,7 +258,7 @@ ConnectionIndicator.prototype.generateText = function () {
 
         result += transport + "</table>";
     }
-    
+
     return result;
 };