Fix notification layout

Only notification icon now marked by color
(it affects notifications in error or warning status).

Change-Id: I3a7a80157cbd4b0e34351c4d70397e68e6dee3ea

static/views/layout.js

@@ -294,9 +294,9 @@ var NotificationsPopover = React.createClass({
   mixins: [backboneMixin('notifications')],
   showNodeInfo(id) {
     this.props.toggle(false);
-    var node = new models.Node({id: id});
+    var node = new models.Node({id});
     node.fetch();
-    ShowNodeInfoDialog.show({node: node});
+    ShowNodeInfoDialog.show({node});
   },
   markAsRead() {
     var notificationsToMark = new models.Notifications(
@@ -320,24 +320,22 @@ var NotificationsPopover = React.createClass({
     return {unreadNotificationsIds: []};
   },
   renderNotification(notification) {
-    var topic = notification.get('topic');
     var nodeId = notification.get('node_id');
     var notificationClasses = {
       notification: true,
-      'text-danger': topic === 'error',
-      'text-warning': topic === 'warning',
       clickable: nodeId,
       unread: notification.get('status') === 'unread' ||
         _.includes(this.state.unreadNotificationsIds, notification.id)
     };
     var iconClass = {
-      error: 'glyphicon-exclamation-sign',
-      warning: 'glyphicon-warning-sign',
+      error: 'glyphicon-exclamation-sign text-danger',
+      warning: 'glyphicon-warning-sign text-warning',
       discover: 'glyphicon-bell'
-    }[topic] || 'glyphicon-info-sign';
+    }[notification.get('topic')] || 'glyphicon-info-sign';
+
     return (
       <div key={notification.id} className={utils.classNames(notificationClasses)}>
-        <i className={'glyphicon ' + iconClass}></i>
+        <i className={utils.classNames('glyphicon', iconClass)} />
         <p
           dangerouslySetInnerHTML={{__html: utils.urlify(notification.escape('message'))}}
           onClick={nodeId && _.partial(this.showNodeInfo, nodeId)}

static/views/notifications_page.js

@@ -74,47 +74,43 @@ NotificationsPage = React.createClass({
 Notification = React.createClass({
   mixins: [backboneMixin('notification')],
   showNodeInfo(id) {
-    var node = new models.Node({id: id});
+    var node = new models.Node({id});
     node.fetch();
-    ShowNodeInfoDialog.show({node: node});
+    ShowNodeInfoDialog.show({node});
   },
   markAsRead() {
-    var notification = this.props.notification;
+    var {notification} = this.props;
     notification.toJSON = () => notification.pick('id', 'status');
     notification.save({status: 'read'});
   },
   onNotificationClick() {
-    if (this.props.notification.get('status') === 'unread') {
-      this.markAsRead();
-    }
-    var nodeId = this.props.notification.get('node_id');
-    if (nodeId) {
-      this.showNodeInfo(nodeId);
-    }
+    var {notification} = this.props;
+    if (notification.get('status') === 'unread') this.markAsRead();
+    if (notification.get('node_id')) this.showNodeInfo(notification.get('node_id'));
   },
   render() {
-    var topic = this.props.notification.get('topic');
-    var notificationClasses = {
-      'col-xs-12 notification': true,
-      'text-danger': topic === 'error',
-      'text-warning': topic === 'warning',
-      unread: this.props.notification.get('status') === 'unread'
-    };
+    var {notification} = this.props;
     var iconClass = {
-      error: 'glyphicon-exclamation-sign',
-      warning: 'glyphicon-warning-sign',
+      error: 'glyphicon-exclamation-sign text-danger',
+      warning: 'glyphicon-warning-sign text-warning',
       discover: 'glyphicon-bell'
-    }[topic] || 'glyphicon-info-sign';
+    }[notification.get('topic')] || 'glyphicon-info-sign';
+
     return (
-      <div className={utils.classNames(notificationClasses)} onClick={this.onNotificationClick}>
-        <div className='notification-time'>{this.props.notification.get('time')}</div>
-        <div className='notification-type'><i className={'glyphicon ' + iconClass} /></div>
+      <div
+        className={utils.classNames('col-xs-12 notification', notification.get('status'))}
+        onClick={this.onNotificationClick}
+      >
+        <div className='notification-time'>
+          {notification.get('time')}
+        </div>
+        <div className='notification-type'>
+          <i className={utils.classNames('glyphicon', iconClass)} />
+        </div>
         <div className='notification-message'>
           <span
-            className={this.props.notification.get('node_id') && 'btn btn-link'}
-            dangerouslySetInnerHTML={{
-              __html: utils.urlify(this.props.notification.escape('message'))
-            }}
+            className={utils.classNames({'btn btn-link': notification.get('node_id')})}
+            dangerouslySetInnerHTML={{__html: utils.urlify(notification.escape('message'))}}
           />
         </div>
       </div>