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/search_bar/search_bar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

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>
-- 
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/search_bar/search_bar.vue')

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


From 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/search_bar/search_bar.vue')

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 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/search_bar/search_bar.vue')

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 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/search_bar/search_bar.vue')

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 633349ddff2fd96298ce26ac2d3c404edb1ebbf3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Oct 2020 21:13:31 +0200
Subject: Refactor desktop navbar into a component, change layout to grid for
 better compatibility with search field and simpler CSS

---
 src/App.js                                  |  49 +----
 src/App.scss                                | 119 -------------
 src/App.vue                                 |  75 +-------
 src/boot/after_store.js                     |   1 +
 src/components/desktop_nav/desktop_nav.js   |  89 ++++++++++
 src/components/desktop_nav/desktop_nav.scss | 112 ++++++++++++
 src/components/desktop_nav/desktop_nav.vue  |  79 ++++++++
 src/components/mobile_nav/mobile_nav.vue    | 267 +++++++++++++++-------------
 src/components/search_bar/search_bar.vue    |  77 ++++----
 src/modules/instance.js                     |   1 +
 static/config.json                          |   1 +
 11 files changed, 465 insertions(+), 405 deletions(-)
 create mode 100644 src/components/desktop_nav/desktop_nav.js
 create mode 100644 src/components/desktop_nav/desktop_nav.scss
 create mode 100644 src/components/desktop_nav/desktop_nav.vue

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

