Added colors and buttons.

app/ContainerDetails.react.js

@@ -136,9 +136,11 @@ var ContainerDetails = React.createClass({
 
     var state;
     if (this.state.container.State.Running) {
-      state = <h2 className="status">running</h2>;
+      state = <h2 className="status running">running</h2>;
     } else if (this.state.container.State.Restarting) {
-      state = <h2 className="status">restarting</h2>;
+      state = <h2 className="status restarting">restarting</h2>;
+    } else if (this.state.container.State.Paused) {
+      state = <h2 className="status paused">paused</h2>;
     }
 
     var progress;
@@ -165,7 +167,26 @@ var ContainerDetails = React.createClass({
     return (
       <div className="details">
         <div className="details-header">
-          <h1>{name}</h1> {state} {image}<a className="btn btn-primary" onClick={this.handleClick}>View</a>
+          <h1>{name}</h1>{state}<h2 className="image-label">Image</h2><h2 className="image">{image}</h2>
+        </div>
+        <div className="details-actions">
+          <div className="action btn-group">
+            <a className="btn btn-action" onClick={this.handleClick}><span className="icon icon-preview-2"></span> View</a>
+            <a className="btn btn-action dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
+          </div>
+          <div className="action">
+            <a className="btn btn-action dropdown-toggle" onClick={this.handleClick}><span className="icon icon-folder-1"></span> Volume <span className="icon-dropdown icon icon-arrow-37"></span></a>
+          </div>
+          <div className="action">
+            <a className="btn btn-action" onClick={this.handleClick}><span className="icon icon-refresh"></span> Restart</a>
+          </div>
+          <div className="action">
+            <a className="btn btn-action" onClick={this.handleClick}><span className="icon icon-window-code-3"></span> Terminal</a>
+          </div>
+          <div className="action btn-group">
+            <a className="btn btn-action only-icon active"><span className="icon icon-text-wrapping-2"></span></a>
+            <a className="btn btn-action only-icon"><span className="icon icon-setting-gear"></span></a>
+          </div>
         </div>
         {progress}
         <div className="details-logs">

app/Containers.react.js

@@ -43,7 +43,7 @@ var Containers = React.createClass({
         <div className="containers-body">
           <div className="sidebar">
             <section className={sidebarHeaderClass}>
-              <h3>containers</h3>
+              <h3>My Containers</h3>
               <div className="create">
                 <ModalTrigger modal={<ContainerModal/>}>
                   <div className="wrapper">

app/styles/containers.less

@@ -30,12 +30,11 @@
 
         h3 {
           align-self: flex-start;
-          color: #CCD3D5;
-          font-size: 18px;
+          color: @gray-normal;
+          font-size: 13px;
           font-weight: 400;
           padding: 0 24px;
           margin: 10px 0 0;
-          font-variant: small-caps;
           display: inline-block;
           position: relative;
         }
@@ -222,6 +221,17 @@
       display: flex;
       flex-direction: column;
 
+      .details-actions {
+        flex: 0 auto;
+        display: flex;
+        flex-direction: row;
+        padding: 20px 40px 10px 40px;
+        position: relative;
+        .action {
+          margin-right: 24px;
+        }
+      }
+
       .details-header {
         flex: 0 auto;
         display: flex;
@@ -237,19 +247,27 @@
           margin: 0;
           font-size: 20px;
           margin: 0;
+          color: @gray-darkest;
         }
         h2 {
-          margin: 6px 0px 0px 16px;
-          font-size: 10px;
-          text-transform: uppercase;
-
           &.status {
+            margin: 8px 0px 0px 16px;
+            text-transform: uppercase;
             font-weight: bold;
-            color: @brand-positive;
+            font-size: 10px;
+            &.running {
+              color: @brand-positive;
+            }
+          }
+          &.image-label {
+            margin: 8px 0px 0px 30px;
+            font-size: 10px;
+            color: @gray-lighter;
           }
-
           &.image {
-
+            margin: 5px 0px 0px 16px;
+            font-size: 14px;
+            color: @gray-normal;
           }
         }
       }

app/styles/theme.less

@@ -21,28 +21,80 @@
 }
 
 // Mixin for generating new styles
-.btn-styles(@btn-color: #555) {
+.btn-styles(@btn-color: @gray-normal) {
+  transition: all 0.3s ease 0s;
   .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
-  background-repeat: repeat-x;
-  // border-color: darken(@btn-color, 14%);
+  border-color: @btn-color;
+  color: @btn-color;
 
   &:hover,
-  &:focus  {
-    background-color: darken(@btn-color, 12%);
+  &:focus {
+    border-color: darken(@btn-color, 10%);
+    color: darken(@btn-color, 10%);
+  }
+
+  &:active {
+    background-color: lighten(@btn-color, 30%);
+    border-color: darken(@btn-color, 10%);
+    color: darken(@btn-color, 10%);
+  }
+
+  &.active {
+    background-color: @btn-color;
+    color: white;
+    box-shadow: none;
   }
 
   &:disabled,
   &[disabled] {
-    background-color: darken(@btn-color, 12%);
+    opacity: 0.5;
+  }
+}
+
+.btn-group {
+  .btn {
+    .icon-dropdown {
+      &.icon:before {
+        top: 7px;
+        margin-left: 0px;
+        margin-right: 4px;
+      }
+    }
   }
 }
 
 // Common styles
 .btn {
+  font-size: 12px;
+  background-color: transparent;
+  color: @gray-normal;
+  border: 1px solid @gray-normal;
   border-radius: 25px;
   box-shadow: none;
   font-weight: 400;
   text-shadow: none;
+  padding: 0px 12px 0px 12px;
+  height: 32px;
+  .icon:before {
+    position: relative;
+    top: 5px;
+    font-size: 20px;
+    margin-right: 4px;
+  }
+  &.only-icon {
+    .icon:before {
+      margin-right: 0px;
+    }
+  }
+  .icon-dropdown {
+    &.icon:before {
+      font-size: 10px;
+      position: relative;
+      top: 1px;
+      margin-left: 4px;
+      margin-right: 0px;
+    }
+  }
   // Remove the gradient for the pressed/active state
   &:active,
   &.active {
@@ -57,6 +109,9 @@
 }
 
 // Apply the mixin to the buttons
+.btn-action {
+  .btn-styles(@brand-action);
+}
 .btn-default { .btn-styles(@btn-default-bg); }
 .btn-primary { .btn-styles(@btn-primary-bg); }
 .btn-success { .btn-styles(@btn-success-bg); }

app/styles/variables.less

@@ -2,3 +2,9 @@
 @brand-action:          #24B8EB;
 @brand-positive:        #65E100;
 @brand-negative:        #F47A45;
+
+@gray-darkest:          #253237;
+@gray-darker:           #394C51;
+@gray-normal:           #546C70;
+@gray-lighter:          #7A9999;
+@gray-lightest:         #C7D7D7;