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>

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>