diff --git a/package.json b/package.json index ef746df016..6f7737d3ac 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.1.0", "react-refresh": "^0.9.0", diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss index 80252addae..913fbc6cb7 100644 --- a/src/renderer/components/hotbar/hotbar-icon.scss +++ b/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; } } } diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index 94a80df16a..f8bc473e23 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"; import { catalogCategoryRegistry } from "../../api/catalog-category-registry"; interface Props extends DOMAttributes { @@ -102,6 +103,12 @@ export class HotbarIcon extends React.Component { } } + 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 { return (
{entity.metadata.name} - {this.iconString} + + {this.iconString} + { this.badgeIcon }