From 688abbd99900f4da554e8504bcfaaa9a069f9b4d Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Sun, 17 Feb 2019 00:54:42 +0100
Subject: [PATCH] Improve look&feel

---
 app/index.html                                |  6 ++---
 .../ConnectionSetup/ConnectionSetup.tsx       |  5 ++--
 app/src/components/Tree/TreeNode.tsx          | 23 ++++++++++---------
 app/src/components/Tree/TreeNodeSubnodes.tsx  |  2 +-
 app/src/components/Tree/TreeNodeTitle.tsx     | 16 +++++++++----
 5 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/app/index.html b/app/index.html
index afa75c8..edc02e0 100644
--- a/app/index.html
+++ b/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;}
           }
@@ -28,11 +28,11 @@
           }
 
           ::-webkit-scrollbar-track {
-              -webkit-box-shadow: inset 0 0 6px rgba(30,30,30,0.3);
+            -webkit-box-shadow: inset 0 0 6px rgba(30,30,30,0.3);
           }
 
           ::-webkit-scrollbar-thumb {
-              background-color: rgba(140,140,140,0.8);
+            background-color: rgba(140,140,140,0.8);
           }
         </style>
         <style>
diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
index 76121fb..dd1d9b1 100644
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/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',
diff --git a/app/src/components/Tree/TreeNode.tsx b/app/src/components/Tree/TreeNode.tsx
index d16269f..f36edf9 100644
--- a/app/src/components/Tree/TreeNode.tsx
+++ b/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
-            collapsed={this.collapsed()}
-            treeNode={this.props.treeNode}
-            name={this.props.name}
-            didSelectNode={this.didSelectTopic}
-          />
-        </span>
+        <TreeNodeTitle
+          style={animation}
+          collapsed={this.collapsed()}
+          treeNode={this.props.treeNode}
+          name={this.props.name}
+          didSelectNode={this.didSelectTopic}
+          className={highlightClass}
+        />
         {this.renderNodes()}
       </div>
     )
diff --git a/app/src/components/Tree/TreeNodeSubnodes.tsx b/app/src/components/Tree/TreeNodeSubnodes.tsx
index 952c87e..50a3af2 100644
--- a/app/src/components/Tree/TreeNodeSubnodes.tsx
+++ b/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',
   },
 })
 
diff --git a/app/src/components/Tree/TreeNodeTitle.tsx b/app/src/components/Tree/TreeNodeTitle.tsx
index 2245eba..a2a2d0f 100644
--- a/app/src/components/Tree/TreeNodeTitle.tsx
+++ b/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,