[FIX] mail: 'chatter's entry', restore UX prior to 7a91d876

This commit will restore the chatter entries UX defined for v11
and accidentally removed on 7a91d876.

In v11 unread systray chat entries have white bg and bold text. Entries
that have been read, instead, should be less emphasised with
light grey bg and normal font weight

addons/mail/static/src/less/client_action.less

@@ -358,13 +358,21 @@
 
 .o_mail_channel_preview {
     .o-flex-display();
-    border-bottom: 1px solid #ebebeb;
+    border-bottom: 1px solid @gray-lighter-darker;
+    background-color: @gray-lighter;
+    color: @odoo-main-text-color;
+    cursor: pointer;
     overflow: hidden;
     position: relative;
+    &:hover {
+        background-color: @gray-lighter-dark;
+        .o_channel_name {
+            color: @headings-color;
+        }
+    }
     .o_mail_channel_image {
         .o-flex(0, 0, auto);
         position: relative;
-        text-align: center;
         > img {
             border-radius: 50%;
         }
@@ -387,12 +395,10 @@
             .o_channel_counter {
                 .o-flex(1, 1, auto);
             }
-            .o_channel_name, .o_channel_counter {
-                color: @odoo-main-text-color;
-            }
             .o_last_message_date {
                 .o-flex(0, 0, auto);
                 color: @odoo-main-color-muted;
+                font-weight: 500;
             }
         }
         .o_last_message_preview {
@@ -403,7 +409,10 @@
         }
     }
     &.o_channel_unread {
-        background-color: #f5f5f5;
+        background-color: transparent;
+        &:hover {
+            background-color: @gray-lighter;
+        }
         .o_channel_info {
             .o_channel_title {
                 .o_channel_name, .o_channel_counter {

addons/mail/static/src/less/systray.less

@@ -42,7 +42,8 @@
             .o-flex-display();
             .o-flex(0, 0, auto);
             justify-content: space-between;
-            border-bottom: 1px solid lightgray;
+            border-bottom: 1px solid @gray-lighter-darker;
+            box-shadow: 0 0 2px @gray-lighter-darker;
             .o_filter_button, .o_new_message {
                 .btn-link;
                 padding: 5px;
@@ -78,9 +79,6 @@
                     .o_channel_info {
                         margin-left: 10px;
                         .o_channel_title {
-                            .o_channel_name, .o_channel_counter {
-                                color: #666666;
-                            }
                             .o_last_message_date {
                                 padding-top: 2px;
                                 font-size: x-small;