Update styles for popover

css/_base.scss

@@ -184,6 +184,7 @@ form {
 }
 
 .link {
+    cursor: pointer;
     color: $linkFontColor;
     @include transition(color .1s ease-out);
 

css/_variables.scss

@@ -1,3 +1,8 @@
+/**
+* Theme
+*/
+@import 'themes/main';
+
 /**
  * Style variables
  */
@@ -28,10 +33,10 @@ $tooltipBg: rgba(0,0,0, 0.7);
 
 // Toolbar
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
+
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
 $toolbarToggleBackground: #12499C;
-$splitterToolbarButtonLeftMargin: 0px;
 
 // Main controls
 $inputSemiBackground: rgba(132, 132, 132, .8);

css/_videolayout_default.scss

@@ -275,8 +275,13 @@
 .connection_info, .connection_info > table
 {
     text-align: left;
-    font-size: 11px;
-    color: #ffffff;
+    font-size: 12px;
+    font-weight: 400;
+    color: $auiDialogColor;
+
+    td {
+        padding: 5px 0;
+    }
 }
 
 #localVideoContainer>span.status:hover,

css/themes/_light.scss

@@ -43,4 +43,10 @@ $labelFontWeight: 400;
 $hintFontSize: em(13, 14);
 $linkFontColor: #3572b0;
 $linkHoverFontColor: darken(#3572b0, 10%);
-$dropdownColor: #333;
+$dropdownColor: #333;
+
+// Popover colors
+$popoverArrowBorderColor: rgba(0, 0, 0, 0.25);
+$popoverArrowBorderColorFallback: #999999;
+$popoverBorderColor: rgba(0, 0, 0, 0.2);
+$popoverBorderColorFallback: #cccccc;

lang/main.json

@@ -151,6 +151,7 @@
     },
     "connectionindicator":
     {
+        "header": "Connection data",
         "bitrate": "Bitrate:",
         "packetloss": "Packet loss:",
         "resolution": "Resolution:",

modules/UI/UI.js

@@ -758,6 +758,7 @@ UI.getRemoteVideoType = function (jid) {
 
 UI.connectionIndicatorShowMore = function(id) {
     VideoLayout.showMore(id);
+    return false;
 };
 
 // FIXME check if someone user this