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