From dddcff3e02e9187cc46f1fbeb3cca58aa865408b Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 29 Nov 2021 12:46:04 +0300
Subject: [PATCH] Using avatar in settings layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+catalog/catalog-entity-details.tsx        | 4 +++-
 .../+entity-settings/entity-settings.module.css           | 4 ++++
 .../components/+entity-settings/entity-settings.tsx       | 8 ++++----
 src/renderer/components/avatar/avatar.tsx                 | 2 +-
 src/renderer/components/layout/setting-layout.scss        | 4 ----
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog-entity-details.tsx b/src/renderer/components/+catalog/catalog-entity-details.tsx
index 98c3142a2d..825319ffa4 100644
--- a/src/renderer/components/+catalog/catalog-entity-details.tsx
+++ b/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
diff --git a/src/renderer/components/+entity-settings/entity-settings.module.css b/src/renderer/components/+entity-settings/entity-settings.module.css
index 604ecd5c5b..34873bea06 100644
--- a/src/renderer/components/+entity-settings/entity-settings.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx
index ef4bc480d0..1e24845b5a 100644
--- a/src/renderer/components/+entity-settings/entity-settings.tsx
+++ b/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}
diff --git a/src/renderer/components/avatar/avatar.tsx b/src/renderer/components/avatar/avatar.tsx
index 8b9deeb6d2..b2d6024a3c 100644
--- a/src/renderer/components/avatar/avatar.tsx
+++ b/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" });
diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index 1008ef6259..03472f5579 100644
--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@@ -120,10 +120,6 @@
           }
         }
       }
-
-      .HotbarIcon {
-        margin: 0 11px;
-      }
     }
   }