- Dramatically Cleaned up Launch Script Output

- Disabled Debug Mode for Flask Server

Data/WebUI/src/App.js

@@ -1,6 +1,19 @@
 import React from "react";
 import FlowEditor from "./components/FlowEditor";
-import { AppBar, Toolbar, Typography, Box, Menu, MenuItem, Button, CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+import {
+    AppBar,
+    Toolbar,
+    Typography,
+    Box,
+    Menu,
+    MenuItem,
+    Button,
+    CssBaseline,
+    ThemeProvider,
+    createTheme
+} from "@mui/material";
 
 const darkTheme = createTheme({
     palette: {
@@ -16,14 +29,24 @@ const darkTheme = createTheme({
 });
 
 export default function App() {
-    const [anchorEl, setAnchorEl] = React.useState(null);
+    // Separate menu state for each dropdown
+    const [workflowsAnchorEl, setWorkflowsAnchorEl] = React.useState(null);
+    const [aboutAnchorEl, setAboutAnchorEl] = React.useState(null);
 
-    const handleMenuOpen = (event) => {
-        setAnchorEl(event.currentTarget);
+    const handleWorkflowsMenuOpen = (event) => {
+        setWorkflowsAnchorEl(event.currentTarget);
     };
 
-    const handleMenuClose = () => {
-        setAnchorEl(null);
+    const handleAboutMenuOpen = (event) => {
+        setAboutAnchorEl(event.currentTarget);
+    };
+
+    const handleWorkflowsMenuClose = () => {
+        setWorkflowsAnchorEl(null);
+    };
+
+    const handleAboutMenuClose = () => {
+        setAboutAnchorEl(null);
     };
 
     return (
@@ -36,15 +59,40 @@ export default function App() {
                         <Typography variant="h6" sx={{ flexGrow: 1 }}>
                             Borealis - Workflow Automation Tool
                         </Typography>
-                        <Button color="inherit" onClick={handleMenuOpen}>Workflows</Button>
-                        <Menu
-                            anchorEl={anchorEl}
-                            open={Boolean(anchorEl)}
-                            onClose={handleMenuClose}
+
+                        {/* Workflows Menu */}
+                        <Button
+                            color="inherit"
+                            onClick={handleWorkflowsMenuOpen}
+                            endIcon={<KeyboardArrowDownIcon />}
                         >
-                            <MenuItem onClick={handleMenuClose}>Save Workflow</MenuItem>
-                            <MenuItem onClick={handleMenuClose}>Load Workflow</MenuItem>
-                            <MenuItem onClick={handleMenuClose}>Close Workflow</MenuItem>
+                            Workflows
+                        </Button>
+                        <Menu
+                            anchorEl={workflowsAnchorEl}
+                            open={Boolean(workflowsAnchorEl)}
+                            onClose={handleWorkflowsMenuClose}
+                        >
+                            <MenuItem onClick={handleWorkflowsMenuClose}>Save Workflow</MenuItem>
+                            <MenuItem onClick={handleWorkflowsMenuClose}>Load Workflow</MenuItem>
+                            <MenuItem onClick={handleWorkflowsMenuClose}>Close Workflow</MenuItem>
+                        </Menu>
+
+                        {/* About Menu */}
+                        <Button
+                            color="inherit"
+                            onClick={handleAboutMenuOpen}
+                            endIcon={<KeyboardArrowDownIcon />}
+                        >
+                            About
+                        </Button>
+                        <Menu
+                            anchorEl={aboutAnchorEl}
+                            open={Boolean(aboutAnchorEl)}
+                            onClose={handleAboutMenuClose}
+                        >
+                            <MenuItem onClick={handleAboutMenuClose}>Gitea Project</MenuItem>
+                            <MenuItem onClick={handleAboutMenuClose}>Credits</MenuItem>
                         </Menu>
                     </Toolbar>
                 </AppBar>

Data/WebUI/src/components/FlowEditor.css

@@ -0,0 +1,23 @@
+/* FlowEditor background container */
+.flow-editor-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+}
+
+    /* Gradient Overlay */
+    .flow-editor-container::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none; /* Ensures grid and nodes remain fully interactive */
+        background: linear-gradient( to bottom, rgba(9, 44, 68, 0.8) 0%, /* Deep blue at the top */
+        rgba(30, 30, 30, 0) 25%, /* Fade out towards center */
+        rgba(30, 30, 30, 0) 75%, /* No gradient in the middle */
+        rgba(9, 44, 68, 0.8) 100% /* Deep blue at the bottom */
+        );
+        z-index: -1; /* Ensures it stays behind the React Flow elements */
+    }

Data/WebUI/src/components/FlowEditor.jsx

@@ -5,6 +5,7 @@ import ReactFlow, {
     Background,
 } from "reactflow";
 import "reactflow/dist/style.css";
+import "./FlowEditor.css"; 
 
 const fetchNodes = async () => {
     const response = await fetch("/api/workflow");
@@ -36,10 +37,15 @@ export default function FlowEditor() {
     );
 
     return (
-        <div style={{ width: "100vw", height: "100vh" }}>
+        <div className="flow-editor-container">
             <ReactFlow elements={elements} onConnect={onConnect}>
                 <Controls />
-                <Background />
+                <Background
+                    variant="lines"
+                    gap={100}
+                    size={1}
+                    color="rgba(255, 255, 255, 0.2)" // White grid with 20% opacity
+                />
             </ReactFlow>
         </div>
     );

Data/server.py

@@ -53,7 +53,7 @@ def serve_frontend():
     index_path = os.path.join(build_folder, "index.html")
     if os.path.exists(index_path):
         return send_from_directory(app.static_folder, "index.html")
-    return "<h1>React App Not Found</h1><p>Please build the web-interface application.</p>", 404
+    return "<h1>Borealis React App Code Not Found</h1><p>Please re-deploy Borealis Workflow Automation Tool</p>", 404
 
 @app.route("/api/nodes", methods=["GET"])
 def get_available_nodes():
@@ -128,4 +128,4 @@ def delete_edge(edge_id):
     return jsonify({"status": "success", "deletedEdge": edge_id})
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=5000, debug=True)
+    app.run(host="0.0.0.0", port=5000, debug=False)