From 54eeb141239bfd5f214d96d7caf487a3f084e3ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 24 May 2023 10:12:44 +0000
Subject: [PATCH] [FIX] mail: correct style for discuss call
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes odoo/odoo#122288

X-original-commit: 8c69f8d57b87bf4247ed5b97a24bb2d7c0221b8b
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 addons/mail/static/src/rtc/call.scss                  | 4 ++++
 addons/mail/static/src/rtc/call.xml                   | 2 +-
 addons/mail/static/src/rtc/call_participant_card.scss | 6 ++++++
 addons/mail/static/src/rtc/call_participant_card.xml  | 8 ++++----
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/addons/mail/static/src/rtc/call.scss b/addons/mail/static/src/rtc/call.scss
index 05a641b17fa..7644326ee66 100644
--- a/addons/mail/static/src/rtc/call.scss
+++ b/addons/mail/static/src/rtc/call.scss
@@ -13,6 +13,10 @@
     }
 }
 
+.o-mail-Call-main {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 .o-mail-Call-sidebar {
     width: 120px;
     min-width: 120px;
diff --git a/addons/mail/static/src/rtc/call.xml b/addons/mail/static/src/rtc/call.xml
index 68043ed9c0b..140f75362ff 100644
--- a/addons/mail/static/src/rtc/call.xml
+++ b/addons/mail/static/src/rtc/call.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.Call" owl="1">
         <div class="o-mail-Call user-select-none d-flex" t-att-class="{'o-fullscreen fixed-top vw-100 vh-100': state.isFullscreen, 'o-minimized': minimized, 'position-relative': !state.isFullscreen }">
-            <div class="d-flex flex-grow-1 flex-column align-items-center justify-content-center position-relative overflow-auto bg-black-50" t-on-mouseleave="onMouseleaveMain">
+            <div class="o-mail-Call-main d-flex flex-grow-1 flex-column align-items-center justify-content-center position-relative overflow-auto" t-on-mouseleave="onMouseleaveMain">
                 <div
                     class="d-flex align-items-center overflow-hidden h-100 w-100 flex-wrap justify-content-center"
                     t-attf-style="--height:{{state.tileHeight}}px; --width:{{state.tileWidth}}px;"
diff --git a/addons/mail/static/src/rtc/call_participant_card.scss b/addons/mail/static/src/rtc/call_participant_card.scss
index b966c24ba7d..063b594df0e 100644
--- a/addons/mail/static/src/rtc/call_participant_card.scss
+++ b/addons/mail/static/src/rtc/call_participant_card.scss
@@ -3,6 +3,7 @@
 // ------------------------------------------------------------------
 
 .o-mail-CallParticipantCard {
+    color: white;
     aspect-ratio: 16/9;
 }
 
@@ -34,11 +35,16 @@
     85% { border: solid $gray-700 }
 }
 
+.o-mail-CallParticipantCard-iconBlackBg {
+    background-color: rgba(0, 0, 0, 0.75);
+}
+
 .o-mail-CallParticipantCard-overlay {
     margin: Min(5%, map-get($spacers, 2));
 }
 
 .o-mail-CallParticipantCard-overlayBottom {
+    background-color: rgba(0, 0, 0, 0.75);
     max-width: 50%;
 }
 
diff --git a/addons/mail/static/src/rtc/call_participant_card.xml b/addons/mail/static/src/rtc/call_participant_card.xml
index 6399b6806be..6692d739eab 100644
--- a/addons/mail/static/src/rtc/call_participant_card.xml
+++ b/addons/mail/static/src/rtc/call_participant_card.xml
@@ -30,7 +30,7 @@
             <t t-if="rtcSession">
                 <!-- overlay -->
                 <span class="o-mail-CallParticipantCard-overlay o-mail-CallParticipantCard-overlayBottom z-index-1 position-absolute bottom-0 start-0 d-flex overflow-hidden">
-                    <span t-if="!props.minimized" class="p-1 rounded-1 bg-black-75 text-truncate" t-esc="name"/>
+                    <span t-if="!props.minimized" class="p-1 rounded-1 text-truncate" t-esc="name"/>
                     <small t-if="rtcSession.isScreenSharingOn and props.minimized and !isOfActiveCall" class="user-select-none o-minimized rounded-pill text-bg-danger d-flex align-items-center fw-bolder" title="live" aria-label="live">
                         LIVE
                     </small>
@@ -39,17 +39,17 @@
                     <span t-if="rtcSession.raisingHand" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-500" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="raising hand" aria-label="raising hand">
                         <i class="fa fa-hand-paper-o"/>
                     </span>
-                    <span t-if="rtcSession.isSelfMuted and !rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="muted" aria-label="muted">
+                    <span t-if="rtcSession.isSelfMuted and !rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="muted" aria-label="muted">
                         <i class="fa fa-microphone-slash"/>
                     </span>
-                    <span t-if="rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="deaf" aria-label="deaf">
+                    <span t-if="rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="deaf" aria-label="deaf">
                         <i class="fa fa-deaf"/>
                     </span>
                     <span t-if="hasMediaError" class="o-mail-CallParticipantCard-overlay-replayButton d-flex flex-column justify-content-center me-1 p-2 rounded-circle" title="media player Error" t-on-click.stop="onClickReplay">
                         <i t-if="rootHover.isHover" class="fa fa-repeat text-danger"/>
                         <i t-else="" class="fa fa-exclamation-triangle text-danger"/>
                     </span>
-                    <span t-if="showConnectionState" class="d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900" t-att-title="rtcSession.connectionState">
+                    <span t-if="showConnectionState" class="d-flex flex-column justify-content-center me-1 p-2 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-title="rtcSession.connectionState">
                         <i class="fa fa-exclamation-triangle text-warning"/>
                     </span>
                     <span t-if="rtcSession.isScreenSharingOn and !props.minimized and !isOfActiveCall" class="user-select-none rounded-pill text-bg-danger d-flex align-items-center me-1 fw-bolder" title="live" aria-label="live">