sync button on dashbaord

app/styles/app/components/sync-button.sass

@@ -1,6 +1,10 @@
 .sync-button
   vertical-align: middle
+  display: flex
+  flex-flow: row-reverse wrap
   .button
+    position: relative
+    z-index: 2
     height: 2.6rem
     padding: 0.6em 0.8em
     background-color: $agate-blue
@@ -9,11 +13,27 @@
     font-size: 14px
     &:hover
       background-color: $oxide-blue
+  .sync-last
+    position: relative
+    z-index: -1
+    transition: transform 150ms ease, opacity 250ms ease
+    transform: translateX(80%)
+    opacity: 0
+  .button:hover ~ .sync-last
+    transform: translateX(0)
+    opacity: 1
+    z-index: 1
 
   .is-syncing
     background-color: $oxide-blue
 
   .icon-trigger
+    @extend %icon-line-trigger-white
+    @extend %icon
+    width: 1.5em
+    height: 1.5em
+    margin-right: 0.3em
+
 
   .loading-indicator--white
     vertical-align: top
@@ -24,3 +44,4 @@
   margin: 0 1em 0
   color: $asphalt-grey
   text-align: right
+  line-height: 2.6

app/styles/app/layouts/dashboard.sass

@@ -4,12 +4,14 @@
 
 
 .dashboard-header
+  width: 100%
   display: flex
   flex-flow: column-reverse wrap
   justify-content: space-between
   padding: 2em 0
   @media #{$medium-up}
     flex-direction: row
+    align-items: baseline
 
 .dashboard-repos
   margin-bottom: 5rem

app/styles/app/layouts/profile.sass

@@ -13,23 +13,17 @@
   header
     h1
       margin: 0 1.7rem 0 0
-      color: #808080
+      color: $asphalt-grey
-      font-size: 35px
+      font-size: 36px
       font-weight: 400
-      line-height: 1.45
+
-    p:not(.sync-last)
-      font-size: $font-size-sm
-      color: $cement-grey
-      margin: 2rem 0 1rem 0
-      a
-        color: $cement-grey
-        text-decoration: underline
     @media #{$medium-up}
-      .profile-header, .sync-button
+      .profile-header
         display: inline-block
         vertical-align: middle
       .sync-button
-        margin-top: .5em
+        float: right
+        margin-top: .4em
     @media #{$large-up}
       .profile-header
         position: relative
@@ -39,13 +33,6 @@
         &:after
           @include fadeOut(right, -90deg, white)
 
-  .loading-indicator--white
-    vertical-align: top
-    margin-right: .5em
-  p
-    font-size: $font-size-m
-    color: $cement-grey
-
   .cta-btn
     text-align: right
 
@@ -111,9 +98,8 @@
 
 .profile-orgs
   h1
-    color: #898b8c
     font-size: $font-size-sm
-    border-bottom: solid 2px $cream-dark
+    border-bottom: solid 2px $pebble-grey
 
 .profile-user
   margin: 1rem 0 2rem
@@ -196,14 +182,10 @@ p.profile-user-last
 
 
 .profile-additional
-  border-top: solid 2px #f3f2f2
+  border-top: solid 2px $pebble-grey
 .profile-text,
-.profile-additional p
+.profile-additional
-  color: #adaaab
+  +linkStyle
-  line-height: $line-height-m
-  a
-    color: #adaaab
-    text-decoration: underline
 
 .hooks-error
   width: 100%;

app/styles/app/mixins.sass

@@ -48,12 +48,12 @@
 =linkStyle
   a
     text-decoration: none
-    border-bottom: 1px solid #bfc0c1
+    border-bottom: 1px solid $cement-grey
     padding-bottom: 0.1rem
     transition: color 200ms ease, border 200ms ease
     &:hover,
     &:active
-      color: #303030
+      color: $cement-grey
       text-decoration: none
       border-color: transparent
 

app/templates/components/sync-button.hbs

@@ -3,8 +3,8 @@
     <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
   </div>
 {{else}}
-  <p class="sync-last">Last synced {{format-time user.syncedAt}}</p>
   <button {{action 'sync'}} class="button" type="button">
     <span class="icon-trigger"></span>Sync account
   </button>
+  <p class="sync-last">Last synced {{format-time user.syncedAt}}</p>
 {{/if}}