From 046c60cb61bd585e2fb2850320d229ab0487d9ba Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 21:18:23 +0300
Subject: cancel -> times

---
 src/components/chat_message/chat_message.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/chat_message/chat_message.vue')

diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index e923d694..7973e5ef 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -56,7 +56,7 @@
                       class="dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
-                      <i class="icon-cancel" /> {{ $t("chats.delete") }}
+                      <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </button>
                   </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From b19c2eb0fb45aca4f4a59c4afacaffddf695987d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 22:13:19 +0300
Subject: More stuff. Buttons in user card's corner now have MUCH bigger
 hitboxes

---
 src/App.scss                                       |  6 ++--
 src/components/account_actions/account_actions.js  |  8 ++++++
 src/components/account_actions/account_actions.vue | 32 +++++++++++-----------
 src/components/chat/chat.js                        |  6 ++--
 src/components/chat/chat.scss                      |  8 ++----
 src/components/chat/chat.vue                       |  2 +-
 src/components/chat_message/chat_message.js        |  6 ++--
 src/components/chat_message/chat_message.scss      |  2 +-
 src/components/chat_message/chat_message.vue       |  3 +-
 src/components/chat_new/chat_new.js                | 10 +++++++
 src/components/chat_new/chat_new.scss              |  6 ++--
 src/components/chat_new/chat_new.vue               |  4 +--
 src/components/media_modal/media_modal.js          | 10 +++++++
 src/components/media_modal/media_modal.vue         |  4 +--
 src/components/mobile_nav/mobile_nav.js            |  8 ++++--
 src/components/mobile_nav/mobile_nav.vue           | 11 ++++----
 .../mobile_post_status_button.js                   |  8 ++++++
 .../mobile_post_status_button.vue                  |  4 +--
 src/components/search/search.js                    |  8 ++++--
 src/components/search/search.vue                   |  2 +-
 src/components/search_bar/search_bar.js            |  6 ++--
 src/components/search_bar/search_bar.vue           |  2 +-
 .../settings_modal/settings_modal_content.scss     |  2 +-
 src/components/settings_modal/tabs/general_tab.js  |  6 ++--
 src/components/settings_modal/tabs/general_tab.vue |  2 +-
 src/components/settings_modal/tabs/profile_tab.js  |  6 ++--
 src/components/settings_modal/tabs/profile_tab.vue |  2 +-
 src/components/side_drawer/side_drawer.js          | 28 +++++++++++++++++++
 src/components/side_drawer/side_drawer.vue         | 24 ++++++++--------
 src/components/user_card/user_card.vue             | 20 ++++++++++----
 src/hocs/with_load_more/with_load_more.js          | 12 +++++++-
 src/hocs/with_subscription/with_subscription.js    | 12 +++++++-
 32 files changed, 188 insertions(+), 82 deletions(-)

(limited to 'src/components/chat_message/chat_message.vue')

