Made some UI changes and code cleanup. Split screen working great, readying for release for user testing (without persistence or launchpad for now).

src/Launchpad.jsx

@@ -1,29 +1,78 @@
-import {Button} from "@mui/joy";
 import PropTypes from 'prop-types';
+import { useEffect, useRef } from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import { Button } from '@mui/joy';
+import theme from './theme';
 
 function Launchpad({ onClose }) {
+    const launchpadRef = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (launchpadRef.current && !launchpadRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [onClose]);
+
     return (
-        <div
-            style={{
-                position: "fixed",
-                top: "20%",
-                left: "20%",
-                width: "60%",
-                height: "60%",
-                backgroundColor: "gray",
-                zIndex: 1000,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: "8px",
-            }}
-        >
-            <div className="text-center">
-                <h2 className="text-2xl font-bold mb-4">Launchpad</h2>
-                <p className="mb-4">This is your all-in-one launchpad panel.</p>
-                <Button onClick={onClose}>Close</Button>
+        <CssVarsProvider theme={theme}>
+            <div
+                style={{
+                    position: "fixed",
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "rgba(0, 0, 0, 0.2)",
+                    zIndex: 1000,
+                    backdropFilter: "blur(5px)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+            >
+                <div
+                    ref={launchpadRef}
+                    style={{
+                        width: "75%",
+                        height: "75%",
+                        backgroundColor: theme.palette.general.tertiary,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: "8px",
+                        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
+                        border: `1px solid ${theme.palette.general.secondary}`,
+                        color: theme.palette.text.primary,
+                        padding: 3,
+                    }}
+                >
+                    <div className="text-center">
+                        <h2 className="text-2xl font-bold mb-4">Launchpad</h2>
+                        <p className="mb-4">W.I.P. Feature</p>
+                        <Button
+                            type="submit"
+                            onClick={onClose}
+                            sx={{
+                                backgroundColor: theme.palette.general.primary,
+                                '&:hover': {
+                                    backgroundColor: theme.palette.general.disabled,
+                                },
+                            }}
+                        >
+                            Close
+                        </Button>
+                    </div>
+                </div>
             </div>
-        </div>
+        </CssVarsProvider>
     );
 }