added theming

src/app/AuthHTTPWrapper.tsx

@@ -5,6 +5,8 @@ import HTTPProvider from '../providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import UserWrapper from './UserWrapper'
+import { ThemeProvider } from '@mui/material'
+import theme from '../theme/theme'
 
 function AuthHTTPWrapper() {
   const [token, setToken] = useState<string | undefined>(undefined)
@@ -25,17 +27,19 @@ function AuthHTTPWrapper() {
       useRefreshTokens={true}
       cacheLocation='localstorage'
     >
-      <AuthWrapper setToken={setToken}>
-        { token ? 
-          <HTTPProvider token={token}>
-            <UserWrapper/>
-          </HTTPProvider>
-        :
-          <LoadingScreen
-            message='Loading user profile'
-          />
-        }
-      </AuthWrapper>
+      <ThemeProvider theme={theme}>
+        <AuthWrapper setToken={setToken}>
+          { token ? 
+            <HTTPProvider token={token}>
+              <UserWrapper/>
+            </HTTPProvider>
+          :
+            <LoadingScreen
+              message='Loading user profile'
+            />
+          }
+        </AuthWrapper>
+      </ThemeProvider>
     </Auth0Provider>
   )
 }

src/app/LoadingScreen.tsx

@@ -1,18 +1,18 @@
-import { CircularProgress, Typography } from "@mui/material";
+import { CircularProgress, Typography, useTheme } from "@mui/material";
 
 interface Props {
     message?: string;
 }
 
 export default function LoadingScreen(props: Props) {
-
     const { message } = props;
+    const theme = useTheme();
 
     return (
         <>
             <CircularProgress
-                size={125}
-                style={{ marginBottom: 24 }}
+                size={150}
+                style={{ marginBottom: theme.spacing(4) }}
             />
             <br/>
             <Typography variant="h6">