From 38142182774ea772aacc88f26586512d6279267f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 19:38:49 +0300
Subject: Some initial work on replacing icons with FA5

---
 src/components/emoji_input/emoji_input.js          |   9 ++
 src/components/emoji_input/emoji_input.vue         |   2 +-
 src/components/emoji_picker/emoji_picker.js        |  16 ++-
 src/components/emoji_picker/emoji_picker.scss      |   2 +-
 src/components/emoji_picker/emoji_picker.vue       |   4 +-
 src/components/extra_buttons/extra_buttons.js      |   4 +
 src/components/extra_buttons/extra_buttons.vue     |   6 +-
 src/components/favorite_button/favorite_button.js  |  14 +-
 src/components/favorite_button/favorite_button.vue |  33 +++--
 src/components/media_upload/media_upload.js        |   8 ++
 src/components/media_upload/media_upload.vue       |  10 +-
 src/components/nav_panel/nav_panel.js              |  23 ++++
 src/components/nav_panel/nav_panel.vue             | 148 +++++++++++----------
 src/components/poll/poll_form.js                   |  12 ++
 src/components/poll/poll_form.vue                  |  16 ++-
 .../post_status_form/post_status_form.js           |  17 +++
 .../post_status_form/post_status_form.vue          |  31 +++--
 src/components/react_button/react_button.js        |   4 +
 src/components/react_button/react_button.vue       |   6 +-
 src/components/reply_button/reply_button.js        |   4 +
 src/components/reply_button/reply_button.vue       |  28 +++-
 src/components/retweet_button/retweet_button.js    |   8 +-
 src/components/retweet_button/retweet_button.vue   |  48 ++++---
 src/components/scope_selector/scope_selector.js    |  15 +++
 src/components/scope_selector/scope_selector.vue   |  48 ++++---
 src/components/status/status.js                    |  49 ++++++-
 src/components/status/status.scss                  |  26 +---
 src/components/status/status.vue                   |  70 +++++-----
 src/components/timeline_menu/timeline_menu.js      |  18 +++
 src/components/timeline_menu/timeline_menu.vue     |  32 ++---
 30 files changed, 475 insertions(+), 236 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index f0123447..87303d08 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -3,6 +3,15 @@ import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSmileBeam
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faSmileBeam
+)
+
 /**
  * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
  * without having to give up the comfort of <input/> and <textarea/> elements
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index b9a74572..224e72cf 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -11,7 +11,7 @@
         class="emoji-picker-icon"
         @click.prevent="togglePicker"
       >
-        <i class="icon-smile" />
+        <FAIcon :icon="['far', 'smile-beam']" />
       </div>
       <EmojiPicker
         v-if="enableEmojiPicker"
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 3ad80df3..b1671566 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,4 +1,16 @@
 import Checkbox from '../checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUnderline,
+  faStickyNote,
+  faSmileBeam
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUnderline,
+  faStickyNote,
+  faSmileBeam
+)
 
 // At widest, approximately 20 emoji are visible in a row,
 // loading 3 rows, could be overkill for narrow picker
@@ -177,13 +189,13 @@ const EmojiPicker = {
         {
           id: 'custom',
           text: this.$t('emoji.custom'),
-          icon: 'icon-smile',
+          icon: 'smile-beam',
           emojis: customEmojis
         },
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'icon-picture',
+          icon: 'underline',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 8bd07e45..ec711758 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -82,7 +82,7 @@
       &.active {
         border-bottom: 4px solid;
 
-        i {
+        svg {
           color: $fallback--lightText;
           color: var(--lightText, $fallback--lightText);
         }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 191b9fa1..bd093c99 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,7 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <i :class="group.icon" />
+          <FAIcon :icon="group.icon" fixed-width/>
         </span>
       </span>
       <span
@@ -26,7 +26,7 @@
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
         >
-          <i class="icon-star" />
+          <FAIcon icon="sticky-note" fixed-width/>
         </span>
       </span>
     </div>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 5e0c36bb..6892dabc 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,4 +1,8 @@
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faEllipsisH)
 
 const ExtraButtons = {
   props: [ 'status' ],
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 7a4e8642..0af264a5 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -73,9 +73,11 @@
         </button>
       </div>
     </div>
-    <i
+    <FAIcon
       slot="trigger"
-      class="icon-ellipsis button-icon"
+      class="button-icon"
+      icon="ellipsis-h"
+      size="lg"
     />
   </Popover>
 </template>
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index 5014d84f..2a2ee84a 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -1,4 +1,14 @@
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faStar } from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar as faStarRegular
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faStar,
+  faStarRegular
+)
 
 const FavoriteButton = {
   props: ['status', 'loggedIn'],
@@ -23,9 +33,7 @@ const FavoriteButton = {
   computed: {
     classes () {
       return {
-        'icon-star-empty': !this.status.favorited,
-        'icon-star': this.status.favorited,
-        'animate-spin': this.animated
+        '-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 fbc90f84..6c7bfdab 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,18 +1,23 @@
 <template>
   <div v-if="loggedIn">
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button fav-active"
+      class="FavoriteButton button-icon -interactive"
       :title="$t('tool_tip.favorite')"
+      :icon="[status.favorited ? 'fas' : 'far', 'star']"
+      :spin="animated"
+      size="lg"
       @click.prevent="favorite()"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
   <div v-else>
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button"
+      class="FavoriteButton button-icon"
       :title="$t('tool_tip.favorite')"
+      :icon="['far', 'star']"
+      size="lg"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
@@ -23,18 +28,20 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.fav-active {
-  cursor: pointer;
-  animation-duration: 0.6s;
+.FavoriteButton {
+  &.-interactive {
+    cursor: pointer;
+    animation-duration: 0.6s;
 
-  &:hover {
+    &:hover {
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
+    }
+  }
+
+  &.-favorited {
     color: $fallback--cOrange;
     color: var(--cOrange, $fallback--cOrange);
   }
 }
-
-.favorite-button.icon-star {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
 </style>
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 7b8a76cc..669d8190 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -2,6 +2,14 @@
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faUpload, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUpload,
+  faCircleNotch
+)
+
 const mediaUpload = {
   data () {
     return {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index c8865d77..38e00702 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -7,13 +7,15 @@
       class="label"
       :title="$t('tool_tip.media_upload')"
     >
-      <i
+      <FAIcon
         v-if="uploading"
-        class="progress-icon icon-spin4 animate-spin"
+        class="progress-icon animate-spin"
+        icon="circle-notch"
       />
-      <i
+      <FAIcon
         v-if="!uploading"
-        class="new-icon icon-upload"
+        class="new-icon"
+        icon="upload"
       />
       <input
         v-if="uploadReady"
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 623dfaec..87e54133 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,6 +1,29 @@
 import { timelineNames } from '../timeline_menu/timeline_menu.js'
 import { mapState, mapGetters } from 'vuex'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faComments,
+  faBell,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faComments,
+  faBell,
+  faInfoCircle
+)
+
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 4f944c95..f3e131ff 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nav-panel">
+  <div class="NavPanel">
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
@@ -7,12 +7,14 @@
             :to="{ name: timelinesRoute }"
             :class="onTimelineRoute && 'router-link-active'"
           >
-            <i class="button-icon icon-home-2" />{{ $t("nav.timelines") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="home" />
+            {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" />{{ $t("nav.interactions") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="bell" />
+            {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
@@ -23,12 +25,14 @@
             >
               {{ unreadChatCount }}
             </div>
-            <i class="button-icon icon-chat" />{{ $t("nav.chats") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="comments" />
+            {{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            <i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="user-plus" />
+            {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -39,7 +43,7 @@
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            <i class="button-icon icon-info-circled" />{{ $t("nav.about") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="info-circle" />{{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
@@ -52,84 +56,88 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.nav-panel .panel {
-  overflow: hidden;
-  box-shadow: var(--panelShadow);
-}
-.nav-panel ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.follow-request-count {
-  margin: -6px 10px;
-  background-color: $fallback--bg;
-  background-color: var(--input, $fallback--faint);
-}
-
-.nav-panel li {
-  border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  padding: 0;
+.NavPanel {
+  .panel {
+    overflow: hidden;
+    box-shadow: var(--panelShadow);
+  }
 
-  &:first-child a {
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
-  &:last-child a {
-    border-bottom-right-radius: $fallback--panelRadius;
-    border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-    border-bottom-left-radius: $fallback--panelRadius;
-    border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+  .follow-request-count {
+    margin: -6px 10px;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
   }
-}
 
-.nav-panel li:last-child {
-  border: none;
-}
+  li {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    padding: 0;
 
-.nav-panel a {
-  display: block;
-  padding: 0.8em 0.85em;
+    &:first-child a {
+      border-top-right-radius: $fallback--panelRadius;
+      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-left-radius: $fallback--panelRadius;
+      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
 
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
+    &:last-child a {
+      border-bottom-right-radius: $fallback--panelRadius;
+      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-left-radius: $fallback--panelRadius;
+      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
   }
 
-  &.router-link-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
+  li:last-child {
+    border: none;
+  }
+
+  a {
+    display: block;
+    padding: 0.8em 0.85em;
 
     &:hover {
-      text-decoration: underline;
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuText, $fallback--link);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+    }
+
+    &.router-link-active {
+      font-weight: bolder;
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
-}
 
-.nav-panel .button-icon {
-  margin-right: 0.5em;
-}
+  .button-icon {
+    margin-left: -0.1em;
+    margin-right: 0.2em;
+  }
 
-.nav-panel .button-icon:before {
-  width: 1.1em;
+  .button-icon:before {
+    width: 1.1em;
+  }
 }
 </style>
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index df93f038..1f8df3f9 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,5 +1,17 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faChevronDown,
+  faPlus
+)
 
 export default {
   name: 'PollForm',
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index d53f3837..3a8a2f42 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -24,8 +24,8 @@
         v-if="options.length > 2"
         class="icon-container"
       >
-        <i
-          class="icon-cancel"
+        <FAIcon
+          icon="times"
           @click="deleteOption(index)"
         />
       </div>
@@ -35,7 +35,8 @@
       class="add-option faint"
       @click="addOption"
     >
-      <i class="icon-plus" />
+      <FAIcon icon="plus" size="sm"/>
+
       {{ $t("polls.add_option") }}
     </a>
     <div class="poll-type-expiry">
@@ -55,7 +56,7 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down"/>
         </label>
       </div>
       <div
@@ -83,7 +84,7 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down"/>
         </label>
       </div>
     </div>
@@ -103,6 +104,7 @@
   .add-option {
     align-self: flex-start;
     padding-top: 0.25em;
+    padding-left: 0.1em;
     cursor: pointer;
   }
 
@@ -124,8 +126,8 @@
 
   .icon-container {
     // Hack: Move the icon over the input box
-    width: 2em;
-    margin-left: -2em;
+    width: 1.5em;
+    margin-left: -1.5em;
     z-index: 1;
   }
 
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index ad149506..1267225d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -12,6 +12,23 @@ import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown,
+  faSmileBeam,
+  faPollH,
+  faUpload,
+  faBan
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faSmileBeam,
+  faPollH,
+  faUpload,
+  faBan
+)
+
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   let allAttentions = [...attentions]
 
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d67d9ae9..9a5be689 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -12,10 +12,11 @@
         v-show="showDropIcon !== 'hide'"
         :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
         class="drop-indicator"
-        :class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
-      />
+      >
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'"/>
+      </div>
       <div class="form-group">
         <i18n
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
@@ -198,7 +199,7 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down"/>
             </label>
           </div>
           <div
@@ -235,22 +236,22 @@
           <div
             class="emoji-icon"
           >
-            <i
+            <div
               :title="$t('emoji.add_emoji')"
-              class="icon-smile btn btn-default"
+              class="btn btn-default"
               @click="showEmojiPicker"
-            />
+            >
+              <FAIcon icon="smile-beam"/>
+            </div>
           </div>
           <div
             v-if="pollsAvailable"
             class="poll-icon"
             :class="{ selected: pollFormVisible }"
+            :title="$t('polls.add_poll')"
+            @click="togglePollForm"
           >
-            <i
-              :title="$t('polls.add_poll')"
-              class="icon-chart-bar btn btn-default"
-              @click="togglePollForm"
-            />
+            <FAIcon icon="poll-h" />
           </div>
         </div>
         <button
@@ -392,7 +393,7 @@
     &:hover {
       text-decoration: underline;
     }
-    i {
+    svg, i {
       margin-left: 0.2em;
       font-size: 0.8em;
       transform: rotate(90deg);
@@ -434,18 +435,20 @@
 
   .media-upload-icon, .poll-icon, .emoji-icon {
     font-size: 26px;
+    line-height: 1.1;
     flex: 1;
+    padding: 0 0.1em;
 
     &.selected, &:hover {
       // needs to be specific to override icon default color
-      i, label {
+      svg, i, label {
         color: $fallback--lightText;
         color: var(--lightText, $fallback--lightText);
       }
     }
 
     &.disabled {
-      i {
+      svg, i {
         cursor: not-allowed;
         color: $fallback--icon;
         color: var(--btnDisabledText, $fallback--icon);
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index dd71e546..de0df70c 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,4 +1,8 @@
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
+
+library.add(faSmileBeam)
 
 const ReactButton = {
   props: ['status'],
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 0b34add1..8395d5e3 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -36,9 +36,11 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <i
+    <FAIcon
       slot="trigger"
-      class="icon-smile button-icon add-reaction-button"
+      class="button-icon add-reaction-button"
+      :icon="['far', 'smile-beam']"
+      size="lg"
       :title="$t('tool_tip.add_reaction')"
     />
   </Popover>
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
index 22957650..c7bd2a2b 100644
--- a/src/components/reply_button/reply_button.js
+++ b/src/components/reply_button/reply_button.js
@@ -1,3 +1,7 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faReply } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faReply)
 
 const ReplyButton = {
   name: 'ReplyButton',
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index b2904b5c..ae7b0e26 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -1,15 +1,19 @@
 <template>
   <div>
-    <i
+    <FAIcon
       v-if="loggedIn"
-      class="button-icon button-reply icon-reply"
+      class="ReplyButton button-icon -interactive"
+      icon="reply"
+      size="lg"
       :title="$t('tool_tip.reply')"
       :class="{'-active': replying}"
       @click.prevent="$emit('toggle')"
     />
-    <i
+    <FAIcon
       v-else
-      class="button-icon button-reply -disabled icon-reply"
+      icon="reply"
+      size="lg"
+      class="ReplyButton button-icon"
       :title="$t('tool_tip.reply')"
     />
     <span v-if="status.replies_count > 0">
@@ -19,3 +23,19 @@
 </template>
 
 <script src="./reply_button.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.ReplyButton {
+  &.-interactive {
+    cursor: pointer;
+
+    &:hover,
+    &.-active {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+  }
+}
+</style>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 5a41f22d..5ee4179a 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,3 +1,7 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faRetweet } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faRetweet)
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
@@ -22,9 +26,7 @@ const RetweetButton = {
   computed: {
     classes () {
       return {
-        'retweeted': this.status.repeated,
-        'retweeted-empty': !this.status.repeated,
-        'animate-spin': this.animated
+        '-repeated': this.status.repeated
       }
     },
     mergedConfig () {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 074f7747..3e15f30b 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,26 +1,33 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i
-        :class="classes"
-        class="button-icon retweet-button icon-retweet rt-active"
-        :title="$t('tool_tip.repeat')"
-        @click.prevent="retweet()"
-      />
+    <FAIcon
+      :class="classes"
+      class="RetweetButton button-icon -interactive"
+      icon="retweet"
+      size="lg"
+      :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>
-      <i
+      <FAIcon
         :class="classes"
-        class="button-icon icon-lock"
+        class="RetweetButton button-icon"
+        icon="lock"
+        size="lg"
         :title="$t('timeline.no_retweet_hint')"
       />
     </template>
   </div>
   <div v-else-if="!loggedIn">
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon icon-retweet"
+      class="button-icon"
+      icon="retweet"
+      size="lg"
       :title="$t('tool_tip.repeat')"
     />
     <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
@@ -31,16 +38,21 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.rt-active {
-  cursor: pointer;
-  animation-duration: 0.6s;
-  &:hover {
+
+.RetweetButton {
+  &.-interactive {
+    cursor: pointer;
+    animation-duration: 0.6s;
+
+    &:hover {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
+    }
+  }
+
+  &.-repeated {
     color: $fallback--cGreen;
     color: var(--cGreen, $fallback--cGreen);
   }
 }
-.icon-retweet.retweeted {
-  color: $fallback--cGreen;
-  color: var(--cGreen, $fallback--cGreen);
-}
 </style>
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index e9ccdefc..34efdc00 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -1,3 +1,18 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEnvelope,
+  faLock,
+  faLockOpen,
+  faGlobeEurope
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEnvelope,
+  faGlobeEurope,
+  faLock,
+  faLockOpen
+)
+
 const ScopeSelector = {
   props: [
     'showAll',
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 291236f2..5b9abd64 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,36 +1,44 @@
 <template>
   <div
     v-if="!showNothing"
-    class="scope-selector"
-  >
-    <i
+    class="ScopeSelector"
+    >
+    <span
       v-if="showDirect"
-      class="icon-mail-alt"
+      class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-    />
-    <i
+      >
+      <FAIcon icon="envelope" class="button-icon" size="lg" />
+    </span>
+    <span
+      class="scope"
       v-if="showPrivate"
-      class="icon-lock"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-    />
-    <i
+      >
+      <FAIcon icon="lock" class="button-icon" size="lg" />
+    </span>
+    <span
       v-if="showUnlisted"
-      class="icon-lock-open-alt"
+      class="scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
-    />
-    <i
+      >
+      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+    </span>
+    <span
       v-if="showPublic"
-      class="icon-globe"
+      class="scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-    />
+      >
+      <FAIcon icon="globe-europe" class="button-icon" size="lg" />
+    </span>
   </div>
 </template>
 
@@ -39,12 +47,16 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.scope-selector {
-  i {
-    font-size: 1.2em;
+.ScopeSelector {
+
+  .scope {
+    display: inline-block;
     cursor: pointer;
+    min-width: 1.3em;
+    min-height: 1.3em;
+    text-align: center;
 
-    &.selected {
+    &.selected svg {
       color: $fallback--lightText;
       color: var(--lightText, $fallback--lightText);
     }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index e48b2eb8..f7a0ff83 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -17,6 +17,47 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEnvelope,
+  faLock,
+  faLockOpen,
+  faGlobeEurope,
+  faTimes,
+  faRetweet,
+  faReply,
+  faExternalLinkSquareAlt,
+  faPlusSquare,
+  faSmileBeam,
+  faEllipsisH,
+  faStar,
+  faEyeSlash,
+  faEye,
+  faThumbtack
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar as faStarRegular
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faEnvelope,
+  faGlobeEurope,
+  faLock,
+  faLockOpen,
+  faTimes,
+  faRetweet,
+  faReply,
+  faExternalLinkSquareAlt,
+  faPlusSquare,
+  faStar,
+  faStarRegular,
+  faSmileBeam,
+  faEllipsisH,
+  faEyeSlash,
+  faEye,
+  faThumbtack
+)
+
 const Status = {
   name: 'Status',
   components: {
@@ -227,13 +268,13 @@ const Status = {
     visibilityIcon (visibility) {
       switch (visibility) {
         case 'private':
-          return 'icon-lock'
+          return 'lock'
         case 'unlisted':
-          return 'icon-lock-open-alt'
+          return 'lock-open'
         case 'direct':
-          return 'icon-mail-alt'
+          return 'envelope'
         default:
-          return 'icon-globe'
+          return 'globe-europe'
       }
     },
     showError (error) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 66a91c1e..cd5366ed 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -200,7 +200,6 @@ $status-margin: 0.75em;
   }
 
   .reply-to {
-    display: flex;
     position: relative;
   }
 
@@ -208,7 +207,6 @@ $status-margin: 0.75em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    margin-left: 0.2em;
   }
 
   .replies-separator {
@@ -232,16 +230,10 @@ $status-margin: 0.75em;
 
   .repeat-info {
     padding: 0.4em $status-margin;
-    line-height: 22px;
-
-    .right-side {
-      display: flex;
-      align-content: center;
-      flex-wrap: wrap;
-    }
 
-    i {
-      padding: 0 0.2em;
+    .repeat-icon {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
     }
   }
 
@@ -291,18 +283,6 @@ $status-margin: 0.75em;
     }
   }
 
-  .button-reply {
-    &:not(.-disabled) {
-      cursor: pointer;
-    }
-
-    &:not(.-disabled):hover,
-    &.-active {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-  }
-
   .muted {
     padding: 0.25em 0.6em;
     height: 1.2em;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ffae32fc..b9b967cc 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -10,17 +10,20 @@
       class="alert error"
     >
       {{ error }}
-      <i
-        class="button-icon icon-cancel"
+      <span
+        class="button-icon"
         @click="clearError"
-      />
+        >
+        <FAIcon icon="times" />
+      </span>
     </div>
     <template v-if="muted && !isPreview">
       <div class="status-container muted">
         <small class="status-username">
-          <i
+          <FAIcon
             v-if="muted && retweet"
-            class="button-icon icon-retweet"
+            class="button-icon repeat-icon"
+            icon="retweet"
           />
           <router-link :to="userProfileLink">
             {{ status.user.screen_name }}
@@ -46,9 +49,11 @@
         </small>
         <a
           href="#"
-          class="unmute"
+          class="unmute button-icon"
           @click.prevent="toggleMute"
-        ><i class="button-icon icon-eye-off" /></a>
+          >
+          <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+        </a>
       </div>
     </template>
     <template v-else>
@@ -56,7 +61,7 @@
         v-if="showPinned"
         class="pin"
       >
-        <i class="fa icon-pin faint" />
+        <FAIcon icon="thumbtack" class="faint" />
         <span class="faint">{{ $t('status.pinned') }}</span>
       </div>
       <div
@@ -86,8 +91,9 @@
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
           </span>
-          <i
-            class="fa icon-retweet retweeted"
+          <FAIcon
+            icon="retweet"
+            class="repeat-icon"
             :title="$t('tool_tip.repeat')"
           />
           {{ $t('timeline.repeated') }}
@@ -167,15 +173,13 @@
                     :auto-update="60"
                   />
                 </router-link>
-                <div
+                <span
                   v-if="status.visibility"
-                  class="button-icon visibility-icon"
-                >
-                  <i
-                    :class="visibilityIcon(status.visibility)"
-                    :title="status.visibility | capitalize"
-                  />
-                </div>
+                  class="visibility-icon"
+                  :title="status.visibility | capitalize"
+                  >
+                  <FAIcon class="button-icon" :icon="visibilityIcon(status.visibility)" size="lg" />
+                </span>
                 <a
                   v-if="!status.is_local && !isPreview"
                   :href="status.external_url"
@@ -183,22 +187,23 @@
                   class="source_url"
                   title="Source"
                 >
-                  <i class="button-icon icon-link-ext-alt" />
+                  <FAIcon class="button-icon" icon="external-link-square-alt" size="lg" />
+                </a>
+                <a
+                  v-if="expandable && !isPreview"
+                  href="#"
+                  title="Expand"
+                  @click.prevent="toggleExpanded"
+                >
+                  <FAIcon class="button-icon" icon="plus-square" size="lg" />
                 </a>
-                <template v-if="expandable && !isPreview">
-                  <a
-                    href="#"
-                    title="Expand"
-                    @click.prevent="toggleExpanded"
-                  >
-                    <i class="button-icon icon-plus-squared" />
-                  </a>
-                </template>
                 <a
                   v-if="unmuted"
                   href="#"
                   @click.prevent="toggleMute"
-                ><i class="button-icon icon-eye-off" /></a>
+                >
+                  <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+                </a>
               </span>
             </div>
 
@@ -220,7 +225,12 @@
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i class="button-icon reply-button icon-reply" />
+                    <FAIcon
+                      class="button-icon"
+                      icon="reply"
+                      size="lg"
+                      flip="horizontal"
+                      />
                     <span
                       class="faint-link reply-to-text"
                     >
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 2be75b06..991c600d 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -1,5 +1,23 @@
 import Popover from '../popover/popover.vue'
 import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faChevronDown
+)
 
 // Route -> i18n key mapping, exported andnot in the computed
 // because nav panel benefits from the same information.
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index b7e5f2da..590752d3 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -1,7 +1,7 @@
 <template>
   <Popover
     trigger="click"
-    class="timeline-menu"
+    class="TimelineMenu"
     :class="{ 'open': isOpen }"
     :margin="{ left: -15, right: -200 }"
     :bound-to="{ x: 'container' }"
@@ -16,27 +16,27 @@
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            <i class="button-icon icon-home-2" />{{ $t("nav.timeline") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="home" />{{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'bookmarks'}">
-            <i class="button-icon icon-bookmark" />{{ $t("nav.bookmarks") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="bookmark" />{{ $t("nav.bookmarks") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="envelope" />{{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
-            <i class="button-icon icon-users" />{{ $t("nav.public_tl") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="users" />{{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <i class="button-icon icon-globe" />{{ $t("nav.twkn") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="globe-europe" />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
@@ -46,7 +46,7 @@
       class="title timeline-menu-title"
     >
       <span>{{ timelineName() }}</span>
-      <i class="icon-down-open" />
+      <FAIcon size="sm" icon="chevron-down" />
     </div>
   </Popover>
 </template>
@@ -56,17 +56,19 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline-menu {
+.TimelineMenu {
   flex-shrink: 1;
   margin-right: auto;
   min-width: 0;
   width: 24rem;
+
   .timeline-menu-popover-wrap {
     overflow: hidden;
     // Match panel heading padding to line up menu with bottom of heading
     margin-top: 0.6rem;
     padding: 0 15px 15px 15px;
   }
+
   .timeline-menu-popover {
     width: 24rem;
     max-width: 100vw;
@@ -77,10 +79,12 @@
     transform: translateY(-100%);
     transition: transform 100ms;
   }
+
   .panel::after {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
   }
+
   &.open .timeline-menu-popover {
     transform: translateY(0);
   }
@@ -88,7 +92,6 @@
   .timeline-menu-title {
     margin: 0;
     cursor: pointer;
-    display: flex;
     user-select: none;
     width: 100%;
 
@@ -98,15 +101,13 @@
       white-space: nowrap;
     }
 
-    i {
+    svg {
       margin-left: 0.6em;
-      flex-shrink: 0;
-      font-size: 1rem;
       transition: transform 100ms;
     }
   }
 
-  &.open .timeline-menu-title i {
+  &.open .timeline-menu-title svg {
     color: $fallback--text;
     color: var(--panelText, $fallback--text);
     transform: rotate(180deg);
@@ -171,8 +172,9 @@
       }
     }
 
-    i {
-      margin-right: 0.5em;
+    svg {
+      margin-right: 0.4em;
+      margin-left: -0.2em;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 8b3a7ae8c0fec5f79971745f64aeb3c5ac470894 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 22:35:46 +0300
Subject: more FA5 stuff with small related refactoring

---
 src/App.scss                                       | 10 ++++---
 src/components/chat_panel/chat_panel.js            |  6 ++++
 src/components/chat_panel/chat_panel.vue           |  2 +-
 src/components/exporter/exporter.js                |  7 +++++
 src/components/exporter/exporter.vue               |  4 +--
 src/components/extra_buttons/extra_buttons.js      | 20 ++++++++++++--
 src/components/extra_buttons/extra_buttons.vue     | 32 ++++++++++++----------
 src/components/media_upload/media_upload.vue       |  3 +-
 src/components/notification/notification.js        | 22 +++++++++++++++
 src/components/notification/notification.scss      | 32 ++++++++++++++++++++++
 src/components/notification/notification.vue       | 32 ++++++++++++----------
 src/components/notifications/notifications.js      |  6 ++++
 src/components/notifications/notifications.scss    | 31 ---------------------
 src/components/notifications/notifications.vue     |  2 +-
 src/components/panel_loading/panel_loading.vue     | 14 ++++++++--
 src/components/popover/popover.vue                 |  6 ++--
 src/components/scope_selector/scope_selector.js    |  4 +--
 src/components/scope_selector/scope_selector.vue   |  2 +-
 src/components/search/search.js                    |  6 ++++
 src/components/search/search.vue                   |  2 +-
 src/components/status/status.js                    | 10 ++-----
 src/components/status_popover/status_popover.js    |  6 ++++
 src/components/status_popover/status_popover.vue   |  2 +-
 src/components/timeline/timeline.js                |  6 ++++
 src/components/timeline/timeline.vue               |  2 +-
 src/components/user_card/user_card.js              | 16 +++++++++++
 src/components/user_card/user_card.vue             | 26 ++++++++++++------
 .../user_list_popover/user_list_popover.js         |  6 ++++
 .../user_list_popover/user_list_popover.vue        |  2 +-
 src/main.js                                        |  3 +-
 30 files changed, 221 insertions(+), 101 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index d34698e2..10969abb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -106,7 +106,8 @@ button {
     color: var(--btnPressedText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnPressed, $fallback--fg);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnPressedText, $fallback--text);
     }
@@ -118,7 +119,8 @@ button {
     color: var(--btnDisabledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnDisabled, $fallback--fg);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnDisabledText, $fallback--text);
     }
@@ -131,7 +133,8 @@ button {
     background-color: var(--btnToggled, $fallback--fg);
     box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnToggledText, $fallback--text);
     }
@@ -808,7 +811,6 @@ nav {
 }
 
 .button-icon {
-  &i,
   &.svg-inline--fa.fa-lg {
     display: inline-block;
     padding: 0 0.3em;
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index f2e3adf0..3dfec6df 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,4 +1,10 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn
+)
 
 const chatPanel = {
   props: [ 'floating' ],
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 570435e7..b64535b0 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <i class="icon-megaphone" />
+          <FAIcon icon="bullhorn" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js
index 8f507416..51912ac3 100644
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@@ -1,3 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const Exporter = {
   props: {
     getContent: {
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index f5126dc1..156db9a3 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="exporter">
     <div v-if="processing">
-      <i class="icon-spin4 animate-spin exporter-processing" />
+      <FAIcon icon="circle-notch" size="lg" spin />
+
       <span>{{ processingMessage }}</span>
     </div>
     <button
@@ -19,7 +20,6 @@
 <style lang="scss">
 .exporter {
   &-processing {
-    font-size: 1.5em;
     margin: 0.25em;
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 6892dabc..f325b2b4 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,8 +1,24 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import {
+  faEllipsisH,
+  faBookmark,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookmark as faBookmarkReg,
+} from '@fortawesome/free-regular-svg-icons'
 
-library.add(faEllipsisH)
+library.add(
+  faEllipsisH,
+  faBookmark,
+  faBookmarkReg,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+)
 
 const ExtraButtons = {
   props: [ 'status' ],
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 0af264a5..1889eaed 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,14 @@
           class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
-          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
-          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -30,7 +30,7 @@
           @click.prevent="pinStatus"
           @click="close"
         >
-          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -38,7 +38,7 @@
           @click.prevent="unpinStatus"
           @click="close"
         >
-          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -46,7 +46,7 @@
           @click.prevent="bookmarkStatus"
           @click="close"
         >
-          <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -54,7 +54,7 @@
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
-          <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -62,23 +62,24 @@
           @click.prevent="deleteStatus"
           @click="close"
         >
-          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
-          <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
         </button>
       </div>
     </div>
-    <FAIcon
-      slot="trigger"
-      class="button-icon"
-      icon="ellipsis-h"
-      size="lg"
-    />
+    <span slot="trigger">
+      <FAIcon
+        class="ExtraButtons button-icon"
+        icon="ellipsis-h"
+        size="md"
+      />
+    </span>
   </Popover>
 </template>
 
@@ -87,8 +88,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.icon-ellipsis {
+.ExtraButtons {
   cursor: pointer;
+  position: static;
 
   &:hover,
   .extra-button-popover.open & {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 38e00702..15b2b8e4 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -9,8 +9,9 @@
     >
       <FAIcon
         v-if="uploading"
-        class="progress-icon animate-spin"
+        class="progress-icon"
         icon="circle-notch"
+        spin
       />
       <FAIcon
         v-if="!uploading"
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index bb906b50..4aa9affd 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faEyeSlash,
+  faUser,
+  faSuitcaseRolling
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faUser,
+  faEyeSlash,
+  faSuitcaseRolling
+)
 
 const Notification = {
   data () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index d0e63d81..f5905560 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   &.-muted {
@@ -49,4 +51,34 @@
       display: block;
     }
   }
+
+  .type-icon {
+    margin: 0 0.1em;
+  }
+
+  &.-type--repeat .type-icon {
+    color: $fallback--cGreen;
+    color: var(--cGreen, $fallback--cGreen);
+  }
+
+  &.-type--follow .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--follow-request .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--like .type-icon {
+    color: orange;
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+
+  &.-type--move .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 7fac3840..857727a4 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,5 +1,5 @@
 <template>
-  <status
+  <Status
     v-if="notification.type === 'mention'"
     :compact="true"
     :statusoid="notification.status"
@@ -18,12 +18,12 @@
         href="#"
         class="unmute"
         @click.prevent="toggleMute"
-      ><i class="button-icon icon-eye-off" /></a>
+      ><FAIcon class="button-icon" icon="eye-slash" /></a>
     </div>
     <div
       v-else
-      class="non-mention"
-      :class="[userClass, { highlighted: userStyle }]"
+      class="Notification non-mention"
+      :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
       :style="[ userStyle ]"
     >
       <a
@@ -60,26 +60,26 @@
               :title="'@'+notification.from_profile.screen_name"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
-              <i class="fa icon-star lit" />
+              <FAIcon class="type-icon" icon="star" />
               <small>{{ $t('notifications.favorited_you') }}</small>
             </span>
             <span v-if="notification.type === 'repeat'">
-              <i
-                class="fa icon-retweet lit"
+              <FAIcon
+                class="type-icon" icon="retweet"
                 :title="$t('tool_tip.repeat')"
               />
               <small>{{ $t('notifications.repeated_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow'">
-              <i class="fa icon-user-plus lit" />
+              <FAIcon class="type-icon" icon="user-plus" />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow_request'">
-              <i class="fa icon-user lit" />
+              <FAIcon class="type-icon" icon="user" />
               <small>{{ $t('notifications.follow_request') }}</small>
             </span>
             <span v-if="notification.type === 'move'">
-              <i class="fa icon-arrow-curved lit" />
+              <FAIcon class="type-icon" icon="suitcase-rolling" />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +120,7 @@
             v-if="needMute"
             href="#"
             @click.prevent="toggleMute"
-          ><i class="button-icon icon-eye-off" /></a>
+          ><FAIcon class="button-icon" icon="eye-slash" /></a>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@@ -136,13 +136,15 @@
             v-if="notification.type === 'follow_request'"
             style="white-space: nowrap;"
           >
-            <i
-              class="icon-ok button-icon follow-request-accept"
+            <FAIcon
+              icon="check"
+              class="button-icon follow-request-accept"
               :title="$t('tool_tip.accept_follow_request')"
               @click="approveUser()"
             />
-            <i
-              class="icon-cancel button-icon follow-request-reject"
+            <FAIcon
+              icon="times"
+              class="button-icon follow-request-reject"
               :title="$t('tool_tip.reject_follow_request')"
               @click="denyUser()"
             />
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d951e2a8..4b479e13 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -6,6 +6,12 @@ import {
   filteredNotificationsFromStore,
   unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index c6b2a5b5..682ae127 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -158,37 +158,6 @@
       margin-right: .2em;
     }
 
-    .icon-retweet.lit {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
-    }
-
-    .icon-user.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-user-plus.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-reply.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-star.lit {
-      color: orange;
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
-    }
-
-    .icon-arrow-curved.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
     .status-content {
       margin: 0;
       max-height: 300px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d477a41b..57972854 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,7 @@
           v-else
           class="new-status-notification text-center panel-footer"
         >
-          <i class="icon-spin3 animate-spin" />
+          <FAIcon icon="circle-notch" spin size="lg"/>
         </div>
       </div>
     </div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 4efebb3c..9bf3ab32 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,12 +1,21 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <i class="icon-spin4 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="3x"/>
       {{ $t('general.loading') }}
     </span>
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+</script>
+
 <style lang="scss">
 @import 'src/_variables.scss';
 
@@ -18,8 +27,7 @@
   font-size: 2em;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  .loading-text i {
-    font-size: 3em;
+  .loading-text svg {
     line-height: 0;
     vertical-align: middle;
     color: $fallback--text;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 5c99c509..9b8680e5 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -27,7 +27,7 @@
 
 <script src="./popover.js" />
 
-<style lang=scss>
+<style lang="scss">
 @import '../../_variables.scss';
 
 .popover {
@@ -96,7 +96,7 @@
     &-icon {
       padding-left: 0.5rem;
 
-      i {
+      svg {
         margin-right: 0.25rem;
         color: var(--menuPopoverIcon, $fallback--icon)
       }
@@ -111,7 +111,7 @@
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      i {
+      svg {
         color: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 34efdc00..ddb20ff2 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faGlobeEurope
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -10,7 +10,7 @@ library.add(
   faEnvelope,
   faGlobeEurope,
   faLock,
-  faLockOpen
+  faUnlock
 )
 
 const ScopeSelector = {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 5b9abd64..ddd89422 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -28,7 +28,7 @@
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
       >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+      <FAIcon icon="unlock" class="button-icon" size="lg" />
     </span>
     <span
       v-if="showPublic"
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8e903052..3eb92fc1 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -2,6 +2,12 @@ import FollowCard from '../follow_card/follow_card.vue'
 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'
+
+library.add(
+  faCircleNotch
+)
 
 const Search = {
   components: {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 746bbaa2..a6677e4b 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,7 @@
       v-if="loading"
       class="text-center loading-icon"
     >
-      <i class="icon-spin3 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="lg"/>
     </div>
     <div v-else-if="loaded">
       <div class="search-nav-heading">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index f7a0ff83..5b93054f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faGlobeEurope,
   faTimes,
   faRetweet,
@@ -35,22 +35,18 @@ import {
   faEye,
   faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
 
 library.add(
   faEnvelope,
   faGlobeEurope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faTimes,
   faRetweet,
   faReply,
   faExternalLinkSquareAlt,
   faPlusSquare,
   faStar,
-  faStarRegular,
   faSmileBeam,
   faEllipsisH,
   faEyeSlash,
@@ -270,7 +266,7 @@ const Status = {
         case 'private':
           return 'lock'
         case 'unlisted':
-          return 'lock-open'
+          return 'unlock'
         case 'direct':
           return 'envelope'
         default:
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 51e7680c..c47f5631 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -1,4 +1,10 @@
 import { find } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const StatusPopover = {
   name: 'StatusPopover',
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 162eb210..f6432687 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,7 @@
         v-else
         class="status-preview-no-content"
       >
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="2x"/>
       </div>
     </div>
   </Popover>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 17680542..a443340f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -3,6 +3,12 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import { throttle, keyBy } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
   const ids = []
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..ab17cbbc 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,7 @@
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <i class="icon-spin3 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="lg"/>
       </div>
     </div>
   </div>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8e6b9d7f..3a8efafc 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -6,6 +6,22 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBell,
+  faRss,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faRss,
+  faBell,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+)
 
 export default {
   props: [
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 041bb80f..cfdeaa17 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,7 @@
               :user="user"
             />
             <div class="user-info-avatar-link-overlay">
-              <i class="button-icon icon-zoom-in" />
+              <FAIcon class="button-icon" icon="search-plus" size="lg" />
             </div>
           </a>
           <router-link
@@ -55,7 +55,7 @@
                 :href="user.statusnet_profile_url"
                 target="_blank"
               >
-                <i class="icon-link-ext usersettings" />
+                <FAIcon class="usersettings" icon="external-link-alt" />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -85,7 +85,9 @@
                   bot
                 </span>
               </template>
-              <span v-if="user.locked"><i class="icon icon-lock" /></span>
+              <span v-if="user.locked">
+               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+              </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
                 class="dailyAvg"
@@ -133,7 +135,7 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </div>
@@ -150,7 +152,7 @@
                 :click="subscribeUser"
                 :title="$t('user_card.subscribe')"
               >
-                <i class="icon-bell-alt" />
+                <FAIcon icon="bell" />
               </ProgressButton>
               <ProgressButton
                 v-else
@@ -158,7 +160,11 @@
                 :click="unsubscribeUser"
                 :title="$t('user_card.unsubscribe')"
               >
-                <i class="icon-bell-ringing-o" />
+                <FALayers>
+                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
+                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon icon="bell" />
+                </FALayers>
               </ProgressButton>
             </template>
           </div>
@@ -388,7 +394,7 @@
       opacity: 0;
       transition: opacity .2s ease;
 
-      i {
+      svg {
         color: #FFF;
       }
     }
@@ -447,6 +453,10 @@
     font-weight: light;
     font-size: 15px;
 
+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
     .user-screen-name {
       min-width: 1px;
       flex: 0 1 auto;
@@ -508,7 +518,7 @@
         padding-bottom: 0;
         flex: 1 0 auto;
       }
-      .userHighlightSel.select i {
+      .userHighlightSel.select svg {
         line-height: 22px;
       }
 
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index b60f2c4c..32ca2b8d 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -1,3 +1,9 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const UserListPopover = {
   name: 'UserListPopover',
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 185c73ca..dd6977d2 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div v-else>
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="3x"/>
       </div>
     </div>
   </Popover>
diff --git a/src/main.js b/src/main.js
index 42b6bcb2..90ee2887 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,7 +33,7 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -48,6 +48,7 @@ Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
 
 Vue.component('FAIcon', FontAwesomeIcon)
+Vue.component('FALayers', FontAwesomeLayers)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
-- 
cgit v1.2.3-70-g09d2


From e8650d3409aa34a0195629d2077bad68bcade439 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 21:03:46 +0300
Subject: chevrons-downs, settings

---
 src/components/chat/chat.js                        |  8 +++++++
 src/components/chat/chat.vue                       |  5 +++--
 src/components/contrast_ratio/contrast_ratio.vue   | 26 +++++++++++++++++-----
 src/components/font_control/font_control.js        |  8 +++++++
 src/components/font_control/font_control.vue       |  2 +-
 .../interface_language_switcher.vue                | 10 ++++++++-
 .../settings_modal/tabs/filtering_tab.js           |  8 +++++++
 .../settings_modal/tabs/filtering_tab.vue          |  2 +-
 src/components/settings_modal/tabs/general_tab.js  |  8 +++++++
 src/components/settings_modal/tabs/general_tab.vue |  4 ++--
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  8 +++++++
 .../settings_modal/tabs/theme_tab/theme_tab.vue    |  4 ++--
 src/components/shadow_control/shadow_control.js    | 14 ++++++++++++
 src/components/shadow_control/shadow_control.vue   | 10 ++++-----
 14 files changed, 97 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 34e723d0..1630ba80 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -7,6 +7,14 @@ import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 2e4538c8..0d44c920 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -58,14 +58,15 @@
               :class="{ 'visible': jumpToBottomButtonVisible }"
               @click="scrollDown({ behavior: 'smooth' })"
             >
-              <i class="icon-down-open">
+              <span>
+                <FAIcon icon="chevron-down" />
                 <div
                   v-if="newMessageCount"
                   class="badge badge-notification unread-chat-count unread-message-count"
                 >
                   {{ newMessageCount }}
                 </div>
-              </i>
+              </span>
             </div>
             <PostStatusForm
               :disable-subject="true"
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 9dc871b6..374cb9ba 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -8,13 +8,13 @@
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
     </span>
     <span
@@ -23,19 +23,32 @@
       :title="hint_18pt"
     >
       <span v-if="contrast.laaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
     </span>
   </span>
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+)
+
 export default {
   props: {
     large: {
@@ -85,6 +98,7 @@ export default {
   .rating {
     display: inline-block;
     text-align: center;
+    margin-left: 0.5em;
   }
 }
 </style>
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 8e2b0e45..6274780b 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,4 +1,12 @@
 import { set } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
   props: [
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 61f0384b..40aed190 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <FAIcon class="icon-down-open" icon="chevron-down" />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index dd6800a3..2a3d4cbb 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <FAIcon class="icon-down-open" icon="chevron-down" />
     </label>
   </div>
 </template>
@@ -28,6 +28,14 @@
 import languagesObject from '../../i18n/messages'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 3b2df556..5f38a5ae 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const FilteringTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index eea41514..786f3618 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down" />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0eb37e44..a39d7071 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const GeneralTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 13482de7..9fc1470e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </li>
@@ -127,7 +127,7 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index e3c5e80a..6cf75fe7 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import Preview from './preview.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 // List of color values used in v1
 const v1OnlyNames = [
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 5328c350..fb8b16ae 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <i class="icon-down-open" />
+                <FAIcon class="icon-down-open" icon="chevron-down" />
               </label>
             </div>
           </template>
@@ -907,7 +907,7 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <i class="icon-down-open" />
+                <FAIcon class="icon-down-open" icon="chevron-down" />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index f9e7b985..800c39d5 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -2,6 +2,20 @@ import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faChevronUp,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faChevronUp,
+  faTimes,
+  faPlus
+)
 
 const toModel = (object = {}) => ({
   x: 0,
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 815a9e59..1f63f3f2 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,35 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon icon="chevron-down" class="icon-down-open" />
         </label>
         <button
           class="btn btn-default"
           :disabled="!ready || !present"
           @click="del"
         >
-          <i class="icon-cancel" />
+          <FAIcon fixed-width icon="times" />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveUpValid"
           @click="moveUp"
         >
-          <i class="icon-up-open" />
+          <FAIcon fixed-width icon="chevron-up" />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveDnValid"
           @click="moveDn"
         >
-          <i class="icon-down-open" />
+          <FAIcon fixed-width icon="chevron-down" />
         </button>
         <button
           class="btn btn-default"
           :disabled="usingFallback"
           @click="add"
         >
-          <i class="icon-plus" />
+          <FAIcon fixed-width icon="plus" />
         </button>
       </div>
       <div
-- 
cgit v1.2.3-70-g09d2


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.js              |  8 ++++++++
 src/components/chat_message/chat_message.vue             |  2 +-
 src/components/chat_panel/chat_panel.js                  |  8 ++++++--
 src/components/chat_panel/chat_panel.vue                 |  2 +-
 src/components/global_notice_list/global_notice_list.js  |  8 ++++++++
 src/components/global_notice_list/global_notice_list.vue |  2 +-
 src/components/image_cropper/image_cropper.js            |  8 ++++++++
 src/components/image_cropper/image_cropper.vue           |  4 ++--
 src/components/login_form/login_form.js                  |  8 ++++++++
 src/components/login_form/login_form.vue                 |  2 +-
 src/components/mfa_form/recovery_form.js                 |  8 ++++++++
 src/components/mfa_form/recovery_form.vue                |  2 +-
 src/components/mfa_form/totp_form.js                     |  9 +++++++++
 src/components/mfa_form/totp_form.vue                    |  2 +-
 src/components/mobile_nav/mobile_nav.js                  |  8 ++++++++
 src/components/mobile_nav/mobile_nav.vue                 |  2 +-
 src/components/password_reset/password_reset.js          |  8 ++++++++
 src/components/password_reset/password_reset.vue         |  2 +-
 src/components/post_status_form/post_status_form.js      |  6 ++++--
 src/components/post_status_form/post_status_form.vue     | 10 +++++-----
 src/components/search_bar/search_bar.js                  |  9 +++++++++
 src/components/search_bar/search_bar.vue                 |  4 ++--
 src/components/settings_modal/tabs/profile_tab.js        |  8 ++++++++
 src/components/settings_modal/tabs/profile_tab.vue       | 12 ++++++------
 src/components/settings_modal/tabs/theme_tab/preview.vue | 13 ++++++++++++-
 25 files changed, 127 insertions(+), 28 deletions(-)

(limited to 'src/components')

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index be4a7c89..4ad993e3 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -7,6 +7,14 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import StatusContent from '../status_content/status_content.vue'
 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
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const ChatMessage = {
   name: 'ChatMessage',
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>
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index 3dfec6df..c3887098 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,9 +1,13 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBullhorn,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faBullhorn
+  faBullhorn,
+  faTimes
 )
 
 const chatPanel = {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index b64535b0..fc06f542 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -13,7 +13,7 @@
           <span>{{ $t('shoutbox.title') }}</span>
           <i
             v-if="floating"
-            class="icon-cancel"
+            icon="times"
           />
         </div>
       </div>
diff --git a/src/components/global_notice_list/global_notice_list.js b/src/components/global_notice_list/global_notice_list.js
index 3af29c23..e93fba75 100644
--- a/src/components/global_notice_list/global_notice_list.js
+++ b/src/components/global_notice_list/global_notice_list.js
@@ -1,3 +1,11 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const GlobalNoticeList = {
   computed: {
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 0e4285cc..2965cd0d 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,7 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <i
-        class="button-icon icon-cancel"
+        class="button-icon" icon="times"
         @click="closeNotice(notice)"
       />
     </div>
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 01361e25..9027b6eb 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -1,5 +1,13 @@
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const ImageCropper = {
   props: {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 4e1b5927..389b06b9 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -41,8 +41,8 @@
         class="alert error"
       >
         {{ submitErrorMsg }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 0d8f1da6..638bd812 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -1,5 +1,13 @@
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import oauthApi from '../../services/new_api/oauth.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const LoginForm = {
   data: () => ({
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index b4fdcefb..34f49576 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,7 @@
       <div class="alert error">
         {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index b25c65dd..01a62a50 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -1,5 +1,13 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 export default {
   data: () => ({
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 57294630..8e98054e 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,7 @@
       <div class="alert error">
         {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index b774f2d0..6ee823ed 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -1,5 +1,14 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+
 export default {
   data: () => ({
     code: null,
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index a344b395..bad2286f 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -57,7 +57,7 @@
       <div class="alert error">
         {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index b2b5d264..bd32b266 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -3,6 +3,14 @@ import Notifications from '../notifications/notifications.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const MobileNav = {
   components: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index abd95f09..e5664dc5 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -59,7 +59,7 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <i class="button-icon icon-cancel" />
+          <FAIcon class="button-icon" icon="times" />
         </a>
       </div>
       <div
diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
index 5d21d720..3d94f5e7 100644
--- a/src/components/password_reset/password_reset.js
+++ b/src/components/password_reset/password_reset.js
@@ -1,5 +1,13 @@
 import { mapState } from 'vuex'
 import passwordResetApi from '../../services/new_api/password_reset.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const passwordReset = {
   data: () => ({
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 713c9dce..8e8225ed 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -66,7 +66,7 @@
               class="button-icon dismiss"
               @click.prevent="dismissError()"
             >
-              <i class="icon-cancel" />
+              <FAIcon icon="times" />
             </a>
           </p>
         </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1267225d..e763baa8 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -18,7 +18,8 @@ import {
   faSmileBeam,
   faPollH,
   faUpload,
-  faBan
+  faBan,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -26,7 +27,8 @@ library.add(
   faSmileBeam,
   faPollH,
   faUpload,
-  faBan
+  faBan,
+  faTimes
 )
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9a5be689..7f7ac72f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -40,7 +40,7 @@
             class="button-icon dismiss"
             @click.prevent="dismissScopeNotice()"
           >
-            <i class="icon-cancel" />
+            <FAIcon icon="times" />
           </a>
         </p>
         <p
@@ -52,7 +52,7 @@
             class="button-icon dismiss"
             @click.prevent="dismissScopeNotice()"
           >
-            <i class="icon-cancel" />
+            <FAIcon icon="times" />
           </a>
         </p>
         <p
@@ -64,7 +64,7 @@
             class="button-icon dismiss"
             @click.prevent="dismissScopeNotice()"
           >
-            <i class="icon-cancel" />
+            <FAIcon icon="times" />
           </a>
         </p>
         <p
@@ -285,7 +285,7 @@
       >
         Error: {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
@@ -296,7 +296,7 @@
           class="media-upload-wrapper"
         >
           <i
-            class="fa button-icon icon-cancel"
+            class="button-icon" icon="times"
             @click="removeMediaFile(file)"
           />
           <attachment
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index d7d85676..3699e262 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -1,3 +1,12 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+
 const SearchBar = {
   data: () => ({
     searchTerm: undefined,
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 4d5a1aec..6a08ebe5 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -29,8 +29,8 @@
         >
           <i class="icon-search" />
         </button>
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="button-icon" icon="times"
           @click.prevent.stop="toggleHidden"
         />
       </template>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index bd6bef6a..37e829bb 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -8,6 +8,14 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 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
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const ProfileTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index cf88c4e4..df54551c 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -129,7 +129,7 @@
           >
             <i
               v-show="newFields.length > 1"
-              class="icon-cancel"
+              icon="times"
               @click="deleteField(i)"
             />
           </div>
@@ -169,7 +169,7 @@
         <i
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          class="reset-button icon-cancel"
+          class="reset-button" icon="times"
           type="button"
           @click="resetAvatar"
         />
@@ -197,7 +197,7 @@
         <i
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
-          class="reset-button icon-cancel"
+          class="reset-button" icon="times"
           type="button"
           @click="resetBanner"
         />
@@ -231,7 +231,7 @@
       >
         Error: {{ bannerUploadError }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearUploadError('banner')"
         />
       </div>
@@ -243,7 +243,7 @@
         <i
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
-          class="reset-button icon-cancel"
+          class="reset-button" icon="times"
           type="button"
           @click="resetBackground"
         />
@@ -277,7 +277,7 @@
       >
         Error: {{ backgroundUploadError }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearUploadError('background')"
         />
       </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 9d984659..c8cb2665 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -53,7 +53,7 @@
               />
               <i
                 style="color: var(--cRed)"
-                class="button-icon icon-cancel"
+                class="button-icon" icon="times"
               />
             </div>
           </div>
@@ -103,6 +103,17 @@
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+</script>
+
 <style lang="scss">
 .preview-container {
   position: relative;
-- 
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')

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 3cbaa0044943341fa4af4e4eb880649fc7eecda4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 22:54:43 +0300
Subject: more replacements + small renames

---
 src/App.scss                                       |  6 ++--
 src/App.vue                                        | 26 ++++++++------
 src/components/font_control/font_control.vue       |  2 +-
 .../interface_language_switcher.vue                |  2 +-
 src/components/poll/poll_form.vue                  |  4 +--
 .../post_status_form/post_status_form.vue          |  2 +-
 src/components/search_bar/search_bar.js            |  3 +-
 src/components/search_bar/search_bar.vue           | 41 ++++++++++++----------
 .../settings_modal/settings_modal_content.js       | 23 ++++++++++++
 .../settings_modal/settings_modal_content.vue      |  8 ++---
 .../settings_modal/tabs/filtering_tab.vue          |  2 +-
 src/components/settings_modal/tabs/general_tab.vue |  4 +--
 .../settings_modal/tabs/theme_tab/preview.vue      | 28 ++++++++++-----
 .../settings_modal/tabs/theme_tab/theme_tab.vue    |  4 +--
 src/components/shadow_control/shadow_control.vue   |  2 +-
 src/components/tab_switcher/tab_switcher.js        |  3 +-
 src/components/tab_switcher/tab_switcher.scss      |  3 +-
 src/components/user_card/user_card.vue             |  2 +-
 18 files changed, 106 insertions(+), 59 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 126a3297..06915e16 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -188,7 +188,7 @@ input, textarea, .select, .input {
     opacity: 0.5;
   }
 
-  .icon-down-open {
+  .select-down-icon {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -368,7 +368,9 @@ i[class*=icon-], .svg-inline--fa  {
   flex-wrap: wrap;
 
   .nav-icon {
-    margin-left: 0.4em;
+    margin-left: 0.2em;
+    width: 2em;
+    text-align: center;
   }
 
   &.right {
diff --git a/src/App.vue b/src/App.vue
index 0276c6a6..5efaf717 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,36 +42,42 @@
         <div class="item right">
           <search-bar
             v-if="currentUser || !privateMode"
-            class="nav-icon mobile-hidden"
+            class="mobile-hidden"
             @toggled="onSearchBarToggled"
             @click.stop.native
           />
           <a
             href="#"
-            class="mobile-hidden"
+            class="mobile-hidden nav-icon"
             @click.stop="openSettingsModal"
           >
-            <i
-              class="button-icon icon-cog nav-icon"
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon" icon="cog"
               :title="$t('nav.preferences')"
             />
           </a>
           <a
             v-if="currentUser && currentUser.role === 'admin'"
             href="/pleroma/admin/#/login-pleroma"
-            class="mobile-hidden"
+            class="mobile-hidden nav-icon"
             target="_blank"
-          ><i
-            class="button-icon icon-gauge nav-icon"
+          ><FAIcon
+             fixed-width
+              size="lg"
+             class="button-icon" icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
           <a
             v-if="currentUser"
             href="#"
-            class="mobile-hidden"
+            class="mobile-hidden nav-icon"
             @click.prevent="logout"
-          ><i
-            class="button-icon icon-logout nav-icon"
+          ><FAIcon
+             fixed-width
+              size="lg"
+             class="button-icon" icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
         </div>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 40aed190..6070ab22 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <FAIcon class="icon-down-open" icon="chevron-down" />
+      <FAIcon class="select-down-icon" icon="chevron-down" />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 2a3d4cbb..76bdcdfe 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <FAIcon class="icon-down-open" icon="chevron-down" />
+      <FAIcon class="select-down-icon" icon="chevron-down" />
     </label>
   </div>
 </template>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 3a8a2f42..8c4ada89 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -56,7 +56,7 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <FAIcon class="icon-down-open" icon="chevron-down"/>
+          <FAIcon class="select-down-icon" icon="chevron-down"/>
         </label>
       </div>
       <div
@@ -84,7 +84,7 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <FAIcon class="icon-down-open" icon="chevron-down"/>
+          <FAIcon class="select-down-icon" icon="chevron-down"/>
         </label>
       </div>
     </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7f7ac72f..817b2fa0 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -199,7 +199,7 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down"/>
+              <FAIcon class="select-down-icon" icon="chevron-down"/>
             </label>
           </div>
           <div
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 7ae8b21b..551649c7 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -13,8 +13,7 @@ const SearchBar = {
   data: () => ({
     searchTerm: undefined,
     hidden: true,
-    error: false,
-    loading: false
+    error: false
   }),
   watch: {
     '$route': function (route) {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index ecc0febf..fbbbbfe0 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
     <div class="search-bar-container">
-      <i
-        v-if="loading"
-        class="icon-spin4 finder-icon animate-spin-slow"
-      />
       <a
         v-if="hidden"
         href="#"
+        class="nav-icon"
         :title="$t('nav.search')"
-      ><i
-        class="button-icon icon-search"
-        @click.prevent.stop="toggleHidden"
+      ><FAIcon
+         fixed-width
+         size="lg"
+         class="button-icon"
+         icon="search"
+         @click.prevent.stop="toggleHidden"
       /></a>
       <template v-else>
         <input
@@ -27,12 +27,20 @@
           class="btn search-button"
           @click="find(searchTerm)"
         >
-          <FAIcon icon="search" />
+          <FAIcon
+            fixed-width
+            icon="search"
+            />
         </button>
-        <FAIcon
-          class="button-icon" icon="times"
-          @click.prevent.stop="toggleHidden"
-        />
+        <span>
+          <FAIcon
+            size="lg"
+            fixed-width
+            icon="times"
+            class="cancel-icon"
+            @click.prevent.stop="toggleHidden"
+          />
+        </span>
       </template>
     </div>
   </div>
@@ -60,13 +68,10 @@
     max-width: calc(100% - 30px - 30px - 20px);
   }
 
-  .search-button {
-    margin-left: .5em;
-    margin-right: .5em;
-  }
-
-  .icon-cancel {
+  .cancel-icon {
     cursor: pointer;
+    color: $fallback--text;
+    color: var(--btnTopBarText, $fallback--text);
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index ef1a5ffa..9dcf1b5a 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
 const SettingsModalContent = {
   components: {
     TabSwitcher,
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index bc30a0ff..c9ed2a38 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -37,7 +37,7 @@
     </div>
     <div
       :label="$t('settings.theme')"
-      icon="brush"
+      icon="paint-brush"
       data-tab-name="theme"
     >
       <ThemeTab />
@@ -45,7 +45,7 @@
     <div
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
-      icon="bell-ringing-o"
+      icon="bell"
       data-tab-name="notifications"
     >
       <NotificationsTab />
@@ -62,14 +62,14 @@
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
       :fullHeight="true"
-      icon="eye-off"
+      icon="eye-slash"
       data-tab-name="mutesAndBlocks"
     >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.version.title')"
-      icon="info-circled"
+      icon="info"
       data-tab-name="version"
     >
       <VersionTab />
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 786f3618..ff1a129b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <FAIcon class="icon-down-open" icon="chevron-down" />
+          <FAIcon class="select-down-icon" icon="chevron-down" />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2ab6b314..99d3a0dc 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down" />
+              <FAIcon class="select-down-icon" icon="chevron-down" />
             </label>
           </div>
         </li>
@@ -127,7 +127,7 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down" />
+              <FAIcon class="select-down-icon" icon="chevron-down" />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index c8cb2665..65863c54 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -39,19 +39,23 @@
             </i18n>
 
             <div class="icons">
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon icon-reply"
+                class="button-icon" icon="reply"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon icon-retweet"
+                class="button-icon" icon="retweet"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon icon-star"
+                class="button-icon" icon="star"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cRed)"
                 class="button-icon" icon="times"
               />
@@ -106,11 +110,17 @@
 <script>
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
 )
 </script>
 
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 fb8b16ae..9cc1c392 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <FAIcon class="icon-down-open" icon="chevron-down" />
+                <FAIcon class="select-down-icon" icon="chevron-down" />
               </label>
             </div>
           </template>
@@ -907,7 +907,7 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <FAIcon class="icon-down-open" icon="chevron-down" />
+                <FAIcon class="select-down-icon" icon="chevron-down" />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 1f63f3f2..32220ae8 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,7 +78,7 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <FAIcon icon="chevron-down" class="icon-down-open" />
+          <FAIcon icon="chevron-down" class="select-down-icon" />
         </label>
         <button
           class="btn btn-default"
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 9c1da354..6e6e8193 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapState } from 'vuex'
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './tab_switcher.scss'
 
@@ -107,7 +108,7 @@ export default Vue.component('tab-switcher', {
               class={classesTab.join(' ')}
               type="button"
             >
-              {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
+              {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)}
               <span class="text">
                 {slot.data.attrs.label}
               </span>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d2ef4857..cd8fff6f 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -4,7 +4,8 @@
   display: flex;
 
   .tab-icon {
-    font-size: 2em;
+    width: 100%;
+    margin: 0.2em 0;
     display: block;
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4f7df789..6c35c781 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -136,7 +136,7 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down" />
+              <FAIcon class="select-down-icon" icon="chevron-down" />
             </label>
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2


From a50cd7e37dce6e95f2c3d6cc63c382af71a2926e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:01:28 +0300
Subject: remaining changes...

---
 src/components/attachment/attachment.js            | 22 +++++++++--
 src/components/attachment/attachment.vue           | 14 ++++---
 src/components/chat_panel/chat_panel.vue           |  7 ++--
 .../global_notice_list/global_notice_list.vue      |  2 +-
 src/components/image_cropper/image_cropper.js      |  6 ++-
 src/components/image_cropper/image_cropper.vue     |  5 ++-
 src/components/importer/importer.js                | 11 ++++++
 src/components/importer/importer.vue               | 14 ++++---
 src/components/login_form/login_form.vue           |  2 +-
 src/components/mfa_form/recovery_form.vue          |  2 +-
 src/components/mfa_form/totp_form.vue              |  6 ++-
 src/components/password_reset/password_reset.vue   |  2 +-
 src/components/poll/poll_form.vue                  |  9 +++++
 .../post_status_form/post_status_form.js           |  6 ++-
 .../post_status_form/post_status_form.vue          | 46 +++++++---------------
 src/components/settings_modal/tabs/profile_tab.js  |  6 ++-
 .../settings_modal/tabs/profile_tab.scss           |  6 +--
 src/components/settings_modal/tabs/profile_tab.vue | 28 +++++++------
 src/components/status/status.scss                  |  5 ---
 src/components/status_content/status_content.js    | 18 +++++++++
 src/components/status_content/status_content.vue   | 28 +++++++------
 src/components/user_profile/user_profile.js        |  8 ++++
 src/components/user_profile/user_profile.vue       |  6 ++-
 23 files changed, 162 insertions(+), 97 deletions(-)

(limited to 'src/components')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index cb31020d..e23fcb1b 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -3,6 +3,20 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFile,
+  faMusic,
+  faImage,
+  faVideo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFile,
+  faMusic,
+  faImage,
+  faVideo
+)
 
 const Attachment = {
   props: [
@@ -39,10 +53,10 @@ const Attachment = {
       return this.attachment.description
     },
     placeholderIconClass () {
-      if (this.type === 'image') return 'icon-picture'
-      if (this.type === 'video') return 'icon-video'
-      if (this.type === 'audio') return 'icon-music'
-      return 'icon-doc'
+      if (this.type === 'image') return 'image'
+      if (this.type === 'video') return 'video'
+      if (this.type === 'audio') return 'music'
+      return 'file'
     },
     referrerpolicy () {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 19c713d5..0b7a3f9c 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,7 +12,7 @@
       :alt="attachment.description"
       :title="attachment.description"
     >
-      <span :class="placeholderIconClass" />
+      <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </div>
@@ -36,9 +36,9 @@
         :src="nsfwImage"
         :class="{'small': isSmall}"
       >
-      <i
+      <FAIcon
         v-if="type === 'video'"
-        class="play-icon icon-play-circled"
+        class="play-icon" icon="play-circle"
       />
     </a>
     <div
@@ -83,9 +83,9 @@
         @play="$emit('play')"
         @pause="$emit('pause')"
       />
-      <i
+      <FAIcon
         v-if="!allowPlay"
-        class="play-icon icon-play-circled"
+        class="play-icon" icon="play-circle"
       />
     </a>
 
@@ -142,6 +142,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
   }
 
   .nsfw-placeholder {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index fc06f542..51b99563 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -11,7 +11,7 @@
       >
         <div class="title">
           <span>{{ $t('shoutbox.title') }}</span>
-          <i
+          <FAIcon
             v-if="floating"
             icon="times"
           />
@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <FAIcon icon="bullhorn" />
+          <FAIcon class="icon" icon="bullhorn" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
@@ -87,7 +87,8 @@
 .chat-panel {
   .chat-heading {
     cursor: pointer;
-    .icon-comment-empty {
+
+    .icon {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 2965cd0d..3a7139f4 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -9,7 +9,7 @@
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
-      <i
+      <FAIcon
         class="button-icon" icon="times"
         @click="closeNotice(notice)"
       />
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 9027b6eb..59e4d07e 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -2,11 +2,13 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faCircleNotch
 )
 
 const ImageCropper = {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 389b06b9..e69cbd0b 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -31,9 +31,10 @@
           @click="submit(false)"
           v-text="saveWithoutCroppingText"
         />
-        <i
+        <FAIcon
           v-if="submitting"
-          class="icon-spin4 animate-spin"
+          spin
+          icon="circle-notch"
         />
       </div>
       <div
diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js
index c5f9e4d2..59f9beb1 100644
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@@ -1,3 +1,14 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch,
+  faTimes
+)
+
 const Importer = {
   props: {
     submitHandler: {
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index ed923d59..c4fe5b00 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -7,9 +7,11 @@
         @change="change"
       >
     </form>
-    <i
+    <FAIcon
       v-if="submitting"
-      class="icon-spin4 animate-spin importer-uploading"
+      class="importer-uploading"
+      spin
+      icon="circle-notch"
     />
     <button
       v-else
@@ -19,15 +21,15 @@
       {{ submitButtonLabel }}
     </button>
     <div v-if="success">
-      <i
-        class="icon-cross"
+      <FAIcon
+        icon="times"
         @click="dismiss"
       />
       <p>{{ successMessage }}</p>
     </div>
     <div v-else-if="error">
-      <i
-        class="icon-cross"
+      <FAIcon
+        icon="times"
         @click="dismiss"
       />
       <p>{{ errorMessage }}</p>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 34f49576..f6b767a2 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -76,7 +76,7 @@
     >
       <div class="alert error">
         {{ error }}
-        <i
+        <FAIcon
           class="button-icon" icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 8e98054e..61dbda24 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -54,7 +54,7 @@
     >
       <div class="alert error">
         {{ error }}
-        <i
+        <FAIcon
           class="button-icon" icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index bad2286f..0c6412ea 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -56,8 +56,10 @@
     >
       <div class="alert error">
         {{ error }}
-        <i
-          class="button-icon" icon="times"
+        <FAIcon
+          size="lg"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 8e8225ed..3fe42b84 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -122,7 +122,7 @@
     padding-right: 2rem;
   }
 
-  .icon-cancel {
+  .dismiss {
     cursor: pointer;
   }
 }
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 8c4ada89..f3e7a716 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -26,6 +26,7 @@
       >
         <FAIcon
           icon="times"
+          class="delete"
           @click="deleteOption(index)"
         />
       </div>
@@ -129,6 +130,14 @@
     width: 1.5em;
     margin-left: -1.5em;
     z-index: 1;
+
+    .delete {
+      cursor: pointer;
+
+      &:hover {
+        color: inherit;
+      }
+    }
   }
 
   .poll-type-expiry {
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e763baa8..1bdf9833 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -19,7 +19,8 @@ import {
   faPollH,
   faUpload,
   faBan,
-  faTimes
+  faTimes,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -28,7 +29,8 @@ library.add(
   faPollH,
   faUpload,
   faBan,
-  faTimes
+  faTimes,
+  faCircleNotch
 )
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 817b2fa0..428b8560 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -85,9 +85,10 @@
             {{ $t('post_status.preview') }}
             <i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
           </a>
-          <i
+          <FAIcon
             v-show="previewLoading"
-            class="icon-spin3 animate-spin"
+            spin
+            icon="circle-notch"
           />
         </div>
         <div
@@ -284,8 +285,10 @@
         class="alert error"
       >
         Error: {{ error }}
-        <i
-          class="button-icon" icon="times"
+        <FAIcon
+          class="button-icon"
+          size="lg"
+          icon="times"
           @click="clearError"
         />
       </div>
@@ -295,7 +298,7 @@
           :key="file.url"
           class="media-upload-wrapper"
         >
-          <i
+          <FAIcon
             class="button-icon" icon="times"
             @click="removeMediaFile(file)"
           />
@@ -379,10 +382,6 @@
     padding-left: 0.5em;
     display: flex;
     width: 100%;
-
-    .icon-spin3 {
-      margin-left: auto;
-    }
   }
 
   .preview-toggle {
@@ -477,7 +476,7 @@
     text-align: right;
   }
 
-  .icon-chart-bar {
+  .poll-icon {
     cursor: pointer;
   }
 
@@ -490,19 +489,6 @@
     margin-bottom: .5em;
     width: 18em;
 
-    .icon-cancel {
-      display: inline-block;
-      position: static;
-      margin: 0;
-      padding-bottom: 0;
-      margin-left: $fallback--attachmentRadius;
-      margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
     img, video {
       object-fit: contain;
       max-height: 10em;
@@ -525,7 +511,7 @@
     flex-direction: column;
   }
 
-  .media-upload-wrapper .attachments {
+   .attachments .media-upload-wrapper{
     padding: 0 0.5em;
 
     .attachment {
@@ -534,11 +520,14 @@
       position: relative;
     }
 
-    i {
+    .button-icon {
       position: absolute;
       margin: 10px;
-      padding: 5px;
+      margin: .75em;
+      padding: .5em;
       background: rgba(230,230,230,0.6);
+      z-index: 2;
+      color: black;
       border-radius: $fallback--attachmentRadius;
       border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
       font-weight: bold;
@@ -615,11 +604,6 @@
     cursor: not-allowed;
   }
 
-  .icon-cancel {
-    cursor: pointer;
-    z-index: 4;
-  }
-
   @keyframes fade-in {
     from { opacity: 0; }
     to   { opacity: 0.6; }
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 22037218..a3e4feaf 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -11,12 +11,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
-  faPlus
+  faPlus,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
-  faPlus
+  faPlus,
+  faCircleNotch
 )
 
 const ProfileTab = {
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index e14cf054..e821f952 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -119,10 +119,8 @@
 
     &>.icon-container {
       width: 20px;
-
-      &>.icon-cancel {
-        vertical-align: sub;
-      }
+      align-self: center;
+      margin: 0 .2em .5em;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 7013b65d..773c77de 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -127,7 +127,7 @@
           <div
             class="icon-container"
           >
-            <i
+            <FAIcon
               v-show="newFields.length > 1"
               icon="times"
               @click="deleteField(i)"
@@ -166,7 +166,7 @@
           :src="user.profile_image_url_original"
           class="current-avatar"
         >
-        <i
+        <FAIcon
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
           class="reset-button" icon="times"
@@ -194,7 +194,7 @@
       <h2>{{ $t('settings.profile_banner') }}</h2>
       <div class="banner-background-preview">
         <img :src="user.cover_photo">
-        <i
+        <FAIcon
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
           class="reset-button" icon="times"
@@ -214,9 +214,11 @@
           @change="uploadFile('banner', $event)"
         >
       </div>
-      <i
+      <FAIcon
         v-if="bannerUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
       />
       <button
         v-else-if="bannerPreview"
@@ -230,7 +232,7 @@
         class="alert error"
       >
         Error: {{ bannerUploadError }}
-        <i
+        <FAIcon
           class="button-icon" icon="times"
           @click="clearUploadError('banner')"
         />
@@ -240,7 +242,7 @@
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
         <img :src="user.background_image">
-        <i
+        <FAIcon
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
           class="reset-button" icon="times"
@@ -260,9 +262,11 @@
           @change="uploadFile('background', $event)"
         >
       </div>
-      <i
+      <FAIcon
         v-if="backgroundUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
       />
       <button
         v-else-if="backgroundPreview"
@@ -276,8 +280,10 @@
         class="alert error"
       >
         Error: {{ backgroundUploadError }}
-        <i
-          class="button-icon" icon="times"
+        <FAIcon
+          size="lg"
+          class="button-icon"
+          icon="times"
           @click="clearUploadError('background')"
         />
       </div>
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index cd5366ed..ea9e538d 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -156,11 +156,6 @@ $status-margin: 0.75em;
       text-overflow: ellipsis;
       overflow-x: hidden;
     }
-
-    .icon-reply {
-      // mirror the icon
-      transform: scaleX(-1);
-    }
   }
 
   & .reply-to-popover,
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index df095de3..a6f79d76 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -7,6 +7,24 @@ import fileType from 'src/services/file_type/file_type.service'
 import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { mapGetters, mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch,
+  faFile,
+  faMusic,
+  faImage,
+  faLink,
+  faPollH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch,
+  faFile,
+  faMusic,
+  faImage,
+  faLink,
+  faPollH
+)
 
 const StatusContent = {
   name: 'StatusContent',
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index f7fb5ee2..321cd477 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -55,29 +55,29 @@
         @click.prevent="toggleShowMore"
       >
         {{ $t("status.show_content") }}
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('image')"
-          class="icon-picture"
+          icon="image"
         />
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('video')"
-          class="icon-video"
+          icon="video"
         />
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('audio')"
-          class="icon-music"
+          icon="music"
         />
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('unknown')"
-          class="icon-doc"
+          icon="file"
         />
-        <span
+        <FAIcon
           v-if="status.poll && status.poll.options"
-          class="icon-chart-bar"
+          icon="poll-h"
         />
-        <span
+        <FAIcon
           v-if="status.card"
-          class="icon-link"
+          icon="link"
         />
       </a>
       <a
@@ -182,6 +182,10 @@ $status-margin: 0.75em;
     text-align: center;
     display: inline-block;
     word-break: break-all;
+
+    svg {
+      color: inherit;
+    }
   }
 
   img, video {
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 201727d4..c0b55a6c 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -6,6 +6,14 @@ import Conversation from '../conversation/conversation.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const FollowerList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b26499b4..f1f51840 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -122,9 +122,10 @@
       </div>
       <div class="panel-body">
         <span v-if="error">{{ error }}</span>
-        <i
+        <FAIcon
           v-else
-          class="icon-spin3 animate-spin"
+          spin
+          icon="circle-notch"
         />
       </div>
     </div>
@@ -142,6 +143,7 @@
 
   .user-profile-fields {
     margin: 0 0.5em;
+
     img {
       object-fit: contain;
       vertical-align: middle;
-- 
cgit v1.2.3-70-g09d2


From 7495c6b698e0afe169c1138baabc29f70d4b44a2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:02:58 +0300
Subject: fix attachment remove pointer

---
 src/components/post_status_form/post_status_form.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 428b8560..3cd9e7a5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -511,7 +511,7 @@
     flex-direction: column;
   }
 
-   .attachments .media-upload-wrapper{
+   .attachments .media-upload-wrapper {
     padding: 0 0.5em;
 
     .attachment {
@@ -531,6 +531,7 @@
       border-radius: $fallback--attachmentRadius;
       border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
       font-weight: bold;
+      cursor: pointer;
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 6aa7445ea7f8f76adbc31d018ebb3228294aef41 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:25:59 +0300
Subject: come on and slam

---
 src/components/nav_panel/nav_panel.js            | 4 ++--
 src/components/scope_selector/scope_selector.js  | 4 ++--
 src/components/scope_selector/scope_selector.vue | 2 +-
 src/components/status/status.js                  | 6 +++---
 src/components/timeline_menu/timeline_menu.js    | 4 ++--
 src/components/timeline_menu/timeline_menu.vue   | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 87e54133..81d49cc2 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -4,7 +4,7 @@ import { mapState, mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
@@ -15,7 +15,7 @@ import {
 
 library.add(
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index ddb20ff2..2c9d06e0 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -3,12 +3,12 @@ import {
   faEnvelope,
   faLock,
   faUnlock,
-  faGlobeEurope
+  faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faEnvelope,
-  faGlobeEurope,
+  faGlobe,
   faLock,
   faUnlock
 )
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index ddd89422..c098783d 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -37,7 +37,7 @@
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
       >
-      <FAIcon icon="globe-europe" class="button-icon" size="lg" />
+      <FAIcon icon="globe" class="button-icon" size="lg" />
     </span>
   </div>
 </template>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5b93054f..46fa3b76 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -22,7 +22,7 @@ import {
   faEnvelope,
   faLock,
   faUnlock,
-  faGlobeEurope,
+  faGlobe,
   faTimes,
   faRetweet,
   faReply,
@@ -38,7 +38,7 @@ import {
 
 library.add(
   faEnvelope,
-  faGlobeEurope,
+  faGlobe,
   faLock,
   faUnlock,
   faTimes,
@@ -270,7 +270,7 @@ const Status = {
         case 'direct':
           return 'envelope'
         default:
-          return 'globe-europe'
+          return 'globe'
       }
     },
     showError (error) {
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 991c600d..4ccd52b4 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -3,7 +3,7 @@ import { mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
@@ -12,7 +12,7 @@ import {
 
 library.add(
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 590752d3..1e546fae 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -36,7 +36,7 @@
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="globe-europe" />{{ $t("nav.twkn") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="globe" />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
-- 
cgit v1.2.3-70-g09d2


From 1ec41302f729ac9100c3ec0cede5e4f79dd626a3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:28:24 +0300
Subject: rotate the shackle of the lock for better accessibility

---
 src/components/scope_selector/scope_selector.js  | 4 ++--
 src/components/scope_selector/scope_selector.vue | 2 +-
 src/components/status/status.js                  | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 2c9d06e0..74bf7284 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faUnlock,
+  faLockOpen,
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -10,7 +10,7 @@ library.add(
   faEnvelope,
   faGlobe,
   faLock,
-  faUnlock
+  faLockOpen
 )
 
 const ScopeSelector = {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index c098783d..d490f8ee 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -28,7 +28,7 @@
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
       >
-      <FAIcon icon="unlock" class="button-icon" size="lg" />
+      <FAIcon icon="lock-open" class="button-icon" size="lg" />
     </span>
     <span
       v-if="showPublic"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 46fa3b76..142e1fc6 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faUnlock,
+  faLockOpen,
   faGlobe,
   faTimes,
   faRetweet,
@@ -40,7 +40,7 @@ library.add(
   faEnvelope,
   faGlobe,
   faLock,
-  faUnlock,
+  faLockOpen,
   faTimes,
   faRetweet,
   faReply,
@@ -266,7 +266,7 @@ const Status = {
         case 'private':
           return 'lock'
         case 'unlisted':
-          return 'unlock'
+          return 'lock-open'
         case 'direct':
           return 'envelope'
         default:
-- 
cgit v1.2.3-70-g09d2


From f561e755530063b2e8e0db210264b1d244543bd0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:31:16 +0300
Subject: lint

---
 src/App.vue                                        | 17 +++--
 src/components/account_actions/account_actions.vue |  5 +-
 src/components/attachment/attachment.vue           |  6 +-
 src/components/chat/chat.vue                       |  5 +-
 src/components/chat_new/chat_new.vue               | 11 ++-
 src/components/chat_panel/chat_panel.vue           |  5 +-
 src/components/emoji_picker/emoji_picker.vue       | 10 ++-
 src/components/exporter/exporter.vue               |  6 +-
 src/components/extra_buttons/extra_buttons.js      |  2 +-
 src/components/extra_buttons/extra_buttons.vue     | 48 ++++++++++---
 src/components/font_control/font_control.vue       |  5 +-
 .../global_notice_list/global_notice_list.vue      |  3 +-
 src/components/image_cropper/image_cropper.vue     |  3 +-
 .../interface_language_switcher.vue                |  5 +-
 src/components/login_form/login_form.vue           |  3 +-
 src/components/media_modal/media_modal.vue         | 10 ++-
 src/components/mfa_form/recovery_form.vue          |  3 +-
 src/components/mobile_nav/mobile_nav.vue           | 18 ++++-
 src/components/nav_panel/nav_panel.vue             | 35 +++++++--
 src/components/notification/notification.vue       | 33 +++++++--
 src/components/notifications/notifications.vue     |  6 +-
 src/components/panel_loading/panel_loading.vue     |  6 +-
 src/components/poll/poll_form.vue                  | 15 +++-
 .../post_status_form/post_status_form.vue          | 12 ++--
 src/components/retweet_button/retweet_button.vue   | 18 ++---
 src/components/scope_selector/scope_selector.vue   | 36 +++++++---
 src/components/search/search.vue                   |  6 +-
 src/components/search_bar/search_bar.vue           | 12 ++--
 .../settings_modal/tabs/filtering_tab.vue          |  5 +-
 src/components/settings_modal/tabs/general_tab.vue | 10 ++-
 src/components/settings_modal/tabs/profile_tab.vue | 12 ++--
 .../settings_modal/tabs/theme_tab/preview.vue      | 12 ++--
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 10 ++-
 src/components/shadow_control/shadow_control.vue   | 25 +++++--
 src/components/side_drawer/side_drawer.vue         | 84 ++++++++++++++++++----
 src/components/status/status.vue                   | 44 +++++++++---
 src/components/status_popover/status_popover.vue   |  6 +-
 src/components/timeline/timeline.vue               |  6 +-
 src/components/timeline_menu/timeline_menu.vue     | 40 +++++++++--
 src/components/user_card/user_card.vue             | 33 +++++++--
 .../user_list_popover/user_list_popover.vue        |  6 +-
 41 files changed, 497 insertions(+), 140 deletions(-)

(limited to 'src/components')

diff --git a/src/App.vue b/src/App.vue
index 5efaf717..c27f51bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,7 +54,8 @@
             <FAIcon
               fixed-width
               size="lg"
-              class="button-icon" icon="cog"
+              class="button-icon"
+              icon="cog"
               :title="$t('nav.preferences')"
             />
           </a>
@@ -64,9 +65,10 @@
             class="mobile-hidden nav-icon"
             target="_blank"
           ><FAIcon
-             fixed-width
-              size="lg"
-             class="button-icon" icon="tachometer-alt"
+            fixed-width
+            size="lg"
+            class="button-icon"
+            icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
           <a
@@ -75,9 +77,10 @@
             class="mobile-hidden nav-icon"
             @click.prevent="logout"
           ><FAIcon
-             fixed-width
-              size="lg"
-             class="button-icon" icon="sign-out-alt"
+            fixed-width
+            size="lg"
+            class="button-icon"
+            icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
         </div>
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 61099d4f..e3ae376e 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -63,7 +63,10 @@
         slot="trigger"
         class="btn btn-default ellipsis-button"
       >
-        <FAIcon class="icon" icon="ellipsis-v" />
+        <FAIcon
+          class="icon"
+          icon="ellipsis-v"
+        />
       </div>
     </Popover>
   </div>
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 0b7a3f9c..f1fac2c8 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,8 @@
       >
       <FAIcon
         v-if="type === 'video'"
-        class="play-icon" icon="play-circle"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
     <div
@@ -85,7 +86,8 @@
       />
       <FAIcon
         v-if="!allowPlay"
-        class="play-icon" icon="play-circle"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
 
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 0670f1ac..5f58b9a6 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -14,7 +14,10 @@
             class="go-back-button"
             @click="goBack"
           >
-            <FAIcon size="lg" icon="chevron-left" />
+            <FAIcon
+              size="lg"
+              icon="chevron-left"
+            />
           </a>
           <div class="title text-center">
             <ChatTitle
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 95eebe6b..8f02a699 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -11,12 +11,19 @@
         class="go-back-button"
         @click="goBack"
       >
-        <FAIcon size="lg" icon="chevron-left" />
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
       </a>
     </div>
     <div class="input-wrap">
       <div class="input-search">
-        <FAIcon size="lg" class="search-icon button-icon" icon="search" />
+        <FAIcon
+          size="lg"
+          class="search-icon button-icon"
+          icon="search"
+        />
       </div>
       <input
         ref="search"
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 51b99563..7993c94d 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,10 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <FAIcon class="icon" icon="bullhorn" />
+          <FAIcon
+            class="icon"
+            icon="bullhorn"
+          />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index bd093c99..3262a3d9 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,10 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <FAIcon :icon="group.icon" fixed-width/>
+          <FAIcon
+            :icon="group.icon"
+            fixed-width
+          />
         </span>
       </span>
       <span
@@ -26,7 +29,10 @@
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
         >
-          <FAIcon icon="sticky-note" fixed-width/>
+          <FAIcon
+            icon="sticky-note"
+            fixed-width
+          />
         </span>
       </span>
     </div>
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index 156db9a3..ecd71bf1 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="exporter">
     <div v-if="processing">
-      <FAIcon icon="circle-notch" size="lg" spin />
+      <FAIcon
+        icon="circle-notch"
+        size="lg"
+        spin
+      />
 
       <span>{{ processingMessage }}</span>
     </div>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index f325b2b4..1a8eef72 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -8,7 +8,7 @@ import {
   faShareAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg,
+  faBookmark as faBookmarkReg
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 1889eaed..4bf1e62a 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,22 @@
           class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
-          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
-          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -30,7 +38,11 @@
           @click.prevent="pinStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -38,7 +50,11 @@
           @click.prevent="unpinStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -46,7 +62,11 @@
           @click.prevent="bookmarkStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            :icon="['far', 'bookmark']"
+          /><span>{{ $t("status.bookmark") }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -54,7 +74,11 @@
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="bookmark"
+          /><span>{{ $t("status.unbookmark") }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -62,14 +86,22 @@
           @click.prevent="deleteStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="times"
+          /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="share-alt"
+          /><span>{{ $t("status.copy_link") }}</span>
         </button>
       </div>
     </div>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 6070ab22..dd117ec0 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,10 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <FAIcon class="select-down-icon" icon="chevron-down" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 3a7139f4..06b6af9c 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,8 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <FAIcon
-        class="button-icon" icon="times"
+        class="button-icon"
+        icon="times"
         @click="closeNotice(notice)"
       />
     </div>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index e69cbd0b..605f7427 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -43,7 +43,8 @@
       >
         {{ submitErrorMsg }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 76bdcdfe..d039e86b 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,10 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <FAIcon class="select-down-icon" icon="chevron-down" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
     </label>
   </div>
 </template>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index f6b767a2..4ab5d192 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,8 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index cbcfc6d2..ea7f7a7f 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -34,7 +34,10 @@
       class="modal-view-button-arrow modal-view-button-arrow--prev"
       @click.stop.prevent="goPrev"
     >
-      <FAIcon class="arrow-icon" icon="chevron-left" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-left"
+      />
     </button>
     <button
       v-if="canNavigate"
@@ -42,7 +45,10 @@
       class="modal-view-button-arrow modal-view-button-arrow--next"
       @click.stop.prevent="goNext"
     >
-      <FAIcon class="arrow-icon" icon="chevron-right" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-right"
+      />
     </button>
   </Modal>
 </template>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 61dbda24..f6526d2a 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,8 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 4d91af77..db9b0ba0 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -15,7 +15,11 @@
             class="mobile-nav-button"
             @click.stop.prevent="toggleMobileSidebar()"
           >
-            <FAIcon size="lg" class="button-icon" icon="bars" />
+            <FAIcon
+              size="lg"
+              class="button-icon"
+              icon="bars"
+            />
             <div
               v-if="unreadChatCount"
               class="alert-dot"
@@ -37,7 +41,11 @@
             href="#"
             @click.stop.prevent="openMobileNotifications()"
           >
-            <FAIcon size="lg" class="button-icon" icon="bell" />
+            <FAIcon
+              size="lg"
+              class="button-icon"
+              icon="bell"
+            />
             <div
               v-if="unseenNotificationsCount"
               class="alert-dot"
@@ -59,7 +67,11 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <FAIcon size="lg" class="button-icon" icon="times" />
+          <FAIcon
+            size="lg"
+            class="button-icon"
+            icon="times"
+          />
         </a>
       </div>
       <div
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index f3e131ff..4755d7b7 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,13 +7,23 @@
             :to="{ name: timelinesRoute }"
             :class="onTimelineRoute && 'router-link-active'"
           >
-            <FAIcon fixed-width size="lg" class="button-icon" icon="home" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="home"
+            />
             {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="bell" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="bell"
+            />
             {{ $t("nav.interactions") }}
           </router-link>
         </li>
@@ -25,13 +35,23 @@
             >
               {{ unreadChatCount }}
             </div>
-            <FAIcon fixed-width size="lg" class="button-icon" icon="comments" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="comments"
+            />
             {{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="user-plus" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="user-plus"
+            />
             {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
@@ -43,7 +63,12 @@
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="info-circle" />{{ $t("nav.about") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="info-circle"
+            />{{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 857727a4..b609ae04 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -18,7 +18,10 @@
         href="#"
         class="unmute"
         @click.prevent="toggleMute"
-      ><FAIcon class="button-icon" icon="eye-slash" /></a>
+      ><FAIcon
+        class="button-icon"
+        icon="eye-slash"
+      /></a>
     </div>
     <div
       v-else
@@ -60,26 +63,39 @@
               :title="'@'+notification.from_profile.screen_name"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
-              <FAIcon class="type-icon" icon="star" />
+              <FAIcon
+                class="type-icon"
+                icon="star"
+              />
               <small>{{ $t('notifications.favorited_you') }}</small>
             </span>
             <span v-if="notification.type === 'repeat'">
               <FAIcon
-                class="type-icon" icon="retweet"
+                class="type-icon"
+                icon="retweet"
                 :title="$t('tool_tip.repeat')"
               />
               <small>{{ $t('notifications.repeated_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow'">
-              <FAIcon class="type-icon" icon="user-plus" />
+              <FAIcon
+                class="type-icon"
+                icon="user-plus"
+              />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow_request'">
-              <FAIcon class="type-icon" icon="user" />
+              <FAIcon
+                class="type-icon"
+                icon="user"
+              />
               <small>{{ $t('notifications.follow_request') }}</small>
             </span>
             <span v-if="notification.type === 'move'">
-              <FAIcon class="type-icon" icon="suitcase-rolling" />
+              <FAIcon
+                class="type-icon"
+                icon="suitcase-rolling"
+              />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +136,10 @@
             v-if="needMute"
             href="#"
             @click.prevent="toggleMute"
-          ><FAIcon class="button-icon" icon="eye-slash" /></a>
+          ><FAIcon
+            class="button-icon"
+            icon="eye-slash"
+          /></a>
         </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 57972854..bd875cca 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,11 @@
           v-else
           class="new-status-notification text-center panel-footer"
         >
-          <FAIcon icon="circle-notch" spin size="lg"/>
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 9bf3ab32..b15e7d38 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <FAIcon icon="circle-notch" spin size="3x"/>
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="3x"
+      />
       {{ $t('general.loading') }}
     </span>
   </div>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f3e7a716..e598cf3b 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -36,7 +36,10 @@
       class="add-option faint"
       @click="addOption"
     >
-      <FAIcon icon="plus" size="sm"/>
+      <FAIcon
+        icon="plus"
+        size="sm"
+      />
 
       {{ $t("polls.add_option") }}
     </a>
@@ -57,7 +60,10 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down"/>
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div
@@ -85,7 +91,10 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down"/>
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
     </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 3cd9e7a5..9cf38a9a 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -15,7 +15,7 @@
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
       >
-        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'"/>
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
       </div>
       <div class="form-group">
         <i18n
@@ -200,7 +200,10 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down"/>
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
           <div
@@ -242,7 +245,7 @@
               class="btn btn-default"
               @click="showEmojiPicker"
             >
-              <FAIcon icon="smile-beam"/>
+              <FAIcon icon="smile-beam" />
             </div>
           </div>
           <div
@@ -299,7 +302,8 @@
           class="media-upload-wrapper"
         >
           <FAIcon
-            class="button-icon" icon="times"
+            class="button-icon"
+            icon="times"
             @click="removeMediaFile(file)"
           />
           <attachment
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 3e15f30b..706c6b81 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-    <FAIcon
-      :class="classes"
-      class="RetweetButton button-icon -interactive"
-      icon="retweet"
-      size="lg"
-      :spin="animated"
-      :title="$t('tool_tip.repeat')"
-      @click.prevent="retweet()"
-    />
+      <FAIcon
+        :class="classes"
+        class="RetweetButton button-icon -interactive"
+        icon="retweet"
+        size="lg"
+        :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>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d490f8ee..a43af23b 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -2,24 +2,32 @@
   <div
     v-if="!showNothing"
     class="ScopeSelector"
-    >
+  >
     <span
       v-if="showDirect"
       class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-      >
-      <FAIcon icon="envelope" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="envelope"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
-      class="scope"
       v-if="showPrivate"
+      class="scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-      >
-      <FAIcon icon="lock" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="lock"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
       v-if="showUnlisted"
@@ -27,8 +35,12 @@
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
-      >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="lock-open"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
       v-if="showPublic"
@@ -36,8 +48,12 @@
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-      >
-      <FAIcon icon="globe" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="globe"
+        class="button-icon"
+        size="lg"
+      />
     </span>
   </div>
 </template>
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index d32f48d9..665390f9 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,11 @@
       v-if="loading"
       class="text-center loading-icon"
     >
-      <FAIcon icon="circle-notch" spin size="lg"/>
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="lg"
+      />
     </div>
     <div v-else-if="loaded">
       <div class="search-nav-heading">
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index fbbbbfe0..442e91b2 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -7,11 +7,11 @@
         class="nav-icon"
         :title="$t('nav.search')"
       ><FAIcon
-         fixed-width
-         size="lg"
-         class="button-icon"
-         icon="search"
-         @click.prevent.stop="toggleHidden"
+        fixed-width
+        size="lg"
+        class="button-icon"
+        icon="search"
+        @click.prevent.stop="toggleHidden"
       /></a>
       <template v-else>
         <input
@@ -30,7 +30,7 @@
           <FAIcon
             fixed-width
             icon="search"
-            />
+          />
         </button>
         <span>
           <FAIcon
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index ff1a129b..813dc4cd 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,10 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 99d3a0dc..c1d0d0ec 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,10 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </li>
@@ -127,7 +130,10 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 773c77de..5a659fc8 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -169,7 +169,8 @@
         <FAIcon
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetAvatar"
         />
@@ -197,7 +198,8 @@
         <FAIcon
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBanner"
         />
@@ -233,7 +235,8 @@
       >
         Error: {{ bannerUploadError }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearUploadError('banner')"
         />
       </div>
@@ -245,7 +248,8 @@
         <FAIcon
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBackground"
         />
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 65863c54..20201e18 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -42,22 +42,26 @@
               <FAIcon
                 fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon" icon="reply"
+                class="button-icon"
+                icon="reply"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon" icon="retweet"
+                class="button-icon"
+                icon="retweet"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon" icon="star"
+                class="button-icon"
+                icon="star"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cRed)"
-                class="button-icon" icon="times"
+                class="button-icon"
+                icon="times"
               />
             </div>
           </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 9cc1c392..280e1955 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,10 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <FAIcon class="select-down-icon" icon="chevron-down" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
               </label>
             </div>
           </template>
@@ -907,7 +910,10 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <FAIcon class="select-down-icon" icon="chevron-down" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 32220ae8..78f0e544 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,50 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <FAIcon icon="chevron-down" class="select-down-icon" />
+          <FAIcon
+            icon="chevron-down"
+            class="select-down-icon"
+          />
         </label>
         <button
           class="btn btn-default"
           :disabled="!ready || !present"
           @click="del"
         >
-          <FAIcon fixed-width icon="times" />
+          <FAIcon
+            fixed-width
+            icon="times"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveUpValid"
           @click="moveUp"
         >
-          <FAIcon fixed-width icon="chevron-up" />
+          <FAIcon
+            fixed-width
+            icon="chevron-up"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveDnValid"
           @click="moveDn"
         >
-          <FAIcon fixed-width icon="chevron-down" />
+          <FAIcon
+            fixed-width
+            icon="chevron-down"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="usingFallback"
           @click="add"
         >
-          <FAIcon fixed-width icon="plus" />
+          <FAIcon
+            fixed-width
+            icon="plus"
+          />
         </button>
       </div>
       <div
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index fbdb2441..2a4d794a 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="sign-in-alt"
+            /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +49,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="home"
+            /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +65,12 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $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 +83,12 @@
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="bell"
+            /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +96,12 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <FAIcon size="lg" fixed-width 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 +115,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="bullhorn"
+            /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +130,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <FAIcon size="lg" fixed-width 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 +143,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <FAIcon size="lg" fixed-width 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 +156,22 @@
             href="#"
             @click="openSettingsModal"
           >
-            <FAIcon size="lg" fixed-width 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'}">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="info-circle"
+            /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +182,12 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="tachometer-alt"
+            /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +198,12 @@
             href="#"
             @click="doLogout"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $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/status/status.vue b/src/components/status/status.vue
index b9b967cc..c94862d4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -13,7 +13,7 @@
       <span
         class="button-icon"
         @click="clearError"
-        >
+      >
         <FAIcon icon="times" />
       </span>
     </div>
@@ -51,8 +51,12 @@
           href="#"
           class="unmute button-icon"
           @click.prevent="toggleMute"
-          >
-          <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+        >
+          <FAIcon
+            icon="eye-slash"
+            class="button-icon"
+            size="lg"
+          />
         </a>
       </div>
     </template>
@@ -61,7 +65,10 @@
         v-if="showPinned"
         class="pin"
       >
-        <FAIcon icon="thumbtack" class="faint" />
+        <FAIcon
+          icon="thumbtack"
+          class="faint"
+        />
         <span class="faint">{{ $t('status.pinned') }}</span>
       </div>
       <div
@@ -177,8 +184,12 @@
                   v-if="status.visibility"
                   class="visibility-icon"
                   :title="status.visibility | capitalize"
-                  >
-                  <FAIcon class="button-icon" :icon="visibilityIcon(status.visibility)" size="lg" />
+                >
+                  <FAIcon
+                    class="button-icon"
+                    :icon="visibilityIcon(status.visibility)"
+                    size="lg"
+                  />
                 </span>
                 <a
                   v-if="!status.is_local && !isPreview"
@@ -187,7 +198,11 @@
                   class="source_url"
                   title="Source"
                 >
-                  <FAIcon class="button-icon" icon="external-link-square-alt" size="lg" />
+                  <FAIcon
+                    class="button-icon"
+                    icon="external-link-square-alt"
+                    size="lg"
+                  />
                 </a>
                 <a
                   v-if="expandable && !isPreview"
@@ -195,14 +210,22 @@
                   title="Expand"
                   @click.prevent="toggleExpanded"
                 >
-                  <FAIcon class="button-icon" icon="plus-square" size="lg" />
+                  <FAIcon
+                    class="button-icon"
+                    icon="plus-square"
+                    size="lg"
+                  />
                 </a>
                 <a
                   v-if="unmuted"
                   href="#"
                   @click.prevent="toggleMute"
                 >
-                  <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+                  <FAIcon
+                    icon="eye-slash"
+                    class="button-icon"
+                    size="lg"
+                  />
                 </a>
               </span>
             </div>
@@ -230,7 +253,7 @@
                       icon="reply"
                       size="lg"
                       flip="horizontal"
-                      />
+                    />
                     <span
                       class="faint-link reply-to-text"
                     >
@@ -358,7 +381,6 @@
               @onSuccess="clearError"
             />
           </div>
-
         </div>
       </div>
       <div
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f6432687..8237ce00 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,11 @@
         v-else
         class="status-preview-no-content"
       >
-        <FAIcon icon="circle-notch" spin size="2x"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="2x"
+        />
       </div>
     </div>
   </Popover>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index ab17cbbc..aaf0349c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,11 @@
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <FAIcon icon="circle-notch" spin size="lg"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="lg"
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 1e546fae..8099ddd5 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -16,27 +16,52 @@
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="home" />{{ $t("nav.timeline") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="home"
+            />{{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'bookmarks'}">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="bookmark" />{{ $t("nav.bookmarks") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="bookmark"
+            />{{ $t("nav.bookmarks") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="envelope" />{{ $t("nav.dms") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="envelope"
+            />{{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="users" />{{ $t("nav.public_tl") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="users"
+            />{{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="globe" />{{ $t("nav.twkn") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="globe"
+            />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
@@ -46,7 +71,10 @@
       class="title timeline-menu-title"
     >
       <span>{{ timelineName() }}</span>
-      <FAIcon size="sm" icon="chevron-down" />
+      <FAIcon
+        size="sm"
+        icon="chevron-down"
+      />
     </div>
   </Popover>
 </template>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6c35c781..c5f10b75 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,11 @@
               :user="user"
             />
             <div class="user-info-avatar-link-overlay">
-              <FAIcon class="button-icon" icon="search-plus" size="lg" />
+              <FAIcon
+                class="button-icon"
+                icon="search-plus"
+                size="lg"
+              />
             </div>
           </a>
           <router-link
@@ -56,7 +60,10 @@
                 target="_blank"
                 class="external-link-button"
               >
-                <FAIcon class="icon" icon="external-link-alt" />
+                <FAIcon
+                  class="icon"
+                  icon="external-link-alt"
+                />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -87,7 +94,11 @@
                 </span>
               </template>
               <span v-if="user.locked">
-               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+                <FAIcon
+                  class="lock-icon"
+                  icon="lock"
+                  size="sm"
+                />
               </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
@@ -136,7 +147,10 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </div>
@@ -162,8 +176,15 @@
                 :title="$t('user_card.unsubscribe')"
               >
                 <FALayers>
-                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
-                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon
+                    icon="rss"
+                    transform="left-5 shrink-6 up-3 rotate-20"
+                    flip="horizontal"
+                  />
+                  <FAIcon
+                    icon="rss"
+                    transform="right-5 shrink-6 up-3 rotate-20"
+                  />
                   <FAIcon icon="bell" />
                 </FALayers>
               </ProgressButton>
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index dd6977d2..95673733 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,11 @@
         </div>
       </div>
       <div v-else>
-        <FAIcon icon="circle-notch" spin size="3x"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="3x"
+        />
       </div>
     </div>
   </Popover>
-- 
cgit v1.2.3-70-g09d2


From 1b50d700aa496fdf9e7e774cd7d6b8835b91d13f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:34:42 +0300
Subject: bye bye fontello

---
 build/webpack.base.conf.js                   |  10 -
 package.json                                 |   1 -
 src/components/media_upload/media_upload.vue |  10 -
 static/fontello.json                         | 416 ---------------------------
 4 files changed, 437 deletions(-)
 delete mode 100644 static/fontello.json

(limited to 'src/components')

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index ef40333c..d987eff1 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var FontelloPlugin = require("fontello-webpack-plugin")
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -94,15 +93,6 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
-    }),
-    new FontelloPlugin({
-      config: require('../static/fontello.json'),
-      host: 'https://fontello.com',
-      name: 'fontello',
-      output: {
-        css: 'static/[name].' + now + '.css',  // [hash] is not supported. Use the current timestamp instead for versioning.
-        font: 'static/font/[name].' + now + '.[ext]'
-      }
     })
   ]
 }
diff --git a/package.json b/package.json
index 6bc285c8..14738c3e 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,6 @@
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "file-loader": "^3.0.1",
-    "fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^3.0.0",
     "http-proxy-middleware": "^0.17.2",
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 15b2b8e4..88251a26 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -43,15 +43,5 @@
   .new-icon {
     cursor: pointer;
   }
-
-  .progress-icon {
-    display: inline-block;
-    line-height: 0;
-    &::before {
-      /* Overriding fontello to achieve the perfect speeeen */
-      margin: 0;
-      line-height: 0;
-    }
-  }
 }
  </style>
