[webui] fix command-list css

web/react/components/error_bar.jsx

@@ -8,21 +8,25 @@ var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 function getStateFromStores() {
-  var error = ErrorStore.getLastError();
-  if (error && error.message !== "There appears to be a problem with your internet connection") {
-      return { message: error.message };
-  } else {
-     return { message: null };
-  }
+    var error = ErrorStore.getLastError();
+    if (error && error.message !== "There appears to be a problem with your internet connection") {
+        return { message: error.message };
+    } else {
+        return { message: null };
+    }
 }
 
 module.exports = React.createClass({
+    displayName: 'ErrorBar',
+
     componentDidMount: function() {
         ErrorStore.addChangeListener(this._onChange);
-        $('body').css('padding-top', $('#error_bar').outerHeight());
-        $(window).resize(function(){
-            $('body').css('padding-top', $('#error_bar').outerHeight());
-        });
+        $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
+        $(window).resize(function() {
+            if (this.state.message) {
+                $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
+            }
+        }.bind(this));
     },
     componentWillUnmount: function() {
         ErrorStore.removeChangeListener(this._onChange);
@@ -31,39 +35,39 @@ module.exports = React.createClass({
         var newState = getStateFromStores();
         if (!utils.areStatesEqual(newState, this.state)) {
             if (newState.message) {
-                var self = this;
-                setTimeout(function(){self.handleClose();}, 10000);
+                setTimeout(this.handleClose, 10000);
             }
+
             this.setState(newState);
         }
     },
     handleClose: function(e) {
         if (e) e.preventDefault();
+
         AppDispatcher.handleServerAction({
             type: ActionTypes.RECIEVED_ERROR,
             err: null
         });
+
         $('body').css('padding-top', '0');
     },
     getInitialState: function() {
         var state = getStateFromStores();
         if (state.message) {
-            var self = this;
-            setTimeout(function(){self.handleClose();}, 10000);
+            setTimeout(this.handleClose, 10000);
         }
         return state;
     },
     render: function() {
-        var message = this.state.message;
-        if (message) {
+        if (this.state.message) {
             return (
                 <div className="error-bar">
-                    <span className="error-text">{message}</span>
-                    <a href="#" className="error-close pull-right" onClick={this.handleClose}>×</a>
+                    <span>{this.state.message}</span>
+                    <a href="#" className="error-bar__close" onClick={this.handleClose}>&times;</a>
                 </div>
             );
         } else {
             return <div/>;
         }
     }
-});
+});