From 98bed1b7f6f80fc9fa4389198b0298796e7f8641 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Fri, 23 Apr 2021 12:51:14 +0300
Subject: [PATCH] use generated background color for hotbar icons

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 package.json                                   |  2 ++
 src/renderer/components/hotbar/hotbar-icon.tsx | 17 ++++++++++++++++-
 yarn.lock                                      | 10 ++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 378b2428f4..3112bb60db 100644
--- a/package.json
+++ b/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.0.0",
     "react-refresh": "^0.9.0",
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index cbf77fba44..2a7476fb39 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/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";
 
 interface Props extends DOMAttributes<HTMLElement> {
   entity: CatalogEntity;
@@ -86,6 +87,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,
@@ -105,7 +112,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>
         <Menu
           usePortal={false}
           htmlFor={entityIconId}
diff --git a/yarn.lock b/yarn.lock
index 206c497941..93a7c4dd0c 100644
--- a/yarn.lock
+++ b/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"
@@ -11481,6 +11486,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"