diff --git a/static/fontello.json b/static/fontello.json
deleted file mode 100644
index b0136fd9..00000000
--- a/static/fontello.json
+++ /dev/null
@@ -1,416 +0,0 @@
-{
-  "name": "",
-  "css_prefix_text": "icon-",
-  "css_use_suffix": false,
-  "hinting": true,
-  "units_per_em": 1000,
-  "ascent": 857,
-  "glyphs": [
-    {
-      "uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
-      "css": "spin4",
-      "code": 59444,
-      "src": "fontelico"
-    },
-    {
-      "uid": "5211af474d3a9848f67f945e2ccaf143",
-      "css": "cancel",
-      "code": 59392,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
-      "css": "upload",
-      "code": 59393,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "2a6740fc2f9d0edea54205963f662594",
-      "css": "spin3",
-      "code": 59442,
-      "src": "fontelico"
-    },
-    {
-      "uid": "c6be5a58ee4e63a5ec399c2b0d15cf2c",
-      "css": "reply",
-      "code": 61714,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "474656633f79ea2f1dad59ff63f6bf07",
-      "css": "star",
-      "code": 59394,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d17030afaecc1e1c22349b99f3c4992a",
-      "css": "star-empty",
-      "code": 59395,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "09feb4465d9bd1364f4e301c9ddbaa92",
-      "css": "retweet",
-      "code": 59396,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "7fd683b2c518ceb9e5fa6757f2276faa",
-      "css": "eye-off",
-      "code": 59397,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "73ffeb70554099177620847206c12457",
-      "css": "binoculars",
-      "code": 61925,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e99461abfef3923546da8d745372c995",
-      "css": "cog",
-      "code": 59399,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "1bafeeb1808a5fe24484c7890096901a",
-      "css": "user-plus",
-      "code": 62004,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "559647a6f430b3aeadbecd67194451dd",
-      "css": "menu",
-      "code": 61641,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "0d20938846444af8deb1920dc85a29fb",
-      "css": "logout",
-      "code": 59400,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ccddff8e8670dcd130e3cb55fdfc2fd0",
-      "css": "down-open",
-      "code": 59401,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "44b9e75612c5fad5505edd70d071651f",
-      "css": "attach",
-      "code": 59402,
-      "src": "entypo"
-    },
-    {
-      "uid": "e15f0d620a7897e2035c18c80142f6d9",
-      "css": "link-ext",
-      "code": 61582,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e35de5ea31cd56970498e33efbcb8e36",
-      "css": "link-ext-alt",
-      "code": 61583,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "381da2c2f7fd51f8de877c044d7f439d",
-      "css": "picture",
-      "code": 59403,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "872d9516df93eb6b776cc4d94bd97dac",
-      "css": "video",
-      "code": 59404,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "399ef63b1e23ab1b761dfbb5591fa4da",
-      "css": "right-open",
-      "code": 59405,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d870630ff8f81e6de3958ecaeac532f2",
-      "css": "left-open",
-      "code": 59406,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "fe6697b391355dec12f3d86d6d490397",
-      "css": "up-open",
-      "code": 59407,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9c1376672bb4f1ed616fdd78a23667e9",
-      "css": "comment-empty",
-      "code": 61669,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ccc2329632396dc096bb638d4b46fb98",
-      "css": "mail-alt",
-      "code": 61664,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c1f1975c885aa9f3dad7810c53b82074",
-      "css": "lock",
-      "code": 59409,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "05376be04a27d5a46e855a233d6e8508",
-      "css": "lock-open-alt",
-      "code": 61758,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "197375a3cea8cb90b02d06e4ddf1433d",
-      "css": "globe",
-      "code": 59410,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "b3a9e2dab4d19ea3b2f628242c926bfe",
-      "css": "brush",
-      "code": 59411,
-      "src": "iconic"
-    },
-    {
-      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
-      "css": "search",
-      "code": 59398,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ca90da02d2c6a3183f2458e4dc416285",
-      "css": "adjust",
-      "code": 59414,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5e2ab018e3044337bcef5f7e94098ea1",
-      "css": "thumbs-up-alt",
-      "code": 61796,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c76b7947c957c9b78b11741173c8349b",
-      "css": "attention",
-      "code": 59412,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "1a5cfa186647e8c929c2b17b9fc4dac1",
-      "css": "plus-squared",
-      "code": 61694,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "44e04715aecbca7f266a17d5a7863c68",
-      "css": "plus",
-      "code": 59413,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "41087bc74d4b20b55059c60a33bf4008",
-      "css": "edit",
-      "code": 59415,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5717236f6134afe2d2a278a5c9b3927a",
-      "css": "play-circled",
-      "code": 61764,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
-      "css": "pencil",
-      "code": 59416,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "266d5d9adf15a61800477a5acf9a4462",
-      "css": "chart-bar",
-      "code": 59419,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d862a10e1448589215be19702f98f2c1",
-      "css": "smile",
-      "code": 61720,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "671f29fa10dda08074a4c6a341bb4f39",
-      "css": "bell-alt",
-      "code": 61683,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5bb103cd29de77e0e06a52638527b575",
-      "css": "wrench",
-      "code": 59418,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5b0772e9484a1a11646793a82edd622a",
-      "css": "pin",
-      "code": 59417,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "22411a88489225a018f68db737de3c77",
-      "css": "ellipsis",
-      "code": 61761,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M214 411V518Q214 540 199 556T161 571H54Q31 571 16 556T0 518V411Q0 388 16 373T54 357H161Q183 357 199 373T214 411ZM500 411V518Q500 540 484 556T446 571H339Q317 571 301 556T286 518V411Q286 388 301 373T339 357H446Q469 357 484 373T500 411ZM786 411V518Q786 540 770 556T732 571H625Q603 571 587 556T571 518V411Q571 388 587 373T625 357H732Q755 357 770 373T786 411Z",
-        "width": 785.7
-      },
-      "search": [
-        "ellipsis"
-      ]
-    },
-    {
-      "uid": "0bef873af785ead27781fdf98b3ae740",
-      "css": "bell-ringing-o",
-      "code": 59408,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M497.8 0C468.3 0 444.4 23.9 444.4 53.3 444.4 61.1 446.1 68.3 448.9 75 301.7 96.7 213.3 213.3 213.3 320 213.3 588.3 117.8 712.8 35.6 782.2 35.6 821.1 67.8 853.3 106.7 853.3H355.6C355.6 931.7 419.4 995.6 497.8 995.6S640 931.7 640 853.3H888.9C927.8 853.3 960 821.1 960 782.2 877.8 712.8 782.2 588.3 782.2 320 782.2 213.3 693.9 96.7 546.7 75 549.4 68.3 551.1 61.1 551.1 53.3 551.1 23.9 527.2 0 497.8 0ZM189.4 44.8C108.4 118.6 70.5 215.1 71.1 320.2L142.2 319.8C141.7 231.2 170.4 158.3 237.3 97.4L189.4 44.8ZM806.2 44.8L758.3 97.4C825.2 158.3 853.9 231.2 853.3 319.8L924.4 320.2C925.1 215.1 887.2 118.6 806.2 44.8ZM408.9 844.4C413.9 844.4 417.8 848.3 417.8 853.3 417.8 897.2 453.9 933.3 497.8 933.3 502.8 933.3 506.7 937.2 506.7 942.2S502.8 951.1 497.8 951.1C443.9 951.1 400 907.2 400 853.3 400 848.3 403.9 844.4 408.9 844.4Z",
-        "width": 1000
-      },
-      "search": [
-        "bell-ringing-o"
-      ]
-    },
-    {
-      "uid": "0b2b66e526028a6972d51a6f10281b4b",
-      "css": "zoom-in",
-      "code": 59420,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "0bda4bc779d4c32623dec2e43bd67ee8",
-      "css": "gauge",
-      "code": 61668,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "31972e4e9d080eaa796290349ae6c1fd",
-      "css": "users",
-      "code": 59421,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
-      "css": "info-circled",
-      "code": 59423,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
-      "css": "home-2",
-      "code": 59425,
-      "src": "typicons"
-    },
-    {
-      "uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
-      "css": "chat",
-      "code": 59422,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "3a00327e61b997b58518bd43ed83c3df",
-      "css": "login",
-      "code": 59424,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "f3ebd6751c15a280af5cc5f4a764187d",
-      "css": "arrow-curved",
-      "code": 59426,
-      "src": "iconic"
-    },
-    {
-      "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
-      "css": "link",
-      "code": 59427,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "4aad6bb50b02c18508aae9cbe14e784e",
-      "css": "share",
-      "code": 61920,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
-      "css": "user",
-      "code": 59428,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "12f4ece88e46abd864e40b35e05b11cd",
-      "css": "ok",
-      "code": 59431,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "4109c474ff99cad28fd5a2c38af2ec6f",
-      "css": "filter",
-      "code": 61616,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
-      "css": "download",
-      "code": 59429,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "f04a5d24e9e659145b966739c4fde82a",
-      "css": "bookmark",
-      "code": 59430,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "2f5ef6f6b7aaebc56458ab4e865beff5",
-      "css": "bookmark-empty",
-      "code": 61591,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9ea0a737ccc45d6c510dcbae56058849",
-      "css": "music",
-      "code": 59432,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "1b5a5d7b7e3c71437f5a26befdd045ed",
-      "css": "doc",
-      "code": 59433,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "98d9c83c1ee7c2c25af784b518c522c5",
-      "css": "block",
-      "code": 59434,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "3e674995cacc2b09692c096ea7eb6165",
-      "css": "megaphone",
-      "code": 59435,
-      "src": "fontawesome"
-    }
-  ]
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From b6cf2bcefd5ddd20c11ee4b0d0f94e29e8f59c40 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:31:16 +0200
Subject: improved the semantics for our icon scale, fixed preview, fixed
 navbar desktop

