From 1efad518814a461d6ed830f943877f463a5f8052 Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Tue, 24 Feb 2015 10:02:10 -0800
Subject: [PATCH] Added smooth fade-in animation.

---
 src/ContainerListItem.react.js | 2 +-
 src/Setup.react.js             | 4 ++--
 styles/animation.less          | 9 +++++++++
 styles/header.less             | 1 +
 styles/left-panel.less         | 1 +
 styles/mixins.less             | 7 +++++++
 styles/right-panel.less        | 2 ++
 styles/setup.less              | 1 +
 8 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/ContainerListItem.react.js b/src/ContainerListItem.react.js
index 9d35cb4f9a..2ed466bda8 100644
--- a/src/ContainerListItem.react.js
+++ b/src/ContainerListItem.react.js
@@ -31,7 +31,7 @@ var ContainerListItem = React.createClass({
         });
         ContainerStore.remove(this.props.container.Name, () => {
           var containers = ContainerStore.sorted();
-          if (containers.length === 0) {
+          if (containers.length === 1) {
             $(document.body).find('.new-container-item').parent().fadeIn();
           }
         });
diff --git a/src/Setup.react.js b/src/Setup.react.js
index f97495f33d..23e7f1bb64 100644
--- a/src/Setup.react.js
+++ b/src/Setup.react.js
@@ -52,7 +52,7 @@ var Setup = React.createClass({
       <div className="contents">
         <RetinaImage src={img} checkIfRetinaImgExists={false}/>
         <div className="detail">
-          <Radial progress={SetupStore.percent()} thick={true} gray={true}/>
+          <Radial progress={this.state.progress} thick={true} gray={true}/>
         </div>
       </div>
     );
@@ -87,7 +87,7 @@ var Setup = React.createClass({
             <h1>Couldn&#39;t Install</h1>
             <p>Kitematic didn&#39;t receive the administrative privileges required to install or upgrade VirtualBox &amp; Docker.</p>
             <p>Please retry or download &amp; install VirutalBox manually from the <a onClick={this.handleOpenWebsite}>official Oracle website</a>.</p>
-            <button className="btn btn-action" onClick={this.handleRetry}>Retry</button>
+            <p><button className="btn btn-action" onClick={this.handleRetry}>Retry</button></p>
           </div>
         </div>
       </div>
diff --git a/styles/animation.less b/styles/animation.less
index 641545c055..1fd7294bf5 100644
--- a/styles/animation.less
+++ b/styles/animation.less
@@ -34,3 +34,12 @@
     -webkit-transform: translateY(20px);
   }
 }
+
+@-webkit-keyframes fadein {
+  from {
+    opacity:0;
+  }
+  to {
+    opacity:1;
+  }
+}
diff --git a/styles/header.less b/styles/header.less
index 0a040fabc0..946c32a430 100644
--- a/styles/header.less
+++ b/styles/header.less
@@ -19,6 +19,7 @@
     position: relative;
     top: 10px;
     left: 15px;
+    z-index: 1000;
     &:hover {
       .button-minimize.enabled {
         .at2x('minimize.png', 10px, 10px);
diff --git a/styles/left-panel.less b/styles/left-panel.less
index e4b7eba970..368f2d173c 100644
--- a/styles/left-panel.less
+++ b/styles/left-panel.less
@@ -1,6 +1,7 @@
 /* Sidebar */
 
 .sidebar {
+  .fade-in();
   padding-top: 28px;
   background-color: white;
   margin: 0;
diff --git a/styles/mixins.less b/styles/mixins.less
index 3ff7438f6c..f00cf97589 100644
--- a/styles/mixins.less
+++ b/styles/mixins.less
@@ -28,3 +28,10 @@
   position: relative;
   overflow: hidden;
 }
+
+.fade-in() {
+  opacity: 0;
+  -webkit-animation: fadein ease-in 1;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-duration: 0.3s;
+}
diff --git a/styles/right-panel.less b/styles/right-panel.less
index aa5b1820f6..6be51d5b1c 100644
--- a/styles/right-panel.less
+++ b/styles/right-panel.less
@@ -1,4 +1,6 @@
 .details {
+  .fade-in();
+  -webkit-animation-delay: 0.3s;
   background-color: @color-background;
   margin: 0;
   padding: 0;
diff --git a/styles/setup.less b/styles/setup.less
index 35a5c7f674..761fe6b4fb 100644
--- a/styles/setup.less
+++ b/styles/setup.less
@@ -1,4 +1,5 @@
 .setup {
+  .fade-in();
   display: flex;
   height: 100%;
   width: 100%;