Merge branch 'fontawesome5' into 'develop'

FontAwesome 5

Closes #982

See merge request pleroma/pleroma-fe!1260

1 files changed, 69 insertions, 16 deletions

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eda5a68c..ed1ccb7d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <i class="button-icon icon-login" /> {{ $t("login.login") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="sign-in-alt"
+            /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +48,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="home"
+            /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +63,11 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="comments"
+            /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
               class="badge badge-notification unread-chat-count"
@@ -68,7 +80,11 @@
       <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
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bell"
+            /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +92,11 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="user-plus"
+            /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -90,7 +110,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bullhorn"
+            /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +124,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="search"
+            /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -108,7 +136,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="user-plus"
+            /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -116,12 +148,20 @@
             href="#"
             @click="openSettingsModal"
           >
-            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              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
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="info-circle"
+            /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +172,11 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="tachometer-alt"
+            /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +187,11 @@
             href="#"
             @click="doLogout"
           >
-            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="sign-out-alt"
+            /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
@@ -224,9 +272,12 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .button-icon:before {
-    width: 1.1em;
+  .follow-request-count {
+    vertical-align: baseline;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
   }
+
 }
 
 .side-drawer-logo-wrapper {
@@ -272,7 +323,6 @@
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  margin: 0.2em 0;
 }
 
 .side-drawer ul:last-child {
@@ -283,8 +333,11 @@
   padding: 0;
 
   a {
+    box-sizing: border-box;
     display: block;
-    padding: 0.5em 0.85em;
+    height: 3em;
+    line-height: 3em;
+    padding: 0 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;