---
 src/App.scss                                       | 12 ++++---
 src/App.vue                                        |  9 ++---
 src/components/chat_new/chat_new.vue               |  3 +-
 src/components/extra_buttons/extra_buttons.vue     |  2 +-
 src/components/favorite_button/favorite_button.vue |  6 ++--
 .../global_notice_list/global_notice_list.vue      |  2 +-
 src/components/image_cropper/image_cropper.vue     |  2 +-
 src/components/login_form/login_form.vue           |  2 +-
 src/components/mfa_form/recovery_form.vue          |  2 +-
 src/components/mfa_form/totp_form.vue              |  2 +-
 src/components/mobile_nav/mobile_nav.vue           |  9 ++---
 src/components/nav_panel/nav_panel.vue             | 41 ++++++++--------------
 src/components/notification/notification.vue       |  8 ++---
 src/components/password_reset/password_reset.vue   |  2 +-
 .../post_status_form/post_status_form.vue          | 16 ++++-----
 src/components/react_button/react_button.vue       |  3 +-
 src/components/reply_button/reply_button.vue       |  6 ++--
 src/components/retweet_button/retweet_button.vue   |  9 ++---
 src/components/scope_selector/scope_selector.vue   | 12 +++----
 src/components/search_bar/search_bar.vue           |  6 ++--
 src/components/settings_modal/tabs/profile_tab.vue |  4 +--
 .../settings_modal/tabs/theme_tab/preview.vue      |  8 ++---
 src/components/side_drawer/side_drawer.vue         | 38 +++++++-------------
 src/components/status/status.vue                   | 24 +++++--------
 src/components/timeline_menu/timeline_menu.vue     | 15 +++-----
 src/components/user_card/user_card.vue             |  3 +-
 26 files changed, 95 insertions(+), 151 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 06915e16..6884f314 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -812,14 +812,18 @@ nav {
   }
 }
 
