Merge branch 'main' into dev

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -57,7 +57,7 @@ export default function CodeAreaComponent({
 						);
 					}}
 				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
 				</button>
 			</div>
 		</div>

src/frontend/src/components/promptComponent/index.tsx

@@ -58,7 +58,7 @@ export default function PromptAreaComponent({
 						);
 					}}
 				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
 				</button>
 			</div>
 		</div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -25,7 +25,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
             {myValue !== "" ? myValue : 'Text empty'}
         </span>
         <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
         </button>
       </div>
     </div>

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -92,10 +92,10 @@ export default function ButtonBox({
 								<div className={textColor}>{icon}</div>
 							</div>
 						</div>
-						<div className="mt-auto mb-auto">
+						<div className="w-full mt-auto mb-auto">
 						<h3
 							className={classNames(
-								"font-semibold text-white dark:text-white/80",
+								"w-full font-semibold break-words text-white dark:text-white/80",
 								titleFontSize,
 								marginTop
 							)}

src/frontend/src/pages/FlowPage/index.tsx

@@ -30,9 +30,7 @@ import { typesContext } from "../../contexts/typesContext";
 import ConnectionLineComponent from "./components/ConnectionLineComponent";
 import { FlowType, NodeType } from "../../types/flow";
 import { APIClassType } from "../../types/api";
-import {
+import { isValidConnection } from "../../utils";
-  isValidConnection,
-} from "../../utils";
 import useUndoRedo from "./hooks/useUndoRedo";
 
 const nodeTypes = {
@@ -48,7 +46,6 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 
   const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
 
-  
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
     useState<OnSelectionChangeParams>(null);
@@ -59,7 +56,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
     // this effect is used to attach the global event handlers
 
     const onKeyDown = (event: KeyboardEvent) => {
-      console.log("keydownou", lastCopiedSelection, position)
+      console.log("keydownou", lastCopiedSelection, position);
       if (
         (event.ctrlKey || event.metaKey) &&
         event.key === "c" &&
@@ -95,20 +92,17 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
       setPosition({ x: event.clientX, y: event.clientY });
     };
 
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener("mousemove", handleMouseMove);
 
     return () => {
-      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener("mousemove", handleMouseMove);
     };
   }, [position, lastCopiedSelection, lastSelection]);
 
-
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
 
-  
-
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
   const [nodes, setNodes, onNodesChange] = useNodesState(
@@ -314,10 +308,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
   }, []);
 
   return (
-    <div
+    <div className="w-full h-full" ref={reactFlowWrapper}>
-      className="w-full h-full"
-      ref={reactFlowWrapper}
-    >
       {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
         <>
           <ReactFlow

src/frontend/tailwind.config.js

@@ -76,6 +76,12 @@ module.exports = {
             backgroundColor: "#bbb",
           },
         },
+        ".dark .theme-attribution .react-flow__attribution": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)",
+        },
+        ".dark .theme-attribution .react-flow__attribution a": {
+          color: "black",
+        },
       });
     }),
     require("@tailwindcss/typography"),