Better spinners

src/ContainerDetails.react.js

@@ -418,7 +418,6 @@ var ContainerDetails = React.createClass({
       if (this.state.progress) {
         body = (
           <div className="details-progress">
-            <h3>Downloading</h3>
             <Radial progress={Math.round(this.state.progress * 100)}/>
           </div>
         );

src/ContainerList.react.js

@@ -10,12 +10,12 @@ var ContainerList = React.createClass({
     var self = this;
     var containers = this.props.containers.map(function (container) {
       return (
-        <ContainerListItem container={container} start={self._start}/>
+        <ContainerListItem key={container.Id} container={container} start={self._start}/>
       );
     });
     return (
       <ul>
-        <ContainerListNewItem containers={this.props.containers} />
+        <ContainerListNewItem key={'newcontainer'} containers={this.props.containers} />
         {containers}
       </ul>
     );

src/ContainerListItem.react.js

@@ -66,7 +66,7 @@ var ContainerListItem = React.createClass({
     }
 
     return (
-      <Router.Link key={container.Name} data-container={name} to="container" params={{name: container.Name}}>
+      <Router.Link data-container={name} to="container" params={{name: container.Name}}>
         <li onMouseEnter={self.handleItemMouseEnter} onMouseLeave={self.handleItemMouseLeave}>
           {state}
           <div className="info">

src/Containers.react.js

@@ -61,7 +61,6 @@ var Containers = React.createClass({
     }
   },
   handleNewContainer: function () {
-    console.log($(this.getDOMNode()).find('.new-container-item'));
     $(this.getDOMNode()).find('.new-container-item').parent().fadeIn();
     this.transitionTo('new');
   },

src/NewContainer.react.js

@@ -2,6 +2,7 @@ var $ = require('jquery');
 var React = require('react/addons');
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
+var Radial = require('./Radial.react');
 var assign = require('object-assign');
 
 var NewContainer = React.createClass({
@@ -118,10 +119,16 @@ var NewContainer = React.createClass({
         var logoStyle = {
           backgroundImage: `linear-gradient(-180deg, ${r.gradient_start} 4%, ${r.gradient_end}  100%)`
         };
+        var imgsrc;
+        if (r.img) {
+          imgsrc = `https://kitematic.com/recommended/${r.img}`;
+        } else {
+          imgsrc = 'https://kitematic.com/recommended/kitematic_html.png';
+        }
         return (
           <div key={r.name} className="image-item">
             <div className="logo" style={logoStyle}>
-              <RetinaImage src={'https://kitematic.com/recommended/' + r.img}/>
+              <RetinaImage src={imgsrc}/>
             </div>
             <div className="card">
               <div className="name">
@@ -156,9 +163,7 @@ var NewContainer = React.createClass({
     } else {
       results = (
         <div className="no-results">
-          <h3>
+          <Radial spin="true" progress={90}/>
-            No Results
-          </h3>
         </div>
       );
     }
@@ -174,24 +179,22 @@ var NewContainer = React.createClass({
     });
     return (
       <div className="details">
-        <div className="detail-panel">
+        <div className="new-container">
-          <div className="new-container">
+          <div className="new-container-header">
-            <div className="new-container-header">
+            <div className="text">
-              <div className="text">
+              Pick an image to create new container.
-                Pick an image to create new container.
+            </div>
-              </div>
+            <div className="search">
-              <div className="search">
+              <div className="search-bar">
-                <div className="search-bar">
+                <input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
-                  <input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
+                <div className={magnifierClasses}></div>
-                  <div className={magnifierClasses}></div>
+                <RetinaImage className={loadingClasses} src="loading.png"/>
-                  <RetinaImage className={loadingClasses} src="loading.png"/>
-                </div>
               </div>
             </div>
-            <div className="results">
+          </div>
-              <h4>{title}</h4>
+          <div className="results">
-              {results}
+            <h4>{title}</h4>
-            </div>
+            {results}
           </div>
         </div>
       </div>

styles/containers.less

@@ -23,10 +23,17 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  margin-top: 20px;
+  margin-top: 10px;
   overflow: auto;
   .image-item {
     display: flex;
+    width: 320px;
+    height: 170px;
+    border-radius: 4px;
+    border: 1px solid @gray-lightest;
+    background-color: white;
+    margin-right: 20px;
+    margin-bottom: 20px;
     .logo {
       flex: 1 auto;
       min-width: 90px;
@@ -113,22 +120,28 @@
         bottom: 0px;
       }
     }
-    width: 320px;
-    height: 170px;
-    border-radius: 4px;
-    border: 1px solid @gray-lightest;
-    background-color: white;
-    margin-right: 20px;
-    margin-bottom: 20px;
   }
 }
 
 .new-container {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
   padding: 35px 20px 32px 25px;
-  .new-container-header {
+  .results {
-    margin-bottom: 28px;
     display: flex;
-    flex: 1;
+    flex-direction: column;
+    flex: 1 auto;
+    .no-results {
+      flex: 1 auto;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .new-container-header {
+    margin-bottom: 8px;
+    display: flex;
+    flex: 0 auto;
     .text {
       flex: 1 auto;
       width: 50%;

styles/main.less

@@ -15,7 +15,6 @@ html, body {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  -webkit-font-smoothing: antialiased;
   -webkit-user-select: none;
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 

styles/radial.less

@@ -12,12 +12,12 @@
 .radial-progress {
 
   &.radial-spinner {
-    -webkit-animation: rotating 2.4s linear infinite;
+    -webkit-animation: rotating 1.6s linear infinite;
   }
 
   @circle-size: 140px;
   @circle-background: #F2F2F2;
-  @inset-size: 136px;
+  @inset-size: @circle-size - 4;
   @inset-color: white;
   @transition-length: 1s;
   // @percentage-color: #3FD899;
@@ -28,7 +28,6 @@
   width:  @circle-size;
   height: @circle-size;
 
-  background-color: @circle-background;
   border-radius: 100%;
   .circle {
     .mask, .fill, .shadow {