From f9ae54433c0a6c326756e96f29d459b04f890cbd Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Fri, 27 Feb 2015 12:02:19 -0800
Subject: [PATCH] Tweaked look for IP & Port widget.

---
 src/ContainerHomePreview.react.js | 15 +++++---
 styles/container-home.less        | 60 ++++++++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/ContainerHomePreview.react.js b/src/ContainerHomePreview.react.js
index 37c87b8511..9e0d21a108 100644
--- a/src/ContainerHomePreview.react.js
+++ b/src/ContainerHomePreview.react.js
@@ -91,8 +91,9 @@ var ContainerHomePreview = React.createClass({
         var key = pair[0];
         var val = pair[1];
         return (
-          <div key={key} className="ip-port">
-            {val.display}
+          <div key={key} className="table-values">
+            <span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
+            <span className="value-right">{val.display}</span>
           </div>
         );
       });
@@ -100,8 +101,14 @@ var ContainerHomePreview = React.createClass({
         <div className="web-preview wrapper">
           <h4>IP &amp; Ports</h4>
           <div className="widget">
-            <p>You can access this container from the outside using the following IP &amp; Port(s):</p>
-            {ports}
+            <p>You can access this container using the following IP address and port:</p>
+            <div className="table ports">
+              <div className="table-labels">
+                <div className="label-left">DOCKER PORT</div>
+                <div className="label-right">MAC PORT</div>
+              </div>
+              {ports}
+            </div>
           </div>
         </div>
       );
diff --git a/styles/container-home.less b/styles/container-home.less
index e7ba147045..54e4e6bc1a 100644
--- a/styles/container-home.less
+++ b/styles/container-home.less
@@ -37,11 +37,61 @@
           padding: 10px;
           padding-bottom: 0px;
         }
-        .ip-port {
-          padding: 20px;
-          padding-top: 5px;
-          color: @gray-darkest;
-          -webkit-user-select: text;
+        .table {
+          padding-left: 20px;
+          padding-right: 20px;
+          .icon-arrow-right {
+            color: #BBB;
+            font-size: 20px;
+            margin: 0px 10px;
+            flex: 0 auto;
+            min-width: 13px;
+          }
+          &.ports {
+            .table-labels {
+              margin-top: 20px;
+              flex: 1 auto;
+              display: flex;
+              font-size: 12px;
+              color: @gray-lightest;
+              .label-left {
+                flex: 0 auto;
+                min-width: 85px;
+                margin-right: 30px;
+                text-align: right;
+              }
+              .label-right {
+                flex: 1 auto;
+                display: inline-block;
+                margin-left: 10px;
+                width: 40%;
+              }
+            }
+            .table-values {
+              flex: 1 auto;
+              display: flex;
+              flex-direction: row;
+              margin: 8px 0;
+              .value-left {
+                text-align: right;
+                min-width: 85px;
+                flex: 0 auto;
+                padding: 0px;
+              }
+              .value-right {
+                flex: 1 auto;
+                -webkit-user-select: text;
+                max-width: 170px;
+                padding: 0px;
+              }
+              label {
+                margin-left: 8px;
+                margin-top: 1px;
+                font-weight: 400;
+                font-size: 13px;
+              }
+            }
+          }
         }
         .frame {
           border: 0;