bugfixes: darkmode and not saving file/text

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -24,6 +24,7 @@ import { nodeNames, nodeIcons } from "../../../../utils";
 import React from "react";
 import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { PopUpContext } from "../../../../contexts/popUpContext";
 
 export default function ParameterComponent({
   left,
@@ -40,6 +41,7 @@ export default function ParameterComponent({
   const refHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
+  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
@@ -56,6 +58,8 @@ export default function ParameterComponent({
     data.node.template[name]?.value ?? false
   );
 
+  useEffect(() => {}, [closePopUp, data.node.template]);
+
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -44,6 +44,7 @@ export default function GenericNode({
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
+  const { closePopUp } = useContext(PopUpContext);
 
   const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
   const [validationStatus, setValidationStatus] = useState(null);
@@ -59,6 +60,8 @@ export default function GenericNode({
     }
   }, [save]);
 
+  useEffect(() => {}, [closePopUp]);
+
   const validateNode = useCallback(
     debounce(async () => {
       try {

src/frontend/src/components/inputFileComponent/index.tsx

@@ -37,6 +37,10 @@ export default function InputFileComponent({
     return false;
   }
 
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   const handleButtonClick = () => {
     const input = document.createElement("input");
     input.type = "file";
@@ -73,7 +77,7 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -19,6 +19,7 @@ export default function ToggleShadComponent({
         style={{
           transform: "scaleX(0.6) scaleY(0.6)",
         }}
+        className="data-[state=unchecked]:bg-slate-500"
         checked={enabled}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -77,6 +77,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     }
   }
 
+  useEffect(() => {}, [closePopUp, data.node.template]);
+
   function changeAdvanced(node): void {
     Object.keys(data.node.template).filter((n, i) => {
       if (n === node.name) {
@@ -102,10 +104,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {EDIT_DIALOG_SUBTITLE}
             <div className="flex pt-3">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
+              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-gray-800">
+              <span className="text-sm font-semibold text-gray-800 dark:text-white">
                 Parameters
               </span>
             </div>

src/frontend/src/modals/genericModal/index.tsx

@@ -18,7 +18,7 @@ import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 
-export default function PromptAreaModal({
+export default function GenericModal({
   value,
   setValue,
   buttonText,