Settings pages tweak.

src/components/ContainerSettings.react.js

@@ -1,3 +1,4 @@
+var $ = require('jquery');
 var _ = require('underscore');
 var React = require('react/addons');
 var Router = require('react-router');
@@ -11,6 +12,17 @@ var ContainerSettings = React.createClass({
   },
   componentDidMount: function() {
     this.init();
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  componentDidUpdate: function () {
+    this.handleResize();
+  },
+  handleResize: function () {
+    $('.settings-panel').height(window.innerHeight - 210);
   },
   init: function () {
     var currentRoute = _.last(this.context.router.getCurrentRoutes()).name;

styles/container-settings.less

@@ -1,38 +1,37 @@
 .details-panel .settings {
   display: flex;
   flex: 1 auto;
-  flex-direction: row;
+  flex-direction: column;
+  background-color: white;
+  margin: 1rem;
+  margin-bottom: 0;
+  border: 1px solid @color-divider;
+  border-radius: @border-radius;
   .settings-menu {
-    min-width: 180px;
+    display: flex;
     flex: 0 auto;
+    height: 40px;
+    border-bottom: 1px solid @color-divider;
     ul {
-      position: fixed;
-      margin: 0;
-      padding: 0;
-      padding-top: 14px;
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      width: 100%;
+      justify-content: flex-end;
       a {
-        min-width: 160px;
-        margin-left: 12px;
         color: @gray-normal;
-        flex-shrink: 0;
         cursor: default;
         outline: none;
-        margin-bottom: 10px;
         &.active {
           li {
-            color: white;
+            border-bottom: 2px solid @brand-primary;
-            border-radius: 40px;
+            color: @gray-darkest;
-            .brand-gradient();
           }
         }
         &:hover {
           text-decoration: none;
           li {
             cursor: default;
-            border-radius: 40px;
+            color: @gray-darkest;
-            background-color: @gray-lightest;
           }
         }
         &:focus {
@@ -40,24 +39,32 @@
         }
       }
       li {
+        transition: all 140ms;
         vertical-align: middle;
-        padding: 5px 12px;
+        padding: 0.9rem 1.6rem;
         display: flex;
         flex-direction: row;
       }
     }
   }
   .settings-panel {
-    padding-left: 20px;
+    padding: 2rem;
     flex: 1 auto;
     overflow-x: hidden;
+    h3 {
+      margin-top: 0;
+      color: @gray-darker;
+      font-weight: 400;
+      font-size: 18px;
+    }
     .settings-section {
-      margin-bottom: 40px;
+      margin-bottom: 4rem;
     }
     .container-name {
-      margin-bottom: 20px;
+      margin-bottom: 2rem;
       input {
-        width: 40%;
+        width: 100%;
+        max-width: 500px;
       }
       p {
         font-weight: 300;

styles/theme.less

@@ -44,8 +44,8 @@ input[type="text"] {
       border-bottom: 1px solid @brand-action;
     }
     &::-webkit-input-placeholder {
-      color: #DDD;
+      color: @gray-lighter;
-      font-weight: 300;
+      font-weight: 400;
     }
   }
 }