Improved color palette and minor UI bug fixes.

ngratin · Apr 27, 2015 · 708493b · 708493b
1 parent 5e159c8
commit 708493b
Show file tree

Hide file tree

Showing 19 changed files with 25 additions and 16 deletions.
diff --git a/images/boot2docker.png b/images/boot2docker.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/docker-terminal.png b/images/docker-terminal.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/preferences.png b/images/preferences.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/report-issue.png b/images/report-issue.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/virtualbox.png b/images/virtualbox.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/src/components/ContainerListItem.react.js b/src/components/ContainerListItem.react.js
@@ -31,7 +31,7 @@ var ContainerListItem = React.createClass({
         });
         ContainerStore.remove(this.props.container.Name, () => {
           var containers = ContainerStore.sorted();
-          if (containers.length === 1) {
+          if (containers.length === 0) {
             $(document.body).find('.new-container-item').parent().fadeIn();
           }
         });

diff --git a/src/components/ImageCard.react.js b/src/components/ImageCard.react.js
@@ -75,7 +75,7 @@ var ImageCard = React.createClass({
       name = (
         <div>
           <div className="namespace official">{namespace}</div>
-          <OverlayTrigger placement="bottom" overlay={<Tooltip>View on DockerHub</Tooltip>}>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip>View on Docker Hub</Tooltip>}>
             <span className="repo" onClick={this.handleRepoClick}>{repo}</span>
           </OverlayTrigger>
         </div>
@@ -84,7 +84,7 @@ var ImageCard = React.createClass({
       name = (
         <div>
           <div className="namespace">{namespace}</div>
-          <OverlayTrigger placement="bottom" overlay={<Tooltip>View on DockerHub</Tooltip>}>
+          <OverlayTrigger placement="bottom" overlay={<Tooltip>View on Docker Hub</Tooltip>}>
             <span className="repo" onClick={this.handleRepoClick}>{repo}</span>
           </OverlayTrigger>
         </div>

diff --git a/src/components/Setup.react.js b/src/components/Setup.react.js
@@ -126,7 +126,10 @@ var Setup = React.createClass({
             <h1>We&#39;re Sorry!</h1>
             <p>There seems to have been an unexpected error with Kitematic:</p>
             <p className="error">{this.state.error.message || this.state.error}</p>
-            <p><button className="btn btn-action" onClick={this.handleErrorRetry}>Retry Setup</button> <button className="btn btn-action" onClick={this.handleErrorRemoveRetry}>Delete VM and Retry Setup</button></p>
+            <p className="setup-actions">
+              <button className="btn btn-action" onClick={this.handleErrorRetry}>Retry Setup</button>
+              <button className="btn btn-action" onClick={this.handleErrorRemoveRetry}>Delete VM and Retry Setup</button>
+            </p>
           </div>
         </div>
       </div>

diff --git a/styles/new-container.less b/styles/new-container.less
@@ -69,11 +69,11 @@
           padding: 4px 8px 4px 35px;
           color: @gray-darkest;
           margin-bottom: 3px;
-          border-color: @gray-lightest;
+          border-color: @gray-lighter;
           box-shadow: none;
           &:focus {
             box-shadow: none;
-            border-color: @gray-lighter;
+            border-color: @brand-primary;
           }
           &::-webkit-input-placeholder {
             color: #DDD;
@@ -96,7 +96,6 @@
     width: 320px;
     height: 166px;
     border-radius: 4px;
-    border: 1px solid @gray-lightest;
     background-color: white;
     margin-right: 20px;
     margin-bottom: 20px;
@@ -154,13 +153,16 @@
       border-bottom-left-radius: 3px;
       justify-content: center;
       text-align: center;
+      box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2);
       img {
         margin-top: 15px;
       }
     }
     .card {
       padding: 10px 20px 10px 20px;
       position: relative;
+      border: 1px solid @gray-lightest;
+      border-left: 0;
       .badges {
         position: absolute;
         right: 15px;
@@ -186,7 +188,6 @@
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          text-decoration: underline;
         }
       }
       .description {

diff --git a/styles/radial.less b/styles/radial.less
@@ -100,7 +100,7 @@
   }
 
   &.radial-gray {
-    background: #EEE;
+    background: @gray-lightest;
   }
 
   &.radial-transparent {

diff --git a/styles/setup.less b/styles/setup.less
@@ -63,6 +63,11 @@
           overflow: auto;
         }
       }
+      .setup-actions {
+        button {
+          margin-right: 12px;
+        }
+      }
     }
 
   }

diff --git a/styles/variables.less b/styles/variables.less
@@ -12,14 +12,14 @@
 @traffic-light-gray:              #E5E5E5;
 @traffic-light-gray-border:       #D3D3D3;
 
-@gray-darkest:          #253237;
-@gray-darker:           #394C51;
-@gray-normal:           #546C70;
-@gray-lighter:          #7A9999;
-@gray-lightest:         #C7D7D7;
+@gray-darkest:          #233137;
+@gray-darker:           #556473;
+@gray-normal:           #7A8491;
+@gray-lighter:          #C4CDDA;
+@gray-lightest:         #E1E8EF;
 
-@color-divider:         #DCE2E2;
-@color-background:      #F9F9F9;
+@color-divider:         @gray-lightest;
+@color-background:      #FCFCFC;
 
 @font-regular:          "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 @font-code:             Menlo;