From bbe2702cecf59d60c1747b38dee1d0820297189e Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Thu, 7 Apr 2022 08:19:49 +0000
Subject: [PATCH] [REF] mail: `Follower`, 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-2818584

closes odoo/odoo#88196

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../src/components/follower/follower.scss     | 46 ++++---------------
 .../src/components/follower/follower.xml      | 10 ++--
 2 files changed, 13 insertions(+), 43 deletions(-)

diff --git a/addons/mail/static/src/components/follower/follower.scss b/addons/mail/static/src/components/follower/follower.scss
index 2207fd58789..377f10f1581 100644
--- a/addons/mail/static/src/components/follower/follower.scss
+++ b/addons/mail/static/src/components/follower/follower.scss
@@ -2,55 +2,25 @@
 // Layout
 // ------------------------------------------------------------------
 
-.o_Follower {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-between;
-    padding: map-get($spacers, 0);
-}
-
 .o_Follower_avatar {
-    width: 24px;
-    height: 24px;
-    margin-inline-end: map-get($spacers, 2);
+    width: $o-mail-partner-avatar-size;
+    height: $o-mail-partner-avatar-size;
 }
 
 .o_Follower_details {
-    align-items: center;
-    display: flex;
-    flex: 1;
     min-width: 0;
-    padding-left: map-get($spacers, 3);
-    padding-right: map-get($spacers, 3);
 }
 
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_Follower_avatar {
-    border-radius: 50%;
+.o_Follower_button:hover {
+    background: $gray-400;
+    color: $black;
 }
 
-.o_Follower_button {
-    border-radius: 0;
-
-    &:hover {
-        background: gray('400');
-        color: $black;
-    }
-}
-
-.o_Follower_details {
-    color: gray('700');
-
-    &:hover {
-        background: gray('400');
-        color: $black;
-    }
-
-    &.o-inactive {
-        opacity: 0.25;
-        font-style: italic;
-    }
+.o_Follower_details:hover {
+    background: $gray-400;
+    color: $black;
 }
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
index 11cbbe8421b..901643b8ad2 100644
--- a/addons/mail/static/src/components/follower/follower.xml
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -3,16 +3,16 @@
 
     <t t-name="mail.Follower" owl="1">
         <t t-if="follower">
-            <div class="o_Follower" t-attf-class="{{ className }}" t-on-click="props.onClick" t-ref="root">
-                <a class="o_Follower_details d-flex" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
-                    <img class="o_Follower_avatar" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
+            <div class="o_Follower d-flex justify-content-between p-0" t-attf-class="{{ className }}" t-on-click="props.onClick" t-ref="root">
+                <a class="o_Follower_details d-flex align-items-center flex-grow-1 px-3 text-700" t-att-class="{ 'o-inactive font-italic opacity-25': !follower.isActive }" href="#" t-on-click="_onClickDetails">
+                    <img class="o_Follower_avatar me-2 rounded-circle" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
                     <span class="o_Follower_name flex-shrink text-truncate" t-esc="follower.partner.nameOrDisplayName"/>
                 </a>
                 <t t-if="follower.isEditable">
-                    <button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
+                    <button class="o_Follower_button o_Follower_editButton btn btn-icon rounded-0" title="Edit subscription" t-on-click="_onClickEdit">
                         <i class="fa fa-pencil"/>
                     </button>
-                    <button class="btn btn-icon o_Follower_button o_Follower_removeButton" title="Remove this follower" t-on-click="_onClickRemove">
+                    <button class="o_Follower_button o_Follower_removeButton btn btn-icon rounded-0" title="Remove this follower" t-on-click="_onClickRemove">
                         <i class="fa fa-remove"/>
                     </button>
                 </t>