From 6b7bdc991d9912c4fc4da879f7c9689a528ed35e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 23 Nov 2022 17:35:57 -0500
Subject: [PATCH]  UX: improve mention styling, simplify  (#19169)

* UX: improve mention styling, simplify

* revert default
---
 app/assets/stylesheets/common/base/group.scss |  4 ---
 .../stylesheets/common/base/topic-post.scss   | 26 +++++++------------
 app/assets/stylesheets/common/base/user.scss  |  4 ---
 .../common/components/user-card.scss          | 16 +++---------
 .../stylesheets/common/foundation/mixins.scss |  6 +++--
 app/assets/stylesheets/desktop/user.scss      |  7 -----
 .../stylesheets/common/chat-message.scss      |  6 -----
 7 files changed, 18 insertions(+), 51 deletions(-)

diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 6591bd0e3c0..6bf464c1702 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -2,10 +2,6 @@
 // To style group content differently, use the existing classes with a .group parent class.
 // For example: .group .user-secondary-navigation
 
-span.mention-group {
-  color: var(--primary);
-}
-
 .group-details-container {
   background: var(--primary-very-low);
   padding: 20px;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index d9546f24b03..d21e8a6f575 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1197,6 +1197,13 @@ blockquote > *:last-child {
       padding-right: 0.5em;
       line-height: var(--line-height-medium);
       flex: 1 1;
+      .mention {
+        // needs some special sizing and positioning due to surrounding all-caps text
+        position: relative;
+        top: -1px;
+        font-size: var(--font-0);
+        text-transform: initial;
+      }
     }
   }
 
@@ -1248,30 +1255,17 @@ blockquote > *:last-child {
   }
 }
 
-a.mention {
+a.mention,
+a.mention-group {
   // linked
   @include mention;
 }
 
 span.mention {
-  // unlinked
+  // unlinked, invalid mention
   color: var(--primary-high);
 }
 
-a.mention-group {
-  // unlinked
-  display: inline-block;
-  color: var(--primary-high);
-  cursor: default;
-
-  &.notify,
-  .small-action-desc & {
-    // linked
-    cursor: pointer;
-    @include mention;
-  }
-}
-
 .suggested-topics {
   .topics {
     padding-bottom: 15px;
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index dbfd8ece4d9..2c4399189a7 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -194,10 +194,6 @@
           max-height: 300px;
           overflow: auto;
 
-          a[href] {
-            text-decoration: underline;
-          }
-
           img {
             max-width: 100%;
           }
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 307aadcc481..79074b863ad 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -160,12 +160,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     max-height: 150px;
     overflow: auto;
     .bio {
-      a {
-        color: var(--primary);
-        text-decoration: underline;
-      }
-      a.mention {
-        text-decoration: none;
+      a:not(.mention) {
+        color: var(--tertiary);
       }
       .overflow {
         max-height: 60px;
@@ -287,17 +283,13 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     max-height: 150px;
     overflow: auto;
     .bio {
-      a {
-        color: var(--primary);
-        text-decoration: underline;
+      a:not(.mention) {
+        color: var(--tertiary);
       }
       img {
         max-width: 100%;
         height: auto;
       }
-      a.mention {
-        text-decoration: none;
-      }
       .overflow {
         max-height: 60px;
         overflow: hidden;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 8eff1f25a90..1a8c2f8fef3 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -239,8 +239,10 @@ $hpad: 0.65em;
 @mixin mention() {
   display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
   font-size: 0.93em;
+  font-weight: normal;
   color: var(--primary);
-  padding: 0 4px 1px;
+  padding: 0 0.3em 0.07em;
   background: var(--primary-low);
-  border-radius: 8px;
+  border-radius: 0.6em;
+  text-decoration: none;
 }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index e836483766d..461e60a0a43 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -161,9 +161,6 @@ table.user-invite-list {
       .primary {
         .primary-textual {
           padding: 0 4px 4px;
-          a[href] {
-            text-decoration: underline;
-          }
           h1 {
             max-width: 100%;
             @include ellipsis;
@@ -180,10 +177,6 @@ table.user-invite-list {
 
         .bio {
           max-width: 750px;
-
-          a.mention {
-            text-decoration: none;
-          }
         }
       }
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss
index 2778ce81908..221141585ed 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message.scss
@@ -138,12 +138,6 @@
       color: var(--primary);
     }
 
-    .valid-mention {
-      padding: 0 4px 1px;
-      border-radius: 8px;
-      display: inline-block;
-    }
-
     img.ytp-thumbnail-image {
       height: 100%;
       max-height: unset;