Add animation on profile pic hover

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

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 1b7da572e7083c3d65ae1450912a43fbfdb24b16..1011926bca7365df5b1f0bb0f3387bc62855e74d 100644 (file)
--- a/src/app/molecules/message/Message.scss
+++ b/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;

diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
index ecb3812854d86f7f20f31de1221ad8225dae7cc1..ce447aefb08648ea1c233d478350cff556d08925 100644 (file)
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
+++ b/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)

diff --git a/src/index.scss b/src/index.scss
index 941f94d2464954012dc1dc233c078499771ae8cd..605de41bbdd74dd1b9eca4f467a75b8573746bea 100644 (file)
--- a/src/index.scss
+++ b/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;
 }