From d54f1db99043e78adbd06c1e66dd33f0896725cf Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 22 Sep 2021 16:36:12 +0300
Subject: [PATCH] highlight hotbar-icon border on click

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../components/hotbar/hotbar-icon.scss        | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index 2f9ad6a696..e713b20432 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -31,12 +31,20 @@
 }
 
 .HotbarIcon {
+  --iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+  --iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+
   border-radius: 6px;
   user-select: none;
   cursor: pointer;
   transition: none;
   text-shadow: 0 0 4px #0000008f;
   position: relative;
+  z-index: 0; // allows to catch state of :active pseudo-selector
+
+  &:active .MuiAvatar-root {
+    box-shadow: var(--iconActiveShadow) !important;
+  }
 
   div.MuiAvatar-colorDefault {
     font-weight:500;
@@ -64,20 +72,17 @@
     box-shadow: none;
   }
 
-  div.MuiAvatar-root {
+  .MuiAvatar-root {
     width: var(--size);
     height: var(--size);
+    border-radius: 6px;
 
     &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+      box-shadow: var(--iconActiveShadow);
     }
 
-    &.interactive {
-      &:hover {
-        &:not(.active) {
-          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-        }
-      }
+    &.interactive:not(.active):hover {
+      box-shadow: var(--iconHoverShadow);
     }
   }
 
@@ -117,20 +122,6 @@
     }
   }
 
-  img {
-    border-radius: 6px;
-
-    &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
-    }
-
-    &:hover {
-      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-      }
-    }
-  }
-
   .materialIcon {
     margin-left: 1px;
     margin-top: 1px;