Polished installation steps.

src/Containers.react.js

@@ -73,7 +73,7 @@ var Containers = React.createClass({
     var container = this.getParams().name ? this.state.containers[this.getParams().name] : {};
     return (
       <div className="containers">
-        <Header/>
+        <Header />
         <div className="containers-body">
           <div className="sidebar">
             <section className={sidebarHeaderClass}>

src/Setup.react.js

@@ -3,6 +3,7 @@ var Router = require('react-router');
 var Radial = require('./Radial.react.js');
 var SetupStore = require('./SetupStore');
 var RetinaImage = require('react-retina-image');
+var Header = require('./Header.react');
 
 var Setup = React.createClass({
   mixins: [ Router.Navigation ],
@@ -28,9 +29,10 @@ var Setup = React.createClass({
     });
   },
   renderDownloadingVirtualboxStep: function () {
-    var message = 'Kitematic needs VirtualBox to run containers. VirtualBox is being downloaded from Oracle\'s website.';
+    var message = "VirtualBox is being downloaded from Oracle's servers. Kitematic requires VirtualBox to run.";
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="virtualbox.png"/>
@@ -41,6 +43,7 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
+            <h4>Step 1 out of 4</h4>
             <h1>Downloading VirtualBox</h1>
             <p>{message}</p>
           </div>
@@ -49,9 +52,10 @@ var Setup = React.createClass({
     );
   },
   renderInstallingVirtualboxStep: function () {
-    var message = 'VirtualBox is being installed. Administrative privileges are required.';
+    var message = 'VirtualBox is being installed in the background. We may need you to type in your password to continue.';
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="virtualbox.png"/>
@@ -62,6 +66,7 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
+            <h4>Step 2 out of 4</h4>
             <h1>Installing VirtualBox</h1>
             <p>{message}</p>
           </div>
@@ -70,9 +75,10 @@ var Setup = React.createClass({
     );
   },
   renderInitBoot2DockerStep: function () {
-    var message = 'Containers run in a virtual machine provided by Boot2Docker. Kitematic is setting up that Linux VM.';
+    var message = 'To run Docker containers on your computer, we are setting up a Linux virtual machine provided by boot2docker.';
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="boot2docker.png"/>
@@ -83,7 +89,8 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
-            <h1>Setting up the Docker VM</h1>
+            <h4>Step 3 out of 4</h4>
+            <h1>Setting up Docker VM</h1>
             <p>{message}</p>
           </div>
         </div>
@@ -91,9 +98,10 @@ var Setup = React.createClass({
     );
   },
   renderStartBoot2DockerStep: function () {
-    var message = 'Kitematic is starting the Boot2Docker Linux VM.';
+    var message = 'Kitematic is starting the boot2docker VM. This may take about a minute.';
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="boot2docker.png"/>
@@ -104,7 +112,8 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
-            <h1>Starting the Docker VM</h1>
+            <h4>Step 4 out of 4</h4>
+            <h1>Starting Docker VM</h1>
             <p>{message}</p>
           </div>
         </div>
@@ -132,8 +141,22 @@ var Setup = React.createClass({
     if (this.state.error) {
       return (
         <div className="setup">
-          <Radial error={true} spin="true" progress="100"/>;
-          <p className="error">Error: {this.state.error}</p>
+          <Header />
+          <div className="image">
+            <div className="contents">
+              <RetinaImage img src="install-error.png"/>
+              <div className="detail">
+              </div>
+            </div>
+          </div>
+          <div className="desc">
+            <div className="content">
+              <h4>Installation Error</h4>
+              <h1>We&#39;re Sorry!</h1>
+              <p>There seem to be an unexpected error with Kitematic:</p>
+              <p className="error">{this.state.error}</p>
+            </div>
+          </div>
         </div>
       );
     } else {

styles/setup.less

@@ -3,7 +3,7 @@
   height: 100%;
   width: 100%;
   flex-direction: row;
-  -webkit-app-region: drag;
+  //-webkit-app-region: drag;
 
   .image {
     display: flex;
@@ -13,12 +13,13 @@
     align-items: center;
     justify-content: flex-end;
     padding-right: 40px;
+    padding-left: 80px;
 
     .contents {
       position: relative;
       .detail {
         position: absolute;
-        right: 0;
+        right: -20px;
         bottom: 0;
       }
     }
@@ -36,13 +37,24 @@
       max-width: 320px;
 
       h1 {
-        margin-top: -30px;
+        color: @gray-darkest;
         font-size: 24px;
       }
-
+      h4 {
+        color: @gray-lightest;
+        font-size: 13px;
+        margin-top: -30px;
+      }
       p {
         font-size: 13px;
         color: @gray-normal;
+        &.error {
+          color: @brand-negative;
+          background-color: lighten(@brand-negative, 32%);
+          padding: 10px;
+          border-radius: 4px;
+          -webkit-user-select: text;
+        }
       }
     }