From 2c2442783e5c9136dc17486931a8b385c9544ccf Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Tue, 3 Feb 2015 11:06:49 -0800
Subject: [PATCH] Style tweak.

---
 app/ContainerDetails.react.js | 8 ++++++--
 app/styles/containers.less    | 9 ++++++---
 app/styles/theme.less         | 8 ++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/ContainerDetails.react.js b/app/ContainerDetails.react.js
index 3538ae2d6d..7c05bd677e 100644
--- a/app/ContainerDetails.react.js
+++ b/app/ContainerDetails.react.js
@@ -440,6 +440,12 @@ var ContainerDetails = React.createClass({
           </div>
         );
       } else {
+        var preview;
+        if (this.state.defaultPort) {
+          preview = (
+            <iframe src={this.state.ports[this.state.defaultPort].url} autosize="on"></iframe>
+          );
+        }
         body = (
           <div className="details-panel">
             <div className="settings">
@@ -523,8 +529,6 @@ var ContainerDetails = React.createClass({
           </div>
           <div className="details-subheader-tabs">
             <span className={tabLogsClasses} onClick={this.showLogs}>Logs</span>
-            <span className={tabPortsClasses} onClick={this.showPorts}>Ports</span>
-            <span className={tabVolumesClasses} onClick={this.showVolumes}>Volumes</span>
             <span className={tabSettingsClasses} onClick={this.showSettings}>Settings</span>
           </div>
         </div>
diff --git a/app/styles/containers.less b/app/styles/containers.less
index 630786c902..8c1fc39679 100644
--- a/app/styles/containers.less
+++ b/app/styles/containers.less
@@ -308,7 +308,7 @@
         flex-direction: row;
         position: relative;
         //border-top: 1px solid #EEE;
-        border-bottom: 1px solid #EEE;
+        border-bottom: 1px solid #DCE2E2;
         background-color: #F9F9F9;
         height: 57px;
         padding: 6px 10px 10px 24px;
@@ -377,6 +377,7 @@
           flex: 1 auto;
           text-align: right;
           margin-right: 3px;
+          margin-top: 6px;
           .tab {
             margin-left: 16px;
             padding: 3px 10px;
@@ -387,8 +388,10 @@
             }
             &.active {
               background-color: #D2EEF8;
-              border-radius: 4px;
+              background-color: @brand-action;
+              border-radius: 40px;
               color: #365B64;
+              color: white;
             }
           }
         }
@@ -459,7 +462,7 @@
       .details-panel {
         flex: 1;
         overflow: auto;
-        background-color: white;
+        background-color: #FFF;
         .logs {
           -webkit-user-select: text;
           font-family: Menlo;
diff --git a/app/styles/theme.less b/app/styles/theme.less
index eec6747988..6857c86555 100644
--- a/app/styles/theme.less
+++ b/app/styles/theme.less
@@ -184,3 +184,11 @@ input[type="text"] {
 .btn-info    { .btn-styles(@btn-info-bg); }
 .btn-warning { .btn-styles(@btn-warning-bg); }
 .btn-danger  { .btn-styles(@btn-danger-bg); }
+
+iframe {
+  border: 0;
+  width: 50%;
+  height: 300px;
+  border-radius: 4px;
+  border: 1px solid @gray-lightest;
+}