Merge pull request #1742 from angela-lee1/update-to-mui-appjsx

update to mui appjsx

Author: trillium

client/src/App.jsx

@@ -30,7 +30,7 @@ import UserWelcome from './pages/UserWelcome';
 import UserPermissionSearch from './pages/UserPermissionSearch';
 import UserPermission from './pages/UserPermission';
 
-import { ThemeProvider } from '@mui/material';
+import { Box, ThemeProvider } from '@mui/material';
 import theme from './theme';
 
 import './App.scss';
@@ -93,20 +93,47 @@ const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <AuthProvider>
-        <div className="app">
-          <div className="app-container">
+        <Box
+          sx={{
+            height: '100%',
+            width: '100vw',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+            maxHeight: '90vh',
+            margin: '5vh 0',
+          }}
+        >
+          <Box
+            sx={{
+              position: 'relative',
+              maxWidth: '500px',
+              width: '100%',
+              backgroundColor: 'white',
+              overflow: 'hidden',
+              borderRadius: '10px',
+              padding: '15px',
+            }}
+          >
             <Navbar />
-            <main role="main" className="main">
+            <Box
+              component="main"
+              sx={{
+                height: 'calc(90vh - 160px)',
+                overflowY: 'scroll',
+              }}
+            >
               <Switch>
                 {routes.map(({ path, Component }) => (
                   <Route key={path} exact path={path} component={Component} />
                 ))}
                 <Redirect to="/" />
               </Switch>
-            </main>
+            </Box>
             <Footer />
-          </div>
-        </div>
+          </Box>
+        </Box>
       </AuthProvider>
     </ThemeProvider>
   );