team page added, uses data from previous page so that the team isn't loaded again if it's clicked from the team list

src/user/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from "@mui/material";
+import { Avatar, SxProps, Theme, useTheme } from "@mui/material";
 import { Team, User } from "models";
 import React from "react";
 
@@ -40,18 +40,34 @@ interface Props {
   user: User | Team;
   className?: string;
   style?: React.CSSProperties;
+  sx?: SxProps<Theme>;
+  size?: "small" | "medium" | "large";
 }
 
-export default function UserSettings(props: Props) {
-  const { user, className, style } = props;
+export default function UserAvatar(props: Props) {
+  const theme = useTheme()
+  const { user, className, style, sx, size } = props;
+  
+  const getSize = () => {
+    if (size==="large") return theme.spacing(8)
+    if (size==="medium") return theme.spacing(6)
+    if (size==="small") return theme.spacing(4)
+    return undefined
+  }
 
   return (
     <Avatar
       alt={user.name()}
+      // sx={sx}
       src={user.settings.avatar}
       className={className}
       style={style}
       {...stringAvatar(user.name())}
+      sx={{
+        ...sx,          // Spread the existing styles
+        width: getSize(), // Override the width
+        height: getSize(), // Override the height
+      }}
     />
   );
 }

src/user/UserSettings.tsx

@@ -131,7 +131,6 @@ export default function UserSettings(props: Props) {
   const changeTimezone = (tz: string) => {
     let updatedUser = User.clone(user);
     updatedUser.settings.timezone = tz;
-
     setUser(updatedUser);
   };
 
@@ -183,7 +182,6 @@ export default function UserSettings(props: Props) {
             <MuiTelInput value={phoneNumber} onChange={changePhoneNumber} />
           </FormControl>
         </Grid2>
-
         <Grid2 size={{ xs: 12 }}>
           <Box>
             <SearchSelect