Merge pull request #561 from kitematic/design-improvement

Updated icons and added visual feedback.

src/components/ContainerDetailsSubheader.react.js

@@ -107,7 +107,8 @@ var ContainerDetailsSubheader = React.createClass({
         shell = 'sh';
       }
       machine.ip().then(ip => {
-        var cmd = [resources.terminal(), 'ssh', '-p', '22', '-o', 'UserKnownHostsFile=/dev/null', '-o', 'LogLevel=quiet', '-o', 'StrictHostKeyChecking=no', '-i', '~/.docker/machine/machines/' + machine.name() + '/id_rsa', 'docker@' + ip, '-t', 'docker', 'exec', '-i', '-t', container.Name, shell];
+        var cmd = [resources.terminal(), 'ssh', '-p', '22', '-o', 'UserKnownHostsFile=/dev/null', '-o', 'LogLevel=quiet', '-o', 'StrictHostKeyChecking=no', '-i', '~/.docker/machine/machines/' + machine.name() + '/id_rsa', 'docker@' + ip, '-t', 'docker', 
+          'exec', '-i', '-t', container.Name, shell];
         exec(cmd, function (stderr, stdout, code) {
           if (code) {
             console.log(stderr);
@@ -215,19 +216,19 @@ var ContainerDetailsSubheader = React.createClass({
     return (
       <div className="details-subheader">
         <div className="details-header-actions">
-          <div className={runActionClass} onMouseEnter={this.handleItemMouseEnterView} onMouseLeave={this.handleItemMouseLeaveView}>
+          {startStopToggle}
-            <div className="action-icon" onClick={this.handleRun}><RetinaImage src="button-view.png"/></div>
-            <span className="btn-label view">View</span>
-          </div>
           <div className={restartActionClass} onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
             <div className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></div>
             <span className="btn-label restart">Restart</span>
           </div>
-          {startStopToggle}
           <div className={terminalActionClass} onMouseEnter={this.handleItemMouseEnterTerminal} onMouseLeave={this.handleItemMouseLeaveTerminal}>
             <div className="action-icon" onClick={this.handleTerminal}><RetinaImage src="button-terminal.png"/></div>
             <span className="btn-label terminal">Terminal</span>
           </div>
+          <div className={runActionClass} onMouseEnter={this.handleItemMouseEnterView} onMouseLeave={this.handleItemMouseLeaveView}>
+            <div className="action-icon" onClick={this.handleRun}><RetinaImage src="button-view.png"/></div>
+            <span className="btn-label view">View</span>
+          </div>
         </div>
         <div className="details-subheader-tabs">
           <span className={tabHomeClasses} onClick={this.showHome}>Home</span>

styles/container-settings.less

@@ -32,7 +32,7 @@
           li {
             cursor: default;
             border-radius: 40px;
-            background-color: @color-background;
+            background-color: @gray-lightest;
           }
         }
         &:focus {

styles/right-panel.less

@@ -13,7 +13,7 @@
     position: relative;
     border-bottom: 1px solid @color-divider;
     background-color: white;
-    height: 57px;
+    height: 51px;
     padding: 6px 10px 10px 24px;
     font-size: 13px;
     color: @gray-normal;
@@ -25,11 +25,21 @@
         display: inline-block;
         position: relative;
         img {
-          width: 42px;
+          width: 35px;
-          height: 42px;
+          height: 35px;
         }
         &.disabled {
           opacity: 0.3;
+          &:active {
+            img, .btn-label {
+              -webkit-filter: brightness(1);
+            }
+          }
+        }
+        &:active {
+          img, .btn-label {
+            -webkit-filter: brightness(0.8);
+          }
         }
         .action-icon {
           color: @gray-normal;
@@ -40,21 +50,21 @@
           color: @brand-action;
           font-size: 9px;
           width: 200px;
-          top: 45px;
+          top: 38px;
           &.view {
-            left: 7px;
+            left: 8px;
           }
           &.restart {
-            left: 2px;
+            left: 3px;
           }
           &.stop {
-            left: 7px;
+            left: 8px;
           }
           &.start {
-            left: 7px;
+            left: 8px;
           }
           &.terminal {
-            left: -1px;
+            left: 1px;
           }
           visibility: hidden;
         }