UX: Chat index tweaks (#18905)

- rounded avatar
- cut off avatar
- no index background

plugins/chat/assets/stylesheets/common/chat-channel-title.scss

@@ -58,8 +58,11 @@
 
 .chat-channel-title__users-count {
   display: flex;
-  border-radius: 3px;
+  border-radius: 50%;
   background: rgba(var(--primary-rgb), 0.1);
+  width: 22px;
+  height: 22px;
+  box-sizing: border-box;
   text-align: center;
   font-weight: 700;
   font-size: var(--font-down-1);

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

@@ -5,7 +5,6 @@
     overflow-y: overlay;
     padding-bottom: 6rem;
     box-sizing: border-box;
-    background-color: var(--primary-very-low);
 
     .direct-message-channels {
       .chat-channel-title {
@@ -27,21 +26,17 @@
       margin: 0 1.5rem;
       padding: 0;
       border-radius: 0;
-
-      &:not(:last-child) {
-        border-bottom: 1px solid var(--primary-low);
-      }
+      border-bottom: 1px solid var(--primary-low);
     }
 
     .chat-channel-divider {
       background-color: var(--secondary);
-      margin-top: 4rem;
-      padding: 1rem 1.5rem;
+      padding: 2.5rem 1.5rem 0.5rem 1.5rem;
       font-size: var(--font-up-1);
 
       &:first-of-type {
-        margin-top: 0;
-        padding-bottom: 0.5rem; //visual compensation
+        padding-top: 1rem;
+        padding-bottom: 0; //visual compensation
       }
 
       .channel-title {
@@ -54,6 +49,10 @@
       background: var(--secondary);
     }
 
+    .chat-user-avatar-container {
+      padding-left: 1px; //for is-online boxshadow effect
+    }
+
     .chat-user-avatar {
       img {
         width: calc(var(--chat-mobile-avatar-size) - 2px);
@@ -75,6 +74,7 @@
         height: var(--chat-mobile-avatar-size);
         padding: 0;
         font-size: var(--font-up-2);
+        font-weight: normal;
         justify-content: center;
 
         & + .chat-channel-title__name {

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

@@ -63,8 +63,6 @@ body.has-full-page-chat {
 }
 
 .channels-list .chat-channel-row {
-  padding: 0 0.5em 0 0.25em;
-
   .category-chat-private .d-icon {
     background-color: var(--secondary);
   }
@@ -81,11 +79,6 @@ body.has-full-page-chat {
   padding-left: 1em;
 }
 
-.channels-list .chat-channel-divider {
-  padding: 0.25em 0.5em 0.25em;
-  margin-top: 1em;
-}
-
 .sidebar-container .channels-list .chat-channel-row {
   padding: 0.5em;
 }