style(nodes): default styles

src/NodeRenderer/Handle/index.js

@@ -1,3 +1,15 @@
 import React from 'react';
+import cx from 'classnames';
 
-export default props => <div className="react-graph__handle" {...props} />;
+export default (props) => {
+  const handleClasses = cx(
+    'react-graph__handle', {
+      input: props.input,
+      output: props.output
+    }
+  );
+
+  return (
+    <div className={handleClasses} {...props} />
+  );
+};

src/NodeRenderer/NodeTypes/DefaultNode.js

@@ -11,8 +11,8 @@ const nodeStyles = {
 
 export default ({ data, style }) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle style={{ top: 0 }} />
+    <Handle input />
     {data.label}
-    <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
+    <Handle output />
   </div>
 );

src/NodeRenderer/NodeTypes/InputNode.js

@@ -15,6 +15,6 @@ export default ({ data, style }) => (
     className="react-graph__node-inner"
   >
     {data.label}
-    <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
+    <Handle output />
   </div>
 );

src/NodeRenderer/NodeTypes/OutputNode.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Handle from '../Handle';
 
 const nodeStyles = {
-  background: '#55ff99',
+  background: '#55dd99',
   padding: 10,
   borderRadius: 5,
   width: 150
@@ -11,7 +11,7 @@ const nodeStyles = {
 
 export default ({ data, style }) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle style={{ top: 0 }} />
+    <Handle input />
     {data.label}
   </div>
 );

src/style.css

@@ -47,12 +47,12 @@
 
 .react-graph__edge {
   fill: none;
-  stroke: #333;
+  stroke: #bbb;
   stroke-width: 2;
   pointer-events: all;
 
   &.selected {
-    stroke: #ff5050;
+    stroke: #555;
   }
 
   &.animated {
@@ -90,18 +90,23 @@
   }
 
   &.selected > * {
-    box-shadow: 0 0 0 2px #000;
+    box-shadow: 0 0 0 2px #555;
   }
 }
 
 .react-graph__handle {
   position: absolute;
-  width: 12px;
-  height: 12px;
-  transform: translate(-50%, -50%);
-  background: #222;
+  width: 10px;
+  height: 5px;
+  transform: translate(-50%, 0);
+  background: rgba(255, 255, 255, 0.4);
   left: 50%;
-  border-radius: 50%;
+  top: 0;
+
+  &.output {
+    top: auto;
+    bottom: 0;
+  }
 }
 
 .react-graph__nodesselection {