Settings page polish.

src/components/ContainerSettingsGeneral.react.js

@@ -185,9 +185,9 @@ var ContainerSettingsGeneral = React.createClass({
       let [id, key, val] = kvp;
       let icon;
       if (index === this.state.env.length - 1) {
-        icon = <a onClick={this.handleAddEnvVar} className="only-icon btn btn-positive small"><span className="icon icon-add-1"></span></a>;
+        icon = <a onClick={this.handleAddEnvVar} className="only-icon btn btn-positive small"><span className="icon icon-add"></span></a>;
       } else {
-        icon = <a onClick={this.handleRemoveEnvVar.bind(this, index)} className="only-icon btn btn-action small"><span className="icon icon-cross"></span></a>;
+        icon = <a onClick={this.handleRemoveEnvVar.bind(this, index)} className="only-icon btn btn-action small"><span className="icon icon-delete"></span></a>;
       }
 
       return (

src/components/ContainerSettingsPorts.react.js

@@ -52,23 +52,27 @@ var ContainerSettingsPorts = React.createClass({
       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>
-          <a className="value-right" onClick={this.handleViewLink.bind(this, val.url)}>{val.display}</a>
+          <td><a onClick={this.handleViewLink.bind(this, val.url)}>{val.display}</a></td>
-        </div>
+        </tr>
       );
     });
     return (
       <div className="settings-panel">
         <div className="settings-section">
           <h3>Configure Ports</h3>
-          <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>
-            {ports}
+              </tr>
-          </div>
+            </thead>
+            <tbody>
+              {ports}
+            </tbody>
+          </table>
         </div>
       </div>
     );

src/components/ContainerSettingsVolumes.react.js

@@ -47,43 +47,43 @@ var ContainerSettingsVolumes = React.createClass({
     if (!this.props.container) {
       return false;
     }
-
     var volumes = _.map(this.props.container.Volumes, (val, key) => {
       if (!val || val.indexOf(process.env.HOME) === -1) {
         val = (
-          <span>
+          <span className="value-right">No Folder</span>
-            <a className="value-right">No Folder</a>
-            <a className="btn btn-action small" disabled={this.props.container.State.Updating} onClick={this.handleChooseVolumeClick.bind(this, key)}>Change</a>
-            <a className="btn btn-action small" disabled={this.props.container.State.Updating} onClick={this.handleRemoveVolumeClick.bind(this, key)}>Remove</a>
-          </span>
         );
       } else {
         val = (
-          <span>
+          <a className="value-right" onClick={this.handleOpenVolumeClick.bind(this, val)}>{val.replace(process.env.HOME, '~')}</a>
-            <a className="value-right" onClick={this.handleOpenVolumeClick.bind(this, val)}>{val.replace(process.env.HOME, '~')}</a>
-            <a className="btn btn-action small" disabled={this.props.container.State.Updating} onClick={this.handleChooseVolumeClick.bind(this, key)}>Change</a>
-            <a className="btn btn-action small" disabled={this.props.container.State.Updating} onClick={this.handleRemoveVolumeClick.bind(this, key)}>Remove</a>
-          </span>
         );
       }
       return (
-        <div key={key} className="table-values">
+        <tr>
-          <span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
+          <td>{key}</td>
-          {val}
+          <td>{val}</td>
-        </div>
+          <td>
+            <a className="btn btn-action small" disabled={this.props.container.State.Updating} onClick={this.handleChooseVolumeClick.bind(this, key)}>Change</a>
+            <a className="btn btn-action small" disabled={this.props.container.State.Updating} onClick={this.handleRemoveVolumeClick.bind(this, key)}>Remove</a>
+          </td>
+        </tr>
       );
     });
     return (
       <div className="settings-panel">
         <div className="settings-section">
           <h3>Configure Volumes</h3>
-          <div className="table volumes">
+          <table className="table">
-            <div className="table-labels">
+            <thead>
-              <div className="label-left">DOCKER FOLDER</div>
+              <tr>
-              <div className="label-right">MAC FOLDER</div>
+                <th>DOCKER FOLDER</th>
-            </div>
+                <th>MAC FOLDER</th>
-            {volumes}
+                <th></th>
-          </div>
+              </tr>
+            </thead>
+            <tbody>
+              {volumes}
+            </tbody>
+          </table>
         </div>
       </div>
     );

styles/container-home.less

@@ -143,7 +143,7 @@
           font-size: 10px;
           white-space: pre-wrap;
           -webkit-user-select: text;
-          padding: 1.2rem;
+          padding: 1.2rem 1.2rem 5rem 1.2rem;
           overflow: auto;
           height: 100%;
         }

styles/container-settings.less

@@ -78,8 +78,9 @@
     }
     .env-vars-labels {
       width: 100%;
-      font-size: 12px;
+      font-size: 14px;
-      color: @gray-light;
+      color: @gray-lighter;
+      font-weight: 500;
       margin-left: 5px;
       margin-bottom: 5px;
       margin-top: 20px;
@@ -109,97 +110,25 @@
       }
     }
     .table {
-      margin-bottom: 0;
+      color: @gray-normal;
-      .icon-arrow-right {
+      tr {
-        color: #BBB;
+        &:first-child {
-        font-size: 20px;
+          td {
-        margin: 0px 10px;
+            border: none;
-        flex: 0 auto;
-        min-width: 13px;
-      }
-      &.ports {
-        .table-labels {
-          margin-top: 20px;
-          flex: 1 auto;
-          display: flex;
-          font-size: 12px;
-          color: @gray-light;
-          .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 {
+        td {
-          flex: 1 auto;
+          border-color: @color-divider;
-          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;
-          }
-          input[type="checked"] {
-
-          }
         }
       }
-      &.volumes {
+      th {
-        .table-labels {
+        font-size: 14px;
-          margin-top: 20px;
+        color: @gray-lighter;
-          flex: 1 auto;
+        font-weight: 500;
-          display: flex;
+        border: none;
-          font-size: 12px;
+      }
-          color: @gray-light;
+      .btn {
-          .label-left {
+        margin-right: 0.5rem;
-            flex: 0 auto;
-            margin-right: 30px;
-          }
-          .label-right {
-            flex: 1 auto;
-            display: inline-block;
-            margin-left: 10px;
-          }
-        }
-        .table-values {
-          flex: 1 auto;
-          display: flex;
-          flex-direction: row;
-          margin: 8px 0;
-          .value-left {
-            flex: 0 auto;
-            padding: 0px;
-          }
-          .value-right {
-            flex: 1 auto;
-            -webkit-user-select: text;
-            padding: 0px;
-          }
-          .btn {
-            margin-left: 10px;
-          }
-        }
       }
     }
   }

styles/theme.less

@@ -245,9 +245,15 @@ input[type="text"] {
 
   &.only-icon {
     padding: 6px 7px 6px 7px;
+    border-radius: 100%;
     &.small {
       width: 22px;
-      padding: 4px 5px 4px 5px;
+      padding: 3px 5px 4px 5px;
+      .icon {
+        &::before {
+          -webkit-font-smoothing: subpixel-antialiased;
+        }
+      }
     }
   }
 }
@@ -260,7 +266,7 @@ input[type="text"] {
   }
 }
 .btn-positive {
-  .btn-filled-styles(@brand-positive);
+  .btn-hollow-styles(@brand-positive);
 }
 .btn-default { .btn-filled-styles(@btn-default-bg); }
 .btn-primary { .btn-filled-styles(@btn-primary-bg); }