UX: improve mention styling, simplify (#19169)

* UX: improve mention styling, simplify

* revert default

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;

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;

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%;
           }

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 {
+      a:not(.mention) {
-        color: var(--primary);
+        color: var(--tertiary);
-        text-decoration: underline;
-      }
-      a.mention {
-        text-decoration: none;
       }
       .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 {
+      a:not(.mention) {
-        color: var(--primary);
+        color: var(--tertiary);
-        text-decoration: underline;
       }
       img {
         max-width: 100%;
         height: auto;
       }
-      a.mention {
-        text-decoration: none;
-      }
       .overflow {
         max-height: 60px;
         overflow: hidden;

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;
 }

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;
-          }
         }
       }
 

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;