From 580db954fcaa4b2d3c76e886f1322b5544dcc9d9 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 13 Apr 2023 14:36:20 +0000
Subject: [PATCH] [IMP] mail, website_livechat: avatars & Activity apply milk
 design

task-2818586

Part-of: odoo/odoo#116641
---
 addons/mail/static/src/composer/composer.xml   |  4 ++--
 addons/mail/static/src/core_ui/message.js      |  2 +-
 addons/mail/static/src/core_ui/message.xml     |  2 +-
 .../static/src/core_ui/message_in_reply.xml    |  2 +-
 .../static/src/discuss/channel_invitation.xml  |  2 +-
 .../static/src/discuss/channel_member_list.xml |  2 +-
 .../mail/static/src/discuss_app/im_status.scss | 10 ++++------
 .../mail/static/src/web/activity/activity.xml  | 18 +++++++++---------
 .../static/src/web/discuss_app/sidebar.xml     |  4 ++--
 .../src/web/messaging_menu/messaging_menu.xml  |  4 ++--
 .../static/src/core_ui/thread_patch.xml        |  2 +-
 11 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/addons/mail/static/src/composer/composer.xml b/addons/mail/static/src/composer/composer.xml
index c440c658fbc..dfc65a5677b 100644
--- a/addons/mail/static/src/composer/composer.xml
+++ b/addons/mail/static/src/composer/composer.xml
@@ -6,7 +6,7 @@
     <t t-set="normal" t-value="props.mode === 'normal'"/>
     <t t-set="extended" t-value="props.mode === 'extended'"/>
     <div t-ref="composer">
-        <div class="o-mail-Composer d-grid flex-shrink-0 bg-view"
+        <div class="o-mail-Composer d-grid flex-shrink-0"
                 t-att-class="{
                     'px-3 py-4 o-extended': extended,
                     'p-3': normal,
@@ -77,7 +77,7 @@
                         <button t-if="thread and thread.type === 'chatter'" class="btn btn-light fa fa-expand mx-1 border-0 rounded-pill" title="Full composer" aria-label="Full composer" type="button" t-on-click="onClickFullComposer"/>
                     </div>
                 </div>
-                <button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-primary o-last border-start-0"
+                <button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-secondary o-last border-start-0"
                     t-att-class="{'mt-2': extended, 'rounded-0 rounded-end-3': !extended and !compact, 'align-self-stretch': !extended}"
                     t-on-click="sendMessage"
                     type="button"
diff --git a/addons/mail/static/src/core_ui/message.js b/addons/mail/static/src/core_ui/message.js
index 9b1ab2a4971..ce9bd1a2d27 100644
--- a/addons/mail/static/src/core_ui/message.js
+++ b/addons/mail/static/src/core_ui/message.js
@@ -465,7 +465,7 @@ export class Message extends Component {
     }
 
     get imStatusClassName() {
-        let res = "position-absolute bottom-0 end-0";
+        let res = "position-absolute";
         if (this.hasOpenChatFeature) {
             res += " cursor-pointer";
         }
diff --git a/addons/mail/static/src/core_ui/message.xml b/addons/mail/static/src/core_ui/message.xml
index 1c5641109c3..43ecaaae088 100644
--- a/addons/mail/static/src/core_ui/message.xml
+++ b/addons/mail/static/src/core_ui/message.xml
@@ -27,7 +27,7 @@
                 <div class="o-mail-Message-core position-relative d-flex flex-shrink-0">
                     <div class="o-mail-Message-sidebar d-flex flex-shrink-0" t-att-class="{ 'justify-content-end': isAlignedRight, 'align-items-center': props.squashed }">
                         <div t-if="!props.squashed" class="o-mail-Message-avatarContainer position-relative bg-view" t-on-click="ev => this.onClickAuthor(ev)">
-                            <img class="o-mail-Message-avatar w-100 h-100 rounded-circle o_object_fit_cover"
+                            <img class="o-mail-Message-avatar w-100 h-100 rounded o_object_fit_cover"
                                 t-att-title="authorText"
                                 t-att-src="authorAvatarUrl"
                                 t-att-class="{ 'o_redirect cursor-pointer': hasAuthorClickable }"/>
diff --git a/addons/mail/static/src/core_ui/message_in_reply.xml b/addons/mail/static/src/core_ui/message_in_reply.xml
index 08a3433a5e6..cd9e885cdb4 100644
--- a/addons/mail/static/src/core_ui/message_in_reply.xml
+++ b/addons/mail/static/src/core_ui/message_in_reply.xml
@@ -9,7 +9,7 @@
             <small class="position-relative d-block text-small mb-1" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'justify-content-end pe-5': 'ps-5' }}" t-on-click="() => this.props.onClick?.()">
                 <span class="o-mail-MessageInReply-corner position-absolute bottom-0 top-50 pe-4 border-top text-300" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'o-isRightAlign border-end' : 'o-isLeftAlign border-start' }}" t-att-class="{ 'ms-n2': store.discuss.isActive }"/>
                 <span t-if="!message.parentMessage.isEmpty" class="d-inline-flex align-items-center text-muted opacity-75" t-att-class="{ 'cursor-pointer opacity-100-hover': props.onClick }" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'pe-3': 'ps-3' }}">
