From b365a8754e8222a0986687eb7c5ffa2a18d554f2 Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Wed, 22 Oct 2025 12:31:04 +0200
Subject: [PATCH] style: moved inline styles to VisProgUI.module.css and used
 some existing classes to replace simple css

ref: N25B-114
---
 .../visualProgrammingUI/VisProgUI.module.css  | 17 ++++++++++++++++
 .../components/DragDropSidebar.tsx            | 20 ++-----------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.module.css b/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.module.css
index 7a62538..2b6e836 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgUI.module.css
@@ -17,6 +17,10 @@
     height: 100%;
 }
 
+
+
+
+
 .dnd-panel {
     margin-inline-start: auto;
     margin-inline-end: auto;
@@ -28,6 +32,19 @@
     height:7%;
 }
 
+.inner-dnd-panel {
+    outline: 2.5pt solid black;
+    border-radius: 0 0 5pt 5pt;
+    border-color: dimgrey;
+    background-color: canvas;
+    align-items: center;
+}
+
+.dnd-node-container {
+    background-color: canvas;
+    justify-content: center;
+}
+
 /* Node Styles */
 
 .default-node {
diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
index 14ecc1d..71017c9 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -141,27 +141,11 @@ export function DndToolbar() {
   );
 
   return (
-    <div style={{
-      padding: '10px 10px',
-      outline: '2.5pt solid black',
-      borderRadius: '0pt 0pt 5pt 5pt',
-      borderColor: 'dimgrey',
-      backgroundColor: 'canvas',
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column',
-      gap: '1rem'
-    }}>
+    <div className={`flex-col gap-lg padding-md ${styles.innerDndPanel}`}>
       <div className="description">
         You can drag these nodes to the pane to create new nodes.
       </div>
-      <div className="DraggableNodeContainer" style={{
-        backgroundColor: 'canvas',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '1rem',
-        justifyContent: 'center'
-      }}>
+      <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
         <DraggableNode className={styles.draggableNodePhase} nodeType="phase" onDrop={handleNodeDrop}>
           phase Node
         </DraggableNode>