Using avatar in settings layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -69,7 +69,9 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
                 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/+entity-settings/entity-settings.module.css

@@ -27,4 +27,8 @@
   /* Simulate text-overflow:ellipsis styles but for multiple text lines */
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+}
+
+.settingsAvatar {
+  margin: 0 10px;
 }

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -33,8 +33,8 @@ import { EntitySettingRegistry } from "../../../extensions/registries";
 import type { EntitySettingsRouteParams } from "../../../common/routes";
 import { groupBy } from "lodash";
 import { SettingLayout } from "../layout/setting-layout";
-import { HotbarIcon } from "../hotbar/hotbar-icon";
 import logger from "../../../common/logger";
+import { Avatar } from "../avatar/avatar";
 
 interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 }
@@ -96,11 +96,11 @@ export class EntitySettings extends React.Component<Props> {
     return (
       <>
         <div className="flex items-center pb-8">
-          <HotbarIcon
-            uid={this.entity.metadata.uid}
+          <Avatar
             title={this.entity.metadata.name}
-            source={this.entity.metadata.source}
+            colorHash={`${this.entity.metadata.name}-${this.entity.metadata.source}`}
             src={this.entity.spec.icon?.src}
+            className={styles.settingsAvatar}
           />
           <div className={styles.entityName}>
             {this.entity.metadata.name}

src/renderer/components/avatar/avatar.tsx

@@ -72,7 +72,7 @@ function getLabelFromTitle(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, variant = "rounded", size, colorHash, children, background, imgProps, src, className, ...rest } = props;
+  const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, ...rest } = props;
 
   const getBackgroundColor = () => {
     return background || randomColor({ seed: colorHash, luminosity: "dark" });

src/renderer/components/layout/setting-layout.scss

@@ -120,10 +120,6 @@
           }
         }
       }
-
-      .HotbarIcon {
-        margin: 0 11px;
-      }
     }
   }