Improve offline banner in teams

customize.dist/src/less2/include/drive.less

@@ -909,29 +909,6 @@
         }
     }
 
-    #cp-app-drive-edition-state {
-        height: @variables_bar-height;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: @cp_drive-infobox-bg;
-        color: @cp_drive-infobox-fg;
-        font-weight: bold;
-        text-transform: uppercase;
-        cursor: default;
-    }
-    #cp-app-drive-connection-state {
-        height: @variables_bar-height;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: @cp_drive-warnbox-bg;
-        color: @cp_drive-warnbox-fg;
-        font-weight: bold;
-        text-transform: uppercase;
-        cursor: default;
-    }
-
     .cp-app-drive-button {
         order: 15;
         margin: 0 1em;

customize.dist/src/less2/include/forms.less

@@ -262,4 +262,21 @@
             }
         }
     }
+    .cp-banner {
+        height: @variables_bar-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        text-transform: uppercase;
+        cursor: default;
+        &.cp-banner-danger {
+            background-color: @cp_drive-warnbox-bg;
+            color: @cp_drive-warnbox-fg;
+        }
+        &.cp-banner-info {
+            background-color: @cp_drive-infobox-bg;
+            color: @cp_drive-infobox-fg;
+        }
+    }
 }

www/common/drive-ui.js

@@ -580,7 +580,7 @@ define([
         APP.closed = false;
         APP.toolbar = driveConfig.toolbar;
 
-        var $readOnly = $(h('div#cp-app-drive-edition-state.cp-app-drive-content-info-box', Messages.readonly));
+        var $readOnly = $(h('div.cp-banner.cp-banner-info.cp-app-drive-content-info-box', Messages.readonly));
 
         var updateObject = driveConfig.updateObject;
         var updateSharedFolders = driveConfig.updateSharedFolders;

www/drive/inner.html

@@ -15,8 +15,7 @@
         <div id="cp-app-drive-tree">
         </div>
         <div id="cp-app-drive-content-container">
-            <div id="cp-app-drive-connection-state" style="display: none"></div>
-            <div id="cp-app-drive-edition-state" class="cp-app-drive-content-info-box" style="display: none"></div>
+            <div id="cp-app-drive-connection-state" class="cp-banner cp-banner-danger" style="display: none"></div>
             <div id="cp-app-drive-content" tabindex="2"></div>
         </div>
     </div>

www/teams/app-team.less

@@ -271,6 +271,15 @@
                 margin-right: 10px;
             }
         }
+        div#cp-sidebarlayout-rightside .cp-team-offline {
+            // Compensate #cp-sidebarlayout-rightside padding
+            margin-top: -5px;
+            margin-right: -20px;
+            margin-left: -20px;
+        }
+        div#cp-sidebarlayout-rightside.cp-rightside-drive .cp-team-offline {
+            margin: 0;
+        }
     }
 
     #cp-teams-roster-dialog {

www/teams/inner.js

@@ -198,7 +198,7 @@ define([
     var showCategories = function (cat) {
         hideCategories();
         cat.forEach(function (c) {
-            APP.$rightside.find('.'+c).show();
+            APP.$rightside.find('.'+c).css('display', '');
         });
     };
     var createLeftSide = APP.createLeftSide = function (common, team, teamAdmin) {
@@ -586,7 +586,7 @@ define([
             h('div.cp-app-drive-container', {tabindex:0}, [
                 h('div#cp-app-drive-tree'),
                 h('div#cp-app-drive-content-container', [
-                    h('div#cp-app-drive-connection-state', {style: "display: none;"}, Messages.disconnected),
+                    h('div#cp-app-drive-connection-state.cp-banner.cp-banner-danger', {style: "display: none;"}, Messages.disconnected),
                     h('div#cp-app-drive-content', {tabindex:2})
                 ])
             ])
@@ -953,10 +953,11 @@ define([
 
     makeBlock('offline', function (common, cb, $div) {
         $div.addClass('cp-offline');
-        cb(h('div.alert.alert-danger', Messages.disconnected));
+        cb(h('div.cp-banner.cp-banner-danger', Messages.disconnected));
     });
 
-    makeBlock('chat', function (common, cb) {
+    makeBlock('chat', function (common, cb, $div) {
+        $div.addClass('cp-online');
         var container = h('div#cp-app-contacts-container.cp-app-contacts-inapp');
         var content = [container];
         APP.module.execCommand('OPEN_TEAM_CHAT', {