fix: [AARD-2113] Wiring Panel Styling Fixes

fission/src/ui/components/simulation/FlowControls.tsx

@@ -9,16 +9,16 @@ function FlowControls({ onCreateJunction }: FlowControlsProps) {
 
     return (
         <FlowPanel position="bottom-left" className="flex flex-col-reverse gap-1">
-            <Button onClick={() => fitView()}>
+            <Button variant="outlined" onClick={() => fitView()}>
                 <MdFitScreen className="w-full h-full" />
             </Button>
-            <Button onClick={() => zoomOut()}>
+            <Button variant="outlined" onClick={() => zoomOut()}>
                 <MdZoomOutMap className="w-full h-full" />
             </Button>
-            <Button onClick={() => zoomIn()}>
+            <Button variant="outlined" onClick={() => zoomIn()}>
                 <MdZoomInMap className="w-full h-full" />
             </Button>
-            <Button onClick={() => onCreateJunction?.()}>
+            <Button variant="outlined" onClick={() => onCreateJunction?.()}>
                 <FaPlus className="w-full h-full" />
             </Button>
         </FlowPanel>

fission/src/ui/panels/simulation/WiringNode.tsx

@@ -1,4 +1,4 @@
-import { Stack } from "@mui/material"
+import { Box } from "@mui/material"
 import { type Connection, type Edge, Handle, type NodeProps, Position } from "@xyflow/react"
 import { useCallback, useMemo } from "react"
 import {
@@ -8,18 +8,17 @@ import {
     SimConfig,
     type SimConfigData,
 } from "@/systems/simulation/SimConfigShared"
-import Label from "@/ui/components/Label"
 import { CustomTooltip, DeleteButton, EditButton, RefreshButton } from "@/ui/components/StyledComponents"
 
 const WiringNode = ({ data, isConnectable }: NodeProps) => {
-    const robotInput = data.input as HandleInfo[] | undefined
-    const robotOutput = data.output as HandleInfo[] | undefined
-    const onEdit = data.onEdit as (() => void) | undefined
-    const onRefresh = data.onRefresh as (() => void) | undefined
-    const onDelete = data.onDelete as (() => void) | undefined
-    const simConfig = data.simConfig as SimConfigData
-    const title = data.title as string
-    const tooltip = data.tooltip as string | undefined
+    const robotInput = useMemo(() => data.input as HandleInfo[] | undefined, [data])
+    const robotOutput = useMemo(() => data.output as HandleInfo[] | undefined, [data])
+    const onEdit = useMemo(() => data.onEdit as (() => void) | undefined, [data])
+    const onRefresh = useMemo(() => data.onRefresh as (() => void) | undefined, [data])
+    const onDelete = useMemo(() => data.onDelete as (() => void) | undefined, [data])
+    const simConfig = useMemo(() => data.simConfig as SimConfigData, [data])
+    const title = useMemo(() => data.title as string, [data])
+    const tooltip = useMemo(() => data.tooltip as string | undefined, [data])
 
     const validateConnection = useCallback(
         (edge: Edge | Connection) => {
@@ -30,88 +29,125 @@ const WiringNode = ({ data, isConnectable }: NodeProps) => {
 
     const inputHandles = useMemo(
         () =>
-            robotInput && (
-                <Stack gap={4}>
-                    {robotInput.sort(handleInfoDisplayCompare).map((x, i) => (
-                        <div key={i} className="relative">
-                            <Label size="md">{x.displayName}</Label>
-                            <Handle
-                                style={{
-                                    backgroundColor: NORA_TYPES_COLORS[x.noraType],
-                                }}
-                                className="absolute left-0 w-4 h-4"
-                                key={i}
-                                type="target"
-                                position={Position.Left}
-                                id={x.id}
-                                isConnectable={isConnectable}
-                            />
-                        </div>
-                    ))}
-                </Stack>
+            robotInput ? (
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                        justifyContent: "space-between",
+                    }}
+                >
+                    {robotInput.sort(handleInfoDisplayCompare).map((x, i) => {
+                        return (
+                            <div key={i} className="relative">
+                                <div className="px-3 text-lg">{x.displayName}</div>
+                                <Handle
+                                    style={{
+                                        position: "absolute",
+                                        left: 0,
+                                        width: "1rem",
+                                        height: "1rem",
+                                        backgroundColor: NORA_TYPES_COLORS[x.noraType],
+                                    }}
+                                    key={i}
+                                    type="target"
+                                    position={Position.Left}
+                                    id={x.id}
+                                    isConnectable={isConnectable}
+                                    isValidConnection={validateConnection}
+                                />
+                            </div>
+                        )
+                    })}
+                </Box>
+            ) : (
+                <></>
             ),
         [isConnectable, robotInput]
     )
 
     const outputHandles = useMemo(
         () =>
-            robotOutput && (
-                <Stack gap={4}>
-                    {robotOutput.sort(handleInfoDisplayCompare).map((x, i) => (
-                        <div key={i} className="relative">
-                            <Label size="md">{x.displayName}</Label>
-                            <Handle
-                                style={{
-                                    backgroundColor: NORA_TYPES_COLORS[x.noraType],
-                                }}
-                                className="absolute right-0 w-4 h-4"
-                                key={i}
-                                type="source"
-                                position={Position.Right}
-                                id={x.id}
-                                isConnectable={isConnectable}
-                                isValidConnection={validateConnection}
-                            />
-                        </div>
-                    ))}
-                </Stack>
+            robotOutput ? (
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                        justifyContent: "space-between",
+                    }}
+                >
+                    {robotOutput.sort(handleInfoDisplayCompare).map((x, i) => {
+                        return (
+                            <div key={i} className="relative">
+                                <div className="px-3 text-lg text-right">{x.displayName}</div>
+                                <Handle
+                                    style={{
+                                        position: "absolute",
+                                        right: 0,
+                                        width: "1rem",
+                                        height: "1rem",
+                                        backgroundColor: NORA_TYPES_COLORS[x.noraType],
+                                    }}
+                                    key={i}
+                                    type="source"
+                                    position={Position.Right}
+                                    id={x.id}
+                                    isConnectable={isConnectable}
+                                    isValidConnection={validateConnection}
+                                />
+                            </div>
+                        )
+                    })}
+                </Box>
+            ) : (
+                <></>
             ),
         [isConnectable, robotOutput, validateConnection]
     )
 
     return (
-        <Stack gap={4}>
-            <div
-                style={{ transform: "translateY(-100%) translateX(-50%)" }}
+        <Box className="robot-io-node bg-background border-interactive-element-solid border-[0.0625rem] rounded-lg relative flex flex-col gap-4 py-4">
+            <Box
+                style={{
+                    transform: "translateY(-100%) translateX(-50%)",
+                }}
                 className="absolute top-0 text-nowrap left-1/2 text-2xl"
             >
-                {tooltip && CustomTooltip(tooltip)}
+                {tooltip ? CustomTooltip(tooltip) : <></>}
                 {title}
-            </div>
-            <div
-                style={
+            </Box>
+            <Box
+                sx={
                     robotInput && robotOutput
                         ? {
                               display: "grid",
                               gridTemplateColumns: "1fr 1fr",
                               columnGap: "0.5rem",
                           }
                         : robotInput
-                          ? { paddingRight: "2rem" }
-                          : { paddingLeft: "2rem" }
+                          ? {
+                                paddingRight: "2rem",
+                            }
+                          : {
+                                paddingLeft: "2rem",
+                            }
                 }
             >
                 {inputHandles}
                 {outputHandles}
-            </div>
-            {(onEdit || onDelete) && (
-                <div className="flex justify-center px-4">
-                    {onEdit && EditButton(onEdit)}
-                    {onRefresh && RefreshButton(onRefresh)}
-                    {onDelete && DeleteButton(onDelete)}
-                </div>
+            </Box>
+            {onEdit || onDelete ? (
+                <Box className="flex justify-center px-4">
+                    {onEdit ? EditButton(onEdit) : <></>}
+                    {onRefresh ? RefreshButton(onRefresh) : <></>}
+                    {onDelete ? DeleteButton(onDelete) : <></>}
+                </Box>
+            ) : (
+                <></>
             )}
-        </Stack>
+        </Box>
     )
 }