From cbe9b21a851c7b0eedbd2820829955c6f56a809b Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sun, 12 Sep 2021 12:22:01 +0900
Subject: [PATCH] feat(network): improve custom tooltip stories

---
 packages/network/stories/network.stories.tsx  | 24 ++++++++++++-------
 .../network/stories/networkCanvas.stories.tsx | 24 ++++++++++++-------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/packages/network/stories/network.stories.tsx b/packages/network/stories/network.stories.tsx
index 4f3a472510..47b8cbf742 100644
--- a/packages/network/stories/network.stories.tsx
+++ b/packages/network/stories/network.stories.tsx
@@ -25,7 +25,7 @@ const commonProperties: NetworkSvgProps<NodeType> = {
     ...svgDefaultProps,
     data,
     width: 900,
-    height: 340,
+    height: 400,
     nodeColor: node => node.color,
     repulsivity: 6,
     iterations: 60,
@@ -45,14 +45,20 @@ export const CustomNode = () => (
 )
 
 const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
-    <div>
-        <div>
-            <strong style={{ color: node.color }}>ID: {node.id}</strong>
-            <br />
-            Depth: {node.depth}
-            <br />
-            Radius: {node.radius}
-        </div>
+    <div
+        style={{
+            background: node.color,
+            color: '#000000',
+            padding: '9px 12px',
+            borderRadius: '2px',
+            boxShadow: '0 3px 9px rgba(0, 0, 0, .35)',
+        }}
+    >
+        <strong>ID: {node.id}</strong>
+        <br />
+        Depth: {node.depth}
+        <br />
+        Radius: {node.radius}
     </div>
 )
 
diff --git a/packages/network/stories/networkCanvas.stories.tsx b/packages/network/stories/networkCanvas.stories.tsx
index d54fd4b9e1..5e3d6b1fb1 100644
--- a/packages/network/stories/networkCanvas.stories.tsx
+++ b/packages/network/stories/networkCanvas.stories.tsx
@@ -25,7 +25,7 @@ const commonProperties: NetworkCanvasProps<NodeType> = {
     ...canvasDefaultProps,
     data,
     width: 900,
-    height: 340,
+    height: 400,
     nodeColor: node => node.color,
     repulsivity: 6,
     iterations: 60,
@@ -48,14 +48,20 @@ export const CustomNodeRenderer = () => (
 )
 
 const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
-    <div>
-        <div>
-            <strong style={{ color: node.color }}>ID: {node.id}</strong>
-            <br />
-            Depth: {node.depth}
-            <br />
-            Radius: {node.radius}
-        </div>
+    <div
+        style={{
+            background: node.color,
+            color: '#000000',
+            padding: '9px 12px',
+            borderRadius: '2px',
+            boxShadow: '0 3px 9px rgba(0, 0, 0, .35)',
+        }}
+    >
+        <strong>ID: {node.id}</strong>
+        <br />
+        Depth: {node.depth}
+        <br />
+        Radius: {node.radius}
     </div>
 )