Improve look&feel

app/index.html

@@ -13,7 +13,7 @@
 
           @keyframes example {
             0%   {background-color: none;}
-            25%  {background-color: #3f51b5;}
+            25%  {background-color: #3f51b5 ;}
             50%  {background-color: #3f51b5;}
             100% {background-color: none;}
           }

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -72,8 +72,9 @@ const styles = (theme: Theme) => ({
     color: theme.palette.text.primary,
   },
   root: {
-    margin: '13vw 10vw 0 10vw',
-    minWidth: '550px',
+    margin: '13vw auto 0 auto',
+    minWidth: '800px',
+    maxWidth: '850px',
     height: '440px',
     outline: 'none' as 'none',
     display: 'flex' as 'flex',

app/src/components/Tree/TreeNode.tsx

@@ -30,10 +30,10 @@ const styles = (theme: Theme) => {
       marginTop: '-1px',
     },
     selected: {
-      backgroundColor: 'rgba(120, 120, 120, 0.55)',
+      backgroundColor: 'rgba(200, 200, 200, 0.55)',
     },
     hover: {
-      backgroundColor: 'rgba(80, 80, 80, 0.55)',
+      backgroundColor: 'rgba(100, 100, 100, 0.55)',
     },
   }
 }
@@ -187,23 +187,24 @@ class TreeNode extends React.Component<Props, State> {
     this.animationDirty = shouldStartAnimation
 
     const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
+
     return (
       <div
         key={this.props.treeNode.hash()}
-        className={`${classes.node} ${this.props.className} ${highlightClass}`}
+        className={`${classes.node} ${this.props.className}`}
         onClick={this.didClickNode}
         onMouseOver={this.mouseOver}
         onMouseOut={this.mouseOut}
         ref={this.nodeRef}
       >
-        <span ref={this.titleRef} style={animation}>
         <TreeNodeTitle
+          style={animation}
           collapsed={this.collapsed()}
           treeNode={this.props.treeNode}
           name={this.props.name}
           didSelectNode={this.didSelectTopic}
+          className={highlightClass}
         />
-        </span>
         {this.renderNodes()}
       </div>
     )

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -105,7 +105,7 @@ const styles = (theme: Theme) => ({
     clear: 'both' as 'both',
   },
   listItem: {
-    padding: '3px 0px 0px 8px',
+    padding: '0px 0px 0px 8px',
   },
 })
 

app/src/components/Tree/TreeNodeTitle.tsx

@@ -27,7 +27,11 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
 
   public render() {
     return (
-      <span className={this.props.classes.title} onMouseOver={this.props.treeNode.message ? this.mouseOver : undefined}>
+      <span
+        className={`${this.props.classes.title} ${this.props.className}`}
+        onMouseOver={this.props.treeNode.message ? this.mouseOver : undefined}
+        style={this.props.style}
+      >
         {this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
       </span>
     )
@@ -69,17 +73,21 @@ const styles = (theme: Theme) => ({
     overflow: 'hidden' as 'hidden',
     textOverflow: 'ellipsis' as 'ellipsis',
     padding: '0',
-    marginLeft: '5px',
-    display: 'inline-block' as 'inline-block',
+    // display: 'inline-block' as 'inline-block',
   },
   sourceEdge: {
     fontWeight: 'bold' as 'bold',
     overflow: 'hidden' as 'hidden',
-    display: 'inline-block' as 'inline-block',
+    // display: 'inline-block' as 'inline-block',
   },
   title: {
+    borderRadius: '4px',
     lineHeight: '1em',
+    display: 'inline-block' as 'inline-block',
     whiteSpace: 'nowrap' as 'nowrap',
+    padding: '2px 4px 0px 4px',
+    height: '16px',
+    margin: '1px 0px 2px 0px',
   },
   collapsedSubnodes: {
     color: theme.palette.text.secondary,