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>
 );