From ee130fa34606dd0b51695623bf54ddafd4466827 Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Thu, 11 Jun 2015 11:01:53 -0700
Subject: [PATCH] Settings pages tweak.

---
 src/components/ContainerSettings.react.js | 12 ++++++
 styles/container-settings.less            | 49 +++++++++++++----------
 styles/theme.less                         |  4 +-
 3 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/ContainerSettings.react.js b/src/components/ContainerSettings.react.js
index 856b1fccc9..70f1faecc3 100644
--- a/src/components/ContainerSettings.react.js
+++ b/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;
diff --git a/styles/container-settings.less b/styles/container-settings.less
index be22086853..fc7816fee2 100644
--- a/styles/container-settings.less
+++ b/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-radius: 40px;
-            .brand-gradient();
+            border-bottom: 2px solid @brand-primary;
+            color: @gray-darkest;
           }
         }
         &:hover {
           text-decoration: none;
           li {
             cursor: default;
-            border-radius: 40px;
-            background-color: @gray-lightest;
+            color: @gray-darkest;
           }
         }
         &: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;
diff --git a/styles/theme.less b/styles/theme.less
index e807ab8d7b..e7c61ba8be 100644
--- a/styles/theme.less
+++ b/styles/theme.less
@@ -44,8 +44,8 @@ input[type="text"] {
       border-bottom: 1px solid @brand-action;
     }
     &::-webkit-input-placeholder {
-      color: #DDD;
-      font-weight: 300;
+      color: @gray-lighter;
+      font-weight: 400;
     }
   }
 }