Working buttons.

src/components/ContainerHomePreview.react.js

@@ -83,7 +83,7 @@ var ContainerHomePreview = React.createClass({
             <div className="top-bar">
               <div className="text">IP & PORTS</div>
               <div className="action" onClick={this.handleClickNotShowingCorrectly}>
-                <span className="icon icon-edit"></span>
+                <span className="icon icon-preferences"></span>
               </div>
             </div>
             <p>You can access this container using the following IP address and port:</p>

src/components/Containers.react.js

@@ -161,7 +161,7 @@ var Containers = React.createClass({
               <h4>Containers</h4>
               <div className="create">
                 <Router.Link to="new">
-                  <span className="btn btn-new btn-action circular"><span className="icon icon-add"></span></span>
+                  <span className="btn btn-new btn-action has-icon btn-hollow"><span className="icon icon-add"></span>New</span>
                 </Router.Link>
               </div>
             </section>

src/components/ImageCard.react.js

@@ -152,7 +152,7 @@ var ImageCard = React.createClass({
             <span className="icon icon-tag"></span><span className="text">SELECTED TAG: <span className="selected-tag">{this.state.chosenTag}</span></span>
           </div>
           <div className="menu-item" onClick={this.handleRepoClick}>
-            <span className="icon icon-link"></span><span className="text">VIEW ON DOCKER HUB</span>
+            <span className="icon icon-open-external"></span><span className="text">VIEW ON DOCKER HUB</span>
           </div>
           <div className="close-overlay">
             <a className="btn btn-action circular" onClick={self.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>

styles/left-panel.less

@@ -41,19 +41,6 @@
         &.active {
           .btn-new {
             opacity: 0.3;
-            &:hover {
-              color: @brand-action;
-            }
-          }
-        }
-        .btn-new {
-          color: @brand-action;
-          transition: all 0.25s;
-          .icon {
-            font-size: 14px;
-          }
-          &:hover {
-            color: darken(@brand-action, 15%);
           }
         }
       }

styles/right-panel.less

@@ -123,6 +123,20 @@
           box-shadow: inset 0 0 1px @color-divider;
           background-color: darken(@color-box-button, 1%);
         }
+        &.disabled {
+          color: @gray-lightest;
+          &:hover {
+            background-color: white;
+          }
+          &:active {
+            background-color: white;
+          }
+          &.active {
+            &:hover {
+              background-color: @color-background;
+            }
+          }
+        }
       }
     }
   }

styles/theme.less

@@ -65,12 +65,13 @@ input[type="text"] {
 }
 
 // Mixin for generating new styles
-.btn-styles(@btn-color: @gray-normal) {
+.btn-hollow-styles(@btn-color: @gray-normal) {
   .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
   transition: all 100ms;
   background: transparent;
-	border-color: @btn-color;
+	border: 1px solid @btn-color;
 	color: @btn-color;
+  font-weight: 500;
 
   &:hover {
     background-color: fade(@btn-color, 3%);
@@ -109,8 +110,10 @@ input[type="text"] {
   .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
   transition: all 100ms;
   background: @btn-color;
+  border: none;
 	color: white;
-
+  font-weight: 500;
+  
   &:hover {
     background-color: darken(@btn-color, 4%);
     color: white;
@@ -163,17 +166,27 @@ input[type="text"] {
 
 // Common styles
 .btn {
-  font-size: 13px;
   background-color: transparent;
   color: @gray-normal;
   border: 1px solid @gray-normal;
   border-radius: @border-radius;
   box-shadow: none;
-  font-weight: 400;
   text-shadow: none;
-  padding: 5px 14px 5px 14px;
   cursor: default;
-  
+  font-size: 12px;
+  padding: 0.4rem 1rem;
+  text-transform: uppercase;
+
+  &.has-icon {
+    .icon {
+      font-size: 0.9rem;
+      margin-right: 0.4rem;
+      &::before {
+        -webkit-font-smoothing: subpixel-antialiased;
+      }
+    }
+  }
+
   &.circular {
     border-radius: 100%;
     width: 25px;
@@ -241,20 +254,20 @@ input[type="text"] {
 
 // Apply the mixin to the buttons
 .btn-action {
-  .btn-styles(@brand-action);
+  .btn-hollow-styles(@brand-action);
-  &.btn-filled {
+  &.btn-hollow {
-    .btn-filled-styles(@brand-action);
+    .btn-hollow-styles(@brand-action);
   }
 }
 .btn-positive {
-  .btn-styles(@brand-positive);
+  .btn-filled-styles(@brand-positive);
 }
-.btn-default { .btn-styles(@btn-default-bg); }
+.btn-default { .btn-filled-styles(@btn-default-bg); }
-.btn-primary { .btn-styles(@btn-primary-bg); }
+.btn-primary { .btn-filled-styles(@btn-primary-bg); }
-.btn-success { .btn-styles(@btn-success-bg); }
+.btn-success { .btn-filled-styles(@btn-success-bg); }
-.btn-info    { .btn-styles(@btn-info-bg); }
+.btn-info    { .btn-filled-styles(@btn-info-bg); }
-.btn-warning { .btn-styles(@btn-warning-bg); }
+.btn-warning { .btn-filled-styles(@btn-warning-bg); }
-.btn-danger  { .btn-styles(@btn-danger-bg); }
+.btn-danger  { .btn-filled-styles(@btn-danger-bg); }
 
 .tooltip {
   .tooltip-inner {