redo sync button on dashboard

app/components/sync-button.coffee

@@ -1,6 +1,8 @@
 `import Ember from 'ember'`
 
 Component = Ember.Component.extend
+
+  classNames: ["sync-button"]
   actions: {
     sync: ->
       @get('user').sync()

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

@@ -1,14 +1,20 @@
 .sync-button
   padding: 0.8em 0
-  button
-    @extend %border-radius-4px
-    padding: 0 10px
-    max-width: 98px
-    min-height: 25px
+  display: flex
+  flex-direction: row-reverse
+  .button
+    padding: 5px 10px
     margin-left: .5em
+    height: 25px
+    position: relative
+    z-index: 1
     background: #a6adad
     color: #ffffff
+    font-size: 14px
+    font-weight: 300
     border: none
+    border-radius: 2px
+    line-height: 1
     &:hover
       background: #8d9b9a
       cursor: pointer
@@ -16,17 +22,17 @@
     &.is-syncing
       background: #c6b93d
       color: $white
-      padding: 0 10px
-      max-width: 160px
   .icon
-    position: relative
-    top: -0.1em
-    width: 1em
+    width: 1.1em
     height: 1.2em
     vertical-align: middle
-  .icon,
-  .sync-spinner
+    svg path
+      fill: $white
+  .icon
     margin-right: .5em
+  .loading-indicator--white
+    margin-right: .5em
+    vertical-align: top
 
 .profile-main
   .sync-button
@@ -41,6 +47,15 @@
 .sync-last
   display: inline-block
   margin: 0
-  font-size: 12px
+  font-size: 14px
   color: #848384
   text-align: right
+  
+  pointer-events: none
+  transform: translateX(50%)
+  opacity: 0
+  transition: transform 200ms ease, opacity 100ms ease
+
+  .button:hover ~ &
+    transform: translateX(0)
+    opacity: 1

app/styles/app/layouts/dashboard.sass

@@ -24,6 +24,8 @@
 
 .dashboard-filter
   padding: 0 $column-gutter/2
+  font-size: 16px
+  font-weight: 300
   @media #{$medium-up}
     padding: 0
 

app/templates/components/sync-button.hbs

@@ -1,14 +1,19 @@
-<div class="sync-button">
-  {{#if user.isSyncing }}
-    <button class="button is-syncing">
-      <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
-    </button>
-  {{else}}
-    <p class="sync-last">last synced {{format-time user.syncedAt}}</p>
-    <button {{action 'sync'}} class="button">
-      <span class="icon icon-sync"></span>Sync account
-    </button>
-  {{/if}}
-</div>
-
-
+{{#if user.isSyncing }}
+  <button class="button is-syncing">
+    <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
+  </button>
+{{else}}
+  <button {{action 'sync'}} class="button">
+    <span class="icon">
+      <svg x="0px" y="0px" viewBox="0 1 18 18" xml:space="preserve">
+        <g id="Trigger">
+          <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
+            c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
+            S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
+            c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
+        </g>
+      </svg>
+    </span>Sync account
+  </button>
+  <p class="sync-last">last synced {{format-time user.syncedAt}}</p>
+{{/if}}