From 3870f07eca9cc74ba3a8046e34eaa5a0db4b811b Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 3 Mar 2021 14:50:18 +0300
Subject: [PATCH] A bit of TreeView styling

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/tree-view/tree-view.scss |  6 ++++++
 src/renderer/components/tree-view/tree-view.tsx  | 15 +++------------
 2 files changed, 9 insertions(+), 12 deletions(-)
 create mode 100644 src/renderer/components/tree-view/tree-view.scss

diff --git a/src/renderer/components/tree-view/tree-view.scss b/src/renderer/components/tree-view/tree-view.scss
new file mode 100644
index 0000000000..eae4933eff
--- /dev/null
+++ b/src/renderer/components/tree-view/tree-view.scss
@@ -0,0 +1,6 @@
+.TreeView {
+  .MuiTypography-body1 {
+    font-size: var(--font-size);
+    color: var(--textColorAccent);
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/tree-view/tree-view.tsx b/src/renderer/components/tree-view/tree-view.tsx
index 0e9cf2dd57..efa774b776 100644
--- a/src/renderer/components/tree-view/tree-view.tsx
+++ b/src/renderer/components/tree-view/tree-view.tsx
@@ -1,6 +1,7 @@
+import "./tree-view.scss";
+
 import React from "react";
 import { Icon } from "../icon";
-import { makeStyles } from "@material-ui/core/styles";
 import TreeView from "@material-ui/lab/TreeView";
 import TreeItem from "@material-ui/lab/TreeItem";
 
@@ -14,17 +15,7 @@ interface Props {
   data: NavigationTree[]
 }
 
-const useStyles = makeStyles({
-  root: {
-    height: 110,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export function RecursiveTreeView({ data }: Props) {
-  const classes = useStyles();
-
   const renderTree = (nodes: NavigationTree[]) => {
     return nodes.map(node => (
       <TreeItem key={node.id} nodeId={node.id} label={node.name}>
@@ -35,7 +26,7 @@ export function RecursiveTreeView({ data }: Props) {
 
   return (
     <TreeView
-      className={classes.root}
+      className="TreeView"
       defaultCollapseIcon={<Icon material="expand_more"/>}
       defaultExpandIcon={<Icon material="chevron_right" />}
     >