Got rid of ContainerListNewItem.

src/components/ContainerList.react.js

@@ -1,6 +1,5 @@
 var React = require('react/addons');
 var ContainerListItem = require('./ContainerListItem.react');
-var ContainerListNewItem = require('./ContainerListNewItem.react');
 
 var ContainerList = React.createClass({
   componentWillMount: function () {
@@ -14,7 +13,6 @@ var ContainerList = React.createClass({
     });
     return (
       <ul>
-        <ContainerListNewItem key={'newcontainer'} containers={this.props.containers}/>
         {containers}
       </ul>
     );

src/components/ContainerListNewItem.react.js

@@ -1,54 +0,0 @@
-var $ = require('jquery');
-var React = require('react');
-var Router = require('react-router');
-var metrics = require('../utils/MetricsUtil');
-
-var ContainerListNewItem = React.createClass({
-  mixins: [Router.Navigation, Router.State],
-  handleItemMouseEnter: function () {
-    var $action = $(this.getDOMNode()).find('.action');
-    $action.show();
-  },
-  handleItemMouseLeave: function () {
-    var $action = $(this.getDOMNode()).find('.action');
-    $action.hide();
-  },
-  handleDelete: function (event) {
-    metrics.track('Deleted Container', {
-      from: 'list',
-      type: 'new'
-    });
-
-    if (this.props.containers.length > 0 && this.getRoutes()[this.getRoutes().length - 2].name === 'new') {
-      var name = this.props.containers[0].Name;
-      this.transitionTo('containerHome', {name});
-    }
-    $(this.getDOMNode()).fadeOut(300);
-    event.preventDefault();
-  },
-  render: function () {
-    var action;
-    if (this.props.containers.length > 0) {
-      action = (
-        <div className="action">
-          <span className="icon icon-delete-3 btn-delete" onClick={this.handleDelete}></span>
-        </div>
-      );
-    }
-    return (
-      <Router.Link to="new">
-        <li className="new-container-item" onMouseEnter={this.handleItemMouseEnter} onMouseLeave={this.handleItemMouseLeave}>
-          <div className="state state-new"></div>
-          <div className="info">
-            <div className="name">
-              New Container
-            </div>
-          </div>
-          {action}
-        </li>
-      </Router.Link>
-    );
-  }
-});
-
-module.exports = ContainerListNewItem;

src/components/Containers.react.js

@@ -180,7 +180,9 @@ var Containers = React.createClass({
             <section className={sidebarHeaderClass}>
               <h4>Containers</h4>
               <div className="create">
-                <a className="btn-new icon icon-add-3" onClick={this.handleNewContainer}></a>
+                <Router.Link to="new">
+                  <span className="btn-new icon icon-add-3"></span>
+                </Router.Link>
               </div>
             </section>
             <section className="sidebar-containers" onScroll={this.handleScroll}>

styles/left-panel.less

@@ -28,16 +28,31 @@
       position: relative;
     }
     .create {
+      display: flex;
       flex: 1 auto;
-      text-align: right;
+      justify-content: flex-end;
       margin-right: 20px;
       margin-top: 3px;
-      .btn-new {
+      a {
-        font-size: 24px;
+        display: block;
-        color: @brand-action;
+        text-decoration: none;
-        transition: all 0.25s;
+        cursor: default;
-        &:hover {
+        &.active {
-          color: darken(@brand-action, 15%);
+          .btn-new {
+            opacity: 0.3;
+            &:hover {
+              color: @brand-action;
+            }
+          }
+        }
+        .btn-new {
+          display: block;
+          font-size: 24px;
+          color: @brand-action;
+          transition: all 0.25s;
+          &:hover {
+            color: darken(@brand-action, 15%);
+          }
         }
       }
     }