Add animation on profile pic hover

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/message/Message.scss

@@ -23,6 +23,12 @@
   &__avatar-container {
     padding-top: 6px;
     margin-right: var(--sp-tight);
+    & .avatar-container {
+      transition: transform 200ms var(--fluid-push);
+      &:hover {
+        transform: translateY(-4px);
+      }
+    }
 
     & button {
       cursor: pointer;

src/app/molecules/sidebar-avatar/SidebarAvatar.scss

@@ -16,7 +16,7 @@
   }
   & .avatar-container,
   & .notification-badge {
-    transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97);
+    transition: transform 200ms var(--fluid-push);
   }
   &:hover .avatar-container {
     transform: translateX(4px)

src/index.scss

@@ -157,6 +157,9 @@
   // large size nav drawer & people drawer width => 326px, 312px
   // medium size nav drawer & people drawer width => 280, 268
 
+  /* transition curves */
+  --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
+  
   --font-family: 'Roboto', 'Supreme', sans-serif;
 }