[REF] mail: `rtcInvitationCard`, review and simplify scss

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>

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;
 }

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>