cut out garbage code and wrapped navigation container in appContent css

src/app/UserWrapper.tsx

@@ -1,16 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import reactLogo from '../assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
 import { useUserAPI } from '../providers/pond/userAPI'
 import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import LoadingScreen from './LoadingScreen'
-// import { pond } from "protobuf-ts/pond";
 import NavigationContainer from '../navigation/NavigationContainer'
 import { GlobalState, GlobalStateAction, StateProvider } from '../providers/StateContainer'
 import { User } from '../models/user'
 import { Team } from '../models/team'
+import { makeStyles } from '@mui/styles'
+import { Theme } from '@mui/material'
 
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
   return {
@@ -19,6 +18,27 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>
   };
 };
 
+const useStyles = makeStyles((theme: Theme) => ({
+  appContent: {
+    marginTop: 56,
+    marginBottom: 56,
+    marginLeft: "0px",
+    [theme.breakpoints.up("sm")]: {
+      marginTop: 64,
+      marginBottom: 0
+    },
+    [theme.breakpoints.up("md")]: {
+      marginLeft: theme.spacing(9)
+    }
+  },
+  container: {
+    backgroundColor: theme.palette.background.default,
+  },
+  helloMessage: {
+    marginTop: theme.spacing(2),
+  },
+}))
+
 const globalDefault = {
   user: User.create(),
   team: Team.create(),
@@ -34,13 +54,11 @@ interface Props {
 
 export default function UserWrapper(props: Props) {
   const { toggleTheme } = props;
-  const [count, setCount] = useState(0)
   const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
+  const classes = useStyles();
   const useAuth = useAuth0();
   const hasFetched = useRef(false);
-  // const [user, setUser] = useState<pond.User | undefined>(undefined)
-  // const [message, setMessage] = useState("Loading user profile...")
   const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
 
   let user_id = or(useAuth.user?.sub, "")
@@ -49,8 +67,6 @@ export default function UserWrapper(props: Props) {
     if (hasFetched.current) return;
     setLoading(true)
     userAPI.getUserWithTeam(user_id).then(resp => {
-      console.log(resp.data.team)
-      // if (resp.data.user) setUser(resp.data.user)
       setGlobal({
         user: resp.data.user ? User.create(resp.data.user) : User.create(),
         team: resp.data.team ? Team.create(resp.data.team) : Team.create(),
@@ -59,8 +75,7 @@ export default function UserWrapper(props: Props) {
         userTeamPermissions: [],
         backgroundTasksComplete: false
       })
-    }).catch(err => {
-      console.log(err.toString())
+    }).catch(() => {
       setGlobal(globalDefault)
     })
     .finally(() => {
@@ -80,27 +95,9 @@ export default function UserWrapper(props: Props) {
 
   return (
     <StateProvider state={global} reducer={reducer}>
-      <NavigationContainer toggleTheme={toggleTheme}>
-        <div>
-          <a href="https://vitejs.dev" target="_blank">
-              <img src={viteLogo} className="logo" alt="Vite logo" />
-          </a>
-          <a href="https://react.dev" target="_blank">
-              <img src={reactLogo} className="logo react" alt="React logo" />
-          </a>
-        </div>
-        <h1>Vite + React</h1>
-        <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-            count is {count}
-        </button>
-        <p>
-            Hello, {global.user.settings?.name}!
-        </p>
-        </div><p className="read-the-docs">
-            Coming soon
-        </p>
-      </NavigationContainer>
+      <main className={classes.appContent}>
+        <NavigationContainer toggleTheme={toggleTheme} />
+      </main>
     </StateProvider>
   )
 }