style: moved all logic from VisProgUI.tsx to VisProg.tsx and the css from VisProgUI.module.css to VisProg.module.css.

made code easier to navigate, by removing an unnecessary set of files through combining logic into a mostly empty file that is suitable for hosting said logic.

BREAKING: removed VisProgUI.module.css and removed VisProgUI.tsx, logic is now in VisProg.module.css and VisProg.tsx respectively

ref: N25B-114

src/pages/VisProgPage/VisProg.module.css

@@ -1,4 +1,129 @@
-button.reset:hover {
-  background-color: yellow;
+/* editor UI */
+
+.outer-editor-container {
+    margin-inline: auto;
+    display: flex;
+    justify-self: center;
+    padding: 10px;
+    align-items: center;
+    width: 80vw;
+    height: 80vh;
+}
+
+.inner-editor-container {
+    outline-style: solid;
+    border-radius: 10pt;
+    width: 90%;
+    height: 100%;
+}
+
+
+
+
+
+.dnd-panel {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    background-color: canvas;
+    align-content: center;
+    margin-bottom: 0.5rem;
+    margin-top:auto;
+    width: 50%;
+    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 {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: black solid 2pt;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+
+.default-node-norm {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: forestgreen solid 2pt;
+    filter: drop-shadow(0 0 0.25rem forestgreen);
+}
+
+.default-node-phase {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: dodgerblue solid 2pt;
+    filter: drop-shadow(0 0 0.25rem dodgerblue);
+}
+
+.default-node-start {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: orange solid 2pt;
+    filter: drop-shadow(0 0 0.25rem orange);
+}
+
+.default-node-end {
+    padding: 10px 15px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: red solid 2pt;
+    filter: drop-shadow(0 0 0.25rem red);
+}
+
+.draggable-node {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: black solid 2pt;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+
+.draggable-node-norm {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: forestgreen solid 2pt;
+    filter: drop-shadow(0 0 0.25rem forestgreen);
+}
+
+.draggable-node-phase {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: dodgerblue solid 2pt;
+    filter: drop-shadow(0 0 0.25rem dodgerblue);
+}
+
+.draggable-node-start {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: orange solid 2pt;
+    filter: drop-shadow(0 0 0.25rem orange);
+}
+
+.draggable-node-end {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: red solid 2pt;
+    filter: drop-shadow(0 0 0.25rem red);
 }