4 files changed, 69 insertions, 23 deletions

diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx
index 05726e860..5aa55be93 100644
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -9,28 +9,71 @@ export default class ErrorBar extends React.Component {
 
         this.onErrorChange = this.onErrorChange.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.resize = this.resize.bind(this);
         this.prevTimer = null;
 
         this.state = ErrorStore.getLastError();
-        if (this.state && this.state.message) {
+        if (this.isValidError(this.state)) {
             this.prevTimer = setTimeout(this.handleClose, 10000);
         }
     }
 
+    isValidError(s) {
+        if (!s) {
+            return false;
+        }
+
+        if (!s.message) {
+            return false;
+        }
+
+        if (s.connErrorCount && s.connErrorCount >= 1 && s.connErrorCount < 7) {
+            return false;
+        }
+
+        return true;
+    }
+
+    isConnectionError(s) {
+        if (!s.connErrorCount || s.connErrorCount === 0) {
+            return false;
+        }
+
+        if (s.connErrorCount > 7) {
+            return true;
+        }
+
+        return false;
+    }
+
+    resize() {
+        if (this.isValidError(this.state)) {
+            var height = $(React.findDOMNode(this)).outerHeight();
+            height = height < 30 ? 30 : height;
+            $('body').css('padding-top', height + 'px');
+        } else {
+            $('body').css('padding-top', '0');
+        }
+    }
+
     componentDidMount() {
         ErrorStore.addChangeListener(this.onErrorChange);
-        $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
+
         $(window).resize(() => {
-            if (this.state && this.state.message) {
-                $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-            }
+            this.resize();
         });
+
+        this.resize();
     }
 
     componentWillUnmount() {
         ErrorStore.removeChangeListener(this.onErrorChange);
     }
 
+    componentDidUpdate() {
+        this.resize();
+    }
+
     onErrorChange() {
         var newState = ErrorStore.getLastError();
 
@@ -41,7 +84,9 @@ export default class ErrorBar extends React.Component {
 
         if (newState) {
             this.setState(newState);
-            this.prevTimer = setTimeout(this.handleClose, 10000);
+            if (!this.isConnectionError(newState)) {
+                this.prevTimer = setTimeout(this.handleClose, 10000);
+            }
         } else {
             this.setState({message: null});
         }
@@ -52,22 +97,11 @@ export default class ErrorBar extends React.Component {
             e.preventDefault();
         }
 
-        ErrorStore.storeLastError(null);
-        ErrorStore.emitChange();
-
-        $('body').css('padding-top', '0');
+        this.setState({message: null});
     }
 
     render() {
-        if (!this.state) {
-            return <div/>;
-        }
-
-        if (!this.state.message) {
-            return <div/>;
-        }
-
-        if (this.state.connErrorCount < 7) {
+        if (!this.isValidError(this.state)) {
             return <div/>;
         }
 
diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx
index 1d853f979..9f354965e 100644
--- a/web/react/stores/socket_store.jsx
+++ b/web/react/stores/socket_store.jsx
@@ -50,8 +50,10 @@ class SocketStoreClass extends EventEmitter {
                 }
 
                 this.failCount = 0;
-                ErrorStore.storeLastError(null);
-                ErrorStore.emitChange();
+                if (ErrorStore.getLastError()) {
+                    ErrorStore.storeLastError(null);
+                    ErrorStore.emitChange();
+                }
             };
 
             conn.onclose = () => {
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index d9f486009..6dccfcdeb 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -2,6 +2,7 @@
 
 var BrowserStore = require('../stores/browser_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
+var ErrorStore = require('../stores/error_store.jsx');
 
 export function track(category, action, label, prop, val) {
     global.window.analytics.track(action, {category: category, label: label, property: prop, value: val});
@@ -27,7 +28,16 @@ function handleError(methodName, xhr, status, err) {
         msg = 'error in ' + methodName + ' status=' + status + ' statusCode=' + xhr.status + ' err=' + err;
 
         if (xhr.status === 0) {
-            e = {message: 'There appears to be a problem with your internet connection', connErrorCount: 1};
+            let errorCount = 1;
+            const oldError = ErrorStore.getLastError();
+            let connectError = 'There appears to be a problem with your internet connection';
+
+            if (oldError && oldError.connErrorCount) {
+                errorCount += oldError.connErrorCount;
+                connectError = 'We cannot reach the Mattermost service.  The service may be down or misconfigured.  Please contact an administrator to make sure the WebSocket port is configured properly.';
+            }
+
+            e = {message: connectError, connErrorCount: errorCount};
         } else {
             e = {message: 'We received an unexpected status code from the server (' + xhr.status + ')'};
         }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 19cfdc050..ccd7fd425 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -16,7 +16,7 @@
 }
 
 .bad-connection {
-	background-color: rgb(255, 255, 172);
+	background-color: rgb(255, 255, 172) !important;
 }
 
 .textarea-div {