Settings and container ip and ports widget.

src/components/ContainerHomePreview.react.js

@@ -66,14 +66,14 @@ var ContainerHomePreview = React.createClass({
         </div>
       );
     } else {
-      var ports = _.map(_.pairs(this.props.ports), function (pair) {
+      var ports = _.map(_.pairs(this.props.ports), pair => {
         var key = pair[0];
         var val = pair[1];
         return (
-          <div key={key} className="table-values">
+          <tr key={key}>
-            <span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
+            <td>{key}</td>
-            <span className="value-right">{val.display}</span>
+            <td>{val.display}</td>
-          </div>
+          </tr>
         );
       });
 
@@ -87,13 +87,17 @@ var ContainerHomePreview = React.createClass({
               </div>
             </div>
             <p>You can access this container using the following IP address and port:</p>
-            <div className="table ports">
+            <table className="table">
-              <div className="table-labels">
+              <thead>
-                <div className="label-left">DOCKER PORT</div>
+                <tr>
-                <div className="label-right">MAC PORT</div>
+                  <th>DOCKER PORT</th>
-              </div>
+                  <th>MAC PORT</th>
+                </tr>
+              </thead>
+              <tbody>
                 {ports}
-            </div>
+              </tbody>
+            </table>
           </div>
         </div>
       );

src/components/ContainerSettingsPorts.react.js

@@ -62,7 +62,7 @@ var ContainerSettingsPorts = React.createClass({
       <div className="settings-panel">
         <div className="settings-section">
           <h3>Configure Ports</h3>
-          <table className="table">
+          <table className="table ports">
             <thead>
               <tr>
                 <th>DOCKER PORT</th>

src/components/ContainerSettingsVolumes.react.js

@@ -72,7 +72,7 @@ var ContainerSettingsVolumes = React.createClass({
       <div className="settings-panel">
         <div className="settings-section">
           <h3>Configure Volumes</h3>
-          <table className="table">
+          <table className="table volumes">
             <thead>
               <tr>
                 <th>DOCKER FOLDER</th>

styles/container-home.less

@@ -37,54 +37,31 @@
           padding-bottom: 0px;
         }
         .table {
-          padding-left: 20px;
+          color: @gray-normal;
-          padding-right: 20px;
-          .icon-arrow-right {
-            color: #BBB;
-            font-size: 13px;
-            margin: 0px 8px;
-            position: relative;
-            top: 2px;
-            flex: 0 auto;
-            min-width: 13px;
-          }
-          &.ports {
-            .table-labels {
-              margin-top: 20px;
-              flex: 1 auto;
-              display: flex;
-              font-size: 10px;
-              color: @gray-light;
-              .label-left {
-                flex: 0 auto;
-                min-width: 60px;
-                margin-right: 30px;
-                text-align: right;
-              }
-              .label-right {
-                flex: 1 auto;
-                display: inline-block;
-              }
-            }
-            .table-values {
-              flex: 1 auto;
-              display: flex;
-              flex-direction: row;
-              margin: 8px 0;
           font-size: 12px;
-              .value-left {
+          margin-left: 0.2rem;
+          max-width: 300px;
+          tr {
+            &:first-child {
+              td {
+                border: none;
+              }
+            }
+            td {
+              border-color: @color-divider;
+              &.right {
                 text-align: right;
-                min-width: 70px;
-                flex: 0 auto;
-                padding: 0px;
               }
-              .value-right {
-                flex: 1 auto;
-                -webkit-user-select: text;
-                max-width: 170px;
-                padding: 0px;
             }
           }
+          th {
+            font-size: 10px;
+            color: @gray-lighter;
+            font-weight: 500;
+            border: none;
+            &.right {
+              text-align: right;
+            }
           }
         }
         .frame {

styles/container-settings.less

@@ -23,6 +23,7 @@
         outline: none;
         &.active {
           li {
+            font-weight: 500;
             border-bottom: 2px solid @brand-primary;
             color: @gray-darkest;
           }
@@ -110,6 +111,12 @@
       }
     }
     .table {
+      &.ports {
+        max-width: 500px;
+      }
+      &.volumes {
+        max-width: 100%;
+      }
       color: @gray-normal;
       tr {
         &:first-child {