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

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;
 }
 

src/components/account_actions/account_actions.vue

@@ -13,14 +13,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -32,27 +32,27 @@
           </template>
           <button
             v-if="relationship.blocking"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
@@ -61,7 +61,7 @@
       </div>
       <div
         slot="trigger"
-        class="btn btn-default ellipsis-button"
+        class="ellipsis-button"
       >
         <FAIcon
           class="icon"

src/components/async_component_error/async_component_error.vue

@@ -8,7 +8,7 @@
         {{ $t('general.error_retry') }}
       </p>
       <button
-        class="btn"
+        class="btn button-default"
         @click="retry"
       >
         {{ $t('general.retry') }}

src/components/attachment/attachment.js

@@ -9,7 +9,8 @@ import {
   faMusic,
   faImage,
   faVideo,
-  faPlayCircle
+  faPlayCircle,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -17,7 +18,8 @@ library.add(
   faMusic,
   faImage,
   faVideo,
-  faPlayCircle
+  faPlayCircle,
+  faTimes
 )
 
 const Attachment = {

src/components/attachment/attachment.vue

@@ -42,15 +42,13 @@
         icon="play-circle"
       />
     </a>
-    <div
+    <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
+      class="button-unstyled -padded hider"
+      @click.prevent="toggleHidden"
     >
-      <a
-        href="#"
-        @click.prevent="toggleHidden"
-      >Hide</a>
-    </div>
+      <FAIcon icon="times" />
+    </button>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
@@ -234,15 +232,23 @@
   .hider {
     position: absolute;
     right: 0;
-    white-space: nowrap;
     margin: 10px;
     padding: 5px;
-    background: rgba(230,230,230,0.6);
-    font-weight: bold;
     z-index: 4;
-    line-height: 1;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    font-size: 1.25em;
+    // TODO: theming? hard to theme with unknown background image color
+    background: rgba(230, 230, 230, 0.7);
+    .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    &:hover .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.9);
+    }
   }
 
   video {

src/components/block_card/block_card.vue

@@ -3,7 +3,7 @@
     <div class="block-card-content-container">
       <button
         v-if="blocked"
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="unblockUser"
       >
@@ -16,7 +16,7 @@
       </button>
       <button
         v-else
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="blockUser"
       >

src/components/chat_list/chat_list.vue

@@ -10,7 +10,10 @@
       <span class="title">
         {{ $t("chats.chats") }}
       </span>
-      <button @click="newChat">
+      <button
+        class="button-default"
+        @click="newChat"
+      >
         {{ $t("chats.new") }}
       </button>
     </div>

src/components/chat_message/chat_message.scss

@@ -31,9 +31,6 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
   }
 
   .popover {

src/components/chat_message/chat_message.vue

@@ -53,7 +53,7 @@
                 <div slot="content">
                   <div class="dropdown-menu">
                     <button
-                      class="dropdown-item dropdown-item-icon"
+                      class="button-default dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
@@ -62,7 +62,7 @@
                 </div>
                 <button
                   slot="trigger"
-                  class="menu-icon"
+                  class="button-default menu-icon"
                   :title="$t('chats.more')"
                 >
                   <FAIcon icon="ellipsis-h" />

src/components/conversation/conversation.vue

@@ -10,12 +10,13 @@
       class="panel-heading conversation-heading"
     >
       <span class="title"> {{ $t('timeline.conversation') }} </span>
-      <span v-if="collapsable">
-        <a
-          href="#"
-          @click.prevent="toggleExpanded"
-        >{{ $t('timeline.collapse') }}</a>
-      </span>
+      <button
+        v-if="collapsable"
+        class="button-unstyled -link"
+        @click.prevent="toggleExpanded"
+      >
+        {{ $t('timeline.collapse') }}
+      </button>
     </div>
     <status
       v-for="status in conversation"

src/components/desktop_nav/desktop_nav.scss

@@ -80,12 +80,14 @@
   .nav-icon {
     margin-left: 0.2em;
     width: 2em;
+    height: 100%;
     text-align: center;
-  }
+    cursor: pointer;
 
-  a, a svg {
-    color: $fallback--link;
-    color: var(--topBarLink, $fallback--link);
+    .svg-inline--fa {
+      color: $fallback--link;
+      color: var(--topBarLink, $fallback--link);
+    }
   }
 
   .sitename {

src/components/desktop_nav/desktop_nav.vue

@@ -36,9 +36,8 @@
           @toggled="onSearchBarToggled"
           @click.stop.native
         />
-        <a
-          href="#"
-          class="nav-icon"
+        <button
+          class="button-unstyled nav-icon"
           @click.stop="openSettingsModal"
         >
           <FAIcon
@@ -47,29 +46,32 @@
             icon="cog"
             :title="$t('nav.preferences')"
           />
-        </a>
+        </button>
         <a
           v-if="currentUser && currentUser.role === 'admin'"
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
-        ><FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding"
-          icon="tachometer-alt"
-          :title="$t('nav.administration')"
-        /></a>
-        <a
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="tachometer-alt"
+            :title="$t('nav.administration')"
+          />
+        </a>
+        <button
           v-if="currentUser"
-          href="#"
-          class="nav-icon"
+          class="button-unstyled nav-icon"
           @click.prevent="logout"
-        ><FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding"
-          icon="sign-out-alt"
-          :title="$t('login.logout')"
-        /></a>
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+            :title="$t('login.logout')"
+          />
+        </button>
       </div>
     </div>
   </nav>

src/components/domain_mute_card/domain_mute_card.vue

@@ -6,7 +6,7 @@
     <ProgressButton
       v-if="muted"
       :click="unmuteDomain"
-      class="btn btn-default"
+      class="btn button-default"
     >
       {{ $t('domain_mute_card.unmute') }}
       <template slot="progress">
@@ -16,7 +16,7 @@
     <ProgressButton
       v-else
       :click="muteDomain"
-      class="btn btn-default"
+      class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
       <template slot="progress">

src/components/emoji_reactions/emoji_reactions.vue

@@ -6,7 +6,7 @@
       :users="accountsForEmoji[reaction.name]"
     >
       <button
-        class="emoji-reaction btn btn-default"
+        class="emoji-reaction btn button-default"
         :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"

src/components/export_import/export_import.vue

@@ -2,13 +2,13 @@
   <div class="import-export-container">
     <slot name="before" />
     <button
-      class="btn"
+      class="btn button-default"
       @click="exportData"
     >
       {{ exportLabel }}
     </button>
     <button
-      class="btn"
+      class="btn button-default"
       @click="importData"
     >
       {{ importLabel }}

src/components/exporter/exporter.vue

@@ -11,7 +11,7 @@
     </div>
     <button
       v-else
-      class="btn btn-default"
+      class="btn button-default"
       @click="process"
     >
       {{ exportButtonLabel }}

src/components/extra_buttons/extra_buttons.vue

@@ -12,7 +12,7 @@
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
           <FAIcon
@@ -22,7 +22,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
           <FAIcon
@@ -32,7 +32,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="pinStatus"
           @click="close"
         >
@@ -43,7 +43,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="unpinStatus"
           @click="close"
         >
@@ -54,7 +54,7 @@
         </button>
         <button
           v-if="!status.bookmarked"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="bookmarkStatus"
           @click="close"
         >
@@ -65,7 +65,7 @@
         </button>
         <button
           v-if="status.bookmarked"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
@@ -76,7 +76,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -86,7 +86,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
@@ -97,12 +97,15 @@
         </button>
       </div>
     </div>
-    <span slot="trigger">
+    <button
+      slot="trigger"
+      class="ExtraButtons button-unstyled -padded"
+    >
       <FAIcon
-        class="ExtraButtons fa-scale-110 fa-old-padding"
+        class="fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
       />
-    </span>
+    </button>
   </Popover>
 </template>
 
@@ -115,8 +118,7 @@
   cursor: pointer;
   position: static;
 
-  &:hover,
-  .extra-button-popover.open & {
+  &:hover .svg-inline--fa {
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }

src/components/favorite_button/favorite_button.js

@@ -31,11 +31,6 @@ const FavoriteButton = {
     }
   },
   computed: {
-    classes () {
-      return {
-        '-favorited': this.status.favorited
-      }
-    },
     ...mapGetters(['mergedConfig'])
   }
 }

src/components/favorite_button/favorite_button.vue

@@ -1,18 +1,20 @@
 <template>
-  <div v-if="loggedIn">
-    <FAIcon
-      :class="classes"
-      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+  <div>
+    <button
+      v-if="loggedIn"
+      class="FavoriteButton -interactive button-unstyled -padded"
+      :class="status.favorited && '-favorited'"
       :title="$t('tool_tip.favorite')"
-      :icon="[status.favorited ? 'fas' : 'far', 'star']"
-      :spin="animated"
       @click.prevent="favorite()"
-    />
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
-  </div>
-  <div v-else>
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :icon="[status.favorited ? 'fas' : 'far', 'star']"
+        :spin="animated"
+      />
+    </button>
     <FAIcon
-      :class="classes"
+      v-else
       class="FavoriteButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
@@ -28,18 +30,16 @@
 
 .FavoriteButton {
   &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-favorited .svg-inline--fa {
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
   }
-
-  &.-favorited {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
-  }
 }
 </style>

src/components/follow_button/follow_button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn btn-default follow-button"
+    class="btn button-default follow-button"
     :class="{ toggled: isPressed }"
     :disabled="inProgress"
     :title="title"

src/components/follow_request_card/follow_request_card.vue

@@ -2,13 +2,13 @@
   <basic-user-card :user="user">
     <div class="follow-request-card-content-container">
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="approveUser"
       >
         {{ $t('user_card.approve') }}
       </button>
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="denyUser"
       >
         {{ $t('user_card.deny') }}

src/components/image_cropper/image_cropper.vue

@@ -11,21 +11,21 @@
       </div>
       <div class="image-cropper-buttons-wrapper">
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="submit()"
           v-text="saveText"
         />
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="destroy"
           v-text="cancelText"
         />
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="submit(false)"

src/components/importer/importer.vue

@@ -15,7 +15,7 @@
     />
     <button
       v-else
-      class="btn btn-default"
+      class="btn button-default"
       @click="submit"
     >
       {{ submitButtonLabel }}

src/components/login_form/login_form.vue

@@ -61,7 +61,7 @@
             <button
               :disabled="loggingIn"
               type="submit"
-              class="btn btn-default"
+              class="btn button-default"
             >
               {{ $t('login.login') }}
             </button>

src/components/media_upload/media_upload.vue

@@ -1,33 +1,29 @@
 <template>
-  <div
+  <label
     class="media-upload"
     :class="{ disabled: disabled }"
+    :title="$t('tool_tip.media_upload')"
   >
-    <label
-      class="label"
-      :title="$t('tool_tip.media_upload')"
+    <FAIcon
+      v-if="uploading"
+      class="progress-icon"
+      icon="circle-notch"
+      spin
+    />
+    <FAIcon
+      v-if="!uploading"
+      class="new-icon"
+      icon="upload"
+    />
+    <input
+      v-if="uploadReady"
+      :disabled="disabled"
+      type="file"
+      style="position: fixed; top: -100em"
+      multiple="true"
+      @change="change"
     >
-      <FAIcon
-        v-if="uploading"
-        class="progress-icon"
-        icon="circle-notch"
-        spin
-      />
-      <FAIcon
-        v-if="!uploading"
-        class="new-icon"
-        icon="upload"
-      />
-      <input
-        v-if="uploadReady"
-        :disabled="disabled"
-        type="file"
-        style="position: fixed; top: -100em"
-        multiple="true"
-        @change="change"
-      >
-    </label>
-  </div>
+  </label>
 </template>
 
 <script src="./media_upload.js" ></script>
@@ -36,12 +32,6 @@
 @import '../../_variables.scss';
 
 .media-upload {
-  .label {
-    display: inline-block;
-  }
-
-  .new-icon {
-    cursor: pointer;
-  }
+  cursor: pointer;
 }
  </style>

src/components/mfa_form/recovery_form.vue

@@ -23,23 +23,23 @@
         <div class="form-group">
           <div class="login-bottom">
             <div>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
                 @click.prevent="requireTOTP"
               >
                 {{ $t('login.enter_two_factor_code') }}
-              </a>
+              </button>
               <br>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
                 @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
-              </a>
+              </button>
             </div>
             <button
               type="submit"
-              class="btn btn-default"
+              class="btn button-default"
             >
               {{ $t('general.verify') }}
             </button>

src/components/mfa_form/totp_form.vue

@@ -25,23 +25,23 @@
         <div class="form-group">
           <div class="login-bottom">
             <div>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
                 @click.prevent="requireRecovery"
               >
                 {{ $t('login.enter_recovery_code') }}
-              </a>
+              </button>
               <br>
-              <a
-                href="#"
+              <button
+                class="button-unstyled -link"
                 @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
-              </a>
+              </button>
             </div>
             <button
               type="submit"
-              class="btn btn-default"
+              class="btn button-default"
             >
               {{ $t('general.verify') }}
             </button>

src/components/mobile_nav/mobile_nav.vue

@@ -9,9 +9,8 @@
       @click="scrollToTop()"
     >
       <div class="item">
-        <a
-          href="#"
-          class="mobile-nav-button"
+        <button
+          class="button-unstyled mobile-nav-button"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -22,7 +21,7 @@
             v-if="unreadChatCount"
             class="alert-dot"
           />
-        </a>
+        </button>
         <router-link
           v-if="!hideSitename"
           class="site-name"
@@ -33,10 +32,9 @@
         </router-link>
       </div>
       <div class="item right">
-        <a
+        <button
           v-if="currentUser"
-          class="mobile-nav-button"
-          href="#"
+          class="button-unstyled mobile-nav-button"
           @click.stop.prevent="openMobileNotifications()"
         >
           <FAIcon
@@ -47,7 +45,7 @@
             v-if="unseenNotificationsCount"
             class="alert-dot"
           />
-        </a>
+        </button>
       </div>
     </nav>
     <div

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isLoggedIn">
     <button
-      class="new-status-button"
+      class="button-default new-status-button"
       :class="{ 'hidden': isHidden }"
       @click="openPostForm"
     >

src/components/moderation_tools/moderation_tools.vue

@@ -124,7 +124,7 @@
       </div>
       <button
         slot="trigger"
-        class="btn btn-default btn-block"
+        class="btn button-default btn-block"
         :class="{ toggled }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
@@ -141,13 +141,13 @@
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
         <template slot="footer">
           <button
-            class="btn btn-default"
+            class="btn button-default"
             @click="deleteUserDialog(false)"
           >
             {{ $t('general.cancel') }}
           </button>
           <button
-            class="btn btn-default danger"
+            class="btn button-default danger"
             @click="deleteUser()"
           >
             {{ $t('user_card.admin_menu.delete_user') }}

src/components/mute_card/mute_card.vue

@@ -3,7 +3,7 @@
     <div class="mute-card-content-container">
       <button
         v-if="muted"
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="unmuteUser"
       >
@@ -16,7 +16,7 @@
       </button>
       <button
         v-else
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="muteUser"
       >

src/components/notification/notification.vue

@@ -14,14 +14,13 @@
           {{ notification.from_profile.screen_name }}
         </router-link>
       </small>
-      <a
-        href="#"
-        class="unmute"
+      <button
+        class="button-unstyled unmute"
         @click.prevent="toggleMute"
       ><FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="eye-slash"
-      /></a>
+      /></button>
     </div>
     <div
       v-else
@@ -132,14 +131,14 @@
               />
             </span>
           </div>
-          <a
+          <button
             v-if="needMute"
-            href="#"
+            class="button-unstyled"
             @click.prevent="toggleMute"
           ><FAIcon
             class="fa-scale-110 fa-old-padding"
             icon="eye-slash"
-          /></a>
+          /></button>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"

src/components/notifications/notifications.vue

@@ -17,7 +17,7 @@
         </div>
         <button
           v-if="unseenCount"
-          class="read-button"
+          class="button-default read-button"
           @click.prevent="markAsSeen"
         >
           {{ $t('notifications.read') }}
@@ -41,15 +41,15 @@
         >
           {{ $t('notifications.no_more_notifications') }}
         </div>
-        <a
+        <button
           v-else-if="!loading"
-          href="#"
+          class="button-unstyled -link"
           @click.prevent="fetchOlderNotifications()"
         >
           <div class="new-status-notification text-center panel-footer">
             {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
           </div>
-        </a>
+        </button>
         <div
           v-else
           class="new-status-notification text-center panel-footer"

src/components/password_reset/password_reset.vue

@@ -51,7 +51,7 @@
               <button
                 :disabled="isPending"
                 type="submit"
-                class="btn btn-default btn-block"
+                class="btn button-default btn-block"
               >
                 {{ $t('general.submit') }}
               </button>

src/components/poll/poll.vue

@@ -49,7 +49,7 @@
     <div class="footer faint">
       <button
         v-if="!showResults"
-        class="btn btn-default poll-vote-button"
+        class="btn button-default poll-vote-button"
         type="button"
         :disabled="isDisabled"
         @click="vote"

src/components/post_status_form/post_status_form.vue

@@ -24,12 +24,12 @@
           tag="p"
           class="visibility-notice"
         >
-          <a
-            href="#"
+          <button
+            class="button-unstyled -link"
             @click="openProfileTab"
           >
             {{ $t('post_status.account_not_locked_warning_link') }}
-          </a>
+          </button>
         </i18n>
         <p
           v-if="!hideScopeNotice && newStatus.visibility === 'public'"
@@ -243,38 +243,34 @@
             @upload-failed="uploadFailed"
             @all-uploaded="finishedUploadingFiles"
           />
-          <div
-            class="emoji-icon"
+          <button
+            class="emoji-icon button-unstyled"
+            :title="$t('emoji.add_emoji')"
+            @click="showEmojiPicker"
           >
-            <div
-              :title="$t('emoji.add_emoji')"
-              class="btn btn-default"
-              @click="showEmojiPicker"
-            >
-              <FAIcon icon="smile-beam" />
-            </div>
-          </div>
-          <div
+            <FAIcon icon="smile-beam" />
+          </button>
+          <button
             v-if="pollsAvailable"
-            class="poll-icon"
+            class="poll-icon button-unstyled"
             :class="{ selected: pollFormVisible }"
             :title="$t('polls.add_poll')"
             @click="togglePollForm"
           >
             <FAIcon icon="poll-h" />
-          </div>
+          </button>
         </div>
         <button
           v-if="posting"
           disabled
-          class="btn btn-default"
+          class="btn button-default"
         >
           {{ $t('post_status.posting') }}
         </button>
         <button
           v-else-if="isOverLengthLimit"
           disabled
-          class="btn btn-default"
+          class="btn button-default"
         >
           {{ $t('general.submit') }}
         </button>
@@ -282,7 +278,7 @@
         <button
           v-else
           :disabled="uploadingFiles || disableSubmit"
-          class="btn btn-default"
+          class="btn button-default"
           @touchstart.stop.prevent="postStatus($event, newStatus)"
           @click.stop.prevent="postStatus($event, newStatus)"
         >

src/components/react_button/react_button.vue

@@ -38,13 +38,16 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <span slot="trigger">
+    <button
+      slot="trigger"
+      class="add-reaction-button button-unstyled -padded"
+      :title="$t('tool_tip.add_reaction')"
+    >
       <FAIcon
-        class="fa-scale-110 fa-old-padding add-reaction-button"
+        class="fa-scale-110 fa-old-padding"
         :icon="['far', 'smile-beam']"
-        :title="$t('tool_tip.add_reaction')"
       />
-    </span>
+    </button>
   </Popover>
 </template>
 
@@ -105,7 +108,7 @@
 .add-reaction-button {
   cursor: pointer;
 
-  &:hover {
+  &:hover .svg-inline--fa {
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }

src/components/registration/registration.vue

@@ -211,7 +211,7 @@
               <button
                 :disabled="isPending"
                 type="submit"
-                class="btn btn-default"
+                class="btn button-default"
               >
                 {{ $t('general.submit') }}
               </button>

src/components/reply_button/reply_button.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
-    <FAIcon
+    <button
       v-if="loggedIn"
-      class="ReplyButton fa-scale-110 fa-old-padding -interactive"
-      icon="reply"
-      :title="$t('tool_tip.reply')"
+      class="button-unstyled ReplyButton -padded -interactive"
       :class="{'-active': replying}"
+      :title="$t('tool_tip.reply')"
       @click.prevent="$emit('toggle')"
-    />
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="reply"
+      />
+    </button>
     <FAIcon
       v-else
       icon="reply"
@@ -27,10 +31,9 @@
 
 .ReplyButton {
   &.-interactive {
-    cursor: pointer;
 
-    &:hover,
-    &.-active {
+    &:hover .svg-inline--fa,
+    &.-active .svg-inline--fa {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }

src/components/retweet_button/retweet_button.js

@@ -24,11 +24,6 @@ const RetweetButton = {
     }
   },
   computed: {
-    classes () {
-      return {
-        '-repeated': this.status.repeated
-      }
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }

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>
-    </