From 52938279495dac4a691d7ccb35593b652df47ca2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Tue, 11 Apr 2023 14:43:04 +0000
Subject: [PATCH] [FIX] mail: no white leak on rounded border of chat window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, in white theme, chat window rounded borders
had some white color leak.

This comes from background color of chat window, which is white,
while the header background color is purple.

This commit fixes the issue by setting the chat window background
color to purple. The content now defines its own color, and the
header just inherit from the chat window background color.

This commit also fixes a bug where the chat window hidden menu
items were below visible chat windows.

closes odoo/odoo#118242

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 addons/im_livechat/static/src/legacy/public_livechat.scss     | 4 ++--
 addons/mail/static/src/composer/composer.scss                 | 4 ++++
 addons/mail/static/src/core_ui/primary_variables.scss         | 1 -
 addons/mail/static/src/scss/variables/primary_variables.scss  | 1 -
 addons/mail/static/src/web/chat_window/chat_window.dark.scss  | 2 +-
 addons/mail/static/src/web/chat_window/chat_window.scss       | 3 +--
 addons/mail/static/src/web/chat_window/chat_window.xml        | 4 ++--
 .../static/src/web/chat_window/chat_window_container.scss     | 4 ++++
 .../mail/static/src/web/chat_window/chat_window_container.xml | 2 +-
 9 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/addons/im_livechat/static/src/legacy/public_livechat.scss b/addons/im_livechat/static/src/legacy/public_livechat.scss
index 58997d52a70..93f762f0f9c 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat.scss
+++ b/addons/im_livechat/static/src/legacy/public_livechat.scss
@@ -14,7 +14,7 @@ $o-mail-ChatWindow-zindex: $zindex-modal + 1 !default;
     height: 460px;
     max-height: 100%;
     font-size: 12px;
-    background-color: $o-mail-ChatWindow-bg;
+    background-color: #FAFAFA;
     border-radius: 6px 6px 0 0;
     z-index: $o-mail-ChatWindow-zindex;
     box-shadow: -5px -5px 10px rgba(black, 0.18);
@@ -113,7 +113,7 @@ $o-mail-ChatWindow-zindex: $zindex-modal + 1 !default;
         .o_thread_date_separator {
             margin: 0px 0px 15px 0px;
             .o_thread_date {
-                background-color: $o-mail-ChatWindow-bg;
+                background-color: #FAFAFA;
             }
         }
         .o_thread_message {
diff --git a/addons/mail/static/src/composer/composer.scss b/addons/mail/static/src/composer/composer.scss
index 7fb10b02ad6..48d75de5126 100644
--- a/addons/mail/static/src/composer/composer.scss
+++ b/addons/mail/static/src/composer/composer.scss
@@ -65,3 +65,7 @@
     padding-top: 10px;
     padding-bottom: 10px;
 }
+
+.o-mail-Composer-send {
+    border: 1px solid darken($primary, 5%);
+}
diff --git a/addons/mail/static/src/core_ui/primary_variables.scss b/addons/mail/static/src/core_ui/primary_variables.scss
index 3fb22d3dbf0..acf3ca3595a 100644
--- a/addons/mail/static/src/core_ui/primary_variables.scss
+++ b/addons/mail/static/src/core_ui/primary_variables.scss
@@ -1,6 +1,5 @@
 $o-mail-Avatar-size: 36px !default;
 $o-mail-Avatar-sizeSmall: 24px !default;
-$o-mail-ChatWindow-bg: #FAFAFA !default;
 $o-mail-ChatWindow-width: 340px !default;
 // Needed because $border-radius variations are all set to 0 in enterprise.
 $o-RoundedRectangle-small: .2rem !default;
diff --git a/addons/mail/static/src/scss/variables/primary_variables.scss b/addons/mail/static/src/scss/variables/primary_variables.scss
index 39e2e6eb8e5..662e7755124 100644
--- a/addons/mail/static/src/scss/variables/primary_variables.scss
+++ b/addons/mail/static/src/scss/variables/primary_variables.scss
@@ -1,5 +1,4 @@
 $o-mail-Avatar-size: 36px !default;
-$o-mail-ChatWindow-bg: #FAFAFA !default;
 $o-mail-ChatWindow-width: 340px !default;
 $o-mail-Typing-medium: 5px !default;
 $o-mail-Typing-small: 3px !default;
