5 files changed, 64 insertions, 11 deletions
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 0455c706..6eaf0607 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -7,8 +7,15 @@
 
 <script src="./favorite_button.js" ></script>
 
-<style>
- .favorite-button {
-     cursor: pointer
- }
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .favorite-button {
+      cursor: pointer;
+      &:hover {
+        color: $main-color;
+      }
+  }
+  .icon-star {
+      color: $main-color;
+  }
 </style>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
new file mode 100644
index 00000000..e7318dc5
--- /dev/null
+++ b/src/components/retweet_button/retweet_button.js
@@ -0,0 +1,19 @@
+const RetweetButton = {
+  props: [ 'status' ],
+  methods: {
+    retweet () {
+      if (!this.status.repeated) {
+        this.$store.dispatch('retweet', {id: this.status.id})
+      }
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'retweeted': this.status.repeated
+      }
+    }
+  }
+}
+
+export default RetweetButton
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
new file mode 100644
index 00000000..9b2f5c7b
--- /dev/null
+++ b/src/components/retweet_button/retweet_button.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
+    <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
+  </div>
+</template>
+
+<script src="./retweet_button.js" ></script>
+
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .icon-retweet {
+     cursor: pointer;
+     &:hover {
+      color: $green;
+     }
+  }
+  .retweeted {
+     cursor: auto;
+     color: $green;
+  }
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 6253d334..0bf2ecde 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,5 +1,6 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
+import RetweetButton from '../retweet_button/retweet_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const Status = {
@@ -24,6 +25,7 @@ const Status = {
   components: {
     Attachment,
     FavoriteButton,
+    RetweetButton,
     PostStatusForm
   },
   methods: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 48c910c0..d4bcc279 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -37,9 +37,7 @@
                 <i class='fa icon-reply'></i>
               </a>
             </div>
-            <div>
-              <i class='fa icon-retweet'></i>
-            </div>
+            <retweet-button :status=status></retweet-button>
             <favorite-button :status=status></favorite-button>
           </div>
 
@@ -53,7 +51,8 @@
 <script src="./status.js" ></script>
 
 <style lang="scss">
- .status-el {
+  @import '../../_variables.scss';
+  .status-el {
      hyphens: auto;
      overflow-wrap: break-word;
      word-wrap: break-word;
@@ -68,9 +67,13 @@
          margin-top: 3px;
          margin-bottom: 3px;
      }
- }
+  }
 
- .status-actions {
+  .status-actions {
      padding-top: 5px;
- }
+  }
+
+  .icon-reply:hover {
+     color: $blue;
+  }
 </style>