Merge branch 'from/develop/tusooa/1118-enhanced-mention-link' into 'develop'

Enhanced mention link

Closes #1118

See merge request pleroma/pleroma-fe!1424

1 files changed, 24 insertions, 4 deletions

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index ec2689f8..03306dcc 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 .MentionLink {
   position: relative;
   white-space: normal;
@@ -10,6 +12,15 @@
     border-radius: 2px;
   }
 
+  .mention-avatar {
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    user-select: none;
+    margin-right: 0.2em;
+  }
+
   .full {
     position: absolute;
     display: inline-block;
@@ -27,7 +38,8 @@
     user-select: all;
   }
 
-  .short {
+  .short.-with-tooltip,
+  .you {
     user-select: none;
   }
 
@@ -56,7 +68,7 @@
     }
 
     &.-striped {
-      & .userName,
+      & .shortName,
       & .full {
         background-image:
           repeating-linear-gradient(
@@ -70,14 +82,14 @@
     }
 
     &.-solid {
-      & .userName,
+      & .shortName,
       & .full {
         background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
       }
     }
 
     &.-side {
-      & .userName,
+      & .shortName,
       & .userNameFull {
         box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
       }
@@ -88,4 +100,12 @@
     opacity: 1;
     pointer-events: initial;
   }
+
+  .serverName.-faded {
+    color: var(--faintLink, $fallback--link);
+  }
+
+  .full .-faded {
+    color: var(--faint, $fallback--faint);
+  }
 }