From 091d83af60fb34ddd25e1ea8acaced3612edab7b Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Mon, 7 Nov 2022 12:26:46 +0100
Subject: [PATCH] UX: Chat index tweaks (#18905)

- rounded avatar
- cut off avatar
- no index background
---
 .../stylesheets/common/chat-channel-title.scss |  5 ++++-
 .../assets/stylesheets/mobile/chat-index.scss  | 18 +++++++++---------
 .../chat/assets/stylesheets/mobile/mobile.scss |  7 -------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
index c54f7f39232..a9cf778cc4b 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
+++ b/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);
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-index.scss b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
index 730f12ef1f4..9445dd2eb44 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-index.scss
+++ b/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 {
diff --git a/plugins/chat/assets/stylesheets/mobile/mobile.scss b/plugins/chat/assets/stylesheets/mobile/mobile.scss
index 5afbf04d209..4a352f1f44f 100644
--- a/plugins/chat/assets/stylesheets/mobile/mobile.scss
+++ b/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;
 }