diff --git a/images/boot2docker.png b/images/boot2docker.png index 947896617d..8f4282e7fb 100644 Binary files a/images/boot2docker.png and b/images/boot2docker.png differ diff --git a/images/boot2docker@2x.png b/images/boot2docker@2x.png index 54d2f03695..808f616984 100644 Binary files a/images/boot2docker@2x.png and b/images/boot2docker@2x.png differ diff --git a/images/install-error.png b/images/install-error.png new file mode 100644 index 0000000000..15f6dca227 Binary files /dev/null and b/images/install-error.png differ diff --git a/images/install-error@2x.png b/images/install-error@2x.png new file mode 100644 index 0000000000..357c1cbd75 Binary files /dev/null and b/images/install-error@2x.png differ diff --git a/images/virtualbox.png b/images/virtualbox.png index 7a5f540ffd..fb9191d0ea 100644 Binary files a/images/virtualbox.png and b/images/virtualbox.png differ diff --git a/images/virtualbox@2x.png b/images/virtualbox@2x.png index ad3436f04e..823b8b8d27 100644 Binary files a/images/virtualbox@2x.png and b/images/virtualbox@2x.png differ diff --git a/src/Containers.react.js b/src/Containers.react.js index 11b6a3f177..0446677df6 100644 --- a/src/Containers.react.js +++ b/src/Containers.react.js @@ -73,7 +73,7 @@ var Containers = React.createClass({ var container = this.getParams().name ? this.state.containers[this.getParams().name] : {}; return (
-
+
diff --git a/src/Setup.react.js b/src/Setup.react.js index 7bb1ddba3b..5860d4a30f 100644 --- a/src/Setup.react.js +++ b/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 (
+
@@ -41,6 +43,7 @@ var Setup = React.createClass({
+

Step 1 out of 4

Downloading VirtualBox

{message}

@@ -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 (
+
@@ -62,6 +66,7 @@ var Setup = React.createClass({
+

Step 2 out of 4

Installing VirtualBox

{message}

@@ -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 (
+
@@ -83,7 +89,8 @@ var Setup = React.createClass({
-

Setting up the Docker VM

+

Step 3 out of 4

+

Setting up Docker VM

{message}

@@ -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 (
+
@@ -104,7 +112,8 @@ var Setup = React.createClass({
-

Starting the Docker VM

+

Step 4 out of 4

+

Starting Docker VM

{message}

@@ -132,8 +141,22 @@ var Setup = React.createClass({ if (this.state.error) { return (
- ; -

Error: {this.state.error}

+
+
+
+ +
+
+
+
+
+
+

Installation Error

+

We're Sorry!

+

There seem to be an unexpected error with Kitematic:

+

{this.state.error}

+
+
); } else { diff --git a/styles/setup.less b/styles/setup.less index 2d2ac1f5ce..801d268149 100644 --- a/styles/setup.less +++ b/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; + } } }