more FA5 stuff with small related refactoring

2020-10-19 22:35:46 +03:00 · 2020-10-19 22:35:46 +03:00 · 8b3a7ae8c0
commit 8b3a7ae8c0
parent 3814218277
30 changed files with 221 additions and 101 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -106,7 +106,8 @@ button {
    color: var(--btnPressedText, $fallback--text);
    background-color: $fallback--fg;
    background-color: var(--btnPressed, $fallback--fg);
-    i {
+
+    svg, i {
      color: $fallback--text;
      color: var(--btnPressedText, $fallback--text);
    }
@ -118,7 +119,8 @@ button {
    color: var(--btnDisabledText, $fallback--text);
    background-color: $fallback--fg;
    background-color: var(--btnDisabled, $fallback--fg);
-    i {
+
+    svg, i {
      color: $fallback--text;
      color: var(--btnDisabledText, $fallback--text);
    }
@ -131,7 +133,8 @@ button {
    background-color: var(--btnToggled, $fallback--fg);
    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
    box-shadow: var(--buttonPressedShadow);
-    i {
+
+    svg, i {
      color: $fallback--text;
      color: var(--btnToggledText, $fallback--text);
    }
@ -808,7 +811,6 @@ nav {
 }

 .button-icon {
-  &i,
  &.svg-inline--fa.fa-lg {
    display: inline-block;
    padding: 0 0.3em;
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@ -1,4 +1,10 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn
+)

 const chatPanel = {
  props: [ 'floating' ],
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@ -63,7 +63,7 @@
        @click.stop.prevent="togglePanel"
      >
        <div class="title">
-          <i class="icon-megaphone" />
+          <FAIcon icon="bullhorn" />
          {{ $t('shoutbox.title') }}
        </div>
      </div>
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@ -1,3 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const Exporter = {
  props: {
    getContent: {
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@ -1,7 +1,8 @@
 <template>
  <div class="exporter">
    <div v-if="processing">
-      <i class="icon-spin4 animate-spin exporter-processing" />
+      <FAIcon icon="circle-notch" size="lg" spin />
+
      <span>{{ processingMessage }}</span>
    </div>
    <button
@ -19,7 +20,6 @@
 <style lang="scss">
 .exporter {
  &-processing {
-    font-size: 1.5em;
    margin: 0.25em;
  }
 }
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@ -1,8 +1,24 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import {
+  faEllipsisH,
+  faBookmark,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookmark as faBookmarkReg,
+} from '@fortawesome/free-regular-svg-icons'

-library.add(faEllipsisH)
+library.add(
+  faEllipsisH,
+  faBookmark,
+  faBookmarkReg,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+)

 const ExtraButtons = {
  props: [ 'status' ],
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@ -15,14 +15,14 @@
          class="dropdown-item dropdown-item-icon"
          @click.prevent="muteConversation"
        >
-          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
        </button>
        <button
          v-if="canMute && status.thread_muted"
          class="dropdown-item dropdown-item-icon"
          @click.prevent="unmuteConversation"
        >
-          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
        </button>
        <button
          v-if="!status.pinned && canPin"
@ -30,7 +30,7 @@
          @click.prevent="pinStatus"
          @click="close"
        >
-          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
        </button>
        <button
          v-if="status.pinned && canPin"
@ -38,7 +38,7 @@
          @click.prevent="unpinStatus"
          @click="close"
        >
-          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
        </button>
        <button
          v-if="!status.bookmarked"
@ -46,7 +46,7 @@
          @click.prevent="bookmarkStatus"
          @click="close"
        >
-          <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
        </button>
        <button
          v-if="status.bookmarked"
@ -54,7 +54,7 @@
          @click.prevent="unbookmarkStatus"
          @click="close"
        >
-          <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
        </button>
        <button
          v-if="canDelete"
@ -62,23 +62,24 @@
          @click.prevent="deleteStatus"
          @click="close"
        >
-          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
        </button>
        <button
          class="dropdown-item dropdown-item-icon"
          @click.prevent="copyLink"
          @click="close"
        >
-          <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
        </button>
      </div>
    </div>
-    <FAIcon
-      slot="trigger"
-      class="button-icon"
-      icon="ellipsis-h"
-      size="lg"
-    />
+    <span slot="trigger">
+      <FAIcon
+        class="ExtraButtons button-icon"
+        icon="ellipsis-h"
+        size="md"
+      />
+    </span>
  </Popover>
 </template>

@ -87,8 +88,9 @@
 <style lang="scss">
@import '../../_variables.scss';

-.icon-ellipsis {
+.ExtraButtons {
  cursor: pointer;
+  position: static;

  &:hover,
  .extra-button-popover.open & {
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -9,8 +9,9 @@
    >
      <FAIcon
        v-if="uploading"
-        class="progress-icon animate-spin"
+        class="progress-icon"
        icon="circle-notch"
+        spin
      />
      <FAIcon
        v-if="!uploading"
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faEyeSlash,
+  faUser,
+  faSuitcaseRolling
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faUser,
+  faEyeSlash,
+  faSuitcaseRolling
+)

 const Notification = {
  data () {
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
  &.-muted {
@ -49,4 +51,34 @@
      display: block;
    }
  }
+
+  .type-icon {
+    margin: 0 0.1em;
+  }
+
+  &.-type--repeat .type-icon {
+    color: $fallback--cGreen;
+    color: var(--cGreen, $fallback--cGreen);
+  }
+
+  &.-type--follow .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--follow-request .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--like .type-icon {
+    color: orange;
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+
+  &.-type--move .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
 }
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -1,5 +1,5 @@
 <template>
-  <status
+  <Status
    v-if="notification.type === 'mention'"
    :compact="true"
    :statusoid="notification.status"
@ -18,12 +18,12 @@
        href="#"
        class="unmute"
        @click.prevent="toggleMute"
-      ><i class="button-icon icon-eye-off" /></a>
+      ><FAIcon class="button-icon" icon="eye-slash" /></a>
    </div>
    <div
      v-else
-      class="non-mention"
-      :class="[userClass, { highlighted: userStyle }]"
+      class="Notification non-mention"
+      :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
      :style="[ userStyle ]"
    >
      <a
@ -60,26 +60,26 @@
              :title="'@'+notification.from_profile.screen_name"
            >{{ notification.from_profile.name }}</span>
            <span v-if="notification.type === 'like'">
-              <i class="fa icon-star lit" />
+              <FAIcon class="type-icon" icon="star" />
              <small>{{ $t('notifications.favorited_you') }}</small>
            </span>
            <span v-if="notification.type === 'repeat'">
-              <i
-                class="fa icon-retweet lit"
+              <FAIcon
+                class="type-icon" icon="retweet"
                :title="$t('tool_tip.repeat')"
              />
              <small>{{ $t('notifications.repeated_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow'">
-              <i class="fa icon-user-plus lit" />
+              <FAIcon class="type-icon" icon="user-plus" />
              <small>{{ $t('notifications.followed_you') }}</small>
            </span>
            <span v-if="notification.type === 'follow_request'">
-              <i class="fa icon-user lit" />
+              <FAIcon class="type-icon" icon="user" />
              <small>{{ $t('notifications.follow_request') }}</small>
            </span>
            <span v-if="notification.type === 'move'">
-              <i class="fa icon-arrow-curved lit" />
+              <FAIcon class="type-icon" icon="suitcase-rolling" />
              <small>{{ $t('notifications.migrated_to') }}</small>
            </span>
            <span v-if="notification.type === 'pleroma:emoji_reaction'">
@ -120,7 +120,7 @@
            v-if="needMute"
            href="#"
            @click.prevent="toggleMute"
-          ><i class="button-icon icon-eye-off" /></a>
+          ><FAIcon class="button-icon" icon="eye-slash" /></a>
        </span>
        <div
          v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@ -136,13 +136,15 @@
            v-if="notification.type === 'follow_request'"
            style="white-space: nowrap;"
          >
-            <i
-              class="icon-ok button-icon follow-request-accept"
+            <FAIcon
+              icon="check"
+              class="button-icon follow-request-accept"
              :title="$t('tool_tip.accept_follow_request')"
              @click="approveUser()"
            />
-            <i
-              class="icon-cancel button-icon follow-request-reject"
+            <FAIcon
+              icon="times"
+              class="button-icon follow-request-reject"
              :title="$t('tool_tip.reject_follow_request')"
              @click="denyUser()"
            />
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@ -6,6 +6,12 @@ import {
  filteredNotificationsFromStore,
  unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -158,37 +158,6 @@
      margin-right: .2em;
    }

-    .icon-retweet.lit {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
-    }
-
-    .icon-user.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-user-plus.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-reply.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-star.lit {
-      color: orange;
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
-    }
-
-    .icon-arrow-curved.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
    .status-content {
      margin: 0;
      max-height: 300px;
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -61,7 +61,7 @@
          v-else
          class="new-status-notification text-center panel-footer"
        >
-          <i class="icon-spin3 animate-spin" />
+          <FAIcon icon="circle-notch" spin size="lg"/>
        </div>
      </div>
    </div>
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@ -1,12 +1,21 @@
 <template>
  <div class="panel-loading">
    <span class="loading-text">
-      <i class="icon-spin4 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="3x"/>
      {{ $t('general.loading') }}
    </span>
  </div>
 </template>

+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+</script>
+
 <style lang="scss">
@import 'src/_variables.scss';

@ -18,8 +27,7 @@
  font-size: 2em;
  color: $fallback--text;
  color: var(--text, $fallback--text);
-  .loading-text i {
-    font-size: 3em;
+  .loading-text svg {
    line-height: 0;
    vertical-align: middle;
    color: $fallback--text;
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@ -27,7 +27,7 @@

 <script src="./popover.js" />

-<style lang=scss>
+<style lang="scss">
@import '../../_variables.scss';

 .popover {
@ -96,7 +96,7 @@
    &-icon {
      padding-left: 0.5rem;

-      i {
+      svg {
        margin-right: 0.25rem;
        color: var(--menuPopoverIcon, $fallback--icon)
      }
@ -111,7 +111,7 @@
      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      i {
+      svg {
        color: var(--selectedMenuPopoverIcon, $fallback--icon);
      }
    }
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faEnvelope,
  faLock,
-  faLockOpen,
+  faUnlock,
  faGlobeEurope
 } from '@fortawesome/free-solid-svg-icons'

@ -10,7 +10,7 @@ library.add(
  faEnvelope,
  faGlobeEurope,
  faLock,
-  faLockOpen
+  faUnlock
 )

 const ScopeSelector = {
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@ -28,7 +28,7 @@
      :title="$t('post_status.scope.unlisted')"
      @click="changeVis('unlisted')"
      >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+      <FAIcon icon="unlock" class="button-icon" size="lg" />
    </span>
    <span
      v-if="showPublic"
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@ -2,6 +2,12 @@ import FollowCard from '../follow_card/follow_card.vue'
 import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import map from 'lodash/map'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 const Search = {
  components: {
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@ -24,7 +24,7 @@
      v-if="loading"
      class="text-center loading-icon"
    >
-      <i class="icon-spin3 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="lg"/>
    </div>
    <div v-else-if="loaded">
      <div class="search-nav-heading">
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faEnvelope,
  faLock,
-  faLockOpen,
+  faUnlock,
  faGlobeEurope,
  faTimes,
  faRetweet,
@ -35,22 +35,18 @@ import {
  faEye,
  faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'

 library.add(
  faEnvelope,
  faGlobeEurope,
  faLock,
-  faLockOpen,
+  faUnlock,
  faTimes,
  faRetweet,
  faReply,
  faExternalLinkSquareAlt,
  faPlusSquare,
  faStar,
-  faStarRegular,
  faSmileBeam,
  faEllipsisH,
  faEyeSlash,
@ -270,7 +266,7 @@ const Status = {
        case 'private':
          return 'lock'
        case 'unlisted':
-          return 'lock-open'
+          return 'unlock'
        case 'direct':
          return 'envelope'
        default:
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@ -1,4 +1,10 @@
 import { find } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 const StatusPopover = {
  name: 'StatusPopover',
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@ -27,7 +27,7 @@
        v-else
        class="status-preview-no-content"
      >
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="2x"/>
      </div>
    </div>
  </Popover>
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -3,6 +3,12 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import { throttle, keyBy } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
  const ids = []
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -92,7 +92,7 @@
        v-else
        class="new-status-notification text-center panel-footer"
      >
-        <i class="icon-spin3 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="lg"/>
      </div>
    </div>
  </div>
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@ -6,6 +6,22 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBell,
+  faRss,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faRss,
+  faBell,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+)

 export default {
  props: [
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -21,7 +21,7 @@
              :user="user"
            />
            <div class="user-info-avatar-link-overlay">
-              <i class="button-icon icon-zoom-in" />
+              <FAIcon class="button-icon" icon="search-plus" size="lg" />
            </div>
          </a>
          <router-link
@ -55,7 +55,7 @@
                :href="user.statusnet_profile_url"
                target="_blank"
              >
-                <i class="icon-link-ext usersettings" />
+                <FAIcon class="usersettings" icon="external-link-alt" />
              </a>
              <AccountActions
                v-if="isOtherUser && loggedIn"
@ -85,7 +85,9 @@
                  bot
                </span>
              </template>
-              <span v-if="user.locked"><i class="icon icon-lock" /></span>
+              <span v-if="user.locked">
+               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+              </span>
              <span
                v-if="!mergedConfig.hideUserStats && !hideBio"
                class="dailyAvg"
@ -133,7 +135,7 @@
                <option value="striped">Striped bg</option>
                <option value="side">Side stripe</option>
              </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
            </label>
          </div>
        </div>
@ -150,7 +152,7 @@
                :click="subscribeUser"
                :title="$t('user_card.subscribe')"
              >
-                <i class="icon-bell-alt" />
+                <FAIcon icon="bell" />
              </ProgressButton>
              <ProgressButton
                v-else
@ -158,7 +160,11 @@
                :click="unsubscribeUser"
                :title="$t('user_card.unsubscribe')"
              >
-                <i class="icon-bell-ringing-o" />
+                <FALayers>
+                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
+                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon icon="bell" />
+                </FALayers>
              </ProgressButton>
            </template>
          </div>
@ -388,7 +394,7 @@
      opacity: 0;
      transition: opacity .2s ease;

-      i {
+      svg {
        color: #FFF;
      }
    }
@ -447,6 +453,10 @@
    font-weight: light;
    font-size: 15px;

+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
    .user-screen-name {
      min-width: 1px;
      flex: 0 1 auto;
@ -508,7 +518,7 @@
        padding-bottom: 0;
        flex: 1 0 auto;
      }
-      .userHighlightSel.select i {
+      .userHighlightSel.select svg {
        line-height: 22px;
      }

--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@ -1,3 +1,9 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)

 const UserListPopover = {
  name: 'UserListPopover',
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@ -31,7 +31,7 @@
        </div>
      </div>
      <div v-else>
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="3x"/>
      </div>
    </div>
  </Popover>
--- a/src/main.js
+++ b/src/main.js
@ -33,7 +33,7 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'

-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'

 import afterStoreSetup from './boot/after_store.js'

@ -48,6 +48,7 @@ Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)

 Vue.component('FAIcon', FontAwesomeIcon)
+Vue.component('FALayers', FontAwesomeLayers)

 const i18n = new VueI18n({
  // By default, use the browser locale, we will update it if neccessary