-                    <img class="o-mail-MessageInReply-avatar me-2 rounded-circle" t-att-src="authorAvatarUrl" t-att-title="message.parentMessage.author.name" alt="Avatar"/>
+                    <img class="o-mail-MessageInReply-avatar me-2 rounded" t-att-src="authorAvatarUrl" t-att-title="message.parentMessage.author.name" alt="Avatar"/>
                     <span class="o-mail-MessageInReply-content overflow-hidden">
                         <b>@<t t-out="message.parentMessage.author.name"/></b>:
                         <span class="o-mail-MessageInReply-message ms-1 text-break">
diff --git a/addons/mail/static/src/discuss/channel_invitation.xml b/addons/mail/static/src/discuss/channel_invitation.xml
index d3f9fd5ba3c..66f497d4cba 100644
--- a/addons/mail/static/src/discuss/channel_invitation.xml
+++ b/addons/mail/static/src/discuss/channel_invitation.xml
@@ -15,7 +15,7 @@
                                 <div class="o-discuss-ChannelInvitation-avatar position-relative d-flex flex-shrink-0 bg-100">
                                     <img class="w-100 h-100 rounded-circle o_object_fit_cover o_redirect"
                                          t-att-src="threadService.avatarUrl(selectablePartner, props.thread)"/>
-                                    <ImStatus className="'position-absolute bottom-0 end-0'" persona="selectablePartner"/>
+                                    <ImStatus persona="selectablePartner"/>
                                 </div>
                             </div>
                             <span class="flex-grow-1 mx-2 text-truncate fs-6" t-esc="selectablePartner.name"/>
diff --git a/addons/mail/static/src/discuss/channel_member_list.xml b/addons/mail/static/src/discuss/channel_member_list.xml
index 1a8b8cfe780..2877f103fb7 100644
--- a/addons/mail/static/src/discuss/channel_member_list.xml
+++ b/addons/mail/static/src/discuss/channel_member_list.xml
@@ -30,7 +30,7 @@
             <div class="o-bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
                 <img class="w-100 h-100 rounded-circle o_object_fit_cover o_redirect"
                      t-att-src="threadService.avatarUrl(member.persona, props.thread)"/>
-                <ImStatus className="'position-absolute bottom-0 end-0'" persona="member.persona"/>
+                <ImStatus persona="member.persona"/>
             </div>
             <span class="ms-2 text-truncate" t-esc="member.persona.name"/>
             <span class="ms-auto">
