Change toggle icon and delete other icons to make the tree look cleaner 😢

lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js

@@ -1,15 +1,26 @@
 import { decorators } from 'react-treebeard';
-import { IoFolder, IoDocumentText, IoCode } from 'react-icons/lib/io';
+import { IoChevronRight } from 'react-icons/lib/io';
 import React from 'react';
 import PropTypes from 'prop-types';
-import treeNodeTypes from './tree_node_type';
 
-const iconsColor = '#7d8890';
+function ToggleDecorator({ style }) {
+  const { height, width, arrow } = style;
 
-const iconsMap = {
+  return (
-  [treeNodeTypes.NAMESPACE]: IoFolder,
+    <div style={style.base}>
-  [treeNodeTypes.COMPONENT]: IoDocumentText,
+      <div style={style.wrapper}>
-  [treeNodeTypes.STORY]: IoCode,
+        <IoChevronRight height={height} width={width} style={arrow} />
+      </div>
+    </div>
+  );
+}
+
+ToggleDecorator.propTypes = {
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    arrow: PropTypes.object.isRequired,
+  }).isRequired,
 };
 
 function ContainerDecorator(props) {
@@ -55,15 +66,12 @@ function createHeaderDecoratorScope(parent) {
         ...style.title,
       };
 
-      const Icon = iconsMap[node.type];
-
       if (!node.children || !node.children.length) {
         newStyleTitle.fontSize = '13px';
       }
 
       return (
         <div style={style.base} role="menuitem" tabIndex="0" onKeyDown={this.onKeyDown}>
-          {Icon && <Icon color={iconsColor} />}
           <a style={newStyleTitle}>
             {node.name}
           </a>
@@ -90,5 +98,6 @@ export default function(parent) {
     ...decorators,
     Header: createHeaderDecoratorScope(parent),
     Container: ContainerDecorator,
+    Toggle: ToggleDecorator,
   };
 }

lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js

@@ -39,13 +39,12 @@ export default {
           position: 'absolute',
           top: '50%',
           left: '50%',
-          margin: '-10px 0 0 -4px',
+          margin: '-12px 0 0 -4px',
         },
         height: 10,
         width: 10,
         arrow: {
           fill: '#9DA5AB',
-          strokeWidth: 0,
         },
       },
       header: {