UX: Chat unread indicator refactor (#22040)

* move the chat unread indicator to top to match the profile avatar indicator
* add white border to profile avatar indicator (badge notification) to match chat indicator and userstatus styling
* change `.urgent` to BEM
* congregate all styling into mixin
  * update chat index to use mixin
  * update thread indicator to use mixin
  * update header indicator to use mixin

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Martin Brennan <martin@discourse.org>

app/assets/stylesheets/common/base/header.scss

@@ -236,6 +236,7 @@
     position: relative;
   }
   .badge-notification {
+    border: 2px solid var(--header_background);
     position: absolute;
     z-index: z("base");
     left: 0;

plugins/chat/assets/javascripts/discourse/components/chat-channel-unread-indicator.hbs

@@ -6,10 +6,12 @@
         (or
           @channel.isDirectMessageChannel (gt @channel.tracking.mentionCount 0)
         )
-        "urgent"
+        "-urgent"
       )
     }}
   >
-    <div class="number">{{@channel.tracking.unreadCount}}</div>
+    <div
+      class="chat-channel-unread-indicator__number"
+    >{{@channel.tracking.unreadCount}}</div>
   </div>
 {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs

@@ -1,5 +1,5 @@
 {{#if this.showUrgentIndicator}}
-  <div class="chat-channel-unread-indicator urgent">
+  <div class="chat-channel-unread-indicator -urgent">
     <div class="chat-channel-unread-indicator__number">
       {{this.unreadCountLabel}}
     </div>

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -79,67 +79,26 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
   }
 }
 
-.chat-channel-unread-indicator {
-  @include unselectable;
-
-  width: 14px;
-  height: 14px;
-  border-radius: 100%;
-  box-sizing: content-box;
-  -webkit-touch-callout: none;
-  background: var(--tertiary-med-or-tertiary);
-  color: var(--secondary);
-  font-size: var(--font-down-2);
-  text-align: center;
-
-  &.urgent {
-    background: var(--success);
-    color: var(--secondary);
-
-    .number-wrap {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .number {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}
-
 .header-dropdown-toggle.chat-header-icon {
   .icon {
     .chat-channel-unread-indicator {
-      border-radius: 1em;
+      @include chat-unread-indicator;
       border: 2px solid var(--header_background);
       position: absolute;
+      top: 0;
       right: 2px;
-      bottom: 2px;
-      transition: border-color linear 0.15s;
 
-      &.urgent {
+      &.-urgent {
         display: flex;
         align-items: center;
         justify-content: center;
         width: auto;
-        min-width: 14px;
-        padding: 2px;
+        height: 1em;
+        min-width: 0.6em;
+        padding: 0.21em 0.42em;
+        top: -1px;
         right: 0;
       }
-
-      &__number {
-        font-size: 0.7rem;
-        line-height: 15px;
-        height: inherit;
-
-        &.-too-high {
-          font-size: 1.25rem;
-        }
-      }
     }
   }
 

plugins/chat/assets/stylesheets/common/chat-index.scss

@@ -202,23 +202,14 @@
       }
 
       .chat-channel-unread-indicator {
+        @include chat-unread-indicator;
         display: flex;
         align-items: center;
         justify-content: center;
         width: auto;
-        min-width: 14px;
-        padding: 2px;
-        font-size: var(--font-down-3);
-        border-radius: 1em;
-        background: var(--tertiary-med-or-tertiary);
-
-        &.urgent {
-          background: var(--success);
-        }
-
-        .number {
-          line-height: 1rem;
-        }
+        height: auto;
+        min-width: 0.6em;
+        padding: 0.3em 0.5em;
       }
     }
 

plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss

@@ -1,22 +1,12 @@
-@mixin chat-thread-unread-indicator {
+.chat-thread-header-unread-indicator,
+.chat-thread-list-item-unread-indicator {
+  @include chat-unread-indicator;
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
-  min-width: 14px;
-  padding: 3px;
-  font-size: 0.8rem;
+  height: auto;
+  padding: 0.21em 0.42em;
   border-radius: 1em;
-  background: var(--tertiary-med-or-tertiary);
-
-  &__number {
-    font-weight: bold;
-    color: var(--secondary);
-    line-height: 1;
-  }
-}
-
-.chat-thread-header-unread-indicator,
-.chat-thread-list-item-unread-indicator {
-  @include chat-thread-unread-indicator;
+  min-width: 0.6em;
 }

plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss

@@ -0,0 +1,23 @@
+@mixin chat-unread-indicator {
+  @include unselectable;
+  width: 14px;
+  height: 14px;
+  border-radius: 1em;
+  box-sizing: content-box;
+  -webkit-touch-callout: none;
+  background: var(--tertiary-med-or-tertiary);
+  color: var(--secondary);
+  font-size: var(--font-down-2);
+  text-align: center;
+  transition: border-color linear 0.15s;
+
+  &.-urgent {
+    background: var(--success);
+    color: var(--secondary);
+  }
+
+  &__number {
+    color: var(--secondary);
+    line-height: var(--line-height-small);
+  }
+}

plugins/chat/assets/stylesheets/common/index.scss

@@ -1,3 +1,4 @@
+@import "chat-unread-indicator";
 @import "chat-height-mixin";
 @import "base-common";
 @import "sidebar-extensions";

plugins/chat/assets/stylesheets/mobile/base-mobile.scss

@@ -102,5 +102,8 @@ html.has-full-page-chat {
         color: var(--primary-medium);
       }
     }
+    .chat-channel-unread-indicator {
+      border-color: var(--primary-very-low);
+    }
   }
 }

plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb

@@ -129,7 +129,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
                 end
 
                 expect(page).to have_no_css(
-                  ".chat-header-icon .chat-channel-unread-indicator.urgent",
+                  ".chat-header-icon .chat-channel-unread-indicator.-urgent",
                 )
               end
             end
@@ -146,7 +146,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
                     creator: user_1,
                   )
                 end
-                expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator.urgent")
+                expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator.-urgent")
               end
             end
           end
@@ -178,7 +178,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
               end
 
               expect(page).to have_css(
-                ".chat-header-icon .chat-channel-unread-indicator.urgent",
+                ".chat-header-icon .chat-channel-unread-indicator.-urgent",
                 text: "1",
               )
               expect(page).to have_css(".sidebar-row.channel-#{channel_1.id} .icon.urgent")