diff --git a/addons/mail/static/src/discuss_app/im_status.scss b/addons/mail/static/src/discuss_app/im_status.scss
index 336f9c2b3d8..2b25307c894 100644
--- a/addons/mail/static/src/discuss_app/im_status.scss
+++ b/addons/mail/static/src/discuss_app/im_status.scss
@@ -1,12 +1,10 @@
 
 .o-mail-ImStatus {
-    width: 1.2em;
-    height: 1.2em;
-    line-height: 1.3em;
+    $-gap: $font-size-lg - $font-size-base;
 
-    i {
-        line-height: 2rem;
-    }
+    @include o-position-absolute($right: -$-gap, $bottom: -$-gap);
+    width: $font-size-lg;
+    height: $font-size-lg;
 }
 
 .o-bg-inherit {
diff --git a/addons/mail/static/src/web/activity/activity.xml b/addons/mail/static/src/web/activity/activity.xml
index 9779ade895b..2d05ca52fc6 100644
--- a/addons/mail/static/src/web/activity/activity.xml
+++ b/addons/mail/static/src/web/activity/activity.xml
@@ -3,9 +3,9 @@
 
 <t t-name="mail.Activity" owl="1">
     <t t-set="activity" t-value="props.data"/>
-    <div class="o-mail-Activity d-flex px-4 py-1 mb-2">
+    <div class="o-mail-Activity d-flex px-3 py-1 mb-2">
         <div class="o-mail-Activity-sidebar flex-shrink-0 position-relative">
-            <img class="w-100 h-100 rounded-circle" t-attf-src="/web/image/res.users/{{activity.user_id[0]}}/avatar_128"/>
+            <img class="w-100 h-100 rounded" t-attf-src="/web/image/res.users/{{activity.user_id[0]}}/avatar_128"/>
                 <div
                     class="o-mail-Activity-iconContainer position-absolute top-100 start-100 translate-middle d-flex align-items-center justify-content-center mt-n1 ms-n1 rounded-circle w-50 h-50"
                     t-att-class="{
@@ -18,7 +18,7 @@
                 </div>
         </div>
         <div class="flex-grow px-3">
-            <div class="o-mail-Activity-info">
+            <div class="o-mail-Activity-info lh-1">
                 <span class="fw-bolder text-success" t-if="state.delay === 1">Tomorrow:</span>
                 <span class="fw-bolder text-success" t-elif="state.delay gt 0">Due in <t t-esc="state.delay"/> days:</span>
                 <span class="fw-bolder text-danger" t-elif="state.delay === -1">Yesterday:</span>
@@ -29,7 +29,7 @@
                 <i class="fa fa-info-circle btn-link btn-primary cursor-pointer ms-1" role="img" title="Info" aria-label="Info" t-on-click="toggleDetails"></i>
             </div>
             <div t-if="state.showDetails">
-                <table class="o-mail-Activity-details table table-sm">
+                <table class="o-mail-Activity-details table table-sm mt-2">
                     <tbody>
                         <tr><td class="text-end fw-bolder">Activity type</td><td><t t-esc="activity.activity_type_id[1]"/></td></tr>
                         <tr><td class="text-end fw-bolder">Created</td><td><t t-esc="activity.create_date"/> by <t t-esc="activity.create_uid[1]"/></td></tr>
@@ -42,16 +42,16 @@
             <div t-if="activity.mail_template_ids.length > 0" class="o-mail-Activity-mailTemplates">
                 <ActivityMailTemplate activity="activity" onUpdate="props.onUpdate"/>
             </div>
-            <div t-if="activity.can_write">
+            <div t-if="activity.can_write" class="lh-lg">
                 <t name="tools">
-                    <span class="o-mail-Activity-markDone btn btn-link btn-primary p-0 me-3" t-on-click="onClickMarkAsDone"><i class="fa fa-check"/> Mark Done</span>
+                    <span class="o-mail-Activity-markDone btn btn-link btn-success p-0 me-3" t-on-click="onClickMarkAsDone"><i class="fa fa-check"/> Mark Done</span>
                     <FileUploader t-if="activity.activity_category === 'upload_file'" onUploaded.bind="onFileUploaded">
                         <t t-set-slot="toggler">
-                            <span class="btn btn-link btn-primary p-0 me-3"><i t-attf-class="fa {{ activity.icon }}"/><t t-out="' ' + activity.display_name"/></span>
+                            <span class="btn btn-link text-action p-0 me-3"><i t-attf-class="fa {{ activity.icon }}"/><t t-out="' ' + activity.display_name"/></span>
                         </t>
                     </FileUploader>
-                    <span class="o-mail-Activity-edit btn btn-link btn-primary p-0 me-3" t-on-click="edit"><i class="fa fa-pencil"/> Edit</span>
-                    <span class="btn btn-link btn-primary p-0" t-on-click="unlink"><i class="fa fa-times"/> Cancel</span>
+                    <span class="o-mail-Activity-edit btn btn-link text-action p-0 me-3" t-on-click="edit"><i class="fa fa-pencil"/> Edit</span>
+                    <span class="btn btn-link btn-danger p-0" t-on-click="unlink"><i class="fa fa-times"/> Cancel</span>
                 </t>
             </div>
         </div>
diff --git a/addons/mail/static/src/web/discuss_app/sidebar.xml b/addons/mail/static/src/web/discuss_app/sidebar.xml
index 51f43f980e8..4b27a15451a 100644
--- a/addons/mail/static/src/web/discuss_app/sidebar.xml
+++ b/addons/mail/static/src/web/discuss_app/sidebar.xml
@@ -91,8 +91,8 @@
         t-on-click="(ev) => this.openThread(ev, thread)"
     >
         <div class="o-bg-inherit position-relative d-flex ms-4 flex-shrink-0" style="width:30px;height:30px">
-            <img class="w-100 h-100 rounded-circle" t-att-src="thread.imgUrl" alt="Thread Image"/>
-            <ThreadIcon t-if="thread.type === 'chat' or (thread.type === 'channel' and !thread.authorizedGroupFullName)" thread="thread" size="'small'" className="'o-mail-DiscussCategoryItem-threadIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center rounded-circle bg-100'"/>
+            <img class="w-100 h-100 rounded" t-att-src="thread.imgUrl" alt="Thread Image"/>
+            <ThreadIcon t-if="thread.type === 'chat' or (thread.type === 'channel' and !thread.authorizedGroupFullName)" thread="thread" size="'small'" className="'o-mail-DiscussCategoryItem-threadIcon position-absolute bottom-0 end-0 p-1 me-n1 mb-n1 d-flex align-items-center justify-content-center rounded-circle bg-100'"/>
         </div>
         <span class="ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread fw-bolder': thread.message_unread_counter > 0 }">
             <t t-esc="thread.displayName"/>
diff --git a/addons/mail/static/src/web/messaging_menu/messaging_menu.xml b/addons/mail/static/src/web/messaging_menu/messaging_menu.xml
index 84bcc98f3c0..e52c9d28d88 100644
--- a/addons/mail/static/src/web/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/web/messaging_menu/messaging_menu.xml
@@ -57,7 +57,7 @@
                 onClick="() => notification.requestPermission()"
             >
                 <t t-set-slot="icon">
-                    <ImStatus className="'position-absolute bottom-0 end-0'" persona="notificationRequest.partner"/>
+                    <ImStatus persona="notificationRequest.partner"/>
                 </t>
             </NotificationItem>
             <t t-if="store.discuss.activeTab === 'all'">
@@ -89,7 +89,7 @@
                     onSwipeLeft="hasTouch() and threadService.canUnpin(thread) ? { action: () => this.threadService.unpin(thread), icon: 'fa-times-circle', bgColor: 'bg-danger' } : undefined"
                 >
                     <t t-set-slot="icon">
-                        <ImStatus t-if="thread.type === 'chat'" className="'position-absolute bottom-0 end-0'" persona="thread.correspondent"/>
+                        <ImStatus t-if="thread.type === 'chat'" persona="thread.correspondent"/>
                     </t>
                     <t t-if="message" t-set-slot="body-icon">
                         <t t-if="message.isSelfAuthored">
diff --git a/addons/website_livechat/static/src/core_ui/thread_patch.xml b/addons/website_livechat/static/src/core_ui/thread_patch.xml
index 278fefde23d..b217214ecfc 100644
--- a/addons/website_livechat/static/src/core_ui/thread_patch.xml
+++ b/addons/website_livechat/static/src/core_ui/thread_patch.xml
@@ -7,7 +7,7 @@
                 <div class="o-website_livechat-VisitorBanner-sidebar me-2 d-flex justify-content-center">
                     <div class="o-website_livechat-VisitorBanner-avatar mx-1 position-relative">
                         <img class="w-100 h-100 rounded-circle" t-att-src="threadService.avatarUrl(visitor, props.thread)" alt="Avatar"/>
-                        <ImStatus t-if="visitor.isConnected" persona="visitor" className="'bottom-0 end-0 position-absolute'"/>
+                        <ImStatus t-if="visitor.isConnected" persona="visitor"/>
                     </div>
                 </div>
                 <div>