From 4934cec6c9667af24e47366b00362ef727080109 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Jul 2020 15:52:17 +0200
Subject: [PATCH] style(flow): adjust default styles

---
 example/src/Overview/index.js                    | 13 ++++++++-----
 .../MiniMap/MiniMapNode.tsx                      |  2 +-
 src/style.css                                    | 16 ++++++++--------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js
index 48224ea5..4e822101 100644
--- a/example/src/Overview/index.js
+++ b/example/src/Overview/index.js
@@ -95,8 +95,10 @@ const initialElements = [
     source: '5',
     target: '7',
     type: 'step',
+    style: { stroke: '#f6ab6c' },
     label: 'a step edge',
-    labelStyle: { fill: 'red', fontWeight: 700 },
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
   },
 ];
 
@@ -132,11 +134,12 @@ const OverviewFlow = () => {
     >
       <MiniMap
         nodeColor={(n) => {
-          if (n.type === 'input') return 'blue';
-          if (n.type === 'output') return 'green';
-          if (n.type === 'default') return 'red';
+          if (n.style?.background) return n.style.background;
+          if (n.type === 'input') return '#9999ff';
+          if (n.type === 'output') return '#79c9b7';
+          if (n.type === 'default') return '#ff6060';
 
-          return '#FFCC00';
+          return '#eee';
         }}
       />
       <Controls />
diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx
index e85ba788..24b1eee0 100644
--- a/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/src/additional-components/MiniMap/MiniMapNode.tsx
@@ -15,7 +15,7 @@ const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
     height,
   } = node.__rf;
   const { background, backgroundColor } = node.style || {};
-  const fill = (background || backgroundColor || color) as string;
+  const fill = (color || background || backgroundColor) as string;
 
   return (
     <rect
diff --git a/src/style.css b/src/style.css
index e2057f62..7fdaef30 100644
--- a/src/style.css
+++ b/src/style.css
@@ -63,7 +63,7 @@
 .react-flow__edge-path {
   fill: none;
   stroke: #bbb;
-  stroke-width: 2;
+  stroke-width: 1.5;
 }
 
 .react-flow__edge-text {
@@ -83,7 +83,7 @@
 .react-flow__connection-path {
   fill: none;
   stroke: #ddd;
-  stroke-width: 2;
+  stroke-width: 1.5;
 }
 
 .react-flow__nodes {
@@ -107,7 +107,7 @@
 .react-flow__node-input,
 .react-flow__node-output {
   padding: 10px;
-  border-radius: 5px;
+  border-radius: 3px;
   width: 150px;
   font-size: 12px;
   color: #222;
@@ -127,16 +127,16 @@
   }
 }
 
-.react-flow__node-default {
-  background: #ff6060;
-}
-
 .react-flow__node-input {
   background: #9999ff;
 }
 
+.react-flow__node-default {
+  background: #ff6060;
+}
+
 .react-flow__node-output {
-  background: #55dd99;
+  background: #79c9b7;
 }
 
 .react-flow__nodesselection {