4 files changed, 18 insertions, 6 deletions
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 4e4ce94fb7b..96f9dda26c4 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -130,11 +130,6 @@ span.update-author {
   }
 }
 
-.user-mention {
-  color: $user-mention-color;
-  font-weight: $gl-font-weight-bold;
-}
-
 .field_with_errors {
   display: inline;
 }
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index dbdd5a4464b..34a35734acc 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -6,3 +6,14 @@
 .gfm-commit_range {
   @extend .commit-sha;
 }
+
+.gfm-project_member {
+  padding: 0 2px;
+  border-radius: #{$border-radius-default / 2};
+  background-color: $user-mention-bg;
+
+  &:hover {
+    background-color: $user-mention-bg-hover;
+    text-decoration: none;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9bbda87dec9..60260355765 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -262,7 +262,8 @@ $well-pre-bg: #eee;
 $well-pre-color: #555;
 $loading-color: #555;
 $update-author-color: #999;
-$user-mention-color: #2fa0bb;
+$user-mention-bg: rgba($blue-500, 0.044);
+$user-mention-bg-hover: rgba($blue-500, 0.15);
 $time-color: #999;
 $project-member-show-color: #aaa;
 $gl-promo-color: #aaa;
diff --git a/changelogs/unreleased/mentions-in-comments.yml b/changelogs/unreleased/mentions-in-comments.yml
new file mode 100644
index 00000000000..907f455007b
--- /dev/null
+++ b/changelogs/unreleased/mentions-in-comments.yml
@@ -0,0 +1,5 @@
+---
+title: Makes @mentions links have a different styling for better separation
+merge_request:
+author:
+type: added