From 28e3f1cb6e1d01b78d8661cbd695ed549eb516a4 Mon Sep 17 00:00:00 2001
From: Kris De Volder <kdevolder@pivotal.io>
Date: Thu, 29 Aug 2019 09:05:40 -0700
Subject: [PATCH 1/2] CSS tweaks for sprotty SI diagram

---
 headless-services/sprotty-si-view/client/css/diagram.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/headless-services/sprotty-si-view/client/css/diagram.css b/headless-services/sprotty-si-view/client/css/diagram.css
index f92c3f853..8d2bc681b 100644
--- a/headless-services/sprotty-si-view/client/css/diagram.css
+++ b/headless-services/sprotty-si-view/client/css/diagram.css
@@ -15,9 +15,9 @@
  ********************************************************************************/
 
 .sprotty-node {
-    fill: #aae;
+    fill: rgb(229, 231, 231);
     stroke: #66b;
-    stroke-width: 3;
+    stroke-width: 2;
 }
 
 .sprotty-text {
@@ -28,7 +28,7 @@
 .sprotty-edge {
     fill: none;
     stroke: #488;
-    stroke-width: 2;
+    stroke-width: 1;
 }
 
 .sprotty-node.selected {

From 32295edb61969e2f34124be204d877969bed1fa3 Mon Sep 17 00:00:00 2001
From: Kris De Volder <kdevolder@pivotal.io>
Date: Thu, 29 Aug 2019 09:35:05 -0700
Subject: [PATCH 2/2] CSS tweaks: make 'selected' channels thicker

---
 headless-services/sprotty-si-view/client/src/views.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/headless-services/sprotty-si-view/client/src/views.tsx b/headless-services/sprotty-si-view/client/src/views.tsx
index 1248f14e0..f3b62c27b 100644
--- a/headless-services/sprotty-si-view/client/src/views.tsx
+++ b/headless-services/sprotty-si-view/client/src/views.tsx
@@ -112,7 +112,10 @@ export class ChannelNodeView extends RectangularNodeView {
         const h = Math.max(node.size.height, 0);
         const path = `M 0 ${h} H ${w-8} A 8 ${h/2} 0 0 0 ${w-8} 0 H 0`;
         return <g>
-            <g class-sprotty-node={node instanceof SNode}>
+            <g class-sprotty-node={node instanceof SNode}
+               class-mouseover={node.hoverFeedback}
+               class-selected={node.selected}
+            >
                 <path d={path}/>
                 <ellipse cx="0" cy={h/2} rx="8" ry={h/2}/>
             </g>