style account sync buttons

app/styles/app.scss

@@ -42,14 +42,16 @@
 @import "app/tabs";
 @import "app/tipsy";
 
-@import "app/components/section";
-@import "app/components/loader";
-// @import "app/components/tiles";
 @import "app/components/travis-switch";
-@import "app/components/buttons";
-@import "app/components/icons";
-@import "app/components/search";
-@import "app/components/dropdown";
+@import "app/components/sync-button";
+
+@import "app/modules/section";
+@import "app/modules/loader";
+// @import "app/modules/tiles";
+@import "app/modules/buttons";
+@import "app/modules/icons";
+@import "app/modules/search";
+@import "app/modules/dropdown";
 
 @import "app/layout";
 @import "app/layouts/dashboard";

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

@@ -0,0 +1,58 @@
+
+.sync-button
+  button
+    @extend %border-radius-4px
+    padding: 0 10px
+    max-width: 98px
+    min-height: 25px
+    margin-left: .5em
+    background: #a6adad
+    color: #ffffff
+    border: none
+    &:hover
+      background: #8d9b9a
+      cursor: pointer
+
+    &.is-syncing
+      background: #c6b93d
+      color: $white
+      padding: 0 10px
+      max-width: 160px
+  .icon
+    position: relative
+    top: -0.1em
+    width: 1em
+    height: 1.2em
+    vertical-align: middle
+  .icon,
+  .sync-spinner
+    margin-right: .5em
+
+.sync-last
+  display: inline-block
+  font-size: 12px
+  color: #848384
+  text-align: right
+
+.sync-spinner
+  vertical-align: middle
+  i
+    position: relative
+    display: inline-block
+    width: 8px
+    height: 8px
+    background-color: $white
+    border-radius: 50%
+    line-height: 0
+    transform-origin: center center
+    animation: bouncedelay 1.3s infinite linear
+    &:nth-child(2)
+      animation-delay: 0.3s
+    &:nth-child(3)
+      animation-delay: 0.6s
+
+@keyframes bouncedelay
+  0%, 80%, 100%
+    transform: scale(0)
+  40%
+    transform: scale(1.0)

app/styles/app/main/log.sass

@@ -62,6 +62,16 @@
     color: #999
     background: inline-image('ui/workers-close.svg') no-repeat right 6px
 
+  .icon
+    width: 1.3em
+    height: 1.1em
+    margin-right: 6px
+    vertical-align: middle
+  .icon--down
+    width: 0.7em
+    height: 0.9em
+    margin-right: 4px
+
 .log-header
   height: 44px
   margin: 0
@@ -72,25 +82,6 @@
   a
     margin-left: .4em
 
-.icon
-  display: inline-block
-  background:
-    size: 100%
-    repeat: no-repeat
-  width: 1.3em
-  height: 1.1em
-  margin-right: 6px
-  vertical-align: middle
-.icon--downloadLog
-  background-image: inline-image('icons/download-log-icon.svg')
-.icon--removeLog
-  background-image: inline-image('icons/remove-log-icon.svg')
-.icon--down
-  width: 0.7em
-  height: 0.9em
-  margin-right: 4px
-  background-image: inline-image('icons/end-of-log-icon.svg')
-
 .log-body
   position: relative
   pre

app/styles/app/modules/icons.sass

@@ -50,4 +50,14 @@
   margin-left  : 5px
   border-left  : 5px solid transparent
   border-right : 5px solid transparent
-  border-top   : 5px solid $dashboard-text-color
+  border-top   : 5px solid $dashboard-text-color
+
+.icon-sync
+  background-image: inline-image('icons/sync-account-icon.svg')
+
+.icon--downloadLog
+  background-image: inline-image('icons/download-log-icon.svg')
+.icon--removeLog
+  background-image: inline-image('icons/remove-log-icon.svg')
+.icon--down
+  background-image: inline-image('icons/end-of-log-icon.svg')

app/templates/components/sync-button.hbs

@@ -1,2 +1,11 @@
-<button {{action sync}}>HERE</button>
-{{user.syncedAt}}
+<div class="sync-button">
+  <p class="sync-last">last synced {{user.syncedAt}}</p>
+  <button {{action sync}} class="button">
+    <span class="icon icon-sync"></span>Sync account
+  </button>
+  <button class="button is-syncing">
+    <span class="sync-spinner"><i></i><i></i><i></i></span>Syncing from Github
+  </button>
+</div>
+
+

app/templates/dashboard/repositories.hbs

@@ -1,7 +1,9 @@
 <div id="filters" class="section section--white section--maxheight">
   <div class="row">
+
       {{orgs-filter orgs=orgs selected=selectedOrg action="selectOrg"}}
-    <div class="">
+
+    <div class="float-right">
       {{sync-button user=auth.currentUser}}
     </div>
     {{!-- <div class="search">

public/images/icons/sync-account-icon.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10.347px" height="12px" viewBox="0 0 10.347 12" enable-background="new 0 0 10.347 12" xml:space="preserve">
+<path fill="#FFFFFF" d="M8.115,6.384v0.431c0,1.621-1.321,2.94-2.942,2.94s-2.939-1.319-2.939-2.94s1.319-2.94,2.939-2.94
+	c0.124,0,0.245,0.008,0.368,0.023v1.774l2.784-2.797l-2.784-2.79v1.643C2.569,1.51,0.073,3.881,0.073,6.814
+	c0,2.812,2.289,5.101,5.101,5.101s5.099-2.288,5.099-5.101V6.384H8.115z"/>
+</svg>