[IMP] website_mail: allow two different designs for the follow button

Part of https://github.com/odoo/odoo/pull/35749
task-2024197

1 files changed, 41 insertions, 0 deletions

diff --git a/addons/website_mail/static/src/css/website_mail.scss b/addons/website_mail/static/src/css/website_mail.scss
index 6be6bf9007c..def6d8d37cb 100644
--- a/addons/website_mail/static/src/css/website_mail.scss
+++ b/addons/website_mail/static/src/css/website_mail.scss
@@ -2,3 +2,44 @@
 .js_follow[data-follow='off'] .js_unfollow_btn {
     display: none;
 }
+
+.js_follow_icons_container {
+    .js_follow_btn, .js_unfollow_btn {
+        animation: js_follow_fade 1s ease forwards;
+        opacity: 0;
+
+        small {
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        @include hover-focus () {
+            small {
+                transition-duration: 1s;
+                opacity: 1;
+            }
+        };
+    }
+
+    .fa:before {
+        content: "\f0f3";
+        color: $text-muted;
+    }
+
+    .js_follow_btn:hover .fa:before {
+        color: $body-color;
+    }
+
+    .js_unfollow_btn .fa:before {
+        color: theme-color('primary');
+    }
+
+    .js_unfollow_btn:hover .fa:before {
+        content: "\f1f6";
+        color: theme-color('danger');
+    }
+}
+
+@keyframes js_follow_fade {
+    to { opacity: 1; }
+}