Refactored forms

frontend_reactjs/src/layouts/MainLayout.tsx

@@ -1,9 +1,31 @@
 // Layout for fullscreen pages
 
+import { Box, createTheme, ThemeProvider, useTheme } from "@mui/material";
 import { Outlet } from "react-router-dom";
 
 export default function MainLayout() {
+    const theme = useTheme()
+    const innerTheme = createTheme(theme)
+
     return (
-        <Outlet />
+        <ThemeProvider theme={innerTheme}>
+            <Box
+                sx={{
+                    color: (theme) => theme.palette.mode === 'light'
+                        ? theme.palette.grey[900]
+                        : theme.palette.grey[100],
+                    backgroundColor: (theme) =>
+                        theme.palette.mode === 'light'
+                            ? theme.palette.grey[100]
+                            : theme.palette.grey[900],
+                    flexGrow: 1,
+                    maxHeight: "100vh",
+                    height: '100%',
+                    overflow: 'auto',
+                }}
+            >
+                <Outlet />
+            </Box>
+        </ThemeProvider>
     )
 }