1 files changed, 48 insertions, 11 deletions
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index b2904b5c..c17041da 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -1,21 +1,58 @@
 <template>
-  <div>
-    <i
+  <div class="ReplyButton">
+    <button
       v-if="loggedIn"
-      class="button-icon button-reply icon-reply"
-      :title="$t('tool_tip.reply')"
+      class="button-unstyled interactive"
       :class="{'-active': replying}"
-      @click.prevent="$emit('toggle')"
-    />
-    <i
-      v-else
-      class="button-icon button-reply -disabled icon-reply"
       :title="$t('tool_tip.reply')"
-    />
-    <span v-if="status.replies_count > 0">
+      @click.prevent="$emit('toggle')"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="reply"
+      />
+    </button>
+    <span v-else>
+      <FAIcon
+        icon="reply"
+        class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.reply')"
+      />
+    </span>
+    <span
+      v-if="status.replies_count > 0"
+      class="action-counter"
+    >
       {{ status.replies_count }}
     </span>
   </div>
 </template>
 
 <script src="./reply_button.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.ReplyButton {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -8px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
+    &:hover .svg-inline--fa,
+    &.-active .svg-inline--fa {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+  }
+
+}
+</style>