diff --git a/addons/mail/static/src/web/chat_window/chat_window.dark.scss b/addons/mail/static/src/web/chat_window/chat_window.dark.scss
index 93f69989646..a86542fcd3c 100644
--- a/addons/mail/static/src/web/chat_window/chat_window.dark.scss
+++ b/addons/mail/static/src/web/chat_window/chat_window.dark.scss
@@ -1,3 +1,3 @@
-.o-mail-ChatWindow-header {
+.o-mail-ChatWindow {
     --o-mail-ChatWindow-header-background-color: #{$o-gray-100};
 }
\ No newline at end of file
diff --git a/addons/mail/static/src/web/chat_window/chat_window.scss b/addons/mail/static/src/web/chat_window/chat_window.scss
index ca48ceaf3d0..28848e090e3 100644
--- a/addons/mail/static/src/web/chat_window/chat_window.scss
+++ b/addons/mail/static/src/web/chat_window/chat_window.scss
@@ -3,7 +3,7 @@
     height: 460px;
     width: $o-mail-ChatWindow-width;
     z-index: 999; // messaging menu is dropdown (1000)
-    background-color: $o-mail-ChatWindow-bg;
+    background-color: var(--o-mail-ChatWindow-header-background-color, #{$o-brand-odoo});
     box-shadow: -5px -5px 10px rgba(#000000, 0.09);
     outline: none;
 
@@ -17,7 +17,6 @@
 }
 
 .o-mail-ChatWindow-header {
-    background-color: var(--o-mail-ChatWindow-header-background-color, #{$o-brand-odoo});
     height: 36px;
     color: #ffffff;
 }
diff --git a/addons/mail/static/src/web/chat_window/chat_window.xml b/addons/mail/static/src/web/chat_window/chat_window.xml
index 712377e98cd..3c1f7fd2ff7 100644
--- a/addons/mail/static/src/web/chat_window/chat_window.xml
+++ b/addons/mail/static/src/web/chat_window/chat_window.xml
@@ -7,7 +7,7 @@
         t-att-class="{
                 'w-100 h-100': store.isSmall,
                 'o-folded': props.chatWindow.folded,
-                'position-absolute bottom-0 rounded-top-3 bg-view overflow-hidden d-flex flex-column': !props.chatWindow.hidden
+                'position-absolute bottom-0 rounded-top-3 overflow-hidden d-flex flex-column': !props.chatWindow.hidden
                 }"
         t-on-keydown.stop="onKeydown"
         tabindex="1"
@@ -46,7 +46,7 @@
                 <i class="fa fa-close"></i>
             </div>
         </div>
-        <div t-if="!props.chatWindow.folded" class="o-mail-ChatWindow-content d-flex flex-column h-100 overflow-auto border-start border-end" t-ref="content">
+        <div t-if="!props.chatWindow.folded" class="o-mail-ChatWindow-content bg-view d-flex flex-column h-100 overflow-auto border-start border-end" t-ref="content">
             <t t-if="thread">
                 <CallSettings t-if="state.activeMode === 'in-settings'" thread="thread" className="'flex-grow-1'"/>
                 <ChannelMemberList t-elif="state.activeMode === 'member-list'" thread="thread" className="'o-mail-Discuss-channelMemberList flex-shrink-0 border-start w-100 h-100'"/>
diff --git a/addons/mail/static/src/web/chat_window/chat_window_container.scss b/addons/mail/static/src/web/chat_window/chat_window_container.scss
index 1665effc5e9..029d3ecba74 100644
--- a/addons/mail/static/src/web/chat_window/chat_window_container.scss
+++ b/addons/mail/static/src/web/chat_window/chat_window_container.scss
@@ -2,3 +2,7 @@
     transform: translate(50%, -50%);
     z-index: $zindex-tooltip; // on top of bootstrap dropup menu
 }
+
+.o-mail-ChatWindow-hiddenMenuContainer {
+    z-index: 1000;
+}
diff --git a/addons/mail/static/src/web/chat_window/chat_window_container.xml b/addons/mail/static/src/web/chat_window/chat_window_container.xml
index d25955b2905..e4950d0588a 100644
--- a/addons/mail/static/src/web/chat_window/chat_window_container.xml
+++ b/addons/mail/static/src/web/chat_window/chat_window_container.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.ChatWindowContainer" owl="1">
     <div class="o-mail-ChatWindowContainer" t-if="!store.discuss.isActive or store.isSmall">
-        <div t-if="chatWindowService.hidden.length > 0 and !store.isSmall" t-ref="hiddenMenu" class="position-fixed bottom-0">
+        <div t-if="chatWindowService.hidden.length > 0 and !store.isSmall" t-ref="hiddenMenu" class="o-mail-ChatWindow-hiddenMenuContainer position-fixed bottom-0">
             <t t-call="mail.ChatWindowHiddenMenu"/>
         </div>
         <t t-foreach="chatWindowService.visible" t-as="chatWindow" t-key="chatWindow.threadLocalId">