style(nodes): default styles

example/src/Overview/index.js

@@ -104,16 +104,6 @@ const initialElements = [
 
 const OverviewFlow = () => {
   const [elements, setElements] = useState(initialElements);
-
-  const addRandomNode = () => {
-    setElements((els) =>
-      els.concat({
-        id: (els.length + 1).toString(),
-        data: { label: 'Added node' },
-        position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
-      })
-    );
-  };
   const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements((els) => addEdge(params, els));
 
@@ -144,15 +134,6 @@ const OverviewFlow = () => {
       />
       <Controls />
       <Background color="#888" gap={16} />
-
-      <button
-        type="button"
-        onClick={addRandomNode}
-        style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
-        className="overview-example__add"
-      >
-        add node
-      </button>
     </ReactFlow>
   );
 };

src/style.css

@@ -117,13 +117,14 @@
 .react-flow__node-default.selectable,
 .react-flow__node-input.selectable,
 .react-flow__node-output.selectable {
+
   &.selected,
   &.selected:hover {
-    box-shadow: 0 0 0 2px #555;
+    box-shadow: 0 0 0 1px #333;
   }
 
   &:hover {
-    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
   }
 }
 
@@ -193,4 +194,4 @@
   right: 0;
   top: 50%;
   transform: translate(0, -50%);
-}
+}