Some formatting

client/src/Header.tsx

@@ -1,25 +1,32 @@
-import { AppBar, Button, ButtonGroup, Grid, Link, Typography } from "@mui/material";
+import {
+  AppBar,
+  Button,
+  ButtonGroup,
+  Grid,
+  Link,
+  Typography,
+} from "@mui/material";
 import Box from "@mui/material/Box";
-import AcUnitIcon from '@mui/icons-material/AcUnit';
+import AcUnitIcon from "@mui/icons-material/AcUnit";
 import { cyan } from "@mui/material/colors";
 import { useContext } from "react";
 import { LoginContext } from "./Context";
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import HomeIcon from '@mui/icons-material/Home';
+import HomeIcon from "@mui/icons-material/Home";
-import PostAddIcon from '@mui/icons-material/PostAdd';
+import PostAddIcon from "@mui/icons-material/PostAdd";
 
 function LoginDisplay({ sx }: { sx?: React.CSSProperties }): JSX.Element {
   const loginCtx = useContext(LoginContext);
 
   const handleLogin = (): void => {
-        console.log("Login button pressed")
+    console.log("Login button pressed");
     if (loginCtx.currentUser == undefined) {
       loginCtx.setOpen?.(true); // If the loginCtx.setOpen is defined, call it with true as the argument
     } else {
       loginCtx.setCurrentUser?.("");
       loginCtx.setUserToken?.("");
     }
-    }
+  };
 
   if (loginCtx.currentUser != undefined) {
     return (
@@ -28,66 +35,135 @@ function LoginDisplay({ sx }: { sx?: React.CSSProperties }): JSX.Element {
           Logged in as:
         </Typography>
         <Typography sx={{ textAlign: "right" }}>
-                    <Link href='#' underline='hover' onClick={(): void => handleLogin()}>
+          <Link href="#" underline="hover" onClick={(): void => handleLogin()}>
             {loginCtx.currentUser}
           </Link>
         </Typography>
       </Box>
-        )
+    );
   }
 
   return (
     <Box sx={{ textAlign: "right", ...sx }}>
-            <Button variant="text" startIcon={<AccountCircleIcon />} onClick={(): void => handleLogin()}>Login</Button>
+      <Button
+        variant="text"
+        startIcon={<AccountCircleIcon />}
+        onClick={(): void => handleLogin()}
+      >
+        Login
+      </Button>
     </Box>
-    )
+  );
 }
 
 function Header({ sx }: { sx?: React.CSSProperties }): JSX.Element {
   return (
-        <AppBar position='static' sx={{ p: 1, px: 3, display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', ...sx }}>
+    <AppBar
-            <Grid container px={2} spacing={2} sx={{ flexGrow: 1, display: "flex", maxWidth: "1200px", flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+      position="static"
-                <Grid item xs={12} sm={6} md={4} lg={4}><HeaderLogo clickable /></Grid>
+      sx={{
-                <Grid item xs={12} sm={6} md={4} lg={4}><NavButtons /></Grid>
+        p: 1,
-                <Grid item xs={12} sm={6} md={4} lg={4}><LoginDisplay /></Grid>
+        px: 3,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+        ...sx,
+      }}
+    >
+      <Grid
+        container
+        px={2}
+        spacing={2}
+        sx={{
+          flexGrow: 1,
+          display: "flex",
+          maxWidth: "1200px",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Grid item xs={12} sm={6} md={4} lg={4}>
+          <HeaderLogo clickable />
         </Grid>
-        </AppBar >)
+        <Grid item xs={12} sm={6} md={4} lg={4}>
+          <NavButtons />
+        </Grid>
+        <Grid item xs={12} sm={6} md={4} lg={4}>
+          <LoginDisplay />
+        </Grid>
+      </Grid>
+    </AppBar>
+  );
 }
 
-function HeaderLogo({ clickable, sx }: { clickable?: boolean, sx?: React.CSSProperties }): JSX.Element {
+function HeaderLogo({
+  clickable,
+  sx,
+}: {
+  clickable?: boolean;
+  sx?: React.CSSProperties;
+}): JSX.Element {
   const clickStyle = {
     transition: "0.3s all ease-in-out",
-        ":hover": { textShadow: "0 0px 15px" + cyan[400] }
+    ":hover": { textShadow: "0 0px 15px" + cyan[400] },
-    }
+  };
 
   return (
-        <Box sx={{
+    <Box
+      sx={{
         width: "fit-content",
-            display: 'flex',
+        // height: "fit-content",
-            flexDirection: 'row',
+        // display: "flex",
-            alignItems: 'center',
+        // flexDirection: "row",
+        // alignItems: "center",
+        // justifyContent: "center",
         userSelect: "none",
         cursor: "pointer",
-            ...clickable ? clickStyle : {},
+        ...(clickable ? clickStyle : {}),
-            ...sx
+        ...sx,
-        }}>
+      }}
-            <AcUnitIcon fontSize="large" sx={{ color: cyan[400], mr: 1 }}></AcUnitIcon>
+    >
-            <Typography variant='h4'>FrostByte</Typography>
+      <Typography fontSize={"2rem"} sx={{display:"flex", flexDirection:"row", alignItems: "center"}}>
+        <AcUnitIcon
+          fontSize="inherit"
+          sx={{height: "100%", color: cyan[400], mr: 1, mb: 1.1 }}
+        ></AcUnitIcon>
+        FrostByte
+      </Typography>
     </Box>
-    )
+  );
 }
 
 function NavButtons({ sx }: { sx?: React.CSSProperties }): JSX.Element {
   return (
-        <Box sx={{ display: 'flex', flexDirection: 'row', maxWidth: "400px", width: 1, ...sx }}>
+    <Box
-            <ButtonGroup variant="text" aria-label="text button group" sx={{ width: "100%" }}>
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        maxWidth: "400px",
+        width: 1,
+        ...sx,
+      }}
+    >
+      <ButtonGroup
+        variant="text"
+        aria-label="text button group"
+        sx={{ width: "100%" }}
+      >
         {["Home", "New"].map((typename): JSX.Element => {
           return (
-                        <Button startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />} key={typename} sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}>{typename}</Button>
+            <Button
-                    )
+              startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />}
+              key={typename}
+              sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}
+            >
+              {typename}
+            </Button>
+          );
         })}
       </ButtonGroup>
-        </Box>)
+    </Box>
+  );
 }
 
 export default Header;