From 794e8ed869b74f81a1528e9c26104a28a6dce5a2 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 15 Jun 2021 15:43:01 +0300
Subject: [PATCH] Showing category icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+catalog/catalog-menu.tsx  | 10 ++++++++++
 .../components/+catalog/catalog-tree.module.css    | 14 +++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog-menu.tsx b/src/renderer/components/+catalog/catalog-menu.tsx
index c7c3db0774..72d990cb93 100644
--- a/src/renderer/components/+catalog/catalog-menu.tsx
+++ b/src/renderer/components/+catalog/catalog-menu.tsx
@@ -28,6 +28,7 @@ import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 import { Icon } from "../icon";
 import { StylesProvider } from "@material-ui/core";
 import { cssNames } from "../../utils";
+import type { CatalogCategory } from "../../api/catalog-entity";
 
 type Props = {
   onItemClick: (id: string) => void;
@@ -37,6 +38,14 @@ function getCategories() {
   return catalogCategoryRegistry.items;
 }
 
+function getCategoryIcon(category: CatalogCategory) {
+  if (!category.metadata?.icon) return null;
+
+  return category.metadata.icon.includes("<svg")
+    ? <Icon small svg={category.metadata.icon}/>
+    : <Icon small material={category.metadata.icon}/>;
+}
+
 function Item(props: TreeItemProps) {
   return (
     <TreeItem classes={treeStyles} {...props}/>
@@ -63,6 +72,7 @@ export function CatalogMenu(props: Props) {
             {
               getCategories().map(category => (
                 <Item
+                  icon={getCategoryIcon(category)}
                   key={category.getId()}
                   nodeId={category.getId()}
                   label={category.metadata.name}
diff --git a/src/renderer/components/+catalog/catalog-tree.module.css b/src/renderer/components/+catalog/catalog-tree.module.css
index ea4f42d1cf..ba5b6895e1 100644
--- a/src/renderer/components/+catalog/catalog-tree.module.css
+++ b/src/renderer/components/+catalog/catalog-tree.module.css
@@ -19,6 +19,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/* This file overwrites basic Material UI TreeView styles. Can contain only following
+  classnames: root, expanded, selected, content, iconContainer, label, group
+*/
+
 .root {
   color: var(--textColorTertiary);
   min-height: 26px;
@@ -38,17 +42,21 @@
 }
 
 .content:hover {
-  background-color: var(--blue);
-  color: var(--textColorAccent);
+  background-color: var(--sidebarItemHoverBackground);
 }
 
 .group {
-  margin-left: 0;
+  margin-left: 0px;
+}
+
+.group .iconContainer {
+  margin-left: 28px;
 }
 
 .selected > *:first-child {
   background-color: var(--blue);
   color: var(--textColorAccent);
+  border-radius: 2px;
 }
 
 .iconContainer {