From f23ed598630d04e3a19e0d543827c24482347e52 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 13:29:59 +0300
Subject: [PATCH] use icon instead of symbol for @ in mentions links

---
 src/components/mention_link/mention_link.js   |  8 +++++++
 src/components/mention_link/mention_link.scss | 21 +++++++------------
 src/components/mention_link/mention_link.vue  |  5 +++++
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 559250c5..711c87d6 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -1,6 +1,14 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters, mapState } from 'vuex'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAt
+)
 
 const MentionLink = {
   name: 'MentionLink',
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index a18475a1..9560e205 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -33,10 +33,6 @@
   & .short,
   & .full {
     white-space: nowrap;
-
-    &::before {
-      content: '@';
-    }
   }
 
   .new {
@@ -55,15 +51,19 @@
 
     &:not(.-oldStyle) {
       .short {
+        padding-left: 0.25em;
+        padding-right: 0;
+        padding-top: 0;
+        padding-bottom: 0;
         line-height: 1.5;
         font-size: inherit;
 
-        &::before {
+        .at {
           color: var(--faint);
+          opacity: 0.8;
           display: inline-block;
           height: 50%;
           line-height: 1;
-          vertical-align: 6%;
         }
       }
 
@@ -71,18 +71,11 @@
         padding-right: 0.25em;
       }
 
-      .short {
-        padding-left: 0.25em;
-        padding-right: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-
       .userName {
         display: inline-block;
         color: var(--link);
         line-height: inherit;
-        margin-left: 0.125em;
+        margin-left: 0;
         padding-left: 0.125em;
         padding-right: 0.25em;
         padding-top: 0;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 55f49507..281fab25 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -22,6 +22,11 @@
         :class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
         @click.prevent="onClick"
       >
+        <FAIcon
+          size="s"
+          icon="at"
+          class="at"
+        />
         <!-- eslint-disable vue/no-v-html -->
         <span class="shortName"><span
           class="userName"