From 24716eaa0901af3af4e298cbac83533fd425b795 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 5 May 2021 11:59:05 +0300
Subject: [PATCH] Replacing click animations

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-icon.scss        |  1 +
 .../components/hotbar/hotbar-menu.scss        | 21 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index e4ce2708ed..36c72f4006 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -7,6 +7,7 @@
     cursor: pointer;
     transition: none;
     text-shadow: 0 0 4px #0000008f;
+    position: relative;
 
     div.MuiAvatar-colorDefault {
       font-weight:500;
diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index 027644b2ec..1c09cf246f 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -46,7 +46,7 @@
       position: relative;
 
       &.isDraggingOver {
-        box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff;
+        background-color: #3e4148;
 
         &:not(.isDraggingOwner) {
           z-index: 50;
@@ -61,12 +61,16 @@
               transform: translate(0px, -40px)!important;
             }
           }
+
+          &.animateDown {
+            > div {
+              transform: translate(0px, 40px);
+            }
+          }
         }
       }
 
       &.animating {
-        transform: translateZ(0); // Remove flickering artifacts
-
         &:empty {
           animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
           transform: translate3d(0, 0, 0);
@@ -75,7 +79,9 @@
         }
 
         &:not(:empty) {
-          animation: outline 1s cubic-bezier(0.19, 1, 0.22, 1);
+          .HotbarIcon {
+            animation: click .1s;
+          }
         }
       }
     }
@@ -100,13 +106,12 @@
   }
 }
 
-// TODO: Use theme-aware colors
-@keyframes outline {
+@keyframes click {
   0% {
-    box-shadow: 0 0 0px 11px $clusterMenuBackground, 0 0 0px 15px #ffffff00;
+    margin-top: 0;
   }
 
   100% {
-    box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #ffffff;
+    margin-top: 2px;
   }
 }
\ No newline at end of file