Remove HotbarIcon box-shadow artifacts (#5142)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/avatar/avatar.tsx

@@ -57,14 +57,7 @@ function getLabelFromTitle(title: string) {
 
 export function Avatar(props: AvatarProps) {
   const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, disabled, ...rest } = props;
-
-  const getBackgroundColor = () => {
-    if (src) {
-      return "transparent";
-    }
-
-    return background || randomColor({ seed: colorHash, luminosity: "dark" });
-  };
+  const colorFromHash = randomColor({ seed: colorHash, luminosity: "dark" });
 
   const renderContents = () => {
     if (src) {
@@ -81,7 +74,11 @@ export function Avatar(props: AvatarProps) {
         [styles.rounded]: variant == "rounded",
         [styles.disabled]: disabled,
       }, className)}
-      style={{ width: `${size}px`, height: `${size}px`, backgroundColor: getBackgroundColor() }}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        background: background || (src ? "transparent" : colorFromHash),
+      }}
       {...rest}
     >
       {renderContents()}

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

@@ -4,7 +4,8 @@
  */
 
 .HotbarIcon {
-  --iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+  --corner: 0px 0px 0px 1px var(--clusterMenuBackground);
+  --iconActiveShadow: var(--corner), var(--corner), 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
   --iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
 
   display: flex;
@@ -24,6 +25,10 @@
 
 .avatar {
   border-radius: 6px;
+
+  &.hasImage {
+    background-color: var(--clusterMenuCellBackground);
+  }
 }
 
 .active {

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

@@ -61,7 +61,7 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
         id={id}
         title={title}
         colorHash={`${title}-${source}`}
-        className={cssNames(styles.avatar, { [styles.active]: active })}
+        className={cssNames(styles.avatar, { [styles.active]: active, [styles.hasImage]: !!src })}
         disabled={disabled}
         size={size}
         src={src}