improve layout of UI

web-conexs-client/src/App.tsx

@@ -8,25 +8,25 @@ import {
 } from "@mui/material";
 import Header from "./components/Header";
 import WelcomePage from "./components/WelcomePage";
-import MoleculePage from "./components/MoleculePage";
+import MoleculePage from "./components/molecules/MoleculePage";
 import { Route, Routes } from "react-router-dom";
-import SimulationReviewPage from "./components/SimulationReviewPage";
-import OrcaSubmitPage from "./components/OrcaSubmitPage";
-import CrystalPage from "./components/CrystalPage";
-import CreateMoleculePage from "./components/CreateMoleculePage";
-import FdmnesSubmitPage from "./components/FdmnesSubmitPage";
-import CreateCystalPage from "./components/CreateCrystalPage";
+import OrcaSubmitPage from "./components/orca/OrcaSubmitPage";
+import CrystalPage from "./components/crystals/CrystalPage";
+import CreateMoleculePage from "./components/molecules/CreateMoleculePage";
+import FdmnesSubmitPage from "./components/fdmnes/FdmnesSubmitPage";
+import CreateCystalPage from "./components/crystals/CreateCrystalPage";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import SimulationReviewPage from "./components/SimulationReviewPage";
 
 const queryClient = new QueryClient();
 
 function App() {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const [mode, setMode] = useState<"light" | "dark">(
-    prefersDarkMode ? "light" : "dark"
+    prefersDarkMode ? "dark" : "light"
   );
 
-  useMemo(
+  const colorMode = useMemo(
     () => ({
       toggleColorMode: () => {
         setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
@@ -50,7 +50,10 @@ function App() {
       <CssBaseline />
       <QueryClientProvider client={queryClient}>
         <Stack height="100vh" width="100vw" spacing={1}>
-          <Header />
+          <Header
+            colorMode={mode}
+            toggleColorMode={colorMode.toggleColorMode}
+          />
           <Routes>
             <Route path="/" element={<WelcomePage />} />
             <Route path="/molecule" element={<MoleculePage />} />

web-conexs-client/src/components/Header.test.tsx

@@ -4,7 +4,7 @@ import Header from "./Header";
 
 describe("App", () => {
   it("renders the App component", () => {
-    render(<Header />);
+    render(<Header colorMode="light" toggleColorMode={()=>{}} />);
 
     expect(screen.getByText("Web-CONEXS")).toBeDefined();
     // screen.debug(); // prints out the jsx in the App component unto the command line

web-conexs-client/src/components/Header.tsx

@@ -1,14 +1,27 @@
-import { AppBar, Toolbar, Typography } from "@mui/material";
+import { AppBar, Checkbox, Stack, Toolbar, Typography } from "@mui/material";
 import SideDrawer from "./SideDrawer";
 
-export default function Header() {
+import { LightMode, DarkMode } from "@mui/icons-material";
+
+export default function Header(props: {
+  colorMode: string;
+  toggleColorMode: () => void;
+}) {
   return (
     <AppBar style={{ position: "static" }}>
       <Toolbar sx={{ justifyContent: "space-between", alignItems: "center" }}>
         <SideDrawer />
-        <Typography variant="h4" component="div" sx={{ flexGrow: 1 }}>
+        <Typography variant="h2" component="div" sx={{ flexGrow: 1 }}>
           Web-CONEXS
         </Typography>
+        <Stack direction="row" alignItems={"center"}>
+          <Checkbox
+            icon={<LightMode />}
+            checkedIcon={<DarkMode />}
+            checked={props.colorMode === "dark"}
+            onChange={props.toggleColorMode}
+          ></Checkbox>
+        </Stack>
       </Toolbar>
     </AppBar>
   );

web-conexs-client/src/components/React3dMol.tsx

@@ -123,7 +123,7 @@ export default function React3dMol(props: Molecule3DProps) {
   return (
     <div
       ref={moleculeViewer}
-      style={{ height: "200px", width: "300px", position: "relative" }}
+      style={{ height: "100%", width: "100%", position: "relative" }}
     />
   );
 }

web-conexs-client/src/components/SideDrawer.tsx

@@ -83,8 +83,8 @@ export default function SideDrawer() {
 
   return (
     <>
-      <IconButton aria-label="add an alarm" onClick={toggleDrawer(true)}>
-        <MenuIcon />
+      <IconButton size="large" onClick={toggleDrawer(true)}>
+        <MenuIcon fontSize="large" />
       </IconButton>
       <Drawer open={open} onClose={toggleDrawer(false)}>
         {DrawerList}