From b0081b023364bbba4aa0954a2dcdaba45873920a Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Mon, 2 May 2022 12:01:24 +0000
Subject: [PATCH] [REF] mail: `NotificationListItem`, review and simplify
 mixins

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

task-2838625

Part-of: odoo/odoo#90476
---
 .../notification_group.scss                   |  84 +---------
 .../notification_group/notification_group.xml |  24 +--
 .../notification_list/notification_list.xml   |   6 +-
 .../notification_list_item.scss               | 144 +++---------------
 .../notification_request.scss                 |  69 ---------
 .../notification_request.xml                  |  20 +--
 .../thread_needaction_preview.scss            |  93 -----------
 .../thread_needaction_preview.xml             |  27 ++--
 .../thread_preview/thread_preview.scss        |  98 +-----------
 .../thread_preview/thread_preview.xml         |  27 ++--
 10 files changed, 80 insertions(+), 512 deletions(-)
 delete mode 100644 addons/mail/static/src/components/notification_request/notification_request.scss
 delete mode 100644 addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss

diff --git a/addons/mail/static/src/components/notification_group/notification_group.scss b/addons/mail/static/src/components/notification_group/notification_group.scss
index e47d62e9fca..f520f106407 100644
--- a/addons/mail/static/src/components/notification_group/notification_group.scss
+++ b/addons/mail/static/src/components/notification_group/notification_group.scss
@@ -2,84 +2,8 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_NotificationGroup {
-    @include o-mail-notification-list-item-layout();
-
-    &:hover .o_NotificationGroup_markAsRead {
-        // TODO also mixin this
-        // task-2258605
-        opacity: 1;
-    }
-}
-
-.o_NotificationGroup_content {
-    @include o-mail-notification-list-item-content-layout();
-}
-
-.o_NotificationGroup_coreItem {
-    @include o-mail-notification-list-item-core-item-layout();
-}
-
-.o_NotificationGroup_counter {
-    @include o-mail-notification-list-item-counter-layout();
-}
-
-.o_NotificationGroup_date {
-    @include o-mail-notification-list-item-date-layout();
-}
-
-.o_NotificationGroup_header {
-    @include o-mail-notification-list-item-header-layout();
-}
-
-.o_NotificationGroup_image {
-    @include o-mail-notification-list-item-image-layout();
-}
-
-.o_NotificationGroup_imageContainer {
-    @include o-mail-notification-list-item-image-container-layout();
-}
-
-.o_NotificationGroup_inlineText {
-    @include o-mail-notification-list-item-inline-text-layout();
-}
-
-.o_NotificationGroup_markAsRead {
-    @include o-mail-notification-list-item-mark-as-read-layout();
-}
-
-.o_NotificationGroup_name {
-    @include o-mail-notification-list-item-name-layout();
-}
-
-.o_NotificationGroup_sidebar {
-    @include o-mail-notification-list-item-sidebar-layout();
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_NotificationGroup {
-    @include o-mail-notification-list-item-style();
-}
-
-.o_NotificationGroup_counter {
-    @include o-mail-notification-list-item-bold-style();
-}
-
-.o_NotificationGroup_date {
-    @include o-mail-notification-list-item-date-style();
-}
-
-.o_NotificationGroup_image {
-    @include o-mail-notification-list-item-image-style();
-}
-
-.o_NotificationGroup_markAsRead {
-    @include o-mail-notification-list-item-mark-as-read-style();
-}
-
-.o_NotificationGroup_name {
-    @include o-mail-notification-list-item-bold-style();
+.o_NotificationGroup:hover .o_NotificationGroup_markAsRead {
+    // TODO also mixin this
+    // task-2258605
+    opacity: 1;
 }
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
index 9f0a0132fc4..4c5a92c73ee 100644
--- a/addons/mail/static/src/components/notification_group/notification_group.xml
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -3,37 +3,37 @@
 
     <t t-name="mail.NotificationGroup" owl="1">
         <t t-if="notificationGroupView">
-            <div class="o_NotificationGroup" t-attf-class="{{ className }}" t-on-click="notificationGroupView.onClick" t-ref="root">
-                <div class="o_NotificationGroup_sidebar">
-                    <div class="o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem">
-                        <img class="o_NotificationGroup_image rounded-circle" t-att-src="notificationGroupView.imageSrc" alt="Message delivery failure image"/>
+            <div class="o_NotificationListItem o_NotificationGroup d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-attf-class="{{ className }}" t-on-click="notificationGroupView.onClick" t-ref="root">
+                <div class="o_NotificationListItem_sidebar o_NotificationGroup_sidebar m-1">
+                    <div class="o_NotificationListItem_imageContainer o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem position-relative">
+                        <img class="o_NotificationListItem_image o_NotificationGroup_image w-100 h-100 rounded-circle" t-att-src="notificationGroupView.imageSrc" alt="Message delivery failure image"/>
                     </div>
                 </div>
-                <div class="o_NotificationGroup_content">
-                    <div class="o_NotificationGroup_header">
-                        <span class="o_NotificationGroup_name text-truncate">
+                <div class="o_NotificationListItem_content o_NotificationGroup_content d-flex flex-column flex-grow-1 align-self-start m-2">
+                    <div class="o_NotificationGroup_header o_NotificationListItem_header d-flex">
+                        <span class="o_NotificationListItem_name o_NotificationGroup_name text-truncate font-weight-bold">
                             <t t-esc="notificationGroupView.notificationGroup.res_model_name"/>
                         </span>
                         <t t-if="notificationGroupView.notificationGroup.notifications.length > 1">
-                            <span class="o_NotificationGroup_counter">
+                            <span class="o_NotificationListItem_counter o_NotificationGroup_counter mx-1 font-weight-bold">
                                 (<t t-esc="notificationGroupView.notificationGroup.notifications.length"/>)
                             </span>
                         </t>
                         <span class="o-autogrow"/>
                         <t t-if="notificationGroupView.notificationGroup.date">
-                            <span class="o_NotificationGroup_date">
+                            <small class="o_NotificationListItem_date o_NotificationGroup_date flex-shrink-0 text-500">
                                 <t t-esc="notificationGroupView.notificationGroup.date.fromNow()"/>
-                            </span>
+                            </small>
                         </t>
                     </div>
                     <div class="o_NotificationGroup_core d-flex align-items-baseline">
-                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText text-truncate">
+                        <span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_NotificationGroup_coreItem o_NotificationGroup_inlineText me-2 text-truncate">
                             <t t-if="notificationGroupView.notificationGroup.notification_type === 'email'">
                                 An error occurred when sending an email.
                             </t>
                         </span>
                         <span class="o-autogrow"/>
-                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check" title="Discard message delivery failures" t-on-click="notificationGroupView.onClickMarkAsRead" t-ref="markAsRead"/>
+                        <span class="o_NotificationListItem_coreItem o_NotificationListItem_markAsRead o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check d-flex flex-shrink-0 ms-2 text-600 opacity-50 opacity-100-hover" title="Discard message delivery failures" t-on-click="notificationGroupView.onClickMarkAsRead" t-ref="markAsRead"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/mail/static/src/components/notification_list/notification_list.xml b/addons/mail/static/src/components/notification_list/notification_list.xml
index d17ffb75981..72770ef85ed 100644
--- a/addons/mail/static/src/components/notification_list/notification_list.xml
+++ b/addons/mail/static/src/components/notification_list/notification_list.xml
@@ -14,14 +14,14 @@
                         <t t-if="notificationView.constructor.name === 'ThreadPreviewView'">
                             <ThreadPreview
                                 className="'o_NotificationList_preview'"
-                                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
+                                classNameObj="{ 'o-isDeviceSmall p-2': messaging.device.isSmall }"
                                 record="notificationView"
                             />
                         </t>
                         <t t-if="notificationView.constructor.name === 'ThreadNeedactionPreviewView'">
                             <ThreadNeedactionPreview
                                 className="'o_NotificationList_preview'"
-                                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
+                                classNameObj="{ 'o-isDeviceSmall p-2': messaging.device.isSmall }"
                                 record="notificationView"
                             />
                         </t>
@@ -34,7 +34,7 @@
                         <t t-if="notificationView.constructor.name === 'NotificationRequestView'">
                             <NotificationRequest
                                 className="'o_NotificationList_notificationRequest'"
-                                classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
+                                classNameObj="{ 'o-isDeviceSmall p-2': messaging.device.isSmall }"
                                 record="notificationView"
                             />
                         </t>
diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss
index 2d73de9770d..5910231e343 100644
--- a/addons/mail/static/src/components/notification_list/notification_list_item.scss
+++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss
@@ -1,109 +1,21 @@
-// -----------------------------------------------------------------------------
-// Layout
-// -----------------------------------------------------------------------------
-
-@mixin o-mail-notification-list-item-layout {
-    display: flex;
-    flex: 0 0 auto; // Without this, Safari shrinks parent regardless of child content
-    align-items: center;
-    padding: map-get($spacers, 1);
-
-    &.o-isDeviceSmall {
-        padding: map-get($spacers, 2);
-    }
-}
-
-@mixin o-mail-notification-list-item-content-layout {
-    display: flex;
-    flex-flow: column;
-    flex: 1 1 auto;
-    align-self: flex-start;
-    min-width: 0; // needed for flex to work correctly
-    margin: map-get($spacers, 2);
-}
-
-@mixin o-mail-notification-list-item-core-item-layout {
-    margin: map-get($spacers, 0) map-get($spacers, 2);
-
-    &:first-child {
-        margin-inline-start: map-get($spacers, 0);
-    }
-
-    &:last-child {
-        margin-inline-end: map-get($spacers, 0);
-    }
-}
-
-@mixin o-mail-notification-list-item-counter-layout() {
-    margin: map-get($spacers, 0) map-get($spacers, 1);
-}
-
-@mixin o-mail-notification-list-item-date-layout() {
-    flex: 0 0 auto;
-}
-
-@mixin o-mail-notification-list-item-header-layout {
-    display: flex;
-}
-
-@mixin o-mail-notification-list-item-image-layout {
-    width: map-get($sizes, 100);
-    height: map-get($sizes, 100);
-}
-
-@mixin o-mail-notification-list-item-image-container-layout {
-    position: relative;
-    width: 40px;
-    height: 40px;
-}
-
-@mixin o-mail-notification-list-item-inline-text-layout {
-    &.o-empty::before {
-        content: '\00a0'; // keep line-height as if it had content
-    }
-}
-
-@mixin o-mail-notification-list-item-mark-as-read-layout() {
-    display: flex;
-    flex: 0 0 auto;
-}
-
-@mixin o-mail-notification-list-item-name-layout {
-    &.o-isDeviceSmall {
-        font-size: 1.1em;
-    }
-}
-
-@mixin o-mail-notification-list-item-partner-im-status-icon-layout {
-    @include o-position-absolute($bottom: 0, $right: 0);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-@mixin o-mail-notification-list-item-sidebar-layout {
-    margin: map-get($spacers, 1);
-}
-
-// -----------------------------------------------------------------------------
-// Style
-// -----------------------------------------------------------------------------
-
 $o-mail-notification-list-item-background-color: $white !default;
 $o-mail-notification-list-item-hover-background-color:
     darken($o-mail-notification-list-item-background-color, 7%) !default;
 
-$o-mail-notification-list-item-muted-background-color: gray('100') !default;
+$o-mail-notification-list-item-muted-background-color: $gray-100 !default;
 $o-mail-notification-list-item-muted-hover-background-color:
     darken($o-mail-notification-list-item-muted-background-color, 7%) !default;
 
-@mixin o-mail-notification-list-item-style {
-    cursor: pointer;
+.o_NotificationListItem {
     user-select: none;
     background-color: $o-mail-notification-list-item-background-color;
 
     &:hover {
         background-color: $o-mail-notification-list-item-hover-background-color;
+
+        .o_NotificationListItem_partnerImStatusIcon {
+            color: $o-mail-notification-list-item-hover-background-color;
+        }
     }
 
     &.o-muted {
@@ -111,50 +23,36 @@ $o-mail-notification-list-item-muted-hover-background-color:
 
         &:hover {
             background-color: $o-mail-notification-list-item-muted-hover-background-color;
+
+            .o_NotificationListItem_partnerImStatusIcon {
+                color: $o-mail-notification-list-item-muted-hover-background-color;
+            }
         }
     }
 }
 
-@mixin o-mail-notification-list-item-bold-style {
-    font-weight: $font-weight-bold;
-
-    &.o-muted {
-        color: gray('600');
-    }
+.o_NotificationListItem_content {
+    min-width: 0; // needed for flex to work correctly
 }
 
-@mixin o-mail-notification-list-item-date-style() {
-    font-size: $font-size-sm;
-    color: gray('500');
-}
-
-@mixin o-mail-notification-list-item-image-style {
+.o_NotificationListItem_image {
     object-fit: cover;
 }
 
-@mixin o-mail-notification-list-item-mark-as-read-style() {
-    color: gray('300');
+.o_NotificationListItem_imageContainer {
+    width: 40px;
+    height: 40px;
+}
 
-    &:hover {
-        color: gray('600');
+.o_NotificationListItem_inlineText {
+    &.o-empty::before {
+        content: '\00a0'; // keep line-height as if it had content
     }
 }
 
-@mixin o-mail-notification-list-item-hover-partner-im-status-icon-style {
-    color: $o-mail-notification-list-item-hover-background-color;
-}
-
-@mixin o-mail-notification-list-item-muted-hover-partner-im-status-icon-style {
-    color: $o-mail-notification-list-item-muted-hover-background-color;
-}
-
-@mixin o-mail-notification-list-item-partner-im-status-icon-style {
+.o_NotificationListItem_partnerImStatusIcon {
     color: $o-mail-notification-list-item-background-color;
 
-    &:not(.o-isDeviceSmall) {
-        font-size: x-small;
-    }
-
     &.o-muted {
         color: $o-mail-notification-list-item-muted-background-color;
     }
diff --git a/addons/mail/static/src/components/notification_request/notification_request.scss b/addons/mail/static/src/components/notification_request/notification_request.scss
deleted file mode 100644
index 7ef8a2cd424..00000000000
--- a/addons/mail/static/src/components/notification_request/notification_request.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_NotificationRequest {
-    @include o-mail-notification-list-item-layout();
-}
-
-.o_NotificationRequest_content {
-    @include o-mail-notification-list-item-content-layout();
-}
-
-.o_NotificationRequest_coreItem {
-    @include o-mail-notification-list-item-core-item-layout();
-}
-
-.o_NotificationRequest_header {
-    @include o-mail-notification-list-item-header-layout();
-}
-
-.o_NotificationRequest_image {
-    @include o-mail-notification-list-item-image-layout();
-}
-
-.o_NotificationRequest_imageContainer {
-    @include o-mail-notification-list-item-image-container-layout();
-}
-
-.o_NotificationRequest_inlineText {
-    @include o-mail-notification-list-item-inline-text-layout();
-}
-
-.o_NotificationRequest_name {
-    @include o-mail-notification-list-item-name-layout();
-}
-
-.o_NotificationRequest_partnerImStatusIcon {
-    @include o-mail-notification-list-item-partner-im-status-icon-layout();
-}
-
-.o_NotificationRequest_sidebar {
-    @include o-mail-notification-list-item-sidebar-layout();
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_NotificationRequest {
-    @include o-mail-notification-list-item-style();
-
-    &:hover {
-        .o_NotificationRequest_partnerImStatusIcon {
-            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
-        }
-    }
-}
-
-.o_NotificationRequest_image {
-    @include o-mail-notification-list-item-image-style();
-}
-
-.o_NotificationRequest_name {
-    @include o-mail-notification-list-item-bold-style();
-}
-
-.o_NotificationRequest_partnerImStatusIcon {
-    @include o-mail-notification-list-item-partner-im-status-icon-style();
-}
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
index 75f742a05c4..7ee86e0c5b1 100644
--- a/addons/mail/static/src/components/notification_request/notification_request.xml
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -3,25 +3,25 @@
 
     <t t-name="mail.NotificationRequest" owl="1">
         <t t-if="notificationRequestView">
-            <div class="o_NotificationRequest" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
-                <div class="o_NotificationRequest_sidebar">
-                    <div class="o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem">
-                        <img class="o_NotificationRequest_image rounded-circle" t-att-src="messaging.partnerRoot.avatarUrl" alt="Avatar of OdooBot"/>
+            <div class="o_NotificationListItem o_NotificationRequest d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-attf-class="{{ className }}" t-on-click="_onClick" t-ref="root">
+                <div class="o_NotificationListItem_sidebar o_NotificationRequest_sidebar m-1">
+                    <div class="o_NotificationListItem_imageContainer o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem position-relative">
+                        <img class="o_NotificationListItem_image o_NotificationRequest_image w-100 h-100 rounded-circle" t-att-src="messaging.partnerRoot.avatarUrl" alt="Avatar of OdooBot"/>
                         <PartnerImStatusIcon
-                            className="'o_NotificationRequest_partnerImStatusIcon'"
-                            classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall }"
+                            className="'o_NotificationListItem_partnerImStatusIcon o_NotificationRequest_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
+                            classNameObj="{ 'o-isDeviceSmall': messaging.device.isSmall, 'small': !messaging.device.isSmall }"
                             partner="messaging.partnerRoot"
                         />
                     </div>
                 </div>
-                <div class="o_NotificationRequest_content">
-                    <div class="o_NotificationRequest_header">
-                        <span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
+                <div class="o_NotificationListItem_content o_NotificationRequest_content d-flex flex-column flex-grow-1 align-self-start m-2">
+                    <div class="o_NotificationListItem_header o_NotificationRequest_header d-flex">
+                        <span class="o_NotificationListItem_name o_NotificationRequest_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
                             <t t-esc="notificationRequestView.headerText"/>
                         </span>
                     </div>
                     <div class="o_NotificationRequest_core">
-                        <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
+                        <span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
                             Enable desktop notifications to chat.
                         </span>
                     </div>
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss
deleted file mode 100644
index a6791ee9b13..00000000000
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_ThreadNeedactionPreview {
-    @include o-mail-notification-list-item-layout();
-}
-
-.o_ThreadNeedactionPreview_content {
-    @include o-mail-notification-list-item-content-layout();
-}
-
-.o_ThreadNeedactionPreview_coreItem {
-    @include o-mail-notification-list-item-core-item-layout();
-}
-
-.o_ThreadNeedactionPreview_counter {
-    @include o-mail-notification-list-item-counter-layout();
-}
-
-.o_ThreadNeedactionPreview_date {
-    @include o-mail-notification-list-item-date-layout();
-}
-
-.o_ThreadNeedactionPreview_header {
-    @include o-mail-notification-list-item-header-layout();
-}
-
-.o_ThreadNeedactionPreview_image {
-    @include o-mail-notification-list-item-image-layout();
-}
-
-.o_ThreadNeedactionPreview_imageContainer {
-    @include o-mail-notification-list-item-image-container-layout();
-}
-
-.o_ThreadNeedactionPreview_inlineText {
-    @include o-mail-notification-list-item-inline-text-layout();
-}
-
-.o_ThreadNeedactionPreview_markAsRead {
-    @include o-mail-notification-list-item-mark-as-read-layout();
-}
-
-.o_ThreadNeedactionPreview_name {
-    @include o-mail-notification-list-item-name-layout();
-}
-
-.o_ThreadNeedactionPreview_partnerImStatusIcon {
-    @include o-mail-notification-list-item-partner-im-status-icon-layout();
-}
-
-.o_ThreadNeedactionPreview_sidebar {
-    @include o-mail-notification-list-item-sidebar-layout();
-}
-
-// ------------------------------------------------------------------
-// Style
-// ------------------------------------------------------------------
-
-.o_ThreadNeedactionPreview {
-    @include o-mail-notification-list-item-style();
-
-    &:hover {
-        .o_ThreadNeedactionPreview_partnerImStatusIcon {
-            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
-        }
-    }
-}
-
-.o_ThreadNeedactionPreview_counter {
-    @include o-mail-notification-list-item-bold-style();
-}
-
-.o_ThreadNeedactionPreview_date {
-    @include o-mail-notification-list-item-date-style();
-}
-
-.o_ThreadNeedactionPreview_image {
-    @include o-mail-notification-list-item-image-style();
-}
-
-.o_ThreadNeedactionPreview_markAsRead {
-    @include o-mail-notification-list-item-mark-as-read-style();
-}
-
-.o_ThreadNeedactionPreview_name {
-    @include o-mail-notification-list-item-bold-style();
-}
-
-.o_ThreadNeedactionPreview_partnerImStatusIcon {
-    @include o-mail-notification-list-item-partner-im-status-icon-style();
-}
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index add788dd4fd..571293f2852 100644
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -7,47 +7,48 @@
                 The preview template is used by the discuss in mobile, and by the systray
                 menu in order to show preview of threads.
             -->
-            <div class="o_ThreadNeedactionPreview" t-attf-class="{{ className }}" t-on-click="threadNeedactionPreviewView.onClick" t-att-data-thread-local-id="threadNeedactionPreviewView.thread.localId" t-ref="root">
-                <div class="o_ThreadNeedactionPreview_sidebar">
-                    <div class="o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem">
-                        <img class="o_ThreadNeedactionPreview_image" t-att-src="image()" alt="Thread Image"/>
+            <div class="o_NotificationListItem o_ThreadNeedactionPreview d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-attf-class="{{ className }}" t-on-click="threadNeedactionPreviewView.onClick" t-att-data-thread-local-id="threadNeedactionPreviewView.thread.localId" t-ref="root">
+                <div class="o_NotificationListItem_sidebar o_ThreadNeedactionPreview_sidebar m-1">
+                    <div class="o_NotificationListItem_imageContainer o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem position-relative">
+                        <img class="o_NotificationListItem_image o_ThreadNeedactionPreview_image w-100 h-100" t-att-src="image()" alt="Thread Image"/>
                         <t t-if="threadNeedactionPreviewView.thread.correspondent and threadNeedactionPreviewView.thread.correspondent.im_status">
                             <PartnerImStatusIcon
-                                className="'o_ThreadNeedactionPreview_partnerImStatusIcon'"
+                                className="'o_NotificationListItem_partnerImStatusIcon o_ThreadNeedactionPreview_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
                                 classNameObj="{
                                     'o-isDeviceSmall': messaging.device.isSmall,
+                                    'small': !messaging.device.isSmall,
                                 }"
                                 partner="threadNeedactionPreviewView.thread.correspondent"
                             />
                         </t>
                     </div>
                 </div>
-                <div class="o_ThreadNeedactionPreview_content">
-                    <div class="o_ThreadNeedactionPreview_header">
-                        <span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }">
+                <div class="o_NotificationListItem_content o_ThreadNeedactionPreview_content d-flex flex-column flex-grow-1 align-self-start m-2">
+                    <div class="o_NotificationListItem_header o_ThreadNeedactionPreview_header d-flex">
+                        <span class="o_NotificationListItem_name o_ThreadNeedactionPreview_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall }">
                             <t t-esc="threadNeedactionPreviewView.thread.displayName"/>
                         </span>
                         <t t-if="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length > 1">
-                            <span class="o_ThreadNeedactionPreview_counter">
+                            <span class="o_NotificationListItem_counter o_ThreadNeedactionPreview_counter mx-1 font-weight-bold">
                                 (<t t-esc="threadNeedactionPreviewView.thread.needactionMessagesAsOriginThread.length"/>)
                             </span>
                         </t>
                         <span class="o-autogrow"/>
                         <t t-if="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread and threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.date">
-                            <span class="o_ThreadNeedactionPreview_date">
+                            <small class="o_NotificationListItem_date o_ThreadNeedactionPreview_date flex-shrink-0 text-500">
                                 <t t-esc="threadNeedactionPreviewView.thread.lastNeedactionMessageAsOriginThread.date.fromNow()"/>
-                            </span>
+                            </small>
                         </t>
                     </div>
                     <div class="o_ThreadNeedactionPreview_core d-flex align-items-baseline">
-                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
+                        <span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText me-2 text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
                             <t t-if="threadNeedactionPreviewView.messageAuthorPrefixView">
                                 <MessageAuthorPrefix record="threadNeedactionPreviewView.messageAuthorPrefixView"/>
                             </t>
                             <t t-esc="inlineLastNeedactionMessageAsOriginThreadBody"/>
                         </span>
                         <span class="o-autogrow"/>
-                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="threadNeedactionPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
+                        <span class="o_NotificationListItem_coreItem o_NotificationListItem_markAsRead o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_markAsRead fa fa-check d-flex flex-shrink-0 ms-2 text-600 opacity-50 opacity-100-hover" title="Mark as Read" t-on-click="threadNeedactionPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.scss b/addons/mail/static/src/components/thread_preview/thread_preview.scss
index d0f4fc49b86..831aa2662fd 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.scss
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.scss
@@ -2,108 +2,14 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_ThreadPreview {
-    @include o-mail-notification-list-item-layout();
-
-    &:hover .o_ThreadPreview_markAsRead {
-        opacity: 1;
-    }
-}
-
-.o_ThreadPreview_content {
-    @include o-mail-notification-list-item-content-layout();
-}
-
-.o_ThreadPreview_coreItem {
-    @include o-mail-notification-list-item-core-item-layout();
-}
-
-.o_ThreadPreview_counter {
-    @include o-mail-notification-list-item-counter-layout();
-}
-
-.o_ThreadPreview_date {
-    @include o-mail-notification-list-item-date-layout();
-}
-
-.o_ThreadPreview_header {
-    @include o-mail-notification-list-item-header-layout();
-}
-
-.o_ThreadPreview_image {
-    @include o-mail-notification-list-item-image-layout();
-}
-
-.o_ThreadPreview_imageContainer {
-    @include o-mail-notification-list-item-image-container-layout();
-}
-
-.o_ThreadPreview_inlineText {
-    @include o-mail-notification-list-item-inline-text-layout();
-}
-
-.o_ThreadPreview_markAsRead {
-    @include o-mail-notification-list-item-mark-as-read-layout();
-}
-
-.o_ThreadPreview_name {
-    @include o-mail-notification-list-item-name-layout();
-}
-
-.o_ThreadPreview_partnerImStatusIcon {
-    @include o-mail-notification-list-item-partner-im-status-icon-layout();
-}
-
-.o_ThreadPreview_sidebar {
-    @include o-mail-notification-list-item-sidebar-layout();
+.o_ThreadPreview:hover .o_ThreadPreview_markAsRead {
+    opacity: 1;
 }
 
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_ThreadPreview {
-    @include o-mail-notification-list-item-style();
-
-    &:hover {
-        .o_ThreadPreview_partnerImStatusIcon {
-            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
-        }
-    }
-
-    &.o-muted {
-        &:hover {
-            .o_ThreadPreview_partnerImStatusIcon {
-                @include o-mail-notification-list-item-muted-hover-partner-im-status-icon-style();
-            }
-        }
-    }
-}
-
 .o_ThreadPreview_callIndicator.o-isCalling {
     color: red;
 }
-
-.o_ThreadPreview_counter {
-    @include o-mail-notification-list-item-bold-style();
-}
-
-.o_ThreadPreview_date {
-    @include o-mail-notification-list-item-date-style();
-}
-
-.o_ThreadPreview_image {
-    @include o-mail-notification-list-item-image-style();
-}
-
-.o_ThreadPreview_markAsRead {
-    @include o-mail-notification-list-item-mark-as-read-style();
-}
-
-.o_ThreadPreview_name {
-    @include o-mail-notification-list-item-bold-style();
-}
-
-.o_ThreadPreview_partnerImStatusIcon {
-    @include o-mail-notification-list-item-partner-im-status-icon-style();
-}
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index 70ce654278d..f847bfc96f4 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -7,15 +7,16 @@
                 The preview template is used by the discuss in mobile, and by the systray
                 menu in order to show preview of threads.
             -->
-            <div class="o_ThreadPreview" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }" t-attf-class="{{ className }}" t-on-click="threadPreviewView.onClick" t-att-data-thread-local-id="threadPreviewView.thread.localId" t-ref="root">
-                <div class="o_ThreadPreview_sidebar">
-                    <div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem">
-                        <img class="o_ThreadPreview_image rounded-circle" t-att-src="image()" alt="Thread Image"/>
+            <div class="o_NotificationListItem o_ThreadPreview d-flex flex-shrink-0 align-items-center p-1 o_cursor_pointer" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }" t-attf-class="{{ className }}" t-on-click="threadPreviewView.onClick" t-att-data-thread-local-id="threadPreviewView.thread.localId" t-ref="root">
+                <div class="o_NotificationListItem_sidebar o_ThreadPreview_sidebar m-1">
+                    <div class="o_NotificationListItem_imageContainer o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem position-relative">
+                        <img class="o_NotificationListItem_image o_ThreadPreview_image w-100 h-100 rounded-circle" t-att-src="image()" alt="Thread Image"/>
                         <t t-if="threadPreviewView.thread.correspondent and threadPreviewView.thread.correspondent.im_status">
                             <PartnerImStatusIcon
-                                className="'o_ThreadPreview_partnerImStatusIcon'"
+                                className="'o_NotificationListItem_partnerImStatusIcon o_ThreadPreview_partnerImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
                                 classNameObj="{
                                     'o-isDeviceSmall': messaging.device.isSmall,
+                                    'small': !messaging.device.isSmall,
                                     'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0,
                                 }"
                                 partner="threadPreviewView.thread.correspondent"
@@ -23,13 +24,13 @@
                         </t>
                     </div>
                 </div>
-                <div class="o_ThreadPreview_content">
-                    <div class="o_ThreadPreview_header align-items-baseline">
-                        <span class="o_ThreadPreview_name text-truncate" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
+                <div class="o_NotificationListItem_content o_ThreadPreview_content d-flex flex-column flex-grow-1 align-self-start m-2">
+                    <div class="o_NotificationListItem_header o_ThreadPreview_header d-flex align-items-baseline">
+                        <span class="o_NotificationListItem_name o_ThreadPreview_name text-truncate font-weight-bold" t-att-class="{ 'o-isDeviceSmall fs-5': messaging.device.isSmall, 'o-muted text-600': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
                             <t t-esc="threadPreviewView.thread.displayName"/>
                         </span>
                         <t t-if="threadPreviewView.thread.localMessageUnreadCounter > 1">
-                            <span class="o_ThreadPreview_counter">
+                            <span class="o_NotificationListItem_counter o_ThreadPreview_counter mx-1 font-weight-bold">
                                 (<t t-esc="threadPreviewView.thread.localMessageUnreadCounter"/>)
                             </span>
                         </t>
@@ -38,13 +39,13 @@
                         </t>
                         <span class="o-autogrow"/>
                         <t t-if="threadPreviewView.thread.lastMessage and threadPreviewView.thread.lastMessage.date">
-                            <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
+                            <small class="o_NotificationListItem_date o_ThreadPreview_date flex-shrink-0 text-500" t-att-class="{ 'o-muted': threadPreviewView.thread.localMessageUnreadCounter === 0 }">
                                 <t t-esc="threadPreviewView.thread.lastMessage.date.fromNow()"/>
-                            </span>
+                            </small>
                         </t>
                     </div>
                     <div class="o_ThreadPreview_core d-flex align-items-baseline">
-                        <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
+                        <span class="o_NotificationListItem_coreItem o_NotificationListItem_inlineText o_ThreadPreview_coreItem o_ThreadPreview_inlineText me-2 text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
                             <t t-if="threadPreviewView.messageAuthorPrefixView">
                                 <MessageAuthorPrefix record="threadPreviewView.messageAuthorPrefixView"/>
                             </t>
@@ -52,7 +53,7 @@
                         </span>
                         <span class="o-autogrow"/>
                         <t t-if="threadPreviewView.thread.localMessageUnreadCounter > 0">
-                            <span class="o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="threadPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
+                            <span class="o_NotificationListItem_coreItem o_NotificationListItem_markAsRead o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check d-flex flex-shrink-0 ms-2 text-600 opacity-50 opacity-100-hover" title="Mark as Read" t-on-click="threadPreviewView.onClickMarkAsRead" t-ref="markAsRead"/>
                         </t>
                     </div>
                 </div>