add user auth data to dashboard

assets/scripts/app/auth.coffee

@@ -130,6 +130,14 @@ window.Auth = Ember.Object.extend
       unless error.message =~ /Can't trigger action/
         throw error
 
+  userName: (->
+    @get('currentUser.name') || @get('currentUser.login')
+  ).property('currentUser.login', 'currentUser.name')
+
+  gravatarUrl: (->
+    "#{location.protocol}//www.gravatar.com/avatar/#{@get('currentUser.gravatarId')}?s=48&d=mm"
+  ).property('currentUser.gravatarId')
+
 Ember.onLoad 'Ember.Application', (Application) ->
   Application.initializer
     name: "auth",

assets/scripts/app/templates/layouts/dashboard.hbs

@@ -21,7 +21,7 @@
                 <a class="signed-out" href="#" {{action "signIn" target="auth"}}>Sign in with GitHub</a>
               {{/if}}
               {{#if auth.signedIn}}
-                {{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{auth.currentUser.userName}}{{/link-to}}
+                {{#link-to "profile" class="signed-in"}}<img {{bind-attr src="auth.gravatarUrl"}}/>{{auth.userName}}{{/link-to}}
               {{/if}}
               {{#if auth.signingIn}}
                 <span class="signing-in">Signing In</span>
@@ -29,7 +29,7 @@
             </p>
             <ul>
               <li>Help</li>
-              <li>Sign Out</li>
+              <li><a href="/" {{action "signOut" target="auth"}}>Sign Out</a></li>
             </ul>
           </li>
         </ul>

assets/styles/dashboard/dashboard.scss

@@ -28,7 +28,7 @@ a {
   color       : #e9e9e9;
   line-height : 28px;
   background  : #404650;
-  overflow: hidden;
+  // overflow: hidden;
 }
 
 #logo {
@@ -88,7 +88,7 @@ a {
 
 #top img {
   float  : right;
-  margin : 5px 10px 0 10px;
+  margin : -7px 10px 0 10px;
   width  : 30px;
   height : 30px;
   border-radius         : 100px;
@@ -108,7 +108,7 @@ a {
 #user ul li ul {
   padding    : 0;
   position   : absolute;
-  top        : 45px;
+  top        : 55px;
   right      : 0;
   width      : 150px;
   display    : none;
@@ -133,6 +133,9 @@ a {
 #user ul li ul li:hover {
   background : #5e869a;
   color      : #ffffff;
+  a {
+    color: #fff;
+  }
 }
 
 #user ul li:hover ul {
@@ -140,6 +143,9 @@ a {
   opacity    : 1;
   visibility : visible;
 }
+#user .handle a {
+  display: inline;
+}
 
 .current-org-avatar {
   display     : inline-block;
@@ -615,7 +621,7 @@ a  {
 
 @media only screen and (min-width: 64.063em) {
   #top img {
-    margin : 5px 0 0 10px;
+    margin : -7px 0 0 10px;
   }
 }