Replacing <Avatar/> component by native one (#4452)

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 {

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";
 
 interface Props<T extends CatalogEntity> {
   item: CatalogEntityItem<T> | null | undefined;
@@ -60,19 +60,18 @@ 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.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material}/>}
+              </Avatar>
               {item?.enabled && (
                 <div className={styles.hint}>
                   Click to open

src/renderer/components/+catalog/catalog.module.css

@@ -140,3 +140,7 @@
   background-color: var(--blue);
   --color-active: white;
 }
+
+.catalogAvatar {
+  font-size: 1.2ch;
+}

src/renderer/components/+catalog/catalog.tsx

@@ -41,10 +41,10 @@ import { createStorage, prevDefault } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
-import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
 import { Icon } from "../icon";
 import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item";
+import { Avatar } from "../avatar";
 
 export const previousActiveTab = createStorage("catalog-previous-active-tab", browseCatalogTab);
 
@@ -213,15 +213,16 @@ export class Catalog extends React.Component<Props> {
 
     return (
       <>
-        <HotbarIcon
-          uid={`catalog-icon-${item.getId()}`}
+        <Avatar
           title={item.getName()}
-          source={item.source}
+          colorHash={`${item.getName()}-${item.source}`}
           src={item.entity.spec.icon?.src}
-          material={item.entity.spec.icon?.material}
           background={item.entity.spec.icon?.background}
+          className={styles.catalogAvatar}
           size={24}
-        />
+        >
+          {item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material} small/>}
+        </Avatar>
         <span>{item.name}</span>
         <Icon
           small