From 7b99d98c553f40ec4d633d0d4fdf65f275c80e77 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 12:32:42 +0200
Subject: Replace all use of <a> + href='#' with proper buttons

---
 src/App.scss | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index ca7d33cd..ef2a13b1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -33,6 +33,7 @@ h4 {
   max-width: 980px;
   align-content: flex-start;
 }
+
 .underlay {
   background-color: rgba(0,0,0,0.15);
   background-color: var(--underlay, rgba(0,0,0,0.15));
@@ -69,7 +70,7 @@ a {
   color: var(--link, $fallback--link);
 }
 
-button {
+.button-default {
   user-select: none;
   color: $fallback--text;
   color: var(--btnText, $fallback--text);
@@ -85,7 +86,9 @@ button {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  i[class*=icon-], .svg-inline--fa {
+  i[class*=icon-],
+  :not(&.-icon),
+  .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -149,6 +152,29 @@ button {
   }
 }
 
+.button-unstyled {
+  background: none;
+  border: none;
+  outline: none;
+  display: inline;
+  text-align: initial;
+  font-size: 100%;
+  font-family: inherit;
+  padding: 0;
+  line-height: unset;
+  cursor: pointer;
+
+  &.-link {
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-padded {
+    padding: 5px;
+    margin: -5px;
+  }
+}
+
 input, textarea, .select, .input {
 
   &.unstyled {
@@ -797,7 +823,7 @@ nav {
   }
 }
 
-.btn.btn-default {
+.btn.button-default {
   min-height: 28px;
 }
 
-- 
cgit v1.2.3-70-g09d2


From 8b775f94a99b4cdda2c8581d1803a0599c8b0e3a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 14:52:01 +0200
Subject: more fixes, add fullwidth

---
 src/App.scss                                     | 34 +++++++++++++++---------
 src/components/emoji_input/emoji_input.vue       |  6 ++---
 src/components/extra_buttons/extra_buttons.vue   | 10 ++++---
 src/components/notifications/notifications.vue   |  2 +-
 src/components/popover/popover.js                |  2 +-
 src/components/popover/popover.vue               |  5 ++--
 src/components/react_button/react_button.vue     | 13 ++++-----
 src/components/scope_selector/scope_selector.vue | 24 ++++++++---------
 src/components/side_drawer/side_drawer.vue       |  5 ++--
 src/components/timeline/timeline.vue             |  2 +-
 src/components/timeline_menu/timeline_menu.vue   |  1 +
 src/hocs/with_load_more/with_load_more.js        |  6 ++++-
 12 files changed, 63 insertions(+), 47 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index ef2a13b1..1d0abb51 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -163,6 +163,8 @@ a {
   padding: 0;
   line-height: unset;
   cursor: pointer;
+  box-sizing: content-box;
+  color: inherit;
 
   &.-link {
     color: $fallback--link;
@@ -170,8 +172,12 @@ a {
   }
 
   &.-padded {
-    padding: 5px;
-    margin: -5px;
+    padding: 10px;
+    margin: -10px;
+  }
+
+  &.-fullwidth {
+    width: 100%;
   }
 }
 
@@ -468,6 +474,7 @@ main-router {
     color: $fallback--faint;
     color: var(--panelFaint, $fallback--faint);
   }
+
   .faint-link {
     color: $fallback--faint;
     color: var(--faintLink, $fallback--faint);
@@ -479,11 +486,8 @@ main-router {
     overflow-x: hidden;
   }
 
-  button {
-    flex-shrink: 0;
-  }
-
-  button, .alert {
+  .button-default,
+  .alert {
     // height: 100%;
     line-height: 21px;
     min-height: 0;
@@ -494,8 +498,11 @@ main-router {
     align-self: stretch;
   }
 
-  button {
-    &, i[class*=icon-] {
+  .button-default {
+    flex-shrink: 0;
+
+    &,
+    i[class*=icon-] {
       color: $fallback--text;
       color: var(--btnPanelText, $fallback--text);
     }
@@ -518,7 +525,8 @@ main-router {
     }
   }
 
-  a {
+  a,
+  .-link {
     color: $fallback--link;
     color: var(--panelLink, $fallback--link)
   }
@@ -533,15 +541,15 @@ main-router {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
 
-
   .faint {
     color: $fallback--faint;
     color: var(--panelFaint, $fallback--faint);
   }
 
-  a {
+  a,
+  .-link {
     color: $fallback--link;
-    color: var(--panelLink, $fallback--link)
+    color: var(--panelLink, $fallback--link);
   }
 }
 
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 224e72cf..d308bf86 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -6,13 +6,13 @@
   >
     <slot />
     <template v-if="enableEmojiPicker">
-      <div
+      <button
         v-if="!hideEmojiButton"
-        class="emoji-picker-icon"
+        class="button-unstyled emoji-picker-icon"
         @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
-      </div>
+      </button>
       <EmojiPicker
         v-if="enableEmojiPicker"
         ref="picker"
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 5c9e1963..1578267c 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,7 +2,7 @@
   <Popover
     trigger="click"
     placement="top"
-    class="extra-button-popover"
+    :offset="{ y: -5 }"
     :bound-to="{ x: 'container' }"
   >
     <div
@@ -97,15 +97,15 @@
         </button>
       </div>
     </div>
-    <button
+    <span
       slot="trigger"
-      class="ExtraButtons button-unstyled -padded"
+      class="ExtraButtons"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
       />
-    </button>
+    </span>
   </Popover>
 </template>
 
@@ -117,6 +117,8 @@
 .ExtraButtons {
   cursor: pointer;
   position: static;
+  padding: 10px;
+  margin: -10px;
 
   &:hover .svg-inline--fa {
     color: $fallback--text;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 663f623b..725d1ad4 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -43,7 +43,7 @@
         </div>
         <button
           v-else-if="!loading"
-          class="button-unstyled -link"
+          class="button-unstyled -link -fullwidth"
           @click.prevent="fetchOlderNotifications()"
         >
           <div class="new-status-notification text-center panel-footer">
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 695f73b9..db4a768b 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -99,7 +99,7 @@ const Popover = {
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
         ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
-        : yOffset
+        : -yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 9b8680e5..3868ec96 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -3,12 +3,13 @@
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
-    <div
+    <button
       ref="trigger"
+      class="button-unstyled -fullwidth"
       @click="onClick"
     >
       <slot name="trigger" />
-    </div>
+    </button>
     <div
       v-if="!hidden"
       ref="content"
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ea4a8a9b..2e3cedd1 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -2,8 +2,7 @@
   <Popover
     trigger="click"
     placement="top"
-    :offset="{ y: 5 }"
-    class="react-button-popover"
+    :offset="{ y: -5 }"
     :bound-to="{ x: 'container' }"
   >
     <div
@@ -38,16 +37,16 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <button
+    <span
       slot="trigger"
-      class="add-reaction-button button-unstyled -padded"
+      class="AddReaction"
       :title="$t('tool_tip.add_reaction')"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         :icon="['far', 'smile-beam']"
       />
-    </button>
+    </span>
   </Popover>
 </template>
 
@@ -105,8 +104,10 @@
   }
 }
 
-.add-reaction-button {
+.AddReaction {
   cursor: pointer;
+  padding: 10px;
+  margin: -10px;
 
   &:hover .svg-inline--fa {
     color: $fallback--text;
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a22a4fda..66ac612e 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -3,9 +3,9 @@
     v-if="!showNothing"
     class="ScopeSelector"
   >
-    <span
+    <button
       v-if="showDirect"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
@@ -14,10 +14,10 @@
         icon="envelope"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
-    <span
+    </button>
+    <button
       v-if="showPrivate"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
@@ -26,10 +26,10 @@
         icon="lock"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
-    <span
+    </button>
+    <button
       v-if="showUnlisted"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
@@ -38,10 +38,10 @@
         icon="lock-open"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
-    <span
+    </button>
+    <button
       v-if="showPublic"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
@@ -50,7 +50,7 @@
         icon="globe"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
+    </button>
   </div>
 </template>
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c14c1ab..695ae03b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -145,7 +145,7 @@
         </li>
         <li @click="toggleDrawer">
           <button
-            class="button-unstyled -link"
+            class="button-unstyled -link -fullwidth"
             @click="openSettingsModal"
           >
             <FAIcon
@@ -184,7 +184,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link"
+            class="button-unstyled -link -fullwidth"
             @click="doLogout"
           >
             <FAIcon
@@ -337,7 +337,6 @@
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
-    width: 100%;
 
     &:hover {
       background-color: $fallback--lightBg;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8ffa4499..52fd674e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -63,7 +63,7 @@
       </div>
       <button
         v-else-if="!timeline.loading"
-        class="button-unstyled -link"
+        class="button-unstyled -link -fullwidth"
         @click.prevent="fetchOlderStatuses()"
       >
         <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index c46531be..f8f79be9 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -84,6 +84,7 @@
   margin-right: auto;
   min-width: 0;
   width: 24rem;
+  height: 28px;
 
   .timeline-menu-popover-wrap {
     overflow: hidden;
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index afb51a0f..7df9dbb2 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -91,7 +91,11 @@ const withLoadMore = ({
             {children}
           </WrappedComponent>
           <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
+            {this.error &&
+              <button onClick={this.fetchEntries} class="button-unstyled -link -fullwidth alert error">
+                {this.$t('general.generic_error')}
+              </button>
+            }
             {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
             {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
           </div>
-- 
cgit v1.2.3-70-g09d2


From a6e495e4138e80888ea77e144f0330cd83d4a986 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 16:10:03 +0200
Subject: fix warnings

---
 src/App.scss                                 |  2 +-
 src/components/notification/notification.vue | 10 ++++++----
 src/components/timeline/timeline.vue         |  4 +++-
 3 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 1d0abb51..76a5e797 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -71,7 +71,6 @@ a {
 }
 
 .button-default {
-  user-select: none;
   color: $fallback--text;
   color: var(--btnText, $fallback--text);
   background-color: $fallback--fg;
@@ -85,6 +84,7 @@ a {
   font-size: 14px;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
+  user-select: none;
 
   i[class*=icon-],
   :not(&.-icon),
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index ba3648fd..08eb80c9 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -135,10 +135,12 @@
             v-if="needMute"
             class="button-unstyled"
             @click.prevent="toggleMute"
-          ><FAIcon
-            class="fa-scale-110 fa-old-padding"
-            icon="eye-slash"
-          /></button>
+          >
+            <FAIcon
+              class="fa-scale-110 fa-old-padding"
+              icon="eye-slash"
+            />
+          </button>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 52fd674e..0326342b 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -66,7 +66,9 @@
         class="button-unstyled -link -fullwidth"
         @click.prevent="fetchOlderStatuses()"
       >
-        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
+        <div class="new-status-notification text-center panel-footer">
+          {{ $t('timeline.load_older') }}
+        </div>
       </button>
       <div
         v-else
-- 
cgit v1.2.3-70-g09d2


From 04af772c1e8851bb8e4ce9b46e8146c0755309ed Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 17:47:37 +0200
Subject: address missing button style, fix remaining warning

---
 src/App.scss                                 | 12 +++++++-----
 src/components/notification/notification.vue | 10 ++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 76a5e797..b2c7be13 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -71,6 +71,7 @@ a {
 }
 
 .button-default {
+  user-select: none;
   color: $fallback--text;
   color: var(--btnText, $fallback--text);
   background-color: $fallback--fg;
@@ -84,10 +85,8 @@ a {
   font-size: 14px;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
-  user-select: none;
 
   i[class*=icon-],
-  :not(&.-icon),
   .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
@@ -110,7 +109,8 @@ a {
     background-color: $fallback--fg;
     background-color: var(--btnPressed, $fallback--fg);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnPressedText, $fallback--text);
     }
@@ -123,7 +123,8 @@ a {
     background-color: $fallback--fg;
     background-color: var(--btnDisabled, $fallback--fg);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnDisabledText, $fallback--text);
     }
@@ -137,7 +138,8 @@ a {
     box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnToggledText, $fallback--text);
     }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 08eb80c9..f56aa977 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -17,10 +17,12 @@
       <button
         class="button-unstyled unmute"
         @click.prevent="toggleMute"
-      ><FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="eye-slash"
-      /></button>
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="eye-slash"
+        />
+      </button>
     </div>
     <div
       v-else
-- 
cgit v1.2.3-70-g09d2


From bee77ffdb284601720b9a13a19ca029af258d617 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 26 Nov 2020 18:23:53 +0200
Subject: fix retweet event handler, fix text being selectable for status
 action counters

---
 src/App.scss                                       |  5 ----
 src/components/favorite_button/favorite_button.vue | 24 ++++++++++++---
 src/components/notifications/notifications.vue     |  2 +-
 src/components/reply_button/reply_button.vue       | 25 ++++++++++++----
 src/components/retweet_button/retweet_button.vue   | 34 +++++++++++++++-------
 5 files changed, 65 insertions(+), 25 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index b2c7be13..cdc3209c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -173,11 +173,6 @@ a {
     color: var(--link, $fallback--link);
   }
 
-  &.-padded {
-    padding: 10px;
-    margin: -10px;
-  }
-
   &.-fullwidth {
     width: 100%;
   }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index d54ae78c..9fc4f9d8 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="FavoriteButton">
     <button
       v-if="loggedIn"
-      class="FavoriteButton -interactive button-unstyled -padded"
+      class="button-unstyled interactive"
       :class="status.favorited && '-favorited'"
       :title="$t('tool_tip.favorite')"
       @click.prevent="favorite()"
@@ -19,7 +19,12 @@
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
     />
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
+      class="action-counter"
+    >
+      {{ status.fave_num }}
+    </span>
   </div>
 </template>
 
@@ -29,8 +34,19 @@
 @import '../../_variables.scss';
 
 .FavoriteButton {
-  &.-interactive {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -5px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
 
+  .interactive {
     .svg-inline--fa {
       animation-duration: 0.6s;
     }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 725d1ad4..4cdb436c 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -43,7 +43,7 @@
         </div>
         <button
           v-else-if="!loading"
-          class="button-unstyled -link -fullwidth"
+          class="button-unstyled -link -block"
           @click.prevent="fetchOlderNotifications()"
         >
           <div class="new-status-notification text-center panel-footer">
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 1b02881a..fb010278 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="ReplyButton">
     <button
       v-if="loggedIn"
-      class="button-unstyled ReplyButton -padded -interactive"
+      class="button-unstyled interactive"
       :class="{'-active': replying}"
       :title="$t('tool_tip.reply')"
       @click.prevent="$emit('toggle')"
@@ -15,10 +15,13 @@
     <FAIcon
       v-else
       icon="reply"
-      class="ReplyButton fa-scale-110 fa-old-padding"
+      class="fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.reply')"
     />
-    <span v-if="status.replies_count > 0">
+    <span
+      v-if="status.replies_count > 0"
+      class="action-counter"
+    >
       {{ status.replies_count }}
     </span>
   </div>
@@ -30,13 +33,25 @@
 @import '../../_variables.scss';
 
 .ReplyButton {
-  &.-interactive {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -5px -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>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 5d4915aa..2a7301ce 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,33 +1,36 @@
 <template>
-  <div>
+  <div class="RetweetButton">
     <button
       v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
-      class="button-unstyled -padded RetweetButton -interactive"
+      class="button-unstyled interactive"
       :class="status.repeated && '-repeated'"
+      :title="$t('tool_tip.repeat')"
+      @click.prevent="retweet()"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="retweet"
         :spin="animated"
-        :title="$t('tool_tip.repeat')"
-        @click.prevent="retweet()"
       />
     </button>
     <FAIcon
       v-else-if="loggedIn"
-      :class="classes"
-      class="RetweetButton fa-scale-110 fa-old-padding"
+      class="fa-scale-110 fa-old-padding"
       icon="lock"
       :title="$t('timeline.no_retweet_hint')"
     />
     <FAIcon
       v-else
-      :class="classes"
-      class="RetweetButton fa-scale-110 fa-old-padding"
+      class="fa-scale-110 fa-old-padding"
       icon="retweet"
       :title="$t('tool_tip.repeat')"
     />
-    <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
+      class="no-event"
+    >
+      {{ status.repeat_num }}
+    </span>
   </div>
 </template>
 
@@ -37,8 +40,19 @@
 @import '../../_variables.scss';
 
 .RetweetButton {
-  &.-interactive {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -5px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
 
+  .interactive {
     .svg-inline--fa {
       animation-duration: 0.6s;
     }
-- 
cgit v1.2.3-70-g09d2