Header refactor and button styles.

src/components/Header.react.js

@@ -126,15 +126,23 @@ var Header = React.createClass({
       username = null;
     } else if (this.state.username) {
       username = (
-        <span className="no-drag" onClick={this.handleUserClick}>
+        <div className="login-wrapper">
-          <RetinaImage src="user.png"/> {this.state.username} {this.state.verified ? null : '(Unverified)'} <RetinaImage src="userdropdown.png"/>
+          <div className="login" onClick={this.handleUserClick}>
-        </span>
+            <span className="no-drag">
+              <RetinaImage src="user.png"/> {this.state.username} {this.state.verified ? null : '(Unverified)'} <RetinaImage src="userdropdown.png"/>
+            </span>
+          </div>
+        </div>
       );
     } else {
       username = (
-        <span className="no-drag" onClick={this.handleLoginClick}>
+        <div className="login-wrapper">
-          <RetinaImage src="user.png"/> Log In
+          <div className="login" onClick={this.handleLoginClick}>
-        </span>
+            <span className="no-drag">
+              <RetinaImage src="user.png"/> LOGIN
+            </span>
+          </div>
+        </div>
       );
     }
     let updateWidget = this.state.updateAvailable && !this.props.hideLogin ? <a className="btn btn-action small no-drag" onClick={this.handleAutoUpdateClick}>UPDATE NOW</a> : null;
@@ -142,16 +150,15 @@ var Header = React.createClass({
       <div className={headerClasses}>
         <div className="left-header">
           {this.renderWindowButtons()}
-          <div className="login-wrapper">
+          {username}
-            <div className="login">
-              {username}
-            </div>
-          </div>
         </div>
         <div className="right-header">
           <div className="updates">
             {updateWidget}
           </div>
+          <div className="logo">
+            <RetinaImage src="logo.png"/>
+          </div>
         </div>
       </div>
     );

styles/header.less

@@ -24,12 +24,12 @@
     align-items: center;
     justify-content: flex-end;
     margin-right: 20px;
+  }
 
-    img {
+  .logo {
-      margin: 0 14px;
+    position: absolute;
-      height: 16px;
+    right: 1rem;
-      width: 20px;
+    top: 0.8rem;
-    }
   }
   
   .login-wrapper {
@@ -41,15 +41,15 @@
   .login {
     flex: 0 auto;
     display: flex;
-    color: @gray-light;
     align-items: center;
     border-left: 1px solid @color-divider;
     border-right: 1px solid @color-divider;
     padding: 0 1rem 0 0.6rem;
+    .box-button();
 
     &:active {
       img, span {
-        -webkit-filter: brightness(0.8);
+        -webkit-filter: brightness(0.9);
       }
     }
 

styles/left-panel.less

@@ -12,12 +12,12 @@
   .sidebar-header {
     flex: 0 auto;
     min-width: @sidebar-width;
-    min-height: 40px;
+    min-height: 42px;
     display: flex;
     border-bottom: 1px solid transparent;
     transition: border-bottom 0.25s;
     &.sep {
-      border-bottom: 1px solid #EEE;
+      border-bottom: 1px solid @color-divider;
       box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.03);
     }
     h4 {
@@ -31,8 +31,6 @@
       flex: 1 auto;
       justify-content: flex-end;
       margin: 0.6rem 1rem 0 0;
-      //margin-right: 20px;
-      //margin-top: 3px;
       a {
         display: block;
         text-decoration: none;
@@ -264,10 +262,7 @@
     height: 18px;
   }
   .btn-sidebar {
-    font-size: 13px;
+    .box-button();
-    font-weight: 500;
-    color: @brand-primary;
-
     flex: 0 auto;
     display: flex;
     align-items: center;
@@ -276,7 +271,7 @@
 
     &:active {
       img, .text {
-        -webkit-filter: brightness(0.7);
+        -webkit-filter: brightness(0.9);
       }
     }
   }

styles/mixins.less

@@ -35,3 +35,16 @@
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-duration: 0.2s;
 }
+
+.box-button {
+  transition: all 140ms;
+  color: @gray-light;
+  font-size: 10px;
+  font-weight: 500;
+  &:hover {
+    background-color: @color-box-button;
+  }
+  &:active {
+    background-color: darken(@color-box-button, 2%);
+  }
+}

styles/variables.less

@@ -20,6 +20,7 @@
 @gray-lightest:         #e6edf4;
 
 @color-divider:         #EDF0F4;
+@color-box-button:      lighten(@gray-lightest, 5.5%);
 @color-background:      #FCFCFC;
 
 @font-regular:          "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;