diff --git a/src/App.scss b/src/App.scss
index 126a3297fa85efb53980cb945045e695a9435cc8..06915e16b26992fc771849ae6d32f731cc6efbe9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -188,7 +188,7 @@ input, textarea, .select, .input {
opacity: 0.5;
}
- .icon-down-open {
+ .select-down-icon {
position: absolute;
top: 0;
bottom: 0;
@@ -368,7 +368,9 @@ i[class*=icon-], .svg-inline--fa {
flex-wrap: wrap;
.nav-icon {
- margin-left: 0.4em;
+ margin-left: 0.2em;
+ width: 2em;
+ text-align: center;
}
&.right {
diff --git a/src/App.vue b/src/App.vue
index 0276c6a60c8aa2429bdd98cc4595b2d22f5d3149..5efaf7176d7e3715d192acf6a47df34d0c68a60a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,36 +42,42 @@
<div class="item right">
<search-bar
v-if="currentUser || !privateMode"
- class="nav-icon mobile-hidden"
+ class="mobile-hidden"
@toggled="onSearchBarToggled"
@click.stop.native
/>
<a
href="#"
- class="mobile-hidden"
+ class="mobile-hidden nav-icon"
@click.stop="openSettingsModal"
>
- <i
- class="button-icon icon-cog nav-icon"
+ <FAIcon
+ fixed-width
+ size="lg"
+ class="button-icon" icon="cog"
:title="$t('nav.preferences')"
/>
</a>
<a
v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma"
- class="mobile-hidden"
+ class="mobile-hidden nav-icon"
target="_blank"
- ><i
- class="button-icon icon-gauge nav-icon"
+ ><FAIcon
+ fixed-width
+ size="lg"
+ class="button-icon" icon="tachometer-alt"
:title="$t('nav.administration')"
/></a>
<a
v-if="currentUser"
href="#"
- class="mobile-hidden"
+ class="mobile-hidden nav-icon"
@click.prevent="logout"
- ><i
- class="button-icon icon-logout nav-icon"
+ ><FAIcon
+ fixed-width
+ size="lg"
+ class="button-icon" icon="sign-out-alt"
:title="$t('login.logout')"
/></a>
</div>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 40aed190e9b855b4a95c3d074cf30d2ddf2992d2..6070ab226d6defaf56644af39b5335c3d015eba4 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
<input
v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 2a3d4cbb861a0292a6189074f242ba6c94701820..76bdcdfe07dd8cf9c0dc7ab020510f8d897dfd03 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
{{ languageNames[i] }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
</template>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 3a8a2f425587ac6c715617f904369f2b09ed09f4..8c4ada8924546fb5f81ad81569a7f07b72bfd3af 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -56,7 +56,7 @@
<option value="single">{{ $t('polls.single_choice') }}</option>
<option value="multiple">{{ $t('polls.multiple_choices') }}</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down"/>
+ <FAIcon class="select-down-icon" icon="chevron-down"/>
</label>
</div>
<div
@@ -84,7 +84,7 @@
{{ $t(`time.${unit}_short`, ['']) }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down"/>
+ <FAIcon class="select-down-icon" icon="chevron-down"/>
</label>
</div>
</div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7f7ac72f180b144b293ec6f10128a7c2682db717..817b2fa015533699d09f282b8a666348a9e4288e 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -199,7 +199,7 @@
{{ $t(`post_status.content_type["${postFormat}"]`) }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down"/>
+ <FAIcon class="select-down-icon" icon="chevron-down"/>
</label>
</div>
<div
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 7ae8b21b6c9556524fc01d47425a7fe8ba2138f8..551649c7040cdd876843c31ff00152ad91ad3afc 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -13,8 +13,7 @@ const SearchBar = {
data: () => ({
searchTerm: undefined,
hidden: true,
- error: false,
- loading: false
+ error: false
}),
watch: {
'$route': function (route) {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index ecc0febf5ccaaeebbae598a28828ec71e63b14c6..fbbbbfe0cbfe2def4f664885641c911cb7fa0abc 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,17 +1,17 @@
<template>
<div>
<div class="search-bar-container">
- <i
- v-if="loading"
- class="icon-spin4 finder-icon animate-spin-slow"
- />
<a
v-if="hidden"
href="#"
+ class="nav-icon"
:title="$t('nav.search')"
- ><i
- class="button-icon icon-search"
- @click.prevent.stop="toggleHidden"
+ ><FAIcon
+ fixed-width
+ size="lg"
+ class="button-icon"
+ icon="search"
+ @click.prevent.stop="toggleHidden"
/></a>
<template v-else>
<input
@@ -27,12 +27,20 @@
class="btn search-button"
@click="find(searchTerm)"
>
- <FAIcon icon="search" />
+ <FAIcon
+ fixed-width
+ icon="search"
+ />
</button>
- <FAIcon
- class="button-icon" icon="times"
- @click.prevent.stop="toggleHidden"
- />
+ <span>
+ <FAIcon
+ size="lg"
+ fixed-width
+ icon="times"
+ class="cancel-icon"
+ @click.prevent.stop="toggleHidden"
+ />
+ </span>
</template>
</div>
</div>
@@ -60,13 +68,10 @@
max-width: calc(100% - 30px - 30px - 20px);
}
- .search-button {
- margin-left: .5em;
- margin-right: .5em;
- }
-
- .icon-cancel {
+ .cancel-icon {
cursor: pointer;
+ color: $fallback--text;
+ color: var(--btnTopBarText, $fallback--text);
}
}
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index ef1a5ffa02c89792dee0adcc67b29e72ba878b70..9dcf1b5ac39fe3a3a8d4a5d68a2a2d5d8c18539c 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
import VersionTab from './tabs/version_tab.vue'
import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faWrench,
+ faUser,
+ faFilter,
+ faPaintBrush,
+ faBell,
+ faDownload,
+ faEyeSlash,
+ faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faWrench,
+ faUser,
+ faFilter,
+ faPaintBrush,
+ faBell,
+ faDownload,
+ faEyeSlash,
+ faInfo
+)
+
const SettingsModalContent = {
components: {
TabSwitcher,
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index bc30a0ff7d60b5f69f756f3c8726d057e9daf9a0..c9ed2a3824a101ecaab975aba0a935e43fec3ee4 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -37,7 +37,7 @@
</div>
<div
:label="$t('settings.theme')"
- icon="brush"
+ icon="paint-brush"
data-tab-name="theme"
>
<ThemeTab />
@@ -45,7 +45,7 @@
<div
v-if="isLoggedIn"
:label="$t('settings.notifications')"
- icon="bell-ringing-o"
+ icon="bell"
data-tab-name="notifications"
>
<NotificationsTab />
@@ -62,14 +62,14 @@
v-if="isLoggedIn"
:label="$t('settings.mutes_and_blocks')"
:fullHeight="true"
- icon="eye-off"
+ icon="eye-slash"
data-tab-name="mutesAndBlocks"
>
<MutesAndBlocksTab />
</div>
<div
:label="$t('settings.version.title')"
- icon="info-circled"
+ icon="info"
data-tab-name="version"
>
<VersionTab />
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 786f3618da903d590a63cea27bb73d0cdceb2453..ff1a129b0eb85ada1d6a7ab1418187e390b323fa 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
<option value="following">{{ $t('settings.reply_visibility_following') }}</option>
<option value="self">{{ $t('settings.reply_visibility_self') }}</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
<div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2ab6b314ae10d6d30e7ccbeacee004d430d369ca..99d3a0dcf5cd4cfaa4e122010c3bed8c55367d3c 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
</li>
@@ -127,7 +127,7 @@
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
</li>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index c8cb2665d7068fa3353ddfa0f777f96c86b63284..65863c540c3b0ec69623a2b00cba10cf666af6f1 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -39,19 +39,23 @@
</i18n>
<div class="icons">
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cBlue)"
- class="button-icon icon-reply"
+ class="button-icon" icon="reply"
/>
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cGreen)"
- class="button-icon icon-retweet"
+ class="button-icon" icon="retweet"
/>
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cOrange)"
- class="button-icon icon-star"
+ class="button-icon" icon="star"
/>
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cRed)"
class="button-icon" icon="times"
/>
@@ -106,11 +110,17 @@
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
- faTimes
+ faTimes,
+ faStar,
+ faRetweet,
+ faReply
} from '@fortawesome/free-solid-svg-icons'
library.add(
- faTimes
+ faTimes,
+ faStar,
+ faRetweet,
+ faReply
)
</script>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index fb8b16ae7b49cc1e7c28eb8c1f0586f225ebf88d..9cc1c39215638a23b3376e2e4a600b3418ddc7b5 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
{{ style[0] || style.name }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
</template>
@@ -907,7 +907,7 @@
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
<div class="override">
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 1f63f3f29e119c1408fca4879b4cbb99cc89351d..32220ae849ae9a08de5ebe62bcdf792b8ad849a6 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,7 +78,7 @@
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option>
</select>
- <FAIcon icon="chevron-down" class="icon-down-open" />
+ <FAIcon icon="chevron-down" class="select-down-icon" />
</label>
<button
class="btn btn-default"
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 9c1da354510de0eefa4f4a310e8eab3aa05120e8..6e6e81930265a690a2be8370ea6e1cf3c55c0ffa 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -1,5 +1,6 @@
import Vue from 'vue'
import { mapState } from 'vuex'
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import './tab_switcher.scss'
@@ -107,7 +108,7 @@ export default Vue.component('tab-switcher', {
class={classesTab.join(' ')}
type="button"
>
- {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
+ {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)}
<span class="text">
{slot.data.attrs.label}
</span>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d2ef48570223862b6f4fb4cb4dc10bd31861ad24..cd8fff6f26d755b66bc216fea1a8f1f7fa37aa68 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -4,7 +4,8 @@
display: flex;
.tab-icon {
- font-size: 2em;
+ width: 100%;
+ margin: 0.2em 0;
display: block;
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4f7df789d360e315fa72251892c65320ca866a81..6c35c781a33ee4fa064306656375cd6f8774c64e 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -136,7 +136,7 @@
<option value="striped">Striped bg</option>
<option value="side">Side stripe</option>
</select>
- <FAIcon class="icon-down-open" icon="chevron-down" />
+ <FAIcon class="select-down-icon" icon="chevron-down" />
</label>
</div>
</div>