From 1e00ec977ea9e79c5ad67435c49f5b487fb7c1d5 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 29 Nov 2021 12:38:25 +0300
Subject: [PATCH] Usign avatar in catalog entity details

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+catalog/catalog-entity-details.module.css    |  5 ++---
 .../+catalog/catalog-entity-details.tsx           | 15 ++++++---------
 src/renderer/components/+catalog/catalog.tsx      |  3 +--
 src/renderer/components/avatar/avatar.module.css  |  1 +
 src/renderer/components/avatar/avatar.tsx         |  7 +++----
 src/renderer/components/hotbar/hotbar-icon.tsx    |  3 +--
 .../components/layout/sidebar-cluster.tsx         |  3 +--
 7 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog-entity-details.module.css b/src/renderer/components/+catalog/catalog-entity-details.module.css
index 27b2c69701..bc66de6566 100644
--- a/src/renderer/components/+catalog/catalog-entity-details.module.css
+++ b/src/renderer/components/+catalog/catalog-entity-details.module.css
@@ -33,9 +33,8 @@
   margin-right: calc(var(--margin) * 3);
 
   .avatar {
-    :global(.MuiAvatar-root) {
-      font-size: 3ch;
-    }
+    font-size: 3ch;
+    cursor: pointer;
   }
 
   .hint {
diff --git a/src/renderer/components/+catalog/catalog-entity-details.tsx b/src/renderer/components/+catalog/catalog-entity-details.tsx
index 40bc63fdee..98c3142a2d 100644
--- a/src/renderer/components/+catalog/catalog-entity-details.tsx
+++ b/src/renderer/components/+catalog/catalog-entity-details.tsx
@@ -27,10 +27,10 @@ import type { CatalogCategory, CatalogEntity } from "../../../common/catalog";
 import { Icon } from "../icon";
 import { CatalogEntityDrawerMenu } from "./catalog-entity-drawer-menu";
 import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
-import { HotbarIcon } from "../hotbar/hotbar-icon";
 import type { CatalogEntityItem } from "./catalog-entity-item";
 import { isDevelopment } from "../../../common/vars";
 import { cssNames } from "../../utils";
+import { Avatar } from "../avatar/avatar";
 
 interface Props<T extends CatalogEntity> {
   item: CatalogEntityItem<T> | null | undefined;
@@ -60,17 +60,14 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
         {showDetails && (
           <div className="flex">
             <div className={styles.entityIcon}>
-              <HotbarIcon
-                uid={item.id}
+              <Avatar
                 title={item.name}
-                source={item.source}
-                src={item.entity.spec.icon?.src}
-                material={item.entity.spec.icon?.material}
-                background={item.entity.spec.icon?.background}
-                disabled={!item?.enabled}
-                onClick={() => item.onRun()}
+                colorHash={`${item.name}-${item.source}`}
                 size={128}
+                src={item.entity.spec.icon?.src}
                 data-testid="detail-panel-hot-bar-icon"
+                background={item.entity.spec.icon?.background}
+                onClick={() => item.onRun()}
                 className={styles.avatar}
               />
               {item?.enabled && (
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index 86977923fc..01b4bf0f1d 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -219,8 +219,7 @@ export class Catalog extends React.Component<Props> {
           src={item.entity.spec.icon?.src}
           background={item.entity.spec.icon?.background}
           className={styles.catalogAvatar}
-          width={24}
-          height={24}
+          size={24}
         >
           {item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material}/>}
         </Avatar>
diff --git a/src/renderer/components/avatar/avatar.module.css b/src/renderer/components/avatar/avatar.module.css
index 96a6b1866b..9bfd07d8a9 100644
--- a/src/renderer/components/avatar/avatar.module.css
+++ b/src/renderer/components/avatar/avatar.module.css
@@ -28,6 +28,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  user-select: none;
 
   img {
     width: 100%;
diff --git a/src/renderer/components/avatar/avatar.tsx b/src/renderer/components/avatar/avatar.tsx
index 828feb05cc..8b9deeb6d2 100644
--- a/src/renderer/components/avatar/avatar.tsx
+++ b/src/renderer/components/avatar/avatar.tsx
@@ -29,8 +29,7 @@ import { cssNames, iter } from "../../utils";
 interface Props extends DOMAttributes<any> {
   title: string;
   colorHash?: string;
-  width?: number;
-  height?: number;
+  size?: number;
   src?: string;
   className?: string;
   background?: string;
@@ -73,7 +72,7 @@ function getLabelFromTitle(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, width = 32, height = 32, variant = "rounded", colorHash, children, background, imgProps, src, className, ...rest } = props;
+  const { title, variant = "rounded", size, colorHash, children, background, imgProps, src, className, ...rest } = props;
 
   const getBackgroundColor = () => {
     return background || randomColor({ seed: colorHash, luminosity: "dark" });
@@ -93,7 +92,7 @@ export function Avatar(props: Props) {
         [styles.circle]: variant == "circle",
         [styles.rounded]: variant == "rounded",
       }, className)}
-      style={{ width: `${width}px`, height: `${height}px`, backgroundColor: getBackgroundColor() }}
+      style={{ width: `${size}px`, height: `${size}px`, backgroundColor: getBackgroundColor() }}
       {...rest}
     >
       {renderContents()}
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index e14b0618b1..cf75879392 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -90,8 +90,7 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
           title={title}
           colorHash={`${title}-${source}`}
           className={cssNames(active ? "active" : "default", { interactive: !!onClick })}
-          width={size}
-          height={size}
+          size={size}
           src={src}
         >
           {material && <Icon className="materialIcon" material={material} />}
diff --git a/src/renderer/components/layout/sidebar-cluster.tsx b/src/renderer/components/layout/sidebar-cluster.tsx
index f2015a0063..aa9bb57866 100644
--- a/src/renderer/components/layout/sidebar-cluster.tsx
+++ b/src/renderer/components/layout/sidebar-cluster.tsx
@@ -108,8 +108,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       <Avatar
         title={metadata.name}
         colorHash={`${metadata.name}-${metadata.source}`}
-        width={40}
-        height={40}
+        size={40}
         src={spec.icon?.src}
         className={styles.avatar}
       />