Use generated background color for hotbar icons (#2608)

* use generated background color for hotbar icons

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

* style fixes

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

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

@@ -18,12 +18,12 @@
       background-color: var(--primary);
     }
 
-    div.default {
-      background-color: var(--halfGray);
+    &.interactive {
+      margin-left: -3px;
+      border: 3px solid var(--clusterMenuBackground);
     }
 
     &.active {
-      margin-left: -3px;
       border: 3px solid #fff;
     }
 
@@ -64,11 +64,8 @@
     left: 30px;
     min-width: 250px;
 
-    ul {
-      li {
-        font-size: 12px;
-
-      }
+    li.MenuItem {
+      font-size: 0.9em;
     }
   }
 }

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

@@ -12,6 +12,7 @@ import { observable } from "mobx";
 import { navigate } from "../../navigation";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
+import randomColor from "randomcolor";
 import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 
 interface Props extends DOMAttributes<HTMLElement> {
@@ -102,6 +103,12 @@ export class HotbarIcon extends React.Component<Props> {
     }
   }
 
+  generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
+    return {
+      "backgroundColor": randomColor({ seed: entity.metadata.name, luminosity: "dark" })
+    };
+  }
+
   render() {
     const {
       entity, errorClass, isActive,
@@ -121,7 +128,15 @@ export class HotbarIcon extends React.Component<Props> {
     return (
       <div className={className}>
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
-        <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
+        <Avatar
+          {...elemProps}
+          id={entityIconId}
+          variant="square"
+          className={isActive ? "active" : "default"}
+          style={this.generateAvatarStyle(entity)}
+        >
+          {this.iconString}
+        </Avatar>
         { this.badgeIcon }
         <Menu
           usePortal={false}