diff --git a/src/App.scss b/src/App.scss
index 10969abb..126a3297 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -85,7 +85,7 @@ button {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  i[class*=icon-] {
+  i[class*=icon-], .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -389,7 +389,7 @@ i[class*=icon-], .svg-inline--fa  {
   box-sizing: border-box;
 
   button {
-    &, i[class*=icon-] {
+    &, i[class*=icon-], svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
     }
@@ -463,7 +463,7 @@ i[class*=icon-], .svg-inline--fa  {
     flex-basis: 970px;
     height: 50px;
 
-    a, a i {
+    a, a i, a svg {
       color: $fallback--link;
       color: var(--topBarLink, $fallback--link);
     }
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 6d345bc7..395d6685 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,6 +1,14 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisV
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisV
+)
 
 const AccountActions = {
   props: [
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 987e94b7..61099d4f 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="account-actions">
+  <div class="AccountActions">
     <Popover
       trigger="click"
       placement="bottom"
@@ -63,7 +63,7 @@
         slot="trigger"
         class="btn btn-default ellipsis-button"
       >
-        <i class="icon-ellipsis trigger-button" />
+        <FAIcon class="icon" icon="ellipsis-v" />
       </div>
     </Popover>
   </div>
@@ -73,22 +73,22 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.account-actions {
-  margin: 0 .8em;
-}
+.AccountActions {
+  button.dropdown-item {
+    margin-left: 0;
+  }
 
-.account-actions button.dropdown-item {
-  margin-left: 0;
-}
+  .ellipsis-button {
+    cursor: pointer;
+    width: 2.5em;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+    text-align: center;
 
-.account-actions .trigger-button {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  opacity: .8;
-  cursor: pointer;
-  &:hover {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 }
 </style>
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 1630ba80..083f850f 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -9,11 +9,13 @@ import { promiseInterval } from '../../services/promise_interval/promise_interva
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown
+  faChevronDown,
+  faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown
+  faChevronDown,
+  faChevronLeft
 )
 
 const BOTTOMED_OUT_OFFSET = 10
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 012a1b1d..b7b0d377 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -58,12 +58,8 @@
 
   .go-back-button {
     cursor: pointer;
-    margin-right: 1.4em;
-
-    i {
-      display: flex;
-      align-items: center;
-    }
+    margin-right: 1.7em;
+    margin-left: 0.3em;
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 0d44c920..0670f1ac 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -14,7 +14,7 @@
             class="go-back-button"
             @click="goBack"
           >
-            <i class="button-icon icon-left-open" />
+            <FAIcon size="lg" icon="chevron-left" />
           </a>
           <div class="title text-center">
             <ChatTitle
diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index 4ad993e3..bb380f87 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -9,11 +9,13 @@ import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faEllipsisH
 )
 
 const ChatMessage = {
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 7d4ff60c..53ca7cce 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -24,7 +24,7 @@
     }
   }
 
-  .icon-ellipsis {
+  .menu-icon {
     cursor: pointer;
 
     &:hover, .extra-button-popover.open & {
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 7973e5ef..d5b8bb9e 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -62,9 +62,10 @@
                 </div>
                 <button
                   slot="trigger"
+                  class="menu-icon"
                   :title="$t('chats.more')"
                 >
-                  <i class="icon-ellipsis" />
+                  <FAIcon icon="ellipsis-h" />
                 </button>
               </Popover>
             </div>
diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js
index d023efc0..71585995 100644
--- a/src/components/chat_new/chat_new.js
+++ b/src/components/chat_new/chat_new.js
@@ -1,6 +1,16 @@
 import { mapState, mapGetters } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
 
 const chatNew = {
   components: {
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index 11305444..716172b0 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -8,9 +8,7 @@
     }
   }
 
-  .icon-search {
-    font-size: 1.5em;
-    float: right;
+  .search-icon {
     margin-right: 0.3em;
   }
 
@@ -25,5 +23,7 @@
 
   .go-back-button {
     cursor: pointer;
+    margin-right: 1.7em;
+    margin-left: 0.3em;
   }
 }
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 3333dbf9..95eebe6b 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -11,12 +11,12 @@
         class="go-back-button"
         @click="goBack"
       >
-        <i class="button-icon icon-left-open" />
+        <FAIcon size="lg" icon="chevron-left" />
       </a>
     </div>
     <div class="input-wrap">
       <div class="input-search">
-        <i class="button-icon icon-search" />
+        <FAIcon size="lg" class="search-icon button-icon" icon="search" />
       </div>
       <input
         ref="search"
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 24764e80..e7384c93 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronLeft,
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronLeft,
+  faChevronRight
+)
 
 const MediaModal = {
   components: {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 46931667..cbcfc6d2 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -34,7 +34,7 @@
       class="modal-view-button-arrow modal-view-button-arrow--prev"
       @click.stop.prevent="goPrev"
     >
-      <i class="icon-left-open arrow-icon" />
+      <FAIcon class="arrow-icon" icon="chevron-left" />
     </button>
     <button
       v-if="canNavigate"
@@ -42,7 +42,7 @@
       class="modal-view-button-arrow modal-view-button-arrow--next"
       @click.stop.prevent="goNext"
     >
-      <i class="icon-right-open arrow-icon" />
+      <FAIcon class="arrow-icon" icon="chevron-right" />
     </button>
   </Modal>
 </template>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index bd32b266..9e736cfb 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -5,11 +5,15 @@ import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faBell,
+  faBars
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faBell,
+  faBars
 )
 
 const MobileNav = {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index e5664dc5..4d91af77 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -15,7 +15,7 @@
             class="mobile-nav-button"
             @click.stop.prevent="toggleMobileSidebar()"
           >
-            <i class="button-icon icon-menu" />
+            <FAIcon size="lg" class="button-icon" icon="bars" />
             <div
               v-if="unreadChatCount"
               class="alert-dot"
@@ -37,7 +37,7 @@
             href="#"
             @click.stop.prevent="openMobileNotifications()"
           >
-            <i class="button-icon icon-bell-alt" />
+            <FAIcon size="lg" class="button-icon" icon="bell" />
             <div
               v-if="unseenNotificationsCount"
               class="alert-dot"
@@ -59,7 +59,7 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <FAIcon class="button-icon" icon="times" />
+          <FAIcon size="lg" class="button-icon" icon="times" />
         </a>
       </div>
       <div
@@ -91,9 +91,8 @@
 }
 
 .mobile-nav-button {
-  display: flex;
-  justify-content: center;
-  width: 50px;
+  text-align: center;
+  margin: 0 1em;
   position: relative;
   cursor: pointer;
 }
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 6348277b..366ea89c 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -1,4 +1,12 @@
 import { debounce } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPen
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPen
+)
 
 const HIDDEN_FOR_PAGES = new Set([
   'chats',
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 9cf45de3..50529878 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -5,7 +5,7 @@
       :class="{ 'hidden': isHidden }"
       @click="openPostForm"
     >
-      <i class="icon-edit" />
+      <FAIcon icon="pen" />
     </button>
   </div>
 </template>
@@ -39,7 +39,7 @@
     transform: translateY(150%);
   }
 
-  i {
+  svg {
     font-size: 1.5em;
     color: $fallback--text;
     color: var(--text, $fallback--text);
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 3eb92fc1..b62bc2c5 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -3,10 +3,14 @@ import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import map from 'lodash/map'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import {
+  faCircleNotch,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faSearch
 )
 
 const Search = {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index a6677e4b..d32f48d9 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -17,7 +17,7 @@
         class="btn search-button"
         @click="newQuery(searchTerm)"
       >
-        <i class="icon-search" />
+        <FAIcon icon="search" />
       </button>
     </div>
     <div
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 3699e262..7ae8b21b 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -1,10 +1,12 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faSearch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faSearch
 )
 
 const SearchBar = {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 6a08ebe5..ecc0febf 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -27,7 +27,7 @@
           class="btn search-button"
           @click="find(searchTerm)"
         >
-          <i class="icon-search" />
+          <FAIcon icon="search" />
         </button>
         <FAIcon
           class="button-icon" icon="times"
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index a3fef1cf..f066234c 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -31,7 +31,7 @@
     }
 
     .unavailable,
-    .unavailable i {
+    .unavailable svg {
       color: var(--cRed, $fallback--cRed);
       color: $fallback--cRed;
     }
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index a39d7071..df592a10 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -4,11 +4,13 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown
+  faChevronDown,
+  faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown
+  faChevronDown,
+  faGlobe
 )
 
 const GeneralTab = {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 9fc1470e..2ab6b314 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -222,7 +222,7 @@
                 v-if="!loopSilentAvailable"
                 class="unavailable"
               >
-                <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
+                <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
               </div>
             </li>
           </ul>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 37e829bb..22037218 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -10,11 +10,13 @@ import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faPlus
 )
 
 const ProfileTab = {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index df54551c..7013b65d 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -139,7 +139,7 @@
           class="add-field faint"
           @click="addField"
         >
-          <i class="icon-plus" />
+          <FAIcon icon="plus" />
           {{ $t("settings.profile_fields.add_field") }}
         </a>
       </div>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 281052e5..fe736168 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -2,6 +2,34 @@ import { mapState, mapGetters } from 'vuex'
 import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)
 
 const SideDrawer = {
   props: [ 'logout' ],
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eda5a68c..fbdb2441 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <i class="button-icon icon-login" /> {{ $t("login.login") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +44,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +55,7 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
               class="badge badge-notification unread-chat-count"
@@ -68,7 +68,7 @@
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +76,7 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -90,7 +90,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +100,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="search" /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -108,7 +108,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -116,12 +116,12 @@
             href="#"
             @click="openSettingsModal"
           >
-            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="cog" /> {{ $t("settings.settings") }}
           </a>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +132,7 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +143,7 @@
             href="#"
             @click="doLogout"
           >
-            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index cfdeaa17..4f7df789 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -54,8 +54,9 @@
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
                 target="_blank"
+                class="external-link-button"
               >
-                <FAIcon class="usersettings" icon="external-link-alt" />
+                <FAIcon class="icon" icon="external-link-alt" />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -289,7 +290,7 @@
     mask: linear-gradient(to top, white, transparent) bottom no-repeat,
           linear-gradient(to top, white, white);
     // Autoprefixed seem to ignore this one, and also syntax is different
-    -webkit-mask-composite: xor;
+                                                 -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
@@ -404,10 +405,17 @@
     }
   }
 
-  .usersettings {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-    opacity: .8;
+  .external-link-button {
+    cursor: pointer;
+    width: 2.5em;
+    text-align: center;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 
   .user-summary {
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 6142f513..afb51a0f 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_load_more.scss'
 
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withLoadMore = ({
   fetch, // function to fetch entries and return a promise
   select, // function to select data from store
@@ -82,7 +92,7 @@ const withLoadMore = ({
           </WrappedComponent>
           <div class="with-load-more-footer">
             {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!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>
         </div>
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 1775adcb..b1244276 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_subscription.scss'
 
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withSubscription = ({
   fetch, // function to fetch entries and return a promise
   select, // function to select data from store
@@ -72,7 +82,7 @@ const withSubscription = ({
           <div class="with-subscription-loading">
             {this.error
               ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
-              : <i class="icon-spin3 animate-spin"/>
+              : <FAIcon spin icon="circle-notch"/>
             }
           </div>
         )
-- 
cgit v1.2.3-70-g09d2


From e798e9a4177f025dda2b40d109fa40c2ebfd814e Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Thu, 29 Oct 2020 13:33:06 +0300
Subject: Optimistic message sending for chat

---
 src/components/chat/chat.js                        | 76 ++++++++++++++++------
 src/components/chat/chat.vue                       |  1 +
 src/components/chat_message/chat_message.scss      | 13 ++++
 src/components/chat_message/chat_message.vue       |  2 +-
 .../post_status_form/post_status_form.js           |  7 +-
 .../post_status_form/post_status_form.vue          |  4 +-
 src/modules/api.js                                 | 18 +++--
 src/modules/chats.js                               | 22 +++++--
 src/services/api/api.service.js                    | 17 ++++-
 src/services/chat_service/chat_service.js          | 63 ++++++++++++++++--
 src/services/chat_utils/chat_utils.js              | 21 ++++++
 .../entity_normalizer/entity_normalizer.service.js |  3 +
 .../services/chat_service/chat_service.spec.js     |  3 +
 13 files changed, 206 insertions(+), 44 deletions(-)

(limited to 'src/components/chat_message/chat_message.vue')

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index c0c9ad6c..2887afb5 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -12,6 +12,7 @@ import {
   faChevronDown,
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
+import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
 
 library.add(
   faChevronDown,
@@ -22,6 +23,7 @@ const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
 const SAFE_RESIZE_TIME_OFFSET = 100
 const MARK_AS_READ_DELAY = 1500
+const MAX_RETRIES = 10
 
 const Chat = {
   components: {
@@ -35,7 +37,8 @@ const Chat = {
       hoveredMessageChainId: undefined,
       lastScrollPosition: {},
       scrollableContainerHeight: '100%',
-      errorLoadingChat: false
+      errorLoadingChat: false,
+      messageRetriers: {}
     }
   },
   created () {
@@ -219,7 +222,10 @@ const Chat = {
       if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
       if (document.hidden) { return }
       const lastReadId = this.currentChatMessageService.maxId
-      this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
+      this.$store.dispatch('readChat', {
+        id: this.currentChat.id,
+        lastReadId
+      })
     },
     bottomedOut (offset) {
       return isBottomedOut(this.$refs.scrollable, offset)
@@ -309,42 +315,74 @@ const Chat = {
       })
       this.fetchChat({ isFirstFetch: true })
     },
-    sendMessage ({ status, media }) {
+    handleAttachmentPosting () {
+      this.$nextTick(() => {
+        this.handleResize()
+        // When the posting form size changes because of a media attachment, we need an extra resize
+        // to account for the potential delay in the DOM update.
+        setTimeout(() => {
+          this.updateScrollableContainerHeight()
+        }, SAFE_RESIZE_TIME_OFFSET)
+        this.scrollDown({ forceRead: true })
+      })
+    },
+    sendMessage ({ status, media, idempotencyKey }) {
       const params = {
         id: this.currentChat.id,
-        content: status
+        content: status,
+        idempotencyKey
       }
 
       if (media[0]) {
         params.mediaId = media[0].id
       }
 
-      return this.backendInteractor.sendChatMessage(params)
+      const fakeMessage = buildFakeMessage({
+        attachments: media,
+        chatId: this.currentChat.id,
+        content: status,
+        userId: this.currentUser.id,
+        idempotencyKey
+      })
+
+      this.$store.dispatch('addChatMessages', {
+        chatId: this.currentChat.id,
+        messages: [fakeMessage]
+      }).then(() => {
+        this.handleAttachmentPosting()
+      })
+
+      return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
+    },
+    doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
+      if (retriesLeft <= 0) return
+
+      this.backendInteractor.sendChatMessage(params)
         .then(data => {
           this.$store.dispatch('addChatMessages', {
             chatId: this.currentChat.id,
-            messages: [data],
-            updateMaxId: false
-          }).then(() => {
-            this.$nextTick(() => {
-              this.handleResize()
-              // When the posting form size changes because of a media attachment, we need an extra resize
-              // to account for the potential delay in the DOM update.
-              setTimeout(() => {
-                this.updateScrollableContainerHeight()
-              }, SAFE_RESIZE_TIME_OFFSET)
-              this.scrollDown({ forceRead: true })
-            })
+            updateMaxId: false,
+            messages: [{ ...data, fakeId: fakeMessage.id }]
           })
 
           return data
         })
         .catch(error => {
           console.error('Error sending message', error)
-          return {
-            error: this.$t('chats.error_sending_message')
+          this.$store.dispatch('handleMessageError', {
+            chatId: this.currentChat.id,
+            fakeId: fakeMessage.id,
+            isRetry: retriesLeft !== MAX_RETRIES
+          })
+          if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') {
+            this.messageRetriers[fakeMessage.id] = setTimeout(() => {
+              this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
+            }, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
           }
+          return {}
         })
+
+      return Promise.resolve(fakeMessage)
     },
     goBack () {
       this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 5f58b9a6..94a0097c 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -80,6 +80,7 @@
               :disable-sensitivity-checkbox="true"
               :disable-submit="errorLoadingChat || !currentChat"
               :disable-preview="true"
+              :optimistic-posting="true"
               :post-handler="sendMessage"
               :submit-on-enter="!mobileLayout"
               :preserve-focus="!mobileLayout"
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 53ca7cce..5af744a3 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -101,6 +101,19 @@
     }
   }
 
+  .pending {
+    .status-content.media-body, .created-at {
+      color: var(--faint);
+    }
+  }
+
+  .error {
+    .status-content.media-body, .created-at {
+      color: $fallback--cRed;
+      color: var(--badgeNotification, $fallback--cRed);
+    }
+  }
+
   .incoming {
     a {
       color: var(--chatMessageIncomingLink, $fallback--link);
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index d5b8bb9e..3849ab6e 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -32,7 +32,7 @@
         >
           <div
             class="media status"
-            :class="{ 'without-attachment': !hasAttachment }"
+            :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
             style="position: relative"
             @mouseenter="hovered = true"
             @mouseleave="hovered = false"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1bdf9833..de583269 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -75,7 +75,8 @@ const PostStatusForm = {
     'autoFocus',
     'fileLimit',
     'submitOnEnter',
-    'emojiPickerPlacement'
+    'emojiPickerPlacement',
+    'optimisticPosting'
   ],
   components: {
     MediaUpload,
@@ -272,7 +273,7 @@ const PostStatusForm = {
       if (this.preview) this.previewStatus()
     },
     async postStatus (event, newStatus, opts = {}) {
-      if (this.posting) { return }
+      if (this.posting && !this.optimisticPosting) { return }
       if (this.disableSubmit) { return }
       if (this.emojiInputShown) { return }
       if (this.submitOnEnter) {
@@ -280,6 +281,8 @@ const PostStatusForm = {
         event.preventDefault()
       }
 
+      if (this.optimisticPosting && (this.emptyStatus || this.isOverLengthLimit)) { return }
+
       if (this.emptyStatus) {
         this.error = this.$t('post_status.empty_status_error')
         return
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 284ce8df..83b60bc7 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -124,7 +124,7 @@
             v-model="newStatus.spoilerText"
             type="text"
             :placeholder="$t('post_status.content_warning')"
-            :disabled="posting"
+            :disabled="posting && !optimisticPosting"
             size="1"
             class="form-post-subject"
           >
@@ -150,7 +150,7 @@
             :placeholder="placeholder || $t('post_status.default')"
             rows="1"
             cols="1"
-            :disabled="posting"
+            :disabled="posting && !optimisticPosting"
             class="form-post-body"
             :class="{ 'scrollable-form': !!maxHeight }"
             @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
diff --git a/src/modules/api.js b/src/modules/api.js
index 0a354c3f..08485a30 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -75,12 +75,18 @@ const api = {
               } else if (message.event === 'delete') {
                 dispatch('deleteStatusById', message.id)
               } else if (message.event === 'pleroma:chat_update') {
-                dispatch('addChatMessages', {
-                  chatId: message.chatUpdate.id,
-                  messages: [message.chatUpdate.lastMessage]
-                })
-                dispatch('updateChat', { chat: message.chatUpdate })
-                maybeShowChatNotification(store, message.chatUpdate)
+                // The setTimeout wrapper is a temporary band-aid to avoid duplicates for the user's own messages when doing optimistic sending.
+                // The cause of the duplicates is the WS event arriving earlier than the HTTP response.
+                // This setTimeout wrapper can be removed once the commit `8e41baff` is in the stable Pleroma release.
+                // (`8e41baff` adds the idempotency key to the chat message entity, which PleromaFE uses when it's available, and it makes this artificial delay unnecessary).
+                setTimeout(() => {
+                  dispatch('addChatMessages', {
+                    chatId: message.chatUpdate.id,
+                    messages: [message.chatUpdate.lastMessage]
+                  })
+                  dispatch('updateChat', { chat: message.chatUpdate })
+                  maybeShowChatNotification(store, message.chatUpdate)
+                }, 100)
               }
             }
           )
diff --git a/src/modules/chats.js b/src/modules/chats.js
index 21e30933..0a373d88 100644
--- a/src/modules/chats.js
+++ b/src/modules/chats.js
@@ -16,7 +16,8 @@ const defaultState = {
   openedChats: {},
   openedChatMessageServices: {},
   fetcher: undefined,
-  currentChatId: null
+  currentChatId: null,
+  lastReadMessageId: null
 }
 
 const getChatById = (state, id) => {
@@ -92,9 +93,14 @@ const chats = {
       commit('setCurrentChatFetcher', { fetcher: undefined })
     },
     readChat ({ rootState, commit, dispatch }, { id, lastReadId }) {
+      const isNewMessage = rootState.chats.lastReadMessageId !== lastReadId
+
       dispatch('resetChatNewMessageCount')
-      commit('readChat', { id })
-      rootState.api.backendInteractor.readChat({ id, lastReadId })
+      commit('readChat', { id, lastReadId })
+
+      if (isNewMessage) {
+        rootState.api.backendInteractor.readChat({ id, lastReadId })
+      }
     },
     deleteChatMessage ({ rootState, commit }, value) {
       rootState.api.backendInteractor.deleteChatMessage(value)
@@ -106,6 +112,9 @@ const chats = {
     },
     clearOpenedChats ({ rootState, commit, dispatch, rootGetters }) {
       commit('clearOpenedChats', { commit })
+    },
+    handleMessageError ({ commit }, value) {
+      commit('handleMessageError', { commit, ...value })
     }
   },
   mutations: {
@@ -208,11 +217,16 @@ const chats = {
         }
       }
     },
-    readChat (state, { id }) {
+    readChat (state, { id, lastReadId }) {
+      state.lastReadMessageId = lastReadId
       const chat = getChatById(state, id)
       if (chat) {
         chat.unread = 0
       }
+    },
+    handleMessageError (state, { chatId, fakeId, isRetry }) {
+      const chatMessageService = state.openedChatMessageServices[chatId]
+      chatService.handleMessageError(chatMessageService, fakeId, isRetry)
     }
   }
 }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 1a3495d4..22b5e8ba 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -129,7 +129,11 @@ const promisedRequest = ({ method, url, params, payload, credentials, headers =
             return reject(new StatusCodeError(response.status, json, { url, options }, response))
           }
           return resolve(json)
-        }))
+        })
+        .catch((error) => {
+          return reject(new StatusCodeError(response.status, error, { url, options }, response))
+        })
+      )
     })
 }
 
@@ -1210,7 +1214,7 @@ const chatMessages = ({ id, credentials, maxId, sinceId, limit = 20 }) => {
   })
 }
 
-const sendChatMessage = ({ id, content, mediaId = null, credentials }) => {
+const sendChatMessage = ({ id, content, mediaId = null, idempotencyKey, credentials }) => {
   const payload = {
     'content': content
   }
@@ -1219,11 +1223,18 @@ const sendChatMessage = ({ id, content, mediaId = null, credentials }) => {
     payload['media_id'] = mediaId
   }
 
+  const headers = {}
+
+  if (idempotencyKey) {
+    headers['idempotency-key'] = idempotencyKey
+  }
+
   return promisedRequest({
     url: PLEROMA_CHAT_MESSAGES_URL(id),
     method: 'POST',
     payload: payload,
-    credentials
+    credentials,
+    headers
   })
 }
 
diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
index 95c69482..815af82e 100644
--- a/src/services/chat_service/chat_service.js
+++ b/src/services/chat_service/chat_service.js
@@ -3,6 +3,7 @@ import _ from 'lodash'
 const empty = (chatId) => {
   return {
     idIndex: {},
+    idempotencyKeyIndex: {},
     messages: [],
     newMessageCount: 0,
     lastSeenTimestamp: 0,
@@ -13,8 +14,18 @@ const empty = (chatId) => {
 }
 
 const clear = (storage) => {
-  storage.idIndex = {}
-  storage.messages.splice(0, storage.messages.length)
+  const failedMessageIds = []
+
+  for (const message of storage.messages) {
+    if (message.error) {
+      failedMessageIds.push(message.id)
+    } else {
+      delete storage.idIndex[message.id]
+      delete storage.idempotencyKeyIndex[message.id]
+    }
+  }
+
+  storage.messages = storage.messages.filter(m => failedMessageIds.includes(m.id))
   storage.newMessageCount = 0
   storage.lastSeenTimestamp = 0
   storage.minId = undefined
@@ -37,6 +48,25 @@ const deleteMessage = (storage, messageId) => {
   }
 }
 
+const handleMessageError = (storage, fakeId, isRetry) => {
+  if (!storage) { return }
+  const fakeMessage = storage.idIndex[fakeId]
+  if (fakeMessage) {
+    fakeMessage.error = true
+    fakeMessage.pending = false
+    if (!isRetry) {
+      // Ensure the failed message doesn't stay at the bottom of the list.
+      const lastPersistedMessage = _.orderBy(storage.messages, ['pending', 'id'], ['asc', 'desc'])[0]
+      if (lastPersistedMessage) {
+        const oldId = fakeMessage.id
+        fakeMessage.id = `${lastPersistedMessage.id}-${new Date().getTime()}`
+        storage.idIndex[fakeMessage.id] = fakeMessage
+        delete storage.idIndex[oldId]
+      }
+    }
+  }
+}
+
 const add = (storage, { messages: newMessages, updateMaxId = true }) => {
   if (!storage) { return }
   for (let i = 0; i < newMessages.length; i++) {
@@ -45,7 +75,19 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => {
     // sanity check
     if (message.chat_id !== storage.chatId) { return }
 
-    if (!storage.minId || message.id < storage.minId) {
+    if (message.fakeId) {
+      const fakeMessage = storage.idIndex[message.fakeId]
+      if (fakeMessage) {
+        Object.assign(fakeMessage, message, { error: false })
+        delete fakeMessage['fakeId']
+        storage.idIndex[fakeMessage.id] = fakeMessage
+        delete storage.idIndex[message.fakeId]
+
+        return
+      }
+    }
+
+    if (!storage.minId || (!message.pending && message.id < storage.minId)) {
       storage.minId = message.id
     }
 
@@ -55,16 +97,22 @@ const add = (storage, { messages: newMessages, updateMaxId = true }) => {
       }
     }
 
-    if (!storage.idIndex[message.id]) {
+    if (!storage.idIndex[message.id] && !isConfirmation(storage, message)) {
       if (storage.lastSeenTimestamp < message.created_at) {
         storage.newMessageCount++
       }
-      storage.messages.push(message)
       storage.idIndex[message.id] = message
+      storage.messages.push(storage.idIndex[message.id])
+      storage.idempotencyKeyIndex[message.idempotency_key] = true
     }
   }
 }
 
+const isConfirmation = (storage, message) => {
+  if (!message.idempotency_key) return
+  return storage.idempotencyKeyIndex[message.idempotency_key]
+}
+
 const resetNewMessageCount = (storage) => {
   if (!storage) { return }
   storage.newMessageCount = 0
@@ -76,7 +124,7 @@ const getView = (storage) => {
   if (!storage) { return [] }
 
   const result = []
-  const messages = _.sortBy(storage.messages, ['id', 'desc'])
+  const messages = _.orderBy(storage.messages, ['pending', 'id'], ['asc', 'asc'])
   const firstMessage = messages[0]
   let previousMessage = messages[messages.length - 1]
   let currentMessageChainId
@@ -148,7 +196,8 @@ const ChatService = {
   getView,
   deleteMessage,
   resetNewMessageCount,
-  clear
+  clear,
+  handleMessageError
 }
 
 export default ChatService
diff --git a/src/services/chat_utils/chat_utils.js b/src/services/chat_utils/chat_utils.js
index 86fe1af9..de6e0625 100644
--- a/src/services/chat_utils/chat_utils.js
+++ b/src/services/chat_utils/chat_utils.js
@@ -18,3 +18,24 @@ export const maybeShowChatNotification = (store, chat) => {
 
   showDesktopNotification(store.rootState, opts)
 }
+
+export const buildFakeMessage = ({ content, chatId, attachments, userId, idempotencyKey }) => {
+  const fakeMessage = {
+    content,
+    chat_id: chatId,
+    created_at: new Date(),
+    id: `${new Date().getTime()}`,
+    attachments: attachments,
+    account_id: userId,
+    idempotency_key: idempotencyKey,
+    emojis: [],
+    pending: true,
+    isNormalized: true
+  }
+
+  if (attachments[0]) {
+    fakeMessage.attachment = attachments[0]
+  }
+
+  return fakeMessage
+}
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 1884478a..9d09b8d0 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -429,6 +429,9 @@ export const parseChatMessage = (message) => {
   } else {
     output.attachments = []
   }
+  output.pending = !!message.pending
+  output.error = false
+  output.idempotency_key = message.idempotency_key
   output.isNormalized = true
   return output
 }
diff --git a/test/unit/specs/services/chat_service/chat_service.spec.js b/test/unit/specs/services/chat_service/chat_service.spec.js
index 2eb89a2d..15e64bb5 100644
--- a/test/unit/specs/services/chat_service/chat_service.spec.js
+++ b/test/unit/specs/services/chat_service/chat_service.spec.js
@@ -2,17 +2,20 @@ import chatService from '../../../../../src/services/chat_service/chat_service.j
 
 const message1 = {
   id: '9wLkdcmQXD21Oy8lEX',
+  idempotency_key: '1',
   created_at: (new Date('2020-06-22T18:45:53.000Z'))
 }
 
 const message2 = {
   id: '9wLkdp6ihaOVdNj8Wu',
+  idempotency_key: '2',
   account_id: '9vmRb29zLQReckr5ay',
   created_at: (new Date('2020-06-22T18:45:56.000Z'))
 }
 
 const message3 = {
   id: '9wLke9zL4Dy4OZR2RM',
+  idempotency_key: '3',
   account_id: '9vmRb29zLQReckr5ay',
   created_at: (new Date('2020-07-22T18:45:59.000Z'))
 }
-- 
cgit v1.2.3-70-g09d2


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

---
 src/App.scss                                       | 32 +++++++++++--
 src/components/account_actions/account_actions.vue | 14 +++---
 .../async_component_error.vue                      |  2 +-
 src/components/attachment/attachment.js            |  6 ++-
 src/components/attachment/attachment.vue           | 28 ++++++-----
 src/components/block_card/block_card.vue           |  4 +-
 src/components/chat_list/chat_list.vue             |  5 +-
 src/components/chat_message/chat_message.scss      |  3 --
 src/components/chat_message/chat_message.vue       |  4 +-
 src/components/conversation/conversation.vue       | 13 +++---
 src/components/desktop_nav/desktop_nav.scss        | 10 ++--
 src/components/desktop_nav/desktop_nav.vue         | 40 ++++++++--------
 .../domain_mute_card/domain_mute_card.vue          |  4 +-
 src/components/emoji_reactions/emoji_reactions.vue |  2 +-
 src/components/export_import/export_import.vue     |  4 +-
 src/components/exporter/exporter.vue               |  2 +-
 src/components/extra_buttons/extra_buttons.vue     | 28 +++++------
 src/components/favorite_button/favorite_button.js  |  5 --
 src/components/favorite_button/favorite_button.vue | 38 +++++++--------
 src/components/follow_button/follow_button.vue     |  2 +-
 .../follow_request_card/follow_request_card.vue    |  4 +-
 src/components/image_cropper/image_cropper.vue     |  6 +--
 src/components/importer/importer.vue               |  2 +-
 src/components/login_form/login_form.vue           |  2 +-
 src/components/media_upload/media_upload.vue       | 54 +++++++++-------------
 src/components/mfa_form/recovery_form.vue          | 14 +++---
 src/components/mfa_form/totp_form.vue              | 14 +++---
 src/components/mobile_nav/mobile_nav.vue           | 14 +++---
 .../mobile_post_status_button.vue                  |  2 +-
 .../moderation_tools/moderation_tools.vue          |  6 +--
 src/components/mute_card/mute_card.vue             |  4 +-
 src/components/notification/notification.vue       | 13 +++---
 src/components/notifications/notifications.vue     |  8 ++--
 src/components/password_reset/password_reset.vue   |  2 +-
 src/components/poll/poll.vue                       |  2 +-
 .../post_status_form/post_status_form.vue          | 34 ++++++--------
 src/components/react_button/react_button.vue       | 13 ++++--
 src/components/registration/registration.vue       |  2 +-
 src/components/reply_button/reply_button.vue       | 19 ++++----
 src/components/retweet_button/retweet_button.js    |  5 --
 src/components/retweet_button/retweet_button.vue   | 48 +++++++++----------
 src/components/search_bar/search_bar.vue           | 32 +++++++------
 src/components/settings_modal/settings_modal.vue   |  4 +-
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 10 ++--
 .../settings_modal/tabs/notifications_tab.vue      |  2 +-
 src/components/settings_modal/tabs/profile_tab.vue |  8 ++--
 .../settings_modal/tabs/security_tab/confirm.vue   |  4 +-
 .../settings_modal/tabs/security_tab/mfa.vue       | 10 ++--
 .../settings_modal/tabs/security_tab/mfa_totp.vue  |  4 +-
 .../tabs/security_tab/security_tab.vue             | 10 ++--
 .../settings_modal/tabs/theme_tab/preview.vue      |  4 +-
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 28 +++++------
 src/components/shadow_control/shadow_control.vue   |  8 ++--
 src/components/side_drawer/side_drawer.vue         | 15 +++---
 src/components/status/status.vue                   | 35 +++++++-------
 src/components/status_content/status_content.vue   | 37 +++++++--------
 src/components/tab_switcher/tab_switcher.js        |  2 +-
 src/components/timeline/timeline.vue               |  8 ++--
 src/components/user_card/user_card.vue             | 10 ++--
 .../user_reporting_modal/user_reporting_modal.vue  |  2 +-
 60 files changed, 384 insertions(+), 363 deletions(-)

(limited to 'src/components/chat_message/chat_message.vue')

diff --git a/src/App.scss b/src/App.scss
index ca7d33cd..ef2a13b1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -33,6 +33,7 @@ h4 {
   max-width: 980px;
   align-content: flex-start;
 }
+
 .underlay {
   background-color: rgba(0,0,0,0.15);
   background-color: var(--underlay, rgba(0,0,0,0.15));
@@ -69,7 +70,7 @@ a {
   color: var(--link, $fallback--link);
 }
 
-button {
+.button-default {
   user-select: none;
   color: $fallback--text;
   color: var(--btnText, $fallback--text);
@@ -85,7 +86,9 @@ button {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  i[class*=icon-], .svg-inline--fa {
+  i[class*=icon-],
+  :not(&.-icon),
+  .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -149,6 +152,29 @@ button {
   }
 }
 
+.button-unstyled {
+  background: none;
+  border: none;
+  outline: none;
+  display: inline;
+  text-align: initial;
+  font-size: 100%;
+  font-family: inherit;
+  padding: 0;
+  line-height: unset;
+  cursor: pointer;
+
+  &.-link {
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-padded {
+    padding: 5px;
+    margin: -5px;
+  }
+}
+
 input, textarea, .select, .input {
 
   &.unstyled {
@@ -797,7 +823,7 @@ nav {
   }
 }
 
-.btn.btn-default {
+.btn.button-default {
   min-height: 28px;
 }
 
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index e3ae376e..c10b09b8 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/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"
diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index b68b98f9..b1b59638 100644
--- 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') }}
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 3877b67f..5f5779a0 100644
--- 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 = {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index f1fac2c8..b072b170 100644
--- 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 -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 {
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 5b00b738..2fe66d4c 100644
--- 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"
       >
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 17e2f795..e23eec13 100644
--- 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>
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 5af744a3..e4351d3b 100644
--- 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 {
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 3849ab6e..0777f880 100644
--- 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" />
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index fd0dfa8f..353859b8 100644
--- 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"
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 028692a9..7ec0caf7 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/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 {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 3a6e4033..762aa610 100644
--- 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>
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 97aee243..3b5aec14 100644
--- 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">
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 2f14b5b2..51d50359 100644
--- 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()"
diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index ae00487f..8ffe34f8 100644
--- 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 }}
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index ecd71bf1..d6a03088 100644
--- 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 }}
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a33f6e87..5c9e1963 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/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);
   }
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index 2a2ee84a..5cd05f73 100644
--- 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'])
   }
 }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index dfe12f86..d54ae78c 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/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>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index bfdc137b..7f85f1d7 100644
--- 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"
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index b217b8ed..1b12ba4b 100644
--- 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') }}
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 75def612..448461b4 100644
--- 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)"
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index c4fe5b00..210823f5 100644
--- 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 }}
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index a1f77210..bfabb946 100644
--- 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>
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 88251a26..e955aa72 100644
--- 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>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 78953649..0bf68e27 100644
--- 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>
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 9401cad5..79230148 100644
--- 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>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 5304a500..0f0ea457 100644
--- 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
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 50529878..767f8244 100644
--- 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"
     >
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 60fa6ceb..0ae9246b 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/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') }}
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index 9611fb82..ca33c6c5 100644
--- 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"
       >
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 2bbde108..ba3648fd 100644
--- a/src/components/notification/notification.vue
+++ b/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'"
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b976026e..663f623b 100644
--- 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"
           @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"
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 0deb9ccf..a931cb5a 100644
--- 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>
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 5f54b416..264a5f03 100644
--- 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"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 42d3152b..ed830f57 100644
--- 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)"
         >
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index e508a3e9..ea4a8a9b 100644
--- a/src/components/react_button/react_button.vue
+++ b/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);
   }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index a83ca1e5..100df0d6 100644
--- 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>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index a0ac8941..1b02881a 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/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);
     }
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 5ee4179a..2103fd0b 100644
--- 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
     }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b234f3d9..5d4915aa 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,29 +1,29 @@
 <template>
-  <div v-if="loggedIn">
-    <template v-if="visibility !== 'private' && visibility !== 'direct'">
+  <div>
+    <button
+      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+      class="button-unstyled -padded RetweetButton -interactive"
+      :class="status.repeated && '-repeated'"
+    >
       <FAIcon
-        :class="classes"
-        class="RetweetButton fa-scale-110 fa-old-padding -interactive"
+        class="fa-scale-110 fa-old-padding"
         icon="retweet"
         :spin="animated"
         :title="$t('tool_tip.repeat')"
         @click.prevent="retweet()"
       />
-      <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
-    </template>
-    <template v-else>
-      <FAIcon
-        :class="classes"
-        class="RetweetButton fa-scale-110 fa-old-padding"
-        icon="lock"
-        :title="$t('timeline.no_retweet_hint')"
-      />
-    </template>
-  </div>
-  <div v-else-if="!loggedIn">
+    </button>
+    <FAIcon
+      v-else-if="loggedIn"
+      :class="classes"
+      class="RetweetButton fa-scale-110 fa-old-padding"
+      icon="lock"
+      :title="$t('timeline.no_retweet_hint')"
+    />
     <FAIcon
+      v-else
       :class="classes"
-      class="fa-scale-110 fa-old-padding"
+      class="RetweetButton fa-scale-110 fa-old-padding"
       icon="retweet"
       :title="$t('tool_tip.repeat')"
     />
@@ -38,18 +38,16 @@
 
 .RetweetButton {
   &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
   }
-
-  &.-repeated {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
-  }
 }
 </style>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 89a601c8..6cf9179e 100644
--- 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);
   }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 6bc64ed0..552ca41f 100644
--- 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') }}
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 5a1cf2c0..63d36bf9 100644
--- 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') }}
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 86eed3f5..8f8fe48e 100644
--- 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') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index d62bc392..50d3ee63 100644
--- 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') }}
diff --git a/src/components/settings_modal/tabs/security_tab/confirm.vue b/src/components/settings_modal/tabs/security_tab/confirm.vue
index 69b3811b..38c2a610 100644
--- 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"
     >
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 7aca3c8d..455d17b6 100644
--- 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') }}
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
index c6f2cc7b..8e767bd0 100644
--- 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"
       >
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index 3d32d73d..56bea1f4 100644
--- 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') }}
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 02fea0b6..7ac7b9d3 100644
--- 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>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 280e1955..4ab793d6 100644
--- 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') }}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 78f0e544..37d491f0 100644
--- 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"
         >
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 28c888fe..1c14c1ab 100644
--- 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"
             @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"
             @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,12 +331,13 @@
 .side-drawer li {
   padding: 0;
 
-  a {
+  a, button {
     box-sizing: border-box;
     display: block;
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
+    width: 100%;
 
     &:hover {
       background-color: $fallback--lightBg;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 21412faa..896635ee 100644
--- 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>
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 321cd477..90bfaf40 100644
--- 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">
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 6e6e8193..76e7ef03 100644
--- 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')
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index d4da2a87..8ffa4499 100644
--- 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,13 @@
       >
         {{ $t('timeline.no_more_statuses') }}
       </div>
-      <a
+      <button
         v-else-if="!timeline.loading"
-        href="#"
+        class="button-unstyled -link"
         @click.prevent="fetchOlderStatuses()"
       >
         <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
-      </a>
+      </button>
       <div
         v-else
         class="new-status-notification text-center panel-footer"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f916af9d..16dd5249 100644
--- 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') }}
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 2a8d8d48..fb43094f 100644
--- 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"
             >
-- 
cgit v1.2.3-70-g09d2

