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>

package.json

@@ -262,6 +262,7 @@
     "@types/npm": "^2.0.31",
     "@types/progress-bar-webpack-plugin": "^2.1.0",
     "@types/proper-lockfile": "^4.1.1",
+    "@types/randomcolor": "^0.5.5",
     "@types/react": "^17.0.0",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.0",
@@ -326,6 +327,7 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.0",
     "progress-bar-webpack-plugin": "^2.1.0",
+    "randomcolor": "^0.6.2",
     "raw-loader": "^4.0.1",
     "react-beautiful-dnd": "^13.1.0",
     "react-refresh": "^0.9.0",

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

@@ -18,12 +18,12 @@
       background-color: var(--primary);
     }
 
-    div.default {
+    &.interactive {
-      background-color: var(--halfGray);
+      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.MenuItem {
-      li {
+      font-size: 0.9em;
-        font-size: 12px;
-
-      }
     }
   }
 }

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}

yarn.lock

@@ -1558,6 +1558,11 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b"
   integrity sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==
 
+"@types/randomcolor@^0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.5.5.tgz#6d8af5f87c6bec1e338ae2d0739056cc2e5720fd"
+  integrity sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==
+
 "@types/range-parser@*":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
@@ -11491,6 +11496,11 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+randomcolor@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
+  integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"