diff --git a/src/App.js b/src/App.js
index ded772fa..4871b4ac 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
-import SearchBar from './components/search_bar/search_bar.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@@ -11,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
+import DesktopNav from './components/desktop_nav/desktop_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
@@ -22,7 +22,6 @@ export default {
     UserPanel,
     NavPanel,
     Notifications,
-    SearchBar,
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
@@ -31,6 +30,7 @@ export default {
     SideDrawer,
     MobilePostStatusButton,
     MobileNav,
+    DesktopNav,
     SettingsModal,
     UserReportingModal,
     PostStatusModal,
@@ -38,14 +38,6 @@ export default {
   },
   data: () => ({
     mobileActivePanel: 'timeline',
-    searchBarHidden: true,
-    supportsMask: window.CSS && window.CSS.supports && (
-      window.CSS.supports('mask-size', 'contain') ||
-        window.CSS.supports('-webkit-mask-size', 'contain') ||
-        window.CSS.supports('-moz-mask-size', 'contain') ||
-        window.CSS.supports('-ms-mask-size', 'contain') ||
-        window.CSS.supports('-o-mask-size', 'contain')
-    )
   }),
   created () {
     // Load the locale from the storage
@@ -61,28 +53,6 @@ export default {
     background () {
       return this.currentUser.background_image || this.$store.state.instance.background
     },
-    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
-    logoStyle () {
-      return {
-        'visibility': this.enableMask ? 'hidden' : 'visible'
-      }
-    },
-    logoMaskStyle () {
-      return this.enableMask ? {
-        'mask-image': `url(${this.$store.state.instance.logo})`
-      } : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      }
-    },
-    logoBgStyle () {
-      return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
-        opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
-    },
-    logo () { return this.$store.state.instance.logo },
     bgStyle () {
       return {
         'background-image': `url(${this.background})`
@@ -93,9 +63,7 @@ export default {
         '--body-background-image': `url(${this.background})`
       }
     },
-    sitename () { return this.$store.state.instance.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
-    hideSitename () { return this.$store.state.instance.hideSitename },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&
@@ -112,19 +80,6 @@ export default {
     }
   },
   methods: {
-    scrollToTop () {
-      window.scrollTo(0, 0)
-    },
-    logout () {
-      this.$router.replace('/main/public')
-      this.$store.dispatch('logout')
-    },
-    onSearchBarToggled (hidden) {
-      this.searchBarHidden = hidden
-    },
-    openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
-    },
     updateMobileState () {
       const mobileLayout = windowWidth() <= 800
       const layoutHeight = windowHeight()
diff --git a/src/App.scss b/src/App.scss
index 6884f314..05e73b4b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -359,119 +359,10 @@ i[class*=icon-], .svg-inline--fa  {
   padding: 0 10px 0 10px;
 }
 
-.item {
-  flex: 1;
-  line-height: 50px;
-  height: 50px;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: wrap;
-
-  .nav-icon {
-    margin-left: 0.2em;
-    width: 2em;
-    text-align: center;
-  }
-
-  &.right {
-    justify-content: flex-end;
-  }
-}
-
 .auto-size {
   flex: 1
 }
 
-.nav-bar {
-  padding: 0;
-  width: 100%;
-  align-items: center;
-  position: fixed;
-  height: 50px;
-  box-sizing: border-box;
-
-  button {
-    &, i[class*=icon-], svg {
-      color: $fallback--text;
-      color: var(--btnTopBarText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedTopBar, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedTopBarText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledTopBarText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledTopBarText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--btnToggledTopBar, $fallback--fg)
-    }
-  }
-
-
-  .logo {
-    display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    align-items: stretch;
-    justify-content: center;
-    flex: 0 0 auto;
-    z-index: -1;
-    transition: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 100ms;
-
-    .mask {
-      mask-repeat: no-repeat;
-      mask-position: center;
-      mask-size: contain;
-      background-color: $fallback--fg;
-      background-color: var(--topBarText, $fallback--fg);
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    img {
-      height: 100%;
-      object-fit: contain;
-      display: block;
-      flex: 0;
-    }
-  }
-
-  .inner-nav {
-    position: relative;
-    margin: auto;
-    box-sizing: border-box;
-    padding-left: 10px;
-    padding-right: 10px;
-    display: flex;
-    align-items: center;
-    flex-basis: 970px;
-    height: 50px;
-
-    a, a i, a svg {
-      color: $fallback--link;
-      color: var(--topBarLink, $fallback--link);
-    }
-  }
-}
-
 main-router {
   flex: 1;
 }
@@ -781,16 +672,6 @@ nav {
   }
 }
 
-@media all and (min-width: 800px) {
-  .logo {
-    opacity: 1 !important;
-  }
-}
-
-.item.right {
-  text-align: right;
-}
-
 .visibility-notice {
   padding: .5em;
   border: 1px solid $fallback--faint;
diff --git a/src/App.vue b/src/App.vue
index 6e44c7e9..b4eb0524 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,80 +9,7 @@
       :style="bgStyle"
     />
     <MobileNav v-if="isMobileLayout" />
-    <nav
-      v-else
-      id="nav"
-      class="nav-bar container"
-      @click="scrollToTop()"
-    >
-      <div class="inner-nav">
-        <div
-          class="logo"
-          :style="logoBgStyle"
-        >
-          <div
-            class="mask"
-            :style="logoMaskStyle"
-          />
-          <img
-            :src="logo"
-            :style="logoStyle"
-          >
-        </div>
-        <div class="item">
-          <router-link
-            v-if="!hideSitename"
-            class="site-name"
-            :to="{ name: 'root' }"
-            active-class="home"
-          >
-            {{ sitename }}
-          </router-link>
-        </div>
-        <div class="item right">
-          <search-bar
-            v-if="currentUser || !privateMode"
-            class="mobile-hidden"
-            @toggled="onSearchBarToggled"
-            @click.stop.native
-          />
-          <a
-            href="#"
-            class="mobile-hidden nav-icon"
-            @click.stop="openSettingsModal"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="cog"
-              :title="$t('nav.preferences')"
-            />
-          </a>
-          <a
-            v-if="currentUser && currentUser.role === 'admin'"
-            href="/pleroma/admin/#/login-pleroma"
-            class="mobile-hidden nav-icon"
-            target="_blank"
-          ><FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="tachometer-alt"
-            :title="$t('nav.administration')"
-          /></a>
-          <a
-            v-if="currentUser"
-            href="#"
-            class="mobile-hidden nav-icon"
-            @click.prevent="logout"
-          ><FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="sign-out-alt"
-            :title="$t('login.logout')"
-          /></a>
-        </div>
-      </div>
-    </nav>
+    <DesktopNav v-else />
     <div class="app-bg-wrapper app-container-wrapper" />
     <div
       id="content"
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 00ca74a2..3cbbf020 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -130,6 +130,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
       ? 0
       : config.logoMargin
   })
+  copyInstanceOption('logoLeft')
   store.commit('authFlow/setInitialStrategy', config.loginMethod)
 
   copyInstanceOption('redirectRootNoLogin')
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
new file mode 100644
index 00000000..ee99ec10
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -0,0 +1,89 @@
+import SearchBar from 'components/search_bar/search_bar.vue'
+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
+)
+
+export default {
+  components: {
+    SearchBar
+  },
+  data: () => ({
+    searchBarHidden: true,
+    supportsMask: window.CSS && window.CSS.supports && (
+      window.CSS.supports('mask-size', 'contain') ||
+        window.CSS.supports('-webkit-mask-size', 'contain') ||
+        window.CSS.supports('-moz-mask-size', 'contain') ||
+        window.CSS.supports('-ms-mask-size', 'contain') ||
+        window.CSS.supports('-o-mask-size', 'contain')
+    )
+  }),
+  computed: {
+    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+    logoStyle () {
+      return {
+        'visibility': this.enableMask ? 'hidden' : 'visible'
+      }
+    },
+    logoMaskStyle () {
+      return this.enableMask ? {
+        'mask-image': `url(${this.$store.state.instance.logo})`
+      } : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      }
+    },
+    logoBgStyle () {
+      return Object.assign({
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.searchBarHidden ? 1 : 0
+      }, this.enableMask ? {} : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      })
+    },
+    logo () { return this.$store.state.instance.logo },
+    sitename () { return this.$store.state.instance.name },
+    hideSitename () { return this.$store.state.instance.hideSitename },
+    logoLeft () { return this.$store.state.instance.logoLeft },
+    currentUser () { return this.$store.state.users.currentUser },
+    privateMode () { return this.$store.state.instance.private },
+  },
+  methods: {
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    onSearchBarToggled (hidden) {
+      this.searchBarHidden = hidden
+    },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    },
+  }
+}
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
new file mode 100644
index 00000000..028692a9
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -0,0 +1,112 @@
+@import '../../_variables.scss';
+
+.DesktopNav {
+  height: 50px;
+  width: 100%;
+  position: fixed;
+
+  .inner-nav {
+    display: grid;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto 2fr;
+    grid-template-areas: "sitename logo actions";
+    box-sizing: border-box;
+    padding: 0 1.2em;
+    margin: auto;
+    max-width: 980px;
+  }
+
+  &.-logoLeft {
+    grid-template-columns: auto 2fr 2fr;
+    grid-template-areas: "logo sitename actions";
+  }
+
+  button {
+    &, svg {
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedTopBar, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedTopBarText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledTopBarText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledTopBarText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnToggledTopBar, $fallback--fg)
+    }
+  }
+
+  .logo {
+    grid-area: logo;
+    position: relative;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+
+    @media all and (min-width: 800px) {
+      opacity: 1 !important;
+    }
+
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    img {
+      display: inline-block;
+      height: 50px;
+    }
+  }
+
+  .nav-icon {
+    margin-left: 0.2em;
+    width: 2em;
+    text-align: center;
+  }
+
+  a, a svg {
+    color: $fallback--link;
+    color: var(--topBarLink, $fallback--link);
+  }
+
+  .sitename {
+    grid-area: sitename;
+  }
+
+  .actions {
+    grid-area: actions;
+  }
+
+  .item {
+    flex: 1;
+    line-height: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+    &.right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+}
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
new file mode 100644
index 00000000..d166be08
--- /dev/null
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -0,0 +1,79 @@
+<template>
+  <nav
+    id="nav"
+    class="DesktopNav"
+    :class="{ '-logoLeft': logoLeft }"
+    @click="scrollToTop()"
+    >
+    <div class="inner-nav">
+      <div class="item sitename">
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+          >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <router-link
+        class="logo"
+        :to="{ name: 'root' }"
+        :style="logoBgStyle"
+        >
+        <div
+          class="mask"
+          :style="logoMaskStyle"
+          />
+        <img
+          :src="logo"
+          :style="logoStyle"
+          >
+      </router-link>
+      <div class="item right actions">
+        <search-bar
+          v-if="currentUser || !privateMode"
+          @toggled="onSearchBarToggled"
+          @click.stop.native
+          />
+        <a
+          href="#"
+          class="nav-icon"
+          @click.stop="openSettingsModal"
+          >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="cog"
+            :title="$t('nav.preferences')"
+            />
+        </a>
+        <a
+          v-if="currentUser && currentUser.role === 'admin'"
+          href="/pleroma/admin/#/login-pleroma"
+          class="nav-icon"
+          target="_blank"
+          ><FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="tachometer-alt"
+            :title="$t('nav.administration')"
+            /></a>
+        <a
+          v-if="currentUser"
+          href="#"
+          class="nav-icon"
+          @click.prevent="logout"
+          ><FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+            :title="$t('login.logout')"
+            /></a>
+      </div>
+      </div>
+  </nav>
+</template>
+<script src="./desktop_nav.js"></script>
+
+<style src="./desktop_nav.scss" lang="scss"></style>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d2bc65ab..30b15149 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,55 +1,53 @@
 <template>
