From 3d8c7c3d564331908240d43aa58d6c2b1214f2ad Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Mon, 2 Mar 2015 11:30:45 +0100
Subject: [PATCH] add css animation loading indicator

---
 app/styles/app/components/sync-button.sass |  1 +
 app/styles/app/modules/buttons.sass        | 25 +++++++++++++---------
 app/templates/top.hbs                      |  2 +-
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass
index 91c5fd79..c843683d 100644
--- a/app/styles/app/components/sync-button.sass
+++ b/app/styles/app/components/sync-button.sass
@@ -35,6 +35,7 @@
   text-align: right
 
 .sync-spinner
+  display: inline-block
   vertical-align: middle
   i
     position: relative
diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass
index 9a30af1f..c8691ecb 100644
--- a/app/styles/app/modules/buttons.sass
+++ b/app/styles/app/modules/buttons.sass
@@ -52,11 +52,10 @@ $button-border-color: #d4d4d4
   border: 1px solid #40454F
   cursor: pointer
 
-
-#top #navigation // bad style, we really need to get rid of the ids in the styles
-  .button--signin
+#top
+  .button--signin,
+  .button--signingin
     display: inline-block
-    padding: 0.7em 2em 0.65em 0.6em
     margin-right: 1em
     color: $white
     font-size: $font-size-small
@@ -65,21 +64,27 @@ $button-border-color: #d4d4d4
     border-radius: 4px
     border: none
     vertical-align: middle
-    cursor: pointer
     background:
       color: $pass-color
+
+  .button--signin
+    padding: 0.6em 2em 0.55em 0.6em
+    cursor: pointer
+    background:
       image: inline-image('ui/github-signin.svg')
       repeat: no-repeat
       position: 95.5% 45%
     &:hover
       background-color: #73c78d
       text-decoration: none
-    &.signing-in
-      background-image: inline-image('ui/spinner.svg')
-      background-position: 92% 47%
-      &:hover
-        background-color: $pass-color
 
+  .button--signingin
+    padding: 0.6em 0.6em 0.45em
+    span
+      display: inline-block
+      padding: 0 .2em
+      position: relative
+      top: -0.2em
 
 .button
   border-radius: 4px
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index fb28d453..cd09b2a9 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -75,7 +75,7 @@
           {{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{userName}}{{/link-to}}
         {{/if}}
         {{#if auth.signingIn}}
-          <button class="signing-in button--signin">Signing In</button>
+          <button class="signing-in button--signingin">Signing In <span class="sync-spinner"><i></i><i></i><i></i></span></button>
         {{/if}}
       </p>
       <ul>