diff --git a/src/App.scss b/src/App.scss
index 10969abbecaaa7a1820073fb9e619da0a0d4395c..126a3297fa85efb53980cb945045e695a9435cc8 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 6d345bc7aafc577888840941ae66ce7c4eddadc5..395d6685e11bd3b2085441b625d42ff012a0e900 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 987e94b7419dce2d42840a6d19104a800ae3cc80..61099d4f3828831ba5e865cc54a3b90c380d77de 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 1630ba802e7296596dfe0205c88a346f04ff95f9..083f850ff232104e7e202c2da0a8879d1e6397b5 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 012a1b1d7943d1817d5c88d158643ee3514a0add..b7b0d3777ef9c1c9c14e54138bb5c8ac3b478e0d 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 0d44c920651cb56dd910069bb92ec5a1c6bd9960..0670f1acc33ff5e3a1194df5336ae169e11b5049 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 4ad993e31f366995c1d3783c9cfaae6212d617c1..bb380f87fc2d5ad7e6b1c5cb2796e712f5effa7c 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 7d4ff60cfc8864cff5f3fc63044b22954ec8813c..53ca7ccec6950dceb2ddcf505f49bd8c6ef4530a 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 7973e5ef9fb416c388542d9e4ebb094ae98bdba9..d5b8bb9e5e705238f21facc0f85877fa0413ff5f 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 d023efc078f6ccdc1d8ba2e3553fc63c5db7d24e..71585995afdab96c02940c621c2ba486a8ccfb1b 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 113054443d179b1fb22dad83a45661dc9d778075..716172b0550a6b27909ca24db703ed73fe48ae1d 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 3333dbf9e041a92a9e5c104906dc99be1a587c2c..95eebe6ba7945588a5fb12afda50817669e104e1 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 24764e800f576fb00b3211cdbd9e047464aad85c..e7384c93b3f683c89b10a6b550ed70d3e0b99b97 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 469316678c421e03e412f24e763fc5ed6a0cd17c..cbcfc6d2885b0387bacc3ff7178cbff29f02b5e3 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 bd32b2661e416c6485eb4f39f2b16b0f973409e4..9e736cfb7b17bf01a48a210cbfd1f78e5ba7e1a8 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 e5664dc592f367a6020a476f343255897b56f74f..4d91af77d759127975cbacb314d89a030cd9035d 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 6348277b053e28391d4eb5c352d4768a3f2d4374..366ea89c23ca6edd3ac099f05182e3e0f7d97fef 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 9cf45de39f2384f6a7f242f1ff8eb31772956465..50529878d13e064ce17b3e5a835bcdda4ceb45c9 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 3eb92fc1a3244d7b1f13528a2fedea7bde5a177d..b62bc2c50ec84b1f6b7d40b7e5caef0c4c4d1c09 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 a6677e4b1e05b4317a895ee0093cde54fa13dc4c..d32f48d9e617d523de072802f297b21d043e6c41 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 3699e26286ae4be38027fbc1e9af7c753fd9a731..7ae8b21b6c9556524fc01d47425a7fe8ba2138f8 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 6a08ebe5ab325480e21a23326fc86902a1260ed4..ecc0febf5ccaaeebbae598a28828ec71e63b14c6 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 a3fef1cf31c3f1a3fde6fa7472c6938f68a59820..f066234c846abd05d5dbafa397714bc3e58877c6 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 a39d70716f092a7abdc3d426e271b9b7bb307df5..df592a109432f642db74c11855bb8f9186266803 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 9fc1470e8db3961d6a34a78e682b45b699c7f1d6..2ab6b314ae10d6d30e7ccbeacee004d430d369ca 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 37e829bb06f69aacaaebf9a9683be33e46223701..220372188418c7774b2b68ddbd21c455112555aa 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 df54551c958f74b0a79bc13519025bd124cbc6c6..7013b65df57f2b4758936b5c966bfe5fb4b7bcf3 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 281052e5239301078fa47f9730a0d377cbba298b..fe73616808744b5bc889770f362f0f6bc324d6fb 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 eda5a68c2bd4ed8556379ff32676b7a45cd6e65a..fbdb2441868af6564d6ba063653ad5c70d8b9f06 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 cfdeaa1724defe411f8bb4a452734954a6c78b2c..4f7df789d360e315fa72251892c65320ca866a81 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 6142f5138f6eb2bf57b11f1e1580282cadd736ee..afb51a0f6db968b871d201a6f579b49a140d95a4 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 1775adcb43236ffd3669fba829c62d9fbe533481..b1244276683dd5c88b025ceb13831eefc5451750 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>
)