fix(PageReloadOverlay): changes text and adjusts style

css/main.scss

@@ -38,6 +38,7 @@
 @import 'toastr';
 @import 'base';
 @import 'overlay/overlay';
+@import 'reload_overlay/reload_overlay';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
 @import 'videolayout_default';

css/reload_overlay/_reload_overlay.scss

@@ -0,0 +1,17 @@
+.reload_overlay_title {
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+}
+
+.reload_overlay_msg {
+    display: block;
+    font-size: 12px;
+    line-height: 30px;
+}
+
+#reloadProgressBar {
+    width: 180px;
+    margin: 5px auto;
+}
+

lang/main.json

@@ -202,7 +202,8 @@
         "detectext": "Error when trying to detect desktopsharing extension.",
         "failtoinstall": "Failed to install desktop sharing extension",
         "failedpermissions": "Failed to obtain permissions to use the local microphone and/or camera.",
-        "conferenceReloadMsg": "Something went wrong we'll try to reload the conference in...",
+        "conferenceReloadTitle": "Unfortunately, something went wrong",
+        "conferenceReloadMsg": "We're trying to fix this",
         "conferenceReloadTimeLeft": "__seconds__ sec.",
         "maxUsersLimitReached": "The limit for maximum number of participants in the conference has been reached. The conference is full. Please try again later!",
         "lockTitle": "Lock failed",

modules/UI/reload_overlay/PageReloadOverlay.js

@@ -32,15 +32,15 @@ class PageReloadOverlayImpl extends Overlay{
      */
     _buildOverlayContent() {
         return `
-            <span data-i18n='dialog.serviceUnavailable' 
-                  class='overlay_text_small'></span>
+            <span data-i18n='dialog.conferenceReloadTitle' 
+                  class='reload_overlay_title'></span>
             <span data-i18n='dialog.conferenceReloadMsg' 
-                  class='overlay_text_small'></span>
+                  class='reload_overlay_msg'></span>
             <div>
                 <div id='reloadProgressBar' class="aui-progress-indicator">
                     <span class="aui-progress-indicator-value"></span>
                 </div>
-                <span id='reloadSecRemaining' class='overlay_text_small'>
+                <span id='reloadSecRemaining' class='reload_overlay_msg'>
                 </span>
             </div>`;
     }