Merge branch 'feature/animated-favorite-and-boost' into 'develop'

add a spin animation to favorite and boost actions

See merge request !52

2 files changed, 13 insertions, 3 deletions

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index e7318dc5..2280f315 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,16 +1,26 @@
 const RetweetButton = {
-  props: [ 'status' ],
+  props: ['status'],
+  data () {
+    return {
+      animated: false
+    }
+  },
   methods: {
     retweet () {
       if (!this.status.repeated) {
         this.$store.dispatch('retweet', {id: this.status.id})
       }
+      this.animated = true
+      setTimeout(() => {
+        this.animated = false
+      }, 500)
     }
   },
   computed: {
     classes () {
       return {
-        'retweeted': this.status.repeated
+        'retweeted': this.status.repeated,
+        'animate-spin': this.animated
       }
     }
   }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 9b2f5c7b..d923c5c4 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -11,12 +11,12 @@
   @import '../../_variables.scss';
   .icon-retweet {
      cursor: pointer;
+     animation-duration: 0.6s;
      &:hover {
       color: $green;
      }
   }
   .retweeted {
-     cursor: auto;
      color: $green;
   }
 </style>