refactor: make sure that the droppable styles are kept, update some nodes to reflect their used functionality.

ref: N25B-294

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -8,12 +8,14 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
 
 /**
- * The default data dot a Norm node
- * @param label: the label of this Norm
+ * The default data dot a phase node
+ * @param label: the label of this phase
  * @param droppable: whether this node is droppable from the drop bar (initialized as true)
- * @param children: ID's of children of this node
+ * @param normList: list of strings of norms for this node
+ * @param hasReduce: whether this node has reducing functionality (true by default)
  */
 export type NormNodeData = {
   label: string;
@@ -47,7 +49,10 @@ export default function NormNode(props: NodeProps<Node>) {
           <label htmlFor={label_input_id}></label>
           {props.data.label as string}
         </div>
-        {data.normList.map((norm) => (<div>{norm}</div>))}
+        <div>
+          <Norms id={props.id} list={data.normList}/>
+        </div>
+        
         <Handle type="target" position={Position.Right} id="phase"/>
       </div>
     </>
@@ -75,4 +80,25 @@ export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: bool
   if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
     console.warn("Impossible node connection called in EndConnects")
   }
+}
+
+function Norms(props: { id: string; list: string[] }) {
+  const { id, list } = props;
+  return (
+    <>
+      <span> The norms that the robot will uphold:</span>
+      {
+        list.map((norm, idx) => {
+          return (
+            <div key={`${id}_${idx}`} className={"flex-row gap-md"}>
+              <TextField
+                value={norm}
+                setValue={() => { return; }}
+              />
+            </div>
+          );
+        })
+      }
+    </>
+  );
 }