From 9098083b6ed2321d4ec91dab75a248eec27b1991 Mon Sep 17 00:00:00 2001
From: Alexey Volkov <alexey.volkov@ark-kun.com>
Date: Wed, 16 Jun 2021 20:03:29 -0700
Subject: [PATCH] Examples - Drag and drop - Using the theme styles for the
 sidebar nodes

Otherwise the styles diverge and nodes look different on the sidebar and the canvas.
---
 example/src/DragNDrop/Sidebar.tsx |  8 ++++----
 example/src/DragNDrop/dnd.css     | 23 ++++-------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/example/src/DragNDrop/Sidebar.tsx b/example/src/DragNDrop/Sidebar.tsx
index 63e14ed1f..7c1fba588 100644
--- a/example/src/DragNDrop/Sidebar.tsx
+++ b/example/src/DragNDrop/Sidebar.tsx
@@ -8,14 +8,14 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
 const Sidebar = () => {
   return (
     <aside>
-      <div className="description">You can drag these nodes to the pane on the right.</div>
-      <div className="dndnode input" onDragStart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
+      <div className="description">You can drag these nodes to the pane on the left.</div>
+      <div className="react-flow__node-input" onDragStart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
         Input Node
       </div>
-      <div className="dndnode" onDragStart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
+      <div className="react-flow__node-default" onDragStart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
         Default Node
       </div>
-      <div className="dndnode output" onDragStart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
+      <div className="react-flow__node-output" onDragStart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
         Output Node
       </div>
     </aside>
diff --git a/example/src/DragNDrop/dnd.css b/example/src/DragNDrop/dnd.css
index 2e47d2782..26d490c87 100644
--- a/example/src/DragNDrop/dnd.css
+++ b/example/src/DragNDrop/dnd.css
@@ -11,28 +11,13 @@
   background: #fcfcfc;
 }
 
-.dndflow aside .description {
+.dndflow aside > * {
   margin-bottom: 10px;
-}
-
-.dndflow .dndnode {
-  height: 20px;
-  padding: 4px;
-  border: 1px solid #1a192b;
-  border-radius: 2px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   cursor: grab;
 }
 
-.dndflow .dndnode.input {
-  border-color: #0041d0;
-}
-
-.dndflow .dndnode.output {
-  border-color: #ff0072;
+.dndflow aside .description {
+  margin-bottom: 10px;
 }
 
 .dndflow .reactflow-wrapper {
@@ -47,6 +32,6 @@
 
   .dndflow aside {
     width: 20%;
-    max-width: 250px;
+    max-width: 180px;
   }
 }