From 1f3b733d83e2c6bba66c1b760f8e4c2e23d1fff3 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 22 Jun 2021 15:41:28 +0300
Subject: [PATCH] EntityIcon in Settings sidebar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+entity-settings/entity-settings.tsx   | 11 ++++++++++-
 src/renderer/components/layout/setting-layout.scss    | 11 ++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx
index 4a0349b01a..ad0713e342 100644
--- a/src/renderer/components/+entity-settings/entity-settings.tsx
+++ b/src/renderer/components/+entity-settings/entity-settings.tsx
@@ -33,6 +33,7 @@ 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";
 
 interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 }
@@ -83,7 +84,15 @@ export class EntitySettings extends React.Component<Props> {
 
     return (
       <>
-        <h2>{this.entity.metadata.name}</h2>
+        <div className="flex items-center pb-8">
+          <HotbarIcon
+            uid={this.entity.metadata.uid}
+            title={this.entity.metadata.name}
+            source={this.entity.metadata.source}
+            src={this.entity.spec.icon?.src}
+          />
+          <h2>{this.entity.metadata.name}</h2>
+        </div>
         <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
           { groups.map((group, groupIndex) => (
             <React.Fragment key={`group-${groupIndex}`}>
diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index 017705b044..565502f475 100644
--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@@ -53,12 +53,12 @@
       padding: 60px 0 60px 20px;
 
       h2 {
-        margin-bottom: 10px;
-        font-size: 18px;
-        padding: 6px 10px;
+        font-size: 15px;
         overflow-wrap: anywhere;
         color: var(--textColorAccent);
         font-weight: 600;
+        padding-right: 20px;
+        word-break: break-word;
       }
 
       hr {
@@ -81,6 +81,7 @@
           font-weight: 800;
           line-height: 16px;
           text-transform: uppercase;
+          color: var(--textColorPrimary);
 
           &:first-child {
             padding-top: 0;
@@ -119,6 +120,10 @@
           }
         }
       }
+
+      .HotbarIcon {
+        margin: 0 11px;
+      }
     }
   }