-  <div>
+  <div
+    class="MobileNav"
+    >
     <nav
       id="nav"
-      class="nav-bar container"
+      class="mobile-nav"
       :class="{ 'mobile-hidden': isChat }"
+      @click="scrollToTop()"
     >
-      <div
-        class="mobile-inner-nav"
-        @click="scrollToTop()"
-      >
-        <div class="item">
-          <a
-            href="#"
-            class="mobile-nav-button"
-            @click.stop.prevent="toggleMobileSidebar()"
-          >
-            <FAIcon
-              class="fa-scale-110 fa-old-padding"
-              icon="bars"
-            />
-            <div
-              v-if="unreadChatCount"
-              class="alert-dot"
-            />
-          </a>
-          <router-link
-            v-if="!hideSitename"
-            class="site-name"
-            :to="{ name: 'root' }"
-            active-class="home"
-          >
-            {{ sitename }}
-          </router-link>
-        </div>
-        <div class="item right">
-          <a
-            v-if="currentUser"
-            class="mobile-nav-button"
-            href="#"
-            @click.stop.prevent="openMobileNotifications()"
-          >
-            <FAIcon
-              class="fa-scale-110 fa-old-padding"
-              icon="bell"
-            />
-            <div
-              v-if="unseenNotificationsCount"
-              class="alert-dot"
-            />
-          </a>
-        </div>
+      <div class="item">
+        <a
+          href="#"
+          class="mobile-nav-button"
+          @click.stop.prevent="toggleMobileSidebar()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="bars"
+          />
+          <div
+            v-if="unreadChatCount"
+            class="alert-dot"
+          />
+        </a>
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+        >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <div class="item right">
+        <a
+          v-if="currentUser"
+          class="mobile-nav-button"
+          href="#"
+          @click.stop.prevent="openMobileNotifications()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="bell"
+          />
+          <div
+            v-if="unseenNotificationsCount"
+            class="alert-dot"
+          />
+        </a>
       </div>
     </nav>
     <div
