From 9ae530bd584e61e3d713ea634adba79a8f0f0dcc Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:10:55 +0500
Subject: [PATCH] MM-55505 - Updating thread avatars hover state (#25488)

* MM-55505 - Updating thread avatars hover state

* Updating elevation

* Updating tests
---
 .../team_warning_banner.test.tsx.snap         |  8 ++--
 .../__snapshots__/thread_footer.test.tsx.snap | 36 +++++++--------
 .../user_group_popover.test.tsx.snap          | 20 ++++-----
 .../group_member_list.test.tsx.snap           | 20 ++++-----
 .../widgets/simple_tooltip/simple_tooltip.tsx |  2 +-
 .../__snapshots__/avatars.test.tsx.snap       | 44 +++++++++----------
 .../widgets/users/avatars/avatars.scss        |  5 ++-
 7 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
index d0b9b199c2..3e4708cc2b 100644
--- a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap
@@ -567,7 +567,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
             >
               <OverlayTrigger
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 overlay={
                   <Tooltip
                     className="hidden-xs"
@@ -587,7 +587,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
               >
                 <OverlayTrigger
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   overlay={
                     <OverlayWrapper
                       className="hidden-xs"
@@ -897,7 +897,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
             >
               <OverlayTrigger
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 overlay={
                   <Tooltip
                     className="hidden-xs"
@@ -917,7 +917,7 @@ exports[`components/channel_invite_modal/team_warning_banner should match snapsh
               >
                 <OverlayTrigger
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   overlay={
                     <OverlayWrapper
                       className="hidden-xs"
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
index 2cf5b16bdf..3f75708eb7 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                 <OverlayTrigger
                   animation={true}
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   onClick={[Function]}
                   onEntered={[Function]}
                   overlay={
@@ -183,7 +183,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   <OverlayTrigger
                     animation={true}
                     defaultOverlayShown={false}
-                    delayShow={500}
+                    delayShow={100}
                     onClick={[Function]}
                     onEntered={[Function]}
                     overlay={
@@ -386,7 +386,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                 <OverlayTrigger
                   animation={true}
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   onClick={[Function]}
                   onEntered={[Function]}
                   overlay={
@@ -409,7 +409,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   <OverlayTrigger
                     animation={true}
                     defaultOverlayShown={false}
-                    delayShow={500}
+                    delayShow={100}
                     onClick={[Function]}
                     onEntered={[Function]}
                     overlay={
@@ -612,7 +612,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                 <OverlayTrigger
                   animation={true}
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   onClick={[Function]}
                   onEntered={[Function]}
                   overlay={
@@ -635,7 +635,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   <OverlayTrigger
                     animation={true}
                     defaultOverlayShown={false}
-                    delayShow={500}
+                    delayShow={100}
                     onClick={[Function]}
                     onEntered={[Function]}
                     overlay={
@@ -751,7 +751,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
           <OverlayTrigger
             animation={true}
             defaultOverlayShown={false}
-            delayShow={500}
+            delayShow={100}
             onEntered={[Function]}
             overlay={
               <Tooltip
@@ -773,7 +773,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onEntered={[Function]}
               overlay={
                 <OverlayWrapper
@@ -1094,7 +1094,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
     >
       <OverlayTrigger
         defaultOverlayShown={false}
-        delayShow={500}
+        delayShow={100}
         overlay={
           <Tooltip
             className="hidden-xs"
@@ -1122,7 +1122,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
       >
         <OverlayTrigger
           defaultOverlayShown={false}
-          delayShow={500}
+          delayShow={100}
           overlay={
             <OverlayWrapper
               className="hidden-xs"
@@ -1315,7 +1315,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                 <OverlayTrigger
                   animation={true}
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   onClick={[Function]}
                   onEntered={[Function]}
                   overlay={
@@ -1338,7 +1338,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   <OverlayTrigger
                     animation={true}
                     defaultOverlayShown={false}
-                    delayShow={500}
+                    delayShow={100}
                     onClick={[Function]}
                     onEntered={[Function]}
                     overlay={
@@ -1541,7 +1541,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                 <OverlayTrigger
                   animation={true}
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   onClick={[Function]}
                   onEntered={[Function]}
                   overlay={
@@ -1564,7 +1564,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   <OverlayTrigger
                     animation={true}
                     defaultOverlayShown={false}
-                    delayShow={500}
+                    delayShow={100}
                     onClick={[Function]}
                     onEntered={[Function]}
                     overlay={
@@ -1767,7 +1767,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                 <OverlayTrigger
                   animation={true}
                   defaultOverlayShown={false}
-                  delayShow={500}
+                  delayShow={100}
                   onClick={[Function]}
                   onEntered={[Function]}
                   overlay={
@@ -1790,7 +1790,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   <OverlayTrigger
                     animation={true}
                     defaultOverlayShown={false}
-                    delayShow={500}
+                    delayShow={100}
                     onClick={[Function]}
                     onEntered={[Function]}
                     overlay={
@@ -1906,7 +1906,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
           <OverlayTrigger
             animation={true}
             defaultOverlayShown={false}
-            delayShow={500}
+            delayShow={100}
             onEntered={[Function]}
             overlay={
               <Tooltip
@@ -1928,7 +1928,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onEntered={[Function]}
               overlay={
                 <OverlayWrapper
diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
index e3aedeca59..0f913db227 100644
--- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
@@ -1166,7 +1166,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                 >
                                                   <OverlayTrigger
                                                     defaultOverlayShown={false}
-                                                    delayShow={500}
+                                                    delayShow={100}
                                                     overlay={
                                                       <Tooltip
                                                         className="hidden-xs"
@@ -1186,7 +1186,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   >
                                                     <OverlayTrigger
                                                       defaultOverlayShown={false}
-                                                      delayShow={500}
+                                                      delayShow={100}
                                                       overlay={
                                                         <OverlayWrapper
                                                           className="hidden-xs"
@@ -1374,7 +1374,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                 >
                                                   <OverlayTrigger
                                                     defaultOverlayShown={false}
-                                                    delayShow={500}
+                                                    delayShow={100}
                                                     overlay={
                                                       <Tooltip
                                                         className="hidden-xs"
@@ -1394,7 +1394,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   >
                                                     <OverlayTrigger
                                                       defaultOverlayShown={false}
-                                                      delayShow={500}
+                                                      delayShow={100}
                                                       overlay={
                                                         <OverlayWrapper
                                                           className="hidden-xs"
@@ -1582,7 +1582,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                 >
                                                   <OverlayTrigger
                                                     defaultOverlayShown={false}
-                                                    delayShow={500}
+                                                    delayShow={100}
                                                     overlay={
                                                       <Tooltip
                                                         className="hidden-xs"
@@ -1602,7 +1602,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   >
                                                     <OverlayTrigger
                                                       defaultOverlayShown={false}
-                                                      delayShow={500}
+                                                      delayShow={100}
                                                       overlay={
                                                         <OverlayWrapper
                                                           className="hidden-xs"
@@ -1790,7 +1790,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                 >
                                                   <OverlayTrigger
                                                     defaultOverlayShown={false}
-                                                    delayShow={500}
+                                                    delayShow={100}
                                                     overlay={
                                                       <Tooltip
                                                         className="hidden-xs"
@@ -1810,7 +1810,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   >
                                                     <OverlayTrigger
                                                       defaultOverlayShown={false}
-                                                      delayShow={500}
+                                                      delayShow={100}
                                                       overlay={
                                                         <OverlayWrapper
                                                           className="hidden-xs"
@@ -1998,7 +1998,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                 >
                                                   <OverlayTrigger
                                                     defaultOverlayShown={false}
-                                                    delayShow={500}
+                                                    delayShow={100}
                                                     overlay={
                                                       <Tooltip
                                                         className="hidden-xs"
@@ -2018,7 +2018,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                   >
                                                     <OverlayTrigger
                                                       defaultOverlayShown={false}
-                                                      delayShow={500}
+                                                      delayShow={100}
                                                       overlay={
                                                         <OverlayWrapper
                                                           className="hidden-xs"
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
index 99103e0c26..99ed93f409 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
@@ -440,7 +440,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={500}
+                                    delayShow={100}
                                     overlay={
                                       <Tooltip
                                         className="hidden-xs"
@@ -460,7 +460,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={500}
+                                      delayShow={100}
                                       overlay={
                                         <OverlayWrapper
                                           className="hidden-xs"
@@ -648,7 +648,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={500}
+                                    delayShow={100}
                                     overlay={
                                       <Tooltip
                                         className="hidden-xs"
@@ -668,7 +668,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={500}
+                                      delayShow={100}
                                       overlay={
                                         <OverlayWrapper
                                           className="hidden-xs"
@@ -856,7 +856,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={500}
+                                    delayShow={100}
                                     overlay={
                                       <Tooltip
                                         className="hidden-xs"
@@ -876,7 +876,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={500}
+                                      delayShow={100}
                                       overlay={
                                         <OverlayWrapper
                                           className="hidden-xs"
@@ -1064,7 +1064,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={500}
+                                    delayShow={100}
                                     overlay={
                                       <Tooltip
                                         className="hidden-xs"
@@ -1084,7 +1084,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={500}
+                                      delayShow={100}
                                       overlay={
                                         <OverlayWrapper
                                           className="hidden-xs"
@@ -1272,7 +1272,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                 >
                                   <OverlayTrigger
                                     defaultOverlayShown={false}
-                                    delayShow={500}
+                                    delayShow={100}
                                     overlay={
                                       <Tooltip
                                         className="hidden-xs"
@@ -1292,7 +1292,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <OverlayTrigger
                                       defaultOverlayShown={false}
-                                      delayShow={500}
+                                      delayShow={100}
                                       overlay={
                                         <OverlayWrapper
                                           className="hidden-xs"
diff --git a/webapp/channels/src/components/widgets/simple_tooltip/simple_tooltip.tsx b/webapp/channels/src/components/widgets/simple_tooltip/simple_tooltip.tsx
index cbca40fdd8..e5fc59b57d 100644
--- a/webapp/channels/src/components/widgets/simple_tooltip/simple_tooltip.tsx
+++ b/webapp/channels/src/components/widgets/simple_tooltip/simple_tooltip.tsx
@@ -22,7 +22,7 @@ const SimpleTooltip = ({
     children,
     placement = 'top',
     className = 'hidden-xs',
-    delayShow = 500,
+    delayShow = 100,
     style,
     ...props
 }: Props & Omit<ComponentProps<typeof OverlayTrigger>, 'overlay'>) => {
diff --git a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
index c60ea6c672..58395a11b5 100644
--- a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
@@ -114,7 +114,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -137,7 +137,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -340,7 +340,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -363,7 +363,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -566,7 +566,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -589,7 +589,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -705,7 +705,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
       <OverlayTrigger
         animation={true}
         defaultOverlayShown={false}
-        delayShow={500}
+        delayShow={100}
         onEntered={[Function]}
         overlay={
           <Tooltip
@@ -727,7 +727,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
         <OverlayTrigger
           animation={true}
           defaultOverlayShown={false}
-          delayShow={500}
+          delayShow={100}
           onEntered={[Function]}
           overlay={
             <OverlayWrapper
@@ -936,7 +936,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -959,7 +959,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -1162,7 +1162,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -1185,7 +1185,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -1388,7 +1388,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -1411,7 +1411,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -1527,7 +1527,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
       <OverlayTrigger
         animation={true}
         defaultOverlayShown={false}
-        delayShow={500}
+        delayShow={100}
         onEntered={[Function]}
         overlay={
           <Tooltip
@@ -1549,7 +1549,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
         <OverlayTrigger
           animation={true}
           defaultOverlayShown={false}
-          delayShow={500}
+          delayShow={100}
           onEntered={[Function]}
           overlay={
             <OverlayWrapper
@@ -1756,7 +1756,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -1779,7 +1779,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -1982,7 +1982,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -2005,7 +2005,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
@@ -2208,7 +2208,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
             <OverlayTrigger
               animation={true}
               defaultOverlayShown={false}
-              delayShow={500}
+              delayShow={100}
               onClick={[Function]}
               onEntered={[Function]}
               overlay={
@@ -2231,7 +2231,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               <OverlayTrigger
                 animation={true}
                 defaultOverlayShown={false}
-                delayShow={500}
+                delayShow={100}
                 onClick={[Function]}
                 onEntered={[Function]}
                 overlay={
diff --git a/webapp/channels/src/components/widgets/users/avatars/avatars.scss b/webapp/channels/src/components/widgets/users/avatars/avatars.scss
index 872407f726..7da42625f1 100644
--- a/webapp/channels/src/components/widgets/users/avatars/avatars.scss
+++ b/webapp/channels/src/components/widgets/users/avatars/avatars.scss
@@ -43,6 +43,8 @@
     }
 
     > button {
+        transition: all 100ms ease-in-out;
+
         &:not(:first-child) {
             margin-left: var(--offset);
         }
@@ -50,7 +52,8 @@
         &:hover,
         &:focus {
             z-index: 1;
-            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
+            box-shadow: var(--elevation-2);
+            transform: scale(1.2);
         }
     }