Replace all use of <a> + href='#' with proper buttons

1 files changed, 23 insertions, 25 deletions

diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b234f3d9..5d4915aa 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,29 +1,29 @@
 <template>
-  <div v-if="loggedIn">
-    <template v-if="visibility !== 'private' && visibility !== 'direct'">
+  <div>
+    <button
+      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+      class="button-unstyled -padded RetweetButton -interactive"
+      :class="status.repeated && '-repeated'"
+    >
       <FAIcon
-        :class="classes"
-        class="RetweetButton fa-scale-110 fa-old-padding -interactive"
+        class="fa-scale-110 fa-old-padding"
         icon="retweet"
         :spin="animated"
         :title="$t('tool_tip.repeat')"
         @click.prevent="retweet()"
       />
-      <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
-    </template>
-    <template v-else>
-      <FAIcon
-        :class="classes"
-        class="RetweetButton fa-scale-110 fa-old-padding"
-        icon="lock"
-        :title="$t('timeline.no_retweet_hint')"
-      />
-    </template>
-  </div>
-  <div v-else-if="!loggedIn">
+    </button>
+    <FAIcon
+      v-else-if="loggedIn"
+      :class="classes"
+      class="RetweetButton fa-scale-110 fa-old-padding"
+      icon="lock"
+      :title="$t('timeline.no_retweet_hint')"
+    />
     <FAIcon
+      v-else
       :class="classes"
-      class="fa-scale-110 fa-old-padding"
+      class="RetweetButton fa-scale-110 fa-old-padding"
       icon="retweet"
       :title="$t('tool_tip.repeat')"
     />
@@ -38,18 +38,16 @@
 
 .RetweetButton {
   &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
   }
-
-  &.-repeated {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
-  }
 }
 </style>