Merge branch 'fix/use-semantically-correct-buttons' into 'develop'

Fix #1001 Accessibility: Use semantically correct buttons (almost) everywhere Closes #1001 See merge request pleroma/pleroma-fe!1293
2020-12-01 11:02:46 +00:00 · 2020-12-01 11:02:46 +00:00 · fdfb8810c1
commit fdfb8810c1
parent c655699935 655d985a82
67 changed files with 547 additions and 445 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -14,12 +14,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed the occasional bug where screen would scroll 1px when typing into a reply form
 - Fixed timeline errors locking timelines
 - Fixed missing highlighted border in expanded conversations
+- Fixed custom emoji not working in profile field names
+- Fixed pinned statuses not appearing in user profiles
+- Fixed some elements not being keyboard navigation friendly

 ### Changed
 - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
- Fixed custom emoji not working in profile field names
- Fixed pinned statuses not appearing in user profiles
- Fixed username autocomplete being jumpy
+- Made reply/fav/repeat etc buttons easier to hit


 ## [2.2.1] - 2020-11-11
--- 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,8 @@ button {
  font-family: sans-serif;
  font-family: var(--interfaceFont, sans-serif);

-  i[class*=icon-], .svg-inline--fa {
+  i[class*=icon-],
+  .svg-inline--fa {
    color: $fallback--text;
    color: var(--btnText, $fallback--text);
  }
@ -107,7 +109,8 @@ button {
    background-color: $fallback--fg;
    background-color: var(--btnPressed, $fallback--fg);

-    svg, i {
+    svg,
+    i {
      color: $fallback--text;
      color: var(--btnPressedText, $fallback--text);
    }
@ -120,7 +123,8 @@ button {
    background-color: $fallback--fg;
    background-color: var(--btnDisabled, $fallback--fg);

-    svg, i {
+    svg,
+    i {
      color: $fallback--text;
      color: var(--btnDisabledText, $fallback--text);
    }
@ -134,7 +138,8 @@ button {
    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);
    }
@ -149,6 +154,30 @@ 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;
+  box-sizing: content-box;
+  color: inherit;
+
+  &.-link {
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-fullwidth {
+    width: 100%;
+  }
+}
+
 input, textarea, .select, .input {

  &.unstyled {
@ -442,6 +471,7 @@ main-router {
    color: $fallback--faint;
    color: var(--panelFaint, $fallback--faint);
  }
+
  .faint-link {
    color: $fallback--faint;
    color: var(--faintLink, $fallback--faint);
@ -453,11 +483,8 @@ main-router {
    overflow-x: hidden;
  }

-  button {
-    flex-shrink: 0;
-  }
-
-  button, .alert {
+  .button-default,
+  .alert {
    // height: 100%;
    line-height: 21px;
    min-height: 0;
@ -468,8 +495,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);
    }
@ -492,7 +522,8 @@ main-router {
    }
  }

-  a {
+  a,
+  .-link {
    color: $fallback--link;
    color: var(--panelLink, $fallback--link)
  }
@ -507,15 +538,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);
  }
 }

@ -797,7 +828,7 @@ nav {
  }
 }

-.btn.btn-default {
+.btn.button-default {
  min-height: 28px;
 }

--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -4,6 +4,7 @@
      trigger="click"
      placement="bottom"
      :bound-to="{ x: 'container' }"
+      remove-padding
    >
      <div
        slot="content"
@ -13,14 +14,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 +33,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 +62,7 @@
      </div>
      <div
        slot="trigger"
-        class="btn btn-default ellipsis-button"
+        class="ellipsis-button"
      >
        <FAIcon
          class="icon"
--- a/src/components/async_component_error/async_component_error.vue
+++ b/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') }}
--- a/src/components/attachment/attachment.js
+++ b/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 = {
--- a/src/components/attachment/attachment.vue
+++ b/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 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;
+    padding: 0;
    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 {
--- a/src/components/block_card/block_card.vue
+++ b/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"
      >
--- a/src/components/chat_list/chat_list.vue
+++ b/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>
--- a/src/components/chat_message/chat_message.scss
+++ b/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 {
--- a/src/components/chat_message/chat_message.vue
+++ b/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" />
--- a/src/components/conversation/conversation.vue
+++ b/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"
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -21,7 +21,7 @@
    grid-template-areas: "logo sitename actions";
  }

-  button {
+  .button-default {
    &, svg {
      color: $fallback--text;
      color: var(--btnTopBarText, $fallback--text);
@ -80,12 +80,13 @@
  .nav-icon {
    margin-left: 0.2em;
    width: 2em;
+    height: 100%;
    text-align: center;
-  }

-  a, a svg {
-    color: $fallback--link;
-    color: var(--topBarLink, $fallback--link);
+    .svg-inline--fa {
+      color: $fallback--link;
+      color: var(--topBarLink, $fallback--link);
+    }
  }

  .sitename {
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/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>
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/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">
--- 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"
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/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()"
--- a/src/components/export_import/export_import.vue
+++ b/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 }}
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@ -11,7 +11,7 @@
    </div>
    <button
      v-else
-      class="btn btn-default"
+      class="btn button-default"
      @click="process"
    >
      {{ exportButtonLabel }}
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@ -2,8 +2,9 @@
  <Popover
    trigger="click"
    placement="top"
-    class="extra-button-popover"
+    :offset="{ y: 5 }"
    :bound-to="{ x: 'container' }"
+    remove-padding
  >
    <div
      slot="content"
@ -12,7 +13,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 +23,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 +33,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 +44,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 +55,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 +66,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 +77,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 +87,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,9 +98,12 @@
        </button>
      </div>
    </div>
-    <span slot="trigger">
+    <span
+      slot="trigger"
+      class="ExtraButtons"
+    >
      <FAIcon
-        class="ExtraButtons fa-scale-110 fa-old-padding"
+        class="fa-scale-110 fa-old-padding"
        icon="ellipsis-h"
      />
    </span>
@ -112,11 +116,11 @@
@import '../../_variables.scss';

 .ExtraButtons {
-  cursor: pointer;
  position: static;
+  padding: 10px;
+  margin: -10px;

-  &:hover,
-  .extra-button-popover.open & {
+  &:hover .svg-inline--fa {
    color: $fallback--text;
    color: var(--text, $fallback--text);
  }
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@ -31,11 +31,6 @@ const FavoriteButton = {
    }
  },
  computed: {
-    classes () {
-      return {
-        '-favorited': this.status.favorited
-      }
-    },
    ...mapGetters(['mergedConfig'])
  }
 }
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@ -1,23 +1,31 @@
 <template>
-  <div v-if="loggedIn">
-    <FAIcon
-      :class="classes"
-      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+  <div class="FavoriteButton">
+    <button
+      v-if="loggedIn"
+      class="button-unstyled interactive"
+      :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="classes"
-      class="FavoriteButton fa-scale-110 fa-old-padding"
-      :title="$t('tool_tip.favorite')"
-      :icon="['far', 'star']"
-    />
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :icon="[status.favorited ? 'fas' : 'far', 'star']"
+        :spin="animated"
+      />
+    </button>
+    <span v-else>
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.favorite')"
+        :icon="['far', 'star']"
+      />
+    </span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
+      class="action-counter"
+    >
+      {{ status.fave_num }}
+    </span>
  </div>
 </template>

@ -27,19 +35,28 @@
@import '../../_variables.scss';

 .FavoriteButton {
-  &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
+  display: flex;

-    &:hover {
+  > :first-child {
+    padding: 10px;
+    margin: -10px -8px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
+    .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>
--- a/src/components/follow_button/follow_button.vue
+++ b/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"
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/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') }}
--- a/src/components/image_cropper/image_cropper.vue
+++ b/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)"
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@ -15,7 +15,7 @@
    />
    <button
      v-else
-      class="btn btn-default"
+      class="btn button-default"
      @click="submit"
    >
      {{ submitButtonLabel }}
--- a/src/components/login_form/login_form.vue
+++ b/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>
--- a/src/components/media_upload/media_upload.vue
+++ b/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>
--- a/src/components/mfa_form/recovery_form.vue
+++ b/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>
--- a/src/components/mfa_form/totp_form.vue
+++ b/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>
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/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
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/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"
    >
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -12,13 +12,13 @@
        <div class="dropdown-menu">
          <span v-if="user.is_local">
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleRight(&quot;admin&quot;)"
            >
              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleRight(&quot;moderator&quot;)"
            >
              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -29,13 +29,13 @@
            />
          </span>
          <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
            @click="toggleActivationStatus()"
          >
            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
          </button>
          <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
            @click="deleteUserDialog(true)"
          >
            {{ $t('user_card.admin_menu.delete_account') }}
@ -47,7 +47,7 @@
          />
          <span v-if="hasTagPolicy">
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.FORCE_NSFW)"
            >
              {{ $t('user_card.admin_menu.force_nsfw') }}
@ -57,7 +57,7 @@
              />
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.STRIP_MEDIA)"
            >
              {{ $t('user_card.admin_menu.strip_media') }}
@ -67,7 +67,7 @@
              />
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.FORCE_UNLISTED)"
            >
              {{ $t('user_card.admin_menu.force_unlisted') }}
@ -77,7 +77,7 @@
              />
            </button>
            <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.SANDBOX)"
            >
              {{ $t('user_card.admin_menu.sandbox') }}
@ -88,7 +88,7 @@
            </button>
            <button
              v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
            >
              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@ -99,7 +99,7 @@
            </button>
            <button
              v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
            >
              {{ $t('user_card.admin_menu.disable_any_subscription') }}
@ -110,7 +110,7 @@
            </button>
            <button
              v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
              @click="toggleTag(tags.QUARANTINE)"
            >
              {{ $t('user_card.admin_menu.quarantine') }}
@ -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') }}
--- a/src/components/mute_card/mute_card.vue
+++ b/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"
      >
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -14,14 +14,15 @@
          {{ 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>
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="eye-slash"
+        />
+      </button>
    </div>
    <div
      v-else
@ -132,14 +133,16 @@
              />
            </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>
+          >
+            <FAIcon
+              class="fa-scale-110 fa-old-padding"
+              icon="eye-slash"
+            />
+          </button>
        </span>
        <div
          v-if="notification.type === 'follow' || notification.type === 'follow_request'"
--- a/src/components/notifications/notifications.vue
+++ b/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 -fullwidth"
          @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"
--- a/src/components/password_reset/password_reset.vue
+++ b/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>
--- a/src/components/poll/poll.vue
+++ b/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"
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@ -21,7 +21,10 @@ const Popover = {
    // Replaces the classes you may want for the popover container.
    // Use 'popover-default' in addition to get the default popover
    // styles with your custom class.
-    popoverClass: String
+    popoverClass: String,
+    // If true, subtract padding when calculating position for the popover,
+    // use it when popover offset looks to be different on top vs bottom.
+    removePadding: Boolean
  },
  data () {
    return {
@ -96,9 +99,15 @@ const Popover = {
      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false

+      let vPadding = 0
+      if (this.removePadding && usingTop) {
+        const anchorStyle = getComputedStyle(anchorEl)
+        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
+      }
+
      const yOffset = (this.offset && this.offset.y) || 0
      const translateY = usingTop
-        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
+        ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
        : yOffset

      const xOffset = (this.offset && this.offset.x) || 0
--- 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 popover-trigger-button"
      @click="onClick"
    >
      <slot name="trigger" />
-    </div>
+    </button>
    <div
      v-if="!hidden"
      ref="content"
@ -30,6 +31,10 @@
 <style lang="scss">
@import '../../_variables.scss';

+.popover-trigger-button {
+  display: block;
+}
+
 .popover {
  z-index: 8;
  position: absolute;
--- a/src/components/post_status_form/post_status_form.vue
+++ b/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)"
        >
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@ -3,8 +3,8 @@
    trigger="click"
    placement="top"
    :offset="{ y: 5 }"
-    class="react-button-popover"
    :bound-to="{ x: 'container' }"
+    remove-padding
  >
    <div
      slot="content"
@ -40,11 +40,14 @@
        <div class="reaction-bottom-fader" />
      </div>
    </div>
-    <span slot="trigger">
+    <span
+      slot="trigger"
+      class="ReactButton"
+      :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>
  </Popover>
@ -104,10 +107,11 @@
  }
 }

-.add-reaction-button {
-  cursor: pointer;
+.ReactButton {
+  padding: 10px;
+  margin: -10px;

-  &:hover {
+  &:hover .svg-inline--fa {
    color: $fallback--text;
    color: var(--text, $fallback--text);
  }
--- a/src/components/registration/registration.vue
+++ b/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>
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@ -1,20 +1,28 @@
 <template>
-  <div>
-    <FAIcon
+  <div class="ReplyButton">
+    <button
      v-if="loggedIn"
-      class="ReplyButton fa-scale-110 fa-old-padding -interactive"
-      icon="reply"
-      :title="$t('tool_tip.reply')"
+      class="button-unstyled interactive"
      :class="{'-active': replying}"
-      @click.prevent="$emit('toggle')"
-    />
-    <FAIcon
-      v-else
-      icon="reply"
-      class="ReplyButton fa-scale-110 fa-old-padding"
      :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>
@ -26,14 +34,25 @@
@import '../../_variables.scss';

 .ReplyButton {
-  &.-interactive {
-    cursor: pointer;
+  display: flex;

-    &:hover,
-    &.-active {
+  > :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>
--- a/src/components/retweet_button/retweet_button.js
+++ b/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
    }
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@ -1,33 +1,38 @@
 <template>
-  <div v-if="loggedIn">
-    <template v-if="visibility !== 'private' && visibility !== 'direct'">
+  <div class="RetweetButton">
+    <button
+      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+      class="button-unstyled interactive"
+      :class="status.repeated && '-repeated'"
+      :title="$t('tool_tip.repeat')"
+      @click.prevent="retweet()"
+    >
      <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>
+    </button>
+    <span v-else-if="loggedIn">
      <FAIcon
-        :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')"
      />
-    </template>
-  </div>
-  <div v-else-if="!loggedIn">
-    <FAIcon
-      :class="classes"
-      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>
+    <span v-else>
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="retweet"
+        :title="$t('tool_tip.repeat')"
+      />
+    </span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
+      class="no-event"
+    >
+      {{ status.repeat_num }}
+    </span>
  </div>
 </template>

@ -37,19 +42,28 @@
@import '../../_variables.scss';

 .RetweetButton {
-  &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
+  display: flex;

-    &:hover {
+  > :first-child {
+    padding: 10px;
+    margin: -10px -8px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
+    .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>
--- 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>

--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@ -14,7 +14,7 @@
        @keyup.enter="newQuery(searchTerm)"
      >
      <button
-        class="btn search-button"
+        class="btn button-default search-button"
        @click="newQuery(searchTerm)"
      >
        <FAIcon icon="search" />
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@ -3,17 +3,18 @@
    class="SearchBar"
    :class="{ '-expanded': !hidden }"
  >
-    <a
+    <button
      v-if="hidden"
-      href="#"
-      class="nav-icon"
+      class="button-unstyled nav-icon"
      :title="$t('nav.search')"
-    ><FAIcon
-      fixed-width
-      class="fa-scale-110 fa-old-padding"
-      icon="search"
      @click.prevent.stop="toggleHidden"
-    /></a>
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="search"
+      />
+    </button>
    <template v-else>
      <input
        id="search-bar-input"
@ -25,7 +26,7 @@
        @keyup.enter="find(searchTerm)"
      >
      <button
-        class="btn search-button"
+        class="button-default search-button"
        @click="find(searchTerm)"
      >
        <FAIcon
@ -33,14 +34,16 @@
          icon="search"
        />
      </button>
-      <span>
+      <button
+        class="button-unstyled cancel-search"
+        @click.prevent.stop="toggleHidden"
+      >
        <FAIcon
          fixed-width
          icon="times"
          class="cancel-icon fa-scale-110 fa-old-padding"
-          @click.prevent.stop="toggleHidden"
        />
-      </span>
+      </button>
    </template>
  </div>
 </template>
@ -69,8 +72,11 @@
    flex: 1 0 auto;
  }

+  .cancel-search {
+    height: 50px;
+  }
+
  .cancel-icon {
-    cursor: pointer;
    color: $fallback--text;
    color: var(--btnTopBarText, $fallback--text);
  }
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -30,13 +30,13 @@
          </template>
        </transition>
        <button
-          class="btn"
+          class="btn button-default"
          @click="peekModal"
        >
          {{ $t('general.peek') }}
        </button>
        <button
-          class="btn"
+          class="btn button-default"
          @click="closeModal"
        >
          {{ $t('general.close') }}
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@ -27,7 +27,7 @@
          <div class="bulk-actions">
            <ProgressButton
              v-if="selected.length > 0"
-              class="btn btn-default bulk-action-button"
+              class="btn button-default bulk-action-button"
              :click="() => blockUsers(selected)"
            >
              {{ $t('user_card.block') }}
@ -37,7 +37,7 @@
            </ProgressButton>
            <ProgressButton
              v-if="selected.length > 0"
-              class="btn btn-default"
+              class="btn button-default"
              :click="() => unblockUsers(selected)"
            >
              {{ $t('user_card.unblock') }}
@ -85,7 +85,7 @@
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                  :click="() => muteUsers(selected)"
                >
                  {{ $t('user_card.mute') }}
@ -95,7 +95,7 @@
                </ProgressButton>
                <ProgressButton
                  v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                  :click="() => unmuteUsers(selected)"
                >
                  {{ $t('user_card.unmute') }}
@ -141,7 +141,7 @@
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                  :click="() => unmuteDomains(selected)"
                >
                  {{ $t('domain_mute_card.unmute') }}
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@ -21,7 +21,7 @@
      <p>{{ $t('settings.notification_mutes') }}</p>
      <p>{{ $t('settings.notification_blocks') }}</p>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="updateNotificationSettings"
      >
        {{ $t('general.submit') }}
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -150,7 +150,7 @@
      </p>
      <button
        :disabled="newName && newName.length === 0"
-        class="btn btn-default"
+        class="btn button-default"
        @click="updateProfile"
      >
        {{ $t('general.submit') }}
@ -179,7 +179,7 @@
      <button
        v-show="pickAvatarBtnVisible"
        id="pick-avatar"
-        class="btn"
+        class="button-default btn"
        type="button"
      >
        {{ $t('settings.upload_a_photo') }}
@ -224,7 +224,7 @@
      />
      <button
        v-else-if="bannerPreview"
-        class="btn btn-default"
+        class="btn button-default"
        @click="submitBanner(banner)"
      >
        {{ $t('general.submit') }}
@ -274,7 +274,7 @@
      />
      <button
        v-else-if="backgroundPreview"
-        class="btn btn-default"
+        class="btn button-default"
        @click="submitBackground(background)"
      >
        {{ $t('general.submit') }}
--- a/src/components/settings_modal/tabs/security_tab/confirm.vue
+++ b/src/components/settings_modal/tabs/security_tab/confirm.vue
@ -2,14 +2,14 @@
  <div>
    <slot />
    <button
-      class="btn btn-default"
+      class="btn button-default"
      :disabled="disabled"
      @click="confirm"
    >
      {{ $t('general.confirm') }}
    </button>
    <button
-      class="btn btn-default"
+      class="btn button-default"
      :disabled="disabled"
      @click="cancel"
    >
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@ -29,7 +29,7 @@
          />
          <button
            v-if="!confirmNewBackupCodes"
-            class="btn btn-default"
+            class="btn button-default"
            @click="getBackupCodes"
          >
            {{ $t('settings.mfa.generate_new_recovery_codes') }}
@ -61,7 +61,7 @@

        <button
          v-if="canSetupOTP"
-          class="btn btn-default"
+          class="btn button-default"
          @click="cancelSetup"
        >
          {{ $t('general.cancel') }}
@ -69,7 +69,7 @@

        <button
          v-if="canSetupOTP"
-          class="btn btn-default"
+          class="btn button-default"
          @click="setupOTP"
        >
          {{ $t('settings.mfa.setup_otp') }}
@ -108,13 +108,13 @@
                >
                <div class="confirm-otp-actions">
                  <button
-                    class="btn btn-default"
+                    class="btn button-default"
                    @click="doConfirmOTP"
                  >
                    {{ $t('settings.mfa.confirm_and_enable') }}
                  </button>
                  <button
-                    class="btn btn-default"
+                    class="btn button-default"
                    @click="cancelSetup"
                  >
                    {{ $t('general.cancel') }}
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@ -4,7 +4,7 @@
      <strong>{{ $t('settings.mfa.otp') }}</strong>
      <button
        v-if="!isActivated"
-        class="btn btn-default"
+        class="btn button-default"
        @click="doActivate"
      >
        {{ $t('general.enable') }}
@ -12,7 +12,7 @@

      <button
        v-if="isActivated"
-        class="btn btn-default"
+        class="btn button-default"
        :disabled="deactivate"
        @click="doDeactivate"
      >
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@ -19,7 +19,7 @@
        >
      </div>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="changeEmail"
      >
        {{ $t('general.submit') }}
@ -57,7 +57,7 @@
        >
      </div>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="changePassword"
      >
        {{ $t('general.submit') }}
@ -92,7 +92,7 @@
            <td>{{ oauthToken.validUntil }}</td>
            <td class="actions">
              <button
-                class="btn btn-default"
+                class="btn button-default"
                @click="revokeToken(oauthToken.id)"
              >
                {{ $t('settings.revoke_token') }}
@ -116,7 +116,7 @@
          type="password"
        >
        <button
-          class="btn btn-default"
+          class="btn button-default"
          @click="deleteAccount"
        >
          {{ $t('settings.delete_account') }}
@ -130,7 +130,7 @@
      </p>
      <button
        v-if="!deletingAccount"
-        class="btn btn-default"
+        class="btn button-default"
        @click="confirmDelete"
      >
        {{ $t('general.submit') }}
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@ -15,7 +15,7 @@
        <span class="alert error">
          {{ $t('settings.style.preview.error') }}
        </span>
-        <button class="btn">
+        <button class="btn button-default">
          {{ $t('settings.style.preview.button') }}
        </button>
      </div>
@ -102,7 +102,7 @@
            >
            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
          </span>
-          <button class="btn">
+          <button class="btn button-default">
            {{ $t('settings.style.preview.button') }}
          </button>
        </div>
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -12,13 +12,13 @@
          <div class="buttons">
            <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
              <button
-                class="btn"
+                class="btn button-default"
                @click="forceLoad"
              >
                {{ $t('settings.style.switcher.use_source') }}
              </button>
              <button
-                class="btn"
+                class="btn button-default"
                @click="forceSnapshot"
              >
                {{ $t('settings.style.switcher.use_snapshot') }}
@ -26,7 +26,7 @@
            </template>
            <template v-else-if="themeWarning.noActionsPossible">
              <button
-                class="btn"
+                class="btn button-default"
                @click="dismissWarning"
              >
                {{ $t('general.dismiss') }}
@ -34,13 +34,13 @@
            </template>
            <template v-else>
              <button
-                class="btn"
+                class="btn button-default"
                @click="forceLoad"
              >
                {{ $t('settings.style.switcher.load_theme') }}
              </button>
              <button
-                class="btn"
+                class="btn button-default"
                @click="dismissWarning"
              >
                {{ $t('settings.style.switcher.keep_as_is') }}
@ -131,13 +131,13 @@
            <p>{{ $t('settings.theme_help') }}</p>
            <div class="tab-header-buttons">
              <button
-                class="btn"
+                class="btn button-default"
                @click="clearOpacity"
              >
                {{ $t('settings.style.switcher.clear_opacity') }}
              </button>
              <button
-                class="btn"
+                class="btn button-default"
                @click="clearV1"
              >
                {{ $t('settings.style.switcher.clear_all') }}
@ -238,13 +238,13 @@
          <div class="tab-header">
            <p>{{ $t('settings.theme_help') }}</p>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearOpacity"
            >
              {{ $t('settings.style.switcher.clear_opacity') }}
            </button>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearV1"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -806,7 +806,7 @@
          <div class="tab-header">
            <p>{{ $t('settings.radii_help') }}</p>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearRoundness"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -936,7 +936,7 @@
              />
            </div>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearShadows"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -980,7 +980,7 @@
          <div class="tab-header">
            <p>{{ $t('settings.style.fonts.help') }}</p>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearFonts"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -1017,14 +1017,14 @@

    <div class="apply-container">
      <button
-        class="btn submit"
+        class="btn button-default submit"
        :disabled="!themeValid"
        @click="setCustomTheme"
      >
        {{ $t('general.apply') }}
      </button>
      <button
-        class="btn"
+        class="btn button-default"
        @click="clearAll"
      >
        {{ $t('settings.style.switcher.reset') }}
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@ -84,7 +84,7 @@
          />
        </label>
        <button
-          class="btn btn-default"
+          class="btn button-default"
          :disabled="!ready || !present"
          @click="del"
        >
@ -94,7 +94,7 @@
          />
        </button>
        <button
-          class="btn btn-default"
+          class="btn button-default"
          :disabled="!moveUpValid"
          @click="moveUp"
        >
@ -104,7 +104,7 @@
          />
        </button>
        <button
-          class="btn btn-default"
+          class="btn button-default"
          :disabled="!moveDnValid"
          @click="moveDn"
        >
@ -114,7 +114,7 @@
          />
        </button>
        <button
-          class="btn btn-default"
+          class="btn button-default"
          :disabled="usingFallback"
          @click="add"
        >
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -144,8 +144,8 @@
          </router-link>
        </li>
        <li @click="toggleDrawer">
-          <a
-            href="#"
+          <button
+            class="button-unstyled -link -fullwidth"
            @click="openSettingsModal"
          >
            <FAIcon
@ -153,7 +153,7 @@
              class="fa-scale-110 fa-old-padding"
              icon="cog"
            /> {{ $t("settings.settings") }}
-          </a>
+          </button>
        </li>
        <li @click="toggleDrawer">
          <router-link :to="{ name: 'about'}">
@ -183,8 +183,8 @@
          v-if="currentUser"
          @click="toggleDrawer"
        >
-          <a
-            href="#"
+          <button
+            class="button-unstyled -link -fullwidth"
            @click="doLogout"
          >
            <FAIcon
@ -192,7 +192,7 @@
              class="fa-scale-110 fa-old-padding"
              icon="sign-out-alt"
            /> {{ $t("login.logout") }}
-          </a>
+          </button>
        </li>
      </ul>
    </div>
@ -331,7 +331,7 @@
 .side-drawer li {
  padding: 0;

-  a {
+  a, button {
    box-sizing: border-box;
    display: block;
    height: 3em;
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -47,16 +47,15 @@
        >
          {{ muteWordHits.join(', ') }}
        </small>
-        <a
-          href="#"
-          class="unmute fa-scale-110 fa-old-padding"
+        <button
+          class="unmute button-unstyled"
          @click.prevent="toggleMute"
        >
          <FAIcon
            icon="eye-slash"
            class="fa-scale-110 fa-old-padding"
          />
-        </a>
+        </button>
      </div>
    </template>
    <template v-else>
@ -201,9 +200,9 @@
                    icon="external-link-square-alt"
                  />
                </a>
-                <a
+                <button
                  v-if="expandable && !isPreview"
-                  href="#"
+                  class="button-unstyled"
                  title="Expand"
                  @click.prevent="toggleExpanded"
                >
@ -211,17 +210,17 @@
                    class="fa-scale-110 fa-old-padding"
                    icon="plus-square"
                  />
-                </a>
-                <a
+                </button>
+                <button
                  v-if="unmuted"
-                  href="#"
+                  class="button-unstyled"
                  @click.prevent="toggleMute"
                >
                  <FAIcon
                    icon="eye-slash"
                    class="fa-scale-110 fa-old-padding"
                  />
-                </a>
+                </button>
              </span>
            </div>

@ -237,9 +236,8 @@
                  style="min-width: 0"
                  :class="{ '-strikethrough': !status.parent_visible }"
                >
-                  <a
-                    class="reply-to"
-                    href="#"
+                  <button
+                    class="button-unstyled reply-to"
                    :aria-label="$t('tool_tip.reply')"
                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                  >
@ -253,7 +251,7 @@
                    >
                      {{ $t('status.reply_to') }}
                    </span>
-                  </a>
+                  </button>
                </StatusPopover>

                <span
@ -286,11 +284,12 @@
                  :key="reply.id"
                  :status-id="reply.id"
                >
-                  <a
-                    href="#"
-                    class="reply-link"
+                  <button
+                    class="button-unstyled -link reply-link"
                    @click.prevent="gotoOriginal(reply.id)"
-                  >{{ reply.name }}</a>
+                  >
+                    {{ reply.name }}
+                  </button>
                </StatusPopover>
              </div>
            </div>
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@ -12,35 +12,34 @@
        @click.prevent="linkClicked"
        v-html="status.summary_html"
      />
-      <a
+      <button
        v-if="longSubject && showingLongSubject"
-        href="#"
-        class="tall-subject-hider"
+        class="button-unstyled -link tall-subject-hider"
        @click.prevent="showingLongSubject=false"
-      >{{ $t("status.hide_full_subject") }}</a>
-      <a
+      >
+        {{ $t("status.hide_full_subject") }}
+      </button>
+      <button
        v-else-if="longSubject"
-        class="tall-subject-hider"
+        class="button-unstyled -link tall-subject-hider"
        :class="{ 'tall-subject-hider_focused': focused }"
-        href="#"
        @click.prevent="showingLongSubject=true"
      >
        {{ $t("status.show_full_subject") }}
-      </a>
+      </button>
    </div>
    <div
      :class="{'tall-status': hideTallStatus}"
      class="status-content-wrapper"
    >
-      <a
+      <button
        v-if="hideTallStatus"
-        class="tall-status-hider"
+        class="button-unstyled -link tall-status-hider"
        :class="{ 'tall-status-hider_focused': focused }"
-        href="#"
        @click.prevent="toggleShowMore"
      >
        {{ $t("general.show_more") }}
-      </a>
+      </button>
      <div
        v-if="!hideSubjectStatus"
        :class="{ 'single-line': singleLine }"
@ -48,10 +47,9 @@
        @click.prevent="linkClicked"
        v-html="postBodyHtml"
      />
-      <a
+      <button
        v-if="hideSubjectStatus"
-        href="#"
-        class="cw-status-hider"
+        class="button-unstyled -link cw-status-hider"
        @click.prevent="toggleShowMore"
      >
        {{ $t("status.show_content") }}
@ -79,15 +77,14 @@
          v-if="status.card"
          icon="link"
        />
-      </a>
-      <a
+      </button>
+      <button
        v-if="showingMore && !fullContent"
-        href="#"
-        class="status-unhider"
+        class="button-unstyled -link status-unhider"
        @click.prevent="toggleShowMore"
      >
        {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
-      </a>
+      </button>
    </div>

    <div v-if="status.poll && status.poll.options && !hideSubjectStatus">
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@ -81,7 +81,7 @@ export default Vue.component('tab-switcher', {
    const tabs = this.$slots.default
      .map((slot, index) => {
        if (!slot.tag) return
-        const classesTab = ['tab']
+        const classesTab = ['tab', 'button-default']
        const classesWrapper = ['tab-wrapper']
        if (this.activeIndex === index) {
          classesTab.push('active')
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -4,7 +4,7 @@
      <TimelineMenu v-if="!embedded" />
      <button
        v-if="showLoadButton"
-        class="loadmore-button"
+        class="button-default loadmore-button"
        @click.prevent="showNewStatuses"
      >
        {{ loadButtonString }}
@ -61,13 +61,15 @@
      >
        {{ $t('timeline.no_more_statuses') }}
      </div>
-      <a
+      <button
        v-else-if="!timeline.loading"
-        href="#"
+        class="button-unstyled -link -fullwidth"
        @click.prevent="fetchOlderStatuses()"
      >
-        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
-      </a>
+        <div class="new-status-notification text-center panel-footer">
+          {{ $t('timeline.load_older') }}
+        </div>
+      </button>
      <div
        v-else
        class="new-status-notification text-center panel-footer"
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -162,7 +162,7 @@
            <template v-if="relationship.following">
              <ProgressButton
                v-if="!relationship.subscribing"
-                class="btn btn-default"
+                class="btn button-default"
                :click="subscribeUser"
                :title="$t('user_card.subscribe')"
              >
@ -170,7 +170,7 @@
              </ProgressButton>
              <ProgressButton
                v-else
-                class="btn btn-default toggled"
+                class="btn button-default toggled"
                :click="unsubscribeUser"
                :title="$t('user_card.unsubscribe')"
              >
@ -192,14 +192,14 @@
          <div>
            <button
              v-if="relationship.muting"
-              class="btn btn-default btn-block toggled"
+              class="btn button-default btn-block toggled"
              @click="unmuteUser"
            >
              {{ $t('user_card.muted') }}
            </button>
            <button
              v-else
-              class="btn btn-default btn-block"
+              class="btn button-default btn-block"
              @click="muteUser"
            >
              {{ $t('user_card.mute') }}
@ -207,7 +207,7 @@
          </div>
          <div>
            <button
-              class="btn btn-default btn-block"
+              class="btn button-default btn-block"
              @click="mentionUser"
            >
              {{ $t('user_card.mention') }}
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@ -29,7 +29,7 @@
          </div>
          <div>
            <button
-              class="btn btn-default"
+              class="btn button-default"
              :disabled="processing"
              @click="reportUser"
            >
--- 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>