-.button-icon {
-  &.svg-inline--fa.fa-lg {
-    display: inline-block;
-    padding: 0 0.3em;
+.fa-scale-110 {
+  &.svg-inline--fa {
     font-size: 1.1em;
   }
 }
 
+.fa-old-padding {
+  &.svg-inline--fa {
+    padding: 0 0.3em;
+  }
+}
+
 @keyframes shakeError {
   0% {
     transform: translateX(0);
diff --git a/src/App.vue b/src/App.vue
index c27f51bf..6e44c7e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,8 +53,7 @@
           >
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="cog"
               :title="$t('nav.preferences')"
             />
@@ -66,8 +65,7 @@
             target="_blank"
           ><FAIcon
             fixed-width
-            size="lg"
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
@@ -78,8 +76,7 @@
             @click.prevent="logout"
           ><FAIcon
             fixed-width
-            size="lg"
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 8f02a699..f3894a3a 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -20,8 +20,7 @@
     <div class="input-wrap">
       <div class="input-search">
         <FAIcon
-          size="lg"
-          class="search-icon button-icon"
+          class="search-icon fa-scale-110 fa-old-padding"
           icon="search"
         />
       </div>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 4bf1e62a..f32ea02d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -107,7 +107,7 @@
     </div>
     <span slot="trigger">
       <FAIcon
-        class="ExtraButtons button-icon"
+        class="ExtraButtons fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
         size="md"
       />
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 6c7bfdab..dfe12f86 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -2,11 +2,10 @@
   <div v-if="loggedIn">
     <FAIcon
       :class="classes"
-      class="FavoriteButton button-icon -interactive"
+      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
       :title="$t('tool_tip.favorite')"
       :icon="[status.favorited ? 'fas' : 'far', 'star']"
       :spin="animated"
-      size="lg"
       @click.prevent="favorite()"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
@@ -14,10 +13,9 @@
   <div v-else>
     <FAIcon
       :class="classes"
-      class="FavoriteButton button-icon"
+      class="FavoriteButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
-      size="lg"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 06b6af9c..8a33b9eb 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,7 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <FAIcon
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         icon="times"
         @click="closeNotice(notice)"
       />
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 605f7427..75def612 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -43,7 +43,7 @@
       >
         {{ submitErrorMsg }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 4ab5d192..a1f77210 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,7 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index f6526d2a..78953649 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,7 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 0c6412ea..9401cad5 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -58,7 +58,7 @@
         {{ error }}
         <FAIcon
           size="lg"
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index db9b0ba0..d2bc65ab 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -16,8 +16,7 @@
             @click.stop.prevent="toggleMobileSidebar()"
           >
             <FAIcon
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bars"
             />
             <div
@@ -42,8 +41,7 @@
             @click.stop.prevent="openMobileNotifications()"
           >
             <FAIcon
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bell"
             />
             <div
@@ -68,8 +66,7 @@
           @click.stop.prevent="closeMobileNotifications()"
         >
           <FAIcon
-            size="lg"
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="times"
           />
         </a>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 4755d7b7..e7301328 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -9,22 +9,18 @@
           >
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="home"
-            />
-            {{ $t("nav.timelines") }}
+            />{{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="bell"
-            />
-            {{ $t("nav.interactions") }}
+            />{{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
@@ -37,22 +33,18 @@
             </div>
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="comments"
-            />
-            {{ $t("nav.chats") }}
+            />{{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="user-plus"
-            />
-            {{ $t("nav.friend_requests") }}
+            />{{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -65,8 +57,7 @@
           <router-link :to="{ name: 'about' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="info-circle"
             />{{ $t("nav.about") }}
           </router-link>
@@ -94,7 +85,7 @@
   }
 
   .follow-request-count {
-    margin: -6px 10px;
+    vertical-align: bottom;
     background-color: $fallback--bg;
     background-color: var(--input, $fallback--faint);
   }
@@ -126,7 +117,8 @@
 
   a {
     display: block;
-    padding: 0.8em 0.85em;
+    align-items: stretch;
+    padding: 0.9em 1em;
 
     &:hover {
       background-color: $fallback--lightBg;
@@ -156,13 +148,8 @@
     }
   }
 
-  .button-icon {
-    margin-left: -0.1em;
-    margin-right: 0.2em;
-  }
-
-  .button-icon:before {
-    width: 1.1em;
+  .fa-scale-110 {
+    margin-right: 0.8em;
   }
 }
 </style>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index b609ae04..2bbde108 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -19,7 +19,7 @@
         class="unmute"
         @click.prevent="toggleMute"
       ><FAIcon
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         icon="eye-slash"
       /></a>
     </div>
@@ -137,7 +137,7 @@
             href="#"
             @click.prevent="toggleMute"
           ><FAIcon
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="eye-slash"
           /></a>
         </span>
@@ -157,13 +157,13 @@
           >
             <FAIcon
               icon="check"
-              class="button-icon follow-request-accept"
+              class="fa-scale-110 fa-old-padding follow-request-accept"
               :title="$t('tool_tip.accept_follow_request')"
               @click="approveUser()"
             />
             <FAIcon
               icon="times"
-              class="button-icon follow-request-reject"
+              class="fa-scale-110 fa-old-padding follow-request-reject"
               :title="$t('tool_tip.reject_follow_request')"
               @click="denyUser()"
             />
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 3fe42b84..0deb9ccf 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -63,7 +63,7 @@
           >
             <span>{{ error }}</span>
             <a
-              class="button-icon dismiss"
+              class="fa-scale-110 fa-old-padding dismiss"
               @click.prevent="dismissError()"
             >
               <FAIcon icon="times" />
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9cf38a9a..a427bb98 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -37,7 +37,7 @@
         >
           <span>{{ $t('post_status.scope_notice.public') }}</span>
           <a
-            class="button-icon dismiss"
+            class="fa-scale-110 fa-old-padding dismiss"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -49,7 +49,7 @@
         >
           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
           <a
-            class="button-icon dismiss"
+            class="fa-scale-110 fa-old-padding dismiss"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -61,7 +61,7 @@
         >
           <span>{{ $t('post_status.scope_notice.private') }}</span>
           <a
-            class="button-icon dismiss"
+            class="fa-scale-110 fa-old-padding dismiss"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -83,7 +83,7 @@
             @click.stop.prevent="togglePreview"
           >
             {{ $t('post_status.preview') }}
-            <i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
+            <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
           </a>
           <FAIcon
             v-show="previewLoading"
@@ -289,8 +289,7 @@
       >
         Error: {{ error }}
         <FAIcon
-          class="button-icon"
-          size="lg"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
@@ -302,7 +301,7 @@
           class="media-upload-wrapper"
         >
           <FAIcon
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="times"
             @click="removeMediaFile(file)"
           />
@@ -389,7 +388,6 @@
   }
 
   .preview-toggle {
-    display: flex;
     cursor: pointer;
     user-select: none;
 
@@ -524,7 +522,7 @@
       position: relative;
     }
 
-    .button-icon {
+    .fa-scale-110 fa-old-padding {
       position: absolute;
       margin: 10px;
       margin: .75em;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 8395d5e3..694e6470 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -38,9 +38,8 @@
     </div>
     <FAIcon
       slot="trigger"
-      class="button-icon add-reaction-button"
+      class="fa-scale-110 fa-old-padding add-reaction-button"
       :icon="['far', 'smile-beam']"
-      size="lg"
       :title="$t('tool_tip.add_reaction')"
     />
   </Popover>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index ae7b0e26..a0ac8941 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -2,9 +2,8 @@
   <div>
     <FAIcon
       v-if="loggedIn"
-      class="ReplyButton button-icon -interactive"
+      class="ReplyButton fa-scale-110 fa-old-padding -interactive"
       icon="reply"
-      size="lg"
       :title="$t('tool_tip.reply')"
       :class="{'-active': replying}"
       @click.prevent="$emit('toggle')"
@@ -12,8 +11,7 @@
     <FAIcon
       v-else
       icon="reply"
-      size="lg"
-      class="ReplyButton button-icon"
+      class="ReplyButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.reply')"
     />
     <span v-if="status.replies_count > 0">
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 706c6b81..b234f3d9 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -3,9 +3,8 @@
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
       <FAIcon
         :class="classes"
-        class="RetweetButton button-icon -interactive"
+        class="RetweetButton fa-scale-110 fa-old-padding -interactive"
         icon="retweet"
-        size="lg"
         :spin="animated"
         :title="$t('tool_tip.repeat')"
         @click.prevent="retweet()"
@@ -15,9 +14,8 @@
     <template v-else>
       <FAIcon
         :class="classes"
-        class="RetweetButton button-icon"
+        class="RetweetButton fa-scale-110 fa-old-padding"
         icon="lock"
-        size="lg"
         :title="$t('timeline.no_retweet_hint')"
       />
     </template>
@@ -25,9 +23,8 @@
   <div v-else-if="!loggedIn">
     <FAIcon
       :class="classes"
-      class="button-icon"
+      class="fa-scale-110 fa-old-padding"
       icon="retweet"
-      size="lg"
       :title="$t('tool_tip.repeat')"
     />
     <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a43af23b..a22a4fda 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -12,8 +12,7 @@
     >
       <FAIcon
         icon="envelope"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
     <span
@@ -25,8 +24,7 @@
     >
       <FAIcon
         icon="lock"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
     <span
@@ -38,8 +36,7 @@
     >
       <FAIcon
         icon="lock-open"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
     <span
@@ -51,8 +48,7 @@
     >
       <FAIcon
         icon="globe"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
   </div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 442e91b2..f1c3fd7a 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -8,8 +8,7 @@
         :title="$t('nav.search')"
       ><FAIcon
         fixed-width
-        size="lg"
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         icon="search"
         @click.prevent.stop="toggleHidden"
       /></a>
@@ -34,10 +33,9 @@
         </button>
         <span>
           <FAIcon
-            size="lg"
             fixed-width
             icon="times"
-            class="cancel-icon"
+            class="cancel-icon fa-scale-110 fa-old-padding"
             @click.prevent.stop="toggleHidden"
           />
         </span>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 5a659fc8..d62bc392 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -235,7 +235,7 @@
       >
         Error: {{ bannerUploadError }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearUploadError('banner')"
         />
@@ -286,7 +286,7 @@
         Error: {{ backgroundUploadError }}
         <FAIcon
           size="lg"
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearUploadError('background')"
         />
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 20201e18..3174fd7c 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -42,25 +42,25 @@
               <FAIcon
                 fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="reply"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="retweet"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="star"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cRed)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="times"
               />
             </div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 2a4d794a..eac0ddb2 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -37,9 +37,8 @@
         >
           <router-link :to="{ name: 'login' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="sign-in-alt"
             /> {{ $t("login.login") }}
           </router-link>
@@ -50,9 +49,8 @@
         >
           <router-link :to="{ name: timelinesRoute }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="home"
             /> {{ $t("nav.timelines") }}
           </router-link>
@@ -66,9 +64,8 @@
             style="position: relative"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="comments"
             /> {{ $t("nav.chats") }}
             <span
@@ -84,9 +81,8 @@
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bell"
             /> {{ $t("nav.interactions") }}
           </router-link>
@@ -97,9 +93,8 @@
         >
           <router-link to="/friend-requests">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="user-plus"
             /> {{ $t("nav.friend_requests") }}
             <span
@@ -116,9 +111,8 @@
         >
           <router-link :to="{ name: 'chat' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bullhorn"
             /> {{ $t("shoutbox.title") }}
           </router-link>
@@ -131,9 +125,8 @@
         >
           <router-link :to="{ name: 'search' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="search"
             /> {{ $t("nav.search") }}
           </router-link>
@@ -144,9 +137,8 @@
         >
           <router-link :to="{ name: 'who-to-follow' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="user-plus"
             /> {{ $t("nav.who_to_follow") }}
           </router-link>
@@ -157,9 +149,8 @@
             @click="openSettingsModal"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="cog"
             /> {{ $t("settings.settings") }}
           </a>
@@ -167,9 +158,8 @@
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="info-circle"
             /> {{ $t("nav.about") }}
           </router-link>
@@ -183,9 +173,8 @@
             target="_blank"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="tachometer-alt"
             /> {{ $t("nav.administration") }}
           </a>
@@ -199,9 +188,8 @@
             @click="doLogout"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="sign-out-alt"
             /> {{ $t("login.logout") }}
           </a>
@@ -284,7 +272,7 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .button-icon:before {
+  .fa-scale-110 fa-old-padding:before {
     width: 1.1em;
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c94862d4..21412faa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -11,7 +11,7 @@
     >
       {{ error }}
       <span
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         @click="clearError"
       >
         <FAIcon icon="times" />
@@ -22,7 +22,7 @@
         <small class="status-username">
           <FAIcon
             v-if="muted && retweet"
-            class="button-icon repeat-icon"
+            class="fa-scale-110 fa-old-padding repeat-icon"
             icon="retweet"
           />
           <router-link :to="userProfileLink">
@@ -49,13 +49,12 @@
         </small>
         <a
           href="#"
-          class="unmute button-icon"
+          class="unmute fa-scale-110 fa-old-padding"
           @click.prevent="toggleMute"
         >
           <FAIcon
             icon="eye-slash"
-            class="button-icon"
-            size="lg"
+            class="fa-scale-110 fa-old-padding"
           />
         </a>
       </div>
@@ -186,9 +185,8 @@
                   :title="status.visibility | capitalize"
                 >
                   <FAIcon
-                    class="button-icon"
+                    class="fa-scale-110 fa-old-padding"
                     :icon="visibilityIcon(status.visibility)"
-                    size="lg"
                   />
                 </span>
                 <a
@@ -199,9 +197,8 @@
                   title="Source"
                 >
                   <FAIcon
-                    class="button-icon"
+                    class="fa-scale-110 fa-old-padding"
                     icon="external-link-square-alt"
-                    size="lg"
                   />
                 </a>
                 <a
@@ -211,9 +208,8 @@
                   @click.prevent="toggleExpanded"
                 >
                   <FAIcon
-                    class="button-icon"
+                    class="fa-scale-110 fa-old-padding"
                     icon="plus-square"
-                    size="lg"
                   />
                 </a>
                 <a
@@ -223,8 +219,7 @@
                 >
                   <FAIcon
                     icon="eye-slash"
-                    class="button-icon"
-                    size="lg"
+                    class="fa-scale-110 fa-old-padding"
                   />
                 </a>
               </span>
@@ -249,9 +244,8 @@
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
                     <FAIcon
-                      class="button-icon"
+                      class="fa-scale-110 fa-old-padding"
                       icon="reply"
-                      size="lg"
                       flip="horizontal"
                     />
                     <span
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 8099ddd5..c46531be 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -18,8 +18,7 @@
           <router-link :to="{ name: 'friends' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="home"
             />{{ $t("nav.timeline") }}
           </router-link>
@@ -28,8 +27,7 @@
           <router-link :to="{ name: 'bookmarks'}">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="bookmark"
             />{{ $t("nav.bookmarks") }}
           </router-link>
@@ -38,8 +36,7 @@
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="envelope"
             />{{ $t("nav.dms") }}
           </router-link>
@@ -48,8 +45,7 @@
           <router-link :to="{ name: 'public-timeline' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="users"
             />{{ $t("nav.public_tl") }}
           </router-link>
@@ -58,8 +54,7 @@
           <router-link :to="{ name: 'public-external-timeline' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="globe"
             />{{ $t("nav.twkn") }}
           </router-link>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c5f10b75..55e231d2 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -22,9 +22,8 @@
             />
             <div class="user-info-avatar-link-overlay">
               <FAIcon
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="search-plus"
-                size="lg"
               />
             </div>
           </a>
-- 
cgit v1.2.3-70-g09d2


From 7c4af4ce3fe140d8dbe3ff6da55dfd0edcef7778 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:41:42 +0200
Subject: improved side-drawer alignments

---
 src/components/side_drawer/side_drawer.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eac0ddb2..c3370a9d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -320,7 +320,6 @@
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  margin: 0.2em 0;
 }
 
 .side-drawer ul:last-child {
@@ -331,8 +330,11 @@
   padding: 0;
 
   a {
+    box-sizing: border-box;
     display: block;
-    padding: 0.5em 0.85em;
+    height: 3em;
+    line-height: 2em;
+    padding: 0.5em 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;
-- 
cgit v1.2.3-70-g09d2


From fc7dfb3b9ecb92d2971ddc7007f708dc664e69f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:47:42 +0200
Subject: update & unify the navbars heights

---
 src/components/nav_panel/nav_panel.vue     | 5 ++++-
 src/components/side_drawer/side_drawer.vue | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index e7301328..7308fb1e 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -117,8 +117,11 @@
 
   a {
     display: block;
+    box-sizing: border-box;
     align-items: stretch;
-    padding: 0.9em 1em;
+    height: 3.5em;
+    line-height: 3.5em;
+    padding: 0 1em;
 
     &:hover {
       background-color: $fallback--lightBg;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index c3370a9d..707c6c3d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -333,8 +333,8 @@
     box-sizing: border-box;
     display: block;
     height: 3em;
-    line-height: 2em;
-    padding: 0.5em 0.7em;
+    line-height: 3em;
+    padding: 0 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;
-- 
cgit v1.2.3-70-g09d2


From 0ac9d81788a2cb92cec54ae08264b52ea4c93b1c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:55:08 +0200
Subject: fix settings tabs on mobile, update follow request badge

---
 src/components/nav_panel/nav_panel.vue        | 2 +-
 src/components/side_drawer/side_drawer.vue    | 7 +++++--
 src/components/tab_switcher/tab_switcher.scss | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 7308fb1e..8b299bf2 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -85,7 +85,7 @@
   }
 
   .follow-request-count {
-    vertical-align: bottom;
+    vertical-align: baseline;
     background-color: $fallback--bg;
     background-color: var(--input, $fallback--faint);
   }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 707c6c3d..ed1ccb7d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -272,9 +272,12 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .fa-scale-110 fa-old-padding:before {
-    width: 1.1em;
+  .follow-request-count {
+    vertical-align: baseline;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
   }
+
 }
 
 .side-drawer-logo-wrapper {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index cd8fff6f..1e963516 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -92,7 +92,7 @@
         flex-direction: column;
 
         @media all and (max-width: 800px) {
-          min-width: 1em;
+          min-width: 4em;
         }
 
         &:not(.active)::after {
-- 
cgit v1.2.3-70-g09d2


From 2e6c51dfd4e59370c104abb3e2602ec5a70bd030 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 22:49:53 +0200
Subject: better icon for picker

---
 src/components/emoji_picker/emoji_picker.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index b1671566..0d51c7e5 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,13 +1,13 @@
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faUnderline,
+  faIcons,
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faUnderline,
+  faIcons,
   faStickyNote,
   faSmileBeam
 )
@@ -195,7 +195,7 @@ const EmojiPicker = {
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'underline',
+          icon: 'icons',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]
-- 
cgit v1.2.3-70-g09d2


From ef36ca44f613c3d7d2ea11a9ad4f7fe828f7ae83 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 22:52:20 +0200
Subject: >boxes

---
 src/components/emoji_picker/emoji_picker.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 0d51c7e5..2716d93f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,13 +1,13 @@
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faIcons,
+  faBoxOpen,
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faIcons,
+  faBoxOpen,
   faStickyNote,
   faSmileBeam
 )
@@ -195,7 +195,7 @@ const EmojiPicker = {
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'icons',
+          icon: 'box-open',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]
-- 
cgit v1.2.3-70-g09d2