refactor(styling): use css for default styles (#259)

* refactor(minimap): use css for default styles

* refactor(controls): use css for default styles

* refactor(background): use css for default styles

* refactor(edges): add edge type class name

* refactor(nodes): use css for default styles

* refactor(outputnode): add display name

* refactor(wrapnode): cleanup

* refactor(rollup): minimize css for prod build

* refactor(additional-comps): extract css

* test(graphs): adjust for new markup

src/components/Nodes/OutputNode.tsx

@@ -1,18 +1,15 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const nodeStyles: CSSProperties = {
-  background: '#55dd99',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, style, targetPosition = Position.Top }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const OutputNode = ({ data, targetPosition = Position.Top }: NodeProps) => (
+  <>
     <Handle type="target" position={targetPosition} />
     {data.label}
-  </div>
+  </>
 );
+
+OutputNode.displayName = 'OutputNode';
+
+export default OutputNode;