lint

2020-10-21 00:31:16 +03:00 · 2020-10-21 00:31:16 +03:00 · f561e75553
commit f561e75553
parent 1ec41302f7
41 changed files with 497 additions and 140 deletions
--- 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>
@ -66,7 +67,8 @@
          ><FAIcon
            fixed-width
            size="lg"
-             class="button-icon" icon="tachometer-alt"
+            class="button-icon"
+            icon="tachometer-alt"
            :title="$t('nav.administration')"
          /></a>
          <a
@ -77,7 +79,8 @@
          ><FAIcon
            fixed-width
            size="lg"
-             class="button-icon" icon="sign-out-alt"
+            class="button-icon"
+            icon="sign-out-alt"
            :title="$t('login.logout')"
          /></a>
        </div>
--- 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>
--- 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>

--- 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
--- 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"
--- 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>
--- 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>
--- 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>
--- 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(
--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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'"
--- 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>
--- 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>
--- 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>
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -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
@ -299,7 +302,8 @@
          class="media-upload-wrapper"
        >
          <FAIcon
-            class="button-icon" icon="times"
+            class="button-icon"
+            icon="times"
            @click="removeMediaFile(file)"
          />
          <attachment
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@ -10,16 +10,24 @@
      :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"
@ -28,7 +36,11 @@
      :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"
@ -37,7 +49,11 @@
      :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>
--- 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">
--- 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>
--- 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>
--- 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"
        />
--- 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>
--- 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">
--- 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
--- 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>
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -52,7 +52,11 @@
          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
@ -178,7 +185,11 @@
                  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>
@ -358,7 +381,6 @@
              @onSuccess="clearError"
            />
          </div>
-
        </div>
      </div>
      <div
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>