@@ -93,100 +91,113 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.mobile-inner-nav {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
+.MobileNav {
+  .mobile-nav {
+    display: grid;
+    line-height: 50px;
+    height: 50px;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto;
+    width: 100%;
+    position: fixed;
+    box-sizing: border-box;
+  }
 
-.mobile-nav-button {
-  text-align: center;
-  margin: 0 1em;
-  position: relative;
-  cursor: pointer;
-}
+  .mobile-inner-nav {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
 
-.alert-dot {
-  border-radius: 100%;
-  height: 8px;
-  width: 8px;
-  position: absolute;
-  left: calc(50% - 4px);
-  top: calc(50% - 4px);
-  margin-left: 6px;
-  margin-top: -6px;
-  background-color: $fallback--cRed;
-  background-color: var(--badgeNotification, $fallback--cRed);
-}
+  .mobile-nav-button {
+    text-align: center;
+    margin: 0 1em;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
 
-.mobile-notifications-drawer {
-  width: 100%;
-  height: 100vh;
-  overflow-x: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  box-shadow: var(--panelShadow);
-  transition-property: transform;
-  transition-duration: 0.25s;
-  transform: translateX(0);
-  z-index: 1001;
-  -webkit-overflow-scrolling: touch;
+  .mobile-notifications-drawer {
+    width: 100%;
+    height: 100vh;
+    overflow-x: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+    transition-property: transform;
+    transition-duration: 0.25s;
+    transform: translateX(0);
+    z-index: 1001;
+    -webkit-overflow-scrolling: touch;
 
-  &.closed {
-    transform: translateX(100%);
+    &.closed {
+      transform: translateX(100%);
+    }
   }
-}
 
-.mobile-notifications-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  position: absolute;
-  color: var(--topBarText);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
-  box-shadow: var(--topBarShadow);
+  .mobile-notifications-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    position: absolute;
+    color: var(--topBarText);
+    background-color: $fallback--fg;
+    background-color: var(--topBar, $fallback--fg);
+    box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+    box-shadow: var(--topBarShadow);
 
-  .title {
-    font-size: 1.3em;
-    margin-left: 0.6em;
+    .title {
+      font-size: 1.3em;
+      margin-left: 0.6em;
+    }
   }
-}
 
-.mobile-notifications {
-  margin-top: 50px;
-  width: 100vw;
-  height: calc(100vh - 50px);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  .mobile-notifications {
+    margin-top: 50px;
+    width: 100vw;
+    height: calc(100vh - 50px);
+    overflow-x: hidden;
+    overflow-y: scroll;
 
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
 
-  .notifications {
-    padding: 0;
-    border-radius: 0;
-    box-shadow: none;
-    .panel {
-      border-radius: 0;
-      margin: 0;
-      box-shadow: none;
-    }
-    .panel:after {
-      border-radius: 0;
-    }
-    .panel .panel-heading {
+    .notifications {
+      padding: 0;
       border-radius: 0;
       box-shadow: none;
+      .panel {
+        border-radius: 0;
+        margin: 0;
+        box-shadow: none;
+      }
+      .panel:after {
+        border-radius: 0;
+      }
+      .panel .panel-heading {
+        border-radius: 0;
+        box-shadow: none;
+      }
     }
   }
 }
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index f1c3fd7a..8d971287 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,46 +1,47 @@
 <template>
-  <div>
-    <div class="search-bar-container">
-      <a
-        v-if="hidden"
-        href="#"
-        class="nav-icon"
-        :title="$t('nav.search')"
+<div
+  class="SearchBar"
+  :class="{ '-expanded': !hidden }"
+  >
+    <a
+      v-if="hidden"
+      href="#"
+      class="nav-icon"
+      :title="$t('nav.search')"
       ><FAIcon
         fixed-width
         class="fa-scale-110 fa-old-padding"
         icon="search"
         @click.prevent.stop="toggleHidden"
-      /></a>
-      <template v-else>
-        <input
-          id="search-bar-input"
-          ref="searchInput"
-          v-model="searchTerm"
-          class="search-bar-input"
-          :placeholder="$t('nav.search')"
-          type="text"
-          @keyup.enter="find(searchTerm)"
+        /></a>
+    <template v-else>
+      <input
+        id="search-bar-input"
+        ref="searchInput"
+        v-model="searchTerm"
+        class="search-bar-input"
+        :placeholder="$t('nav.search')"
+        type="text"
+        @keyup.enter="find(searchTerm)"
         >
-        <button
-          class="btn search-button"
-          @click="find(searchTerm)"
+      <button
+        class="btn search-button"
+        @click="find(searchTerm)"
         >
-          <FAIcon
-            fixed-width
-            icon="search"
+        <FAIcon
+          fixed-width
+          icon="search"
           />
-        </button>
-        <span>
-          <FAIcon
-            fixed-width
-            icon="times"
-            class="cancel-icon fa-scale-110 fa-old-padding"
-            @click.prevent.stop="toggleHidden"
+      </button>
+      <span>
+        <FAIcon
+          fixed-width
+          icon="times"
+          class="cancel-icon fa-scale-110 fa-old-padding"
+          @click.prevent.stop="toggleHidden"
           />
-        </span>
-      </template>
-    </div>
+      </span>
+    </template>
   </div>
 </template>
 
@@ -49,21 +50,23 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.search-bar-container {
-  max-width: 100%;
+.SearchBar {
   display: inline-flex;
   align-items: baseline;
   vertical-align: baseline;
   justify-content: flex-end;
 
+  &.-expanded {
+    width: 100%;
+  }
+
   .search-bar-input,
   .search-button {
     height: 29px;
   }
 
   .search-bar-input {
-    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
-    max-width: calc(100% - 30px - 30px - 20px);
+    flex: 1 0 auto;
   }
 
   .cancel-icon {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index b3cbffc6..0c35f5d6 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -30,6 +30,7 @@ const defaultState = {
   logo: '/static/logo.png',
   logoMargin: '.2em',
   logoMask: true,
+  logoLeft: false,
   minimalScopesMode: false,
   nsfwCensorImage: undefined,
   postContentType: 'text/plain',
diff --git a/static/config.json b/static/config.json
index 0030f78f..4b70aea5 100644
--- a/static/config.json
+++ b/static/config.json
@@ -13,6 +13,7 @@
   "logo": "/static/logo.png",
   "logoMargin": ".1em",
   "logoMask": true,
+  "logoLeft": false,
   "minimalScopesMode": false,
   "nsfwCensorImage": "",
   "postContentType": "text/plain",
-- 
cgit v1.2.3-70-g09d2


From 8b1213ea1e75a2d0f824cc71992d4867a4ea0bb5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 1 Nov 2020 16:44:57 +0200
Subject: lint

---
 src/App.js                                         |  2 +-
 src/components/desktop_nav/desktop_nav.js          |  4 +--
 src/components/desktop_nav/desktop_nav.vue         | 42 +++++++++++-----------
 src/components/mobile_nav/mobile_nav.vue           |  2 +-
 .../post_status_form/post_status_form.vue          |  3 +-
 src/components/react_button/react_button.vue       |  2 +-
 src/components/search_bar/search_bar.vue           | 26 +++++++-------
 7 files changed, 41 insertions(+), 40 deletions(-)

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

diff --git a/src/App.js b/src/App.js
index 4871b4ac..52700319 100644
--- a/src/App.js
+++ b/src/App.js
@@ -37,7 +37,7 @@ export default {
     GlobalNoticeList
   },
   data: () => ({
-    mobileActivePanel: 'timeline',
+    mobileActivePanel: 'timeline'
   }),
   created () {
     // Load the locale from the storage
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index ee99ec10..e048f53d 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -69,7 +69,7 @@ export default {
     hideSitename () { return this.$store.state.instance.hideSitename },
     logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private },
+    privateMode () { return this.$store.state.instance.private }
   },
   methods: {
     scrollToTop () {
@@ -84,6 +84,6 @@ export default {
     },
     openSettingsModal () {
       this.$store.dispatch('openSettingsModal')
-    },
+    }
   }
 }
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index d166be08..3a6e4033 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -4,7 +4,7 @@
     class="DesktopNav"
     :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
-    >
+  >
     <div class="inner-nav">
       <div class="item sitename">
         <router-link
@@ -12,7 +12,7 @@
           class="site-name"
           :to="{ name: 'root' }"
           active-class="home"
-          >
+        >
           {{ sitename }}
         </router-link>
       </div>
@@ -20,58 +20,58 @@
         class="logo"
         :to="{ name: 'root' }"
         :style="logoBgStyle"
-        >
+      >
         <div
           class="mask"
           :style="logoMaskStyle"
-          />
+        />
         <img
           :src="logo"
           :style="logoStyle"
-          >
+        >
       </router-link>
       <div class="item right actions">
         <search-bar
           v-if="currentUser || !privateMode"
           @toggled="onSearchBarToggled"
           @click.stop.native
-          />
+        />
         <a
           href="#"
           class="nav-icon"
           @click.stop="openSettingsModal"
-          >
+        >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="cog"
             :title="$t('nav.preferences')"
-            />
+          />
         </a>
         <a
           v-if="currentUser && currentUser.role === 'admin'"
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
-          ><FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="tachometer-alt"
-            :title="$t('nav.administration')"
-            /></a>
+        ><FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding"
+          icon="tachometer-alt"
+          :title="$t('nav.administration')"
+        /></a>
         <a
           v-if="currentUser"
           href="#"
           class="nav-icon"
           @click.prevent="logout"
-          ><FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="sign-out-alt"
-            :title="$t('login.logout')"
-            /></a>
-      </div>
+        ><FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding"
+          icon="sign-out-alt"
+          :title="$t('login.logout')"
+        /></a>
       </div>
+    </div>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 30b15149..6651fc8e 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="MobileNav"
-    >
+  >
     <nav
       id="nav"
       class="mobile-nav"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 55cd706e..2b57ea19 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -87,7 +87,8 @@
           </a>
           <div
             v-show="previewLoading"
-            class="preview-spinner">
+            class="preview-spinner"
+          >
             <FAIcon
               class="fa-old-padding"
               spin
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index fa862484..95d95b11 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -11,8 +11,8 @@
     >
       <div class="reaction-picker-filter">
         <input
-          size="1"
           v-model="filterWord"
+          size="1"
           :placeholder="$t('emoji.search_emoji')"
         >
       </div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 8d971287..89a601c8 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,19 +1,19 @@
 <template>
-<div
-  class="SearchBar"
-  :class="{ '-expanded': !hidden }"
+  <div
+    class="SearchBar"
+    :class="{ '-expanded': !hidden }"
   >
     <a
       v-if="hidden"
       href="#"
       class="nav-icon"
       :title="$t('nav.search')"
-      ><FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        icon="search"
-        @click.prevent.stop="toggleHidden"
-        /></a>
+    ><FAIcon
+      fixed-width
+      class="fa-scale-110 fa-old-padding"
+      icon="search"
+      @click.prevent.stop="toggleHidden"
+    /></a>
     <template v-else>
       <input
         id="search-bar-input"
@@ -23,15 +23,15 @@
         :placeholder="$t('nav.search')"
         type="text"
         @keyup.enter="find(searchTerm)"
-        >
+      >
       <button
         class="btn search-button"
         @click="find(searchTerm)"
-        >
+      >
         <FAIcon
           fixed-width
           icon="search"
-          />
+        />
       </button>
       <span>
         <FAIcon
@@ -39,7 +39,7 @@
           icon="times"
           class="cancel-icon fa-scale-110 fa-old-padding"
           @click.prevent.stop="toggleHidden"
-          />
+        />
       </span>
     </template>
   </div>
-- 
cgit v1.2.3-70-g09d2

