Style update for User Info Endpoint (#3055)

* style changes from mui 5

* fix spacing issue on small screen

* remove unneeded import

* add default exports

* make linter happy

* more style changes

* use startCase from lodash

Co-authored-by: Caleb Doxsey <cdoxsey@pomerium.com>

ui/src/App.tsx

@@ -6,11 +6,12 @@ import UserInfoPage from "./components/UserInfoPage";
 import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
 import { createTheme } from "./theme";
 import { PageData } from "./types";
-import Container from "@mui/material/Container";
 import CssBaseline from "@mui/material/CssBaseline";
-import Stack from "@mui/material/Stack";
 import { ThemeProvider } from "@mui/material/styles";
 import React, { FC } from "react";
+import {ToolbarOffset} from "./components/ToolbarOffset";
+import Box from "@mui/material/Box";
+import {SubpageContextProvider} from "./context/Subpage";
 
 const theme = createTheme();
 
@@ -34,13 +35,22 @@ const App: FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Container maxWidth="md" disableGutters>
-        <Stack spacing={3}>
-          <Header csrfToken={data?.csrfToken} signOutUrl={data?.signOutUrl} />
-          {body}
-          <Footer />
-        </Stack>
-      </Container>
+      <SubpageContextProvider>
+        <Header
+          includeSidebar={data?.page === "UserInfo"}
+          data={data}
+        />
+        <ToolbarOffset />
+        <Box
+          sx={{overflow: 'hidden', height: 'calc(100vh - 120px)'}}
+        >
+          <Box sx={{overflow: 'auto', height: '100%', paddingTop: theme.spacing(5)}}>
+            {body}
+            <ToolbarOffset />
+          </Box>
+        </Box>
+        <Footer />
+      </SubpageContextProvider>
     </ThemeProvider>
   );
 };