fix borders

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/hotbar/hotbar-icon.scss

@@ -114,5 +114,16 @@
 
   img {
     padding: 3px;
+    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;
+      }
+    }
   }
 }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -72,7 +72,12 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
 
   const renderIcon = () => {
     if (icon) {
-      return <img src={icon} width={size} height={size} />;
+      return <img
+        {...rest}
+        src={icon}
+        className={active ? "active" : "default"}
+        width={size}
+        height={size} />;
     } else {
       return <Avatar
         {...rest}