From e427dad1025c2a6bfcbbdfd19eac60c922312b8a Mon Sep 17 00:00:00 2001
From: xlu-odoo <xlu@odoo.com>
Date: Mon, 16 May 2022 12:09:43 +0000
Subject: [PATCH] [REF] mail: `rtcInvitationCard`, review and simplify scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2853300

closes odoo/odoo#91537

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../rtc_invitation_card.scss                  | 71 -------------------
 .../rtc_invitation_card.xml                   | 24 +++----
 2 files changed, 12 insertions(+), 83 deletions(-)

diff --git a/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.scss b/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.scss
index b8131f4b2a1..152d4455868 100644
--- a/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.scss
+++ b/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.scss
@@ -2,94 +2,23 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_RtcInvitationCard {
-    display: flex;
-    flex-direction: column;
-    margin: map-get($spacers, 2);
-    padding: map-get($spacers, 5);
-}
-
-.o_RtcInvitationCard_buttonList {
-    width: 100%;
-    display: flex;
-    margin-top: map-get($spacers, 4);
-    justify-content: space-around;
-    align-items: center;
-}
-
-.o_RtcInvitationCard_buttonListButton {
-    padding: map-get($spacers, 2);
-}
-
-.o_RtcInvitationCard_buttonListButtonIcon {
-    margin: map-get($spacers, 3);
-}
-
 .o_RtcInvitationCard_partnerInfo {
-    display: flex;
     width: 130px;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    white-space: nowrap;
 }
 
 .o_RtcInvitationCard_partnerInfoImage {
-    margin-bottom: map-get($spacers, 2);
     width: 70%;
     height: 70%;
 }
 
-.o_RtcInvitationCard_partnerInfoName {
-    overflow: hidden;
-    width: 100%;
-}
-
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_RtcInvitationCard {
-    border-radius: 3px;
-    background-color: gray('900');
-    border: 1px solid black;
-}
-
 .o_RtcInvitationCard_buttonListButton {
-    border-radius: 100%;
-    cursor: pointer;
     user-select: none;
-    border: none;
-}
-
-.o_RtcInvitationCard_buttonListAccept {
-    background-color: theme-color('success');
-
-    &:hover {
-        background-color: darken(theme-color('success'), 10%);
-    }
-}
-
-.o_RtcInvitationCard_buttonListRefuse {
-    background-color: theme-color('danger');
-
-    &:hover {
-        background-color: darken(theme-color('danger'), 10%);
-    }
 }
 
 .o_RtcInvitationCard_partnerInfoImage {
     border: 3px solid gray;
-    cursor: pointer;
-}
-
-.o_RtcInvitationCard_partnerInfoName {
-    font-weight: bold;
-    @include text-truncate();
-    text-align: center;
-}
-
-.o_RtcInvitationCard_partnerInfoText {
-    font-style: italic;
-    opacity: 0.9;
 }
diff --git a/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml b/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
index a0f4c4146da..5f919c3f80f 100644
--- a/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
+++ b/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
@@ -3,30 +3,30 @@
 
     <t t-name="mail.RtcInvitationCard" owl="1">
         <t t-if="rtcInvitationCard">
-            <div class="o_RtcInvitationCard" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_RtcInvitationCard d-flex flex-column m-2 p-5 border border-dark rounded-sm bg-900" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="rtcInvitationCard.thread.rtcInvitingSession">
-                    <div class="o_RtcInvitationCard_partnerInfo">
-                        <img class="o_RtcInvitationCard_partnerInfoImage rounded-circle"
+                    <div class="o_RtcInvitationCard_partnerInfo d-flex flex-column justify-content-around align-items-center text-nowrap">
+                        <img class="o_RtcInvitationCard_partnerInfoImage mb-2 rounded-circle o_cursor_pointer"
                             t-att-src="rtcInvitationCard.thread.rtcInvitingSession.avatarUrl"
                             t-on-click="rtcInvitationCard.onClickAvatar"
                             alt="Avatar"/>
-                        <span class="o_RtcInvitationCard_partnerInfoName" t-esc="rtcInvitationCard.thread.rtcInvitingSession.name"/>
-                        <span class="o_RtcInvitationCard_partnerInfoText">Incoming Call...</span>
+                        <span class="o_RtcInvitationCard_partnerInfoName w-100 font-weight-bolder text-truncate text-center overflow-hidden" t-esc="rtcInvitationCard.thread.rtcInvitingSession.name"/>
+                        <span class="o_RtcInvitationCard_partnerInfoText font-italic opacity-75">Incoming Call...</span>
                     </div>
                 </t>
-                <div class="o_RtcInvitationCard_buttonList">
-                    <div class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListRefuse"
+                <div class="o_RtcInvitationCard_buttonList d-flex justify-content-around align-items-center w-100 mt-4">
+                    <button class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListRefuse p-2 rounded-circle border-0 bg-danger"
                         aria-label="Refuse"
                         title="Refuse"
                         t-on-click="rtcInvitationCard.onClickRefuse">
-                        <i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-times"/>
-                    </div>
-                    <div class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListAccept"
+                        <i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-times m-3"/>
+                    </button>
+                    <button class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListAccept p-2 rounded-circle border-0 bg-success"
                         aria-label="Accept"
                         title="Accept"
                         t-on-click="rtcInvitationCard.onClickAccept">
-                        <i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-phone"/>
-                    </div>
+                        <i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-phone m-3"/>
+                    </button>
                 </div>
             </div>
         </t>