Fixed mainpage top bar and added comments

src/frontend/src/components/SingleCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography, Card, CardContent } from '@material-ui/core';
+import { Typography, Card, CardContent, Stack } from '@mui/material';
 import { CardActionArea } from '@mui/material';
 import { AptType } from './Types';
 
@@ -30,43 +30,45 @@ const SingleCard = ({
             }
          >
             <CardContent style={{ height: '175px' }}>
+               <Stack>
                {/*<Button size="small">Learn More</Button>*/}
-               <Typography
-                  gutterBottom
-                  variant="h5"
-                  style={{ float: 'left', marginLeft: '30px' }}
-                  component="div"
-               >
-                  {name}
-               </Typography>
-               <Typography
-                  gutterBottom
-                  variant="body1"
-                  style={{ float: 'right', marginTop: '5px' }}
-               >
-                  {address}
-               </Typography>
-               <Typography
-                  gutterBottom
-                  variant="body2"
-                  style={{ float: 'left' }}
-               >
-                  {/*review*/}
-               </Typography>
-               <Typography
-                  gutterBottom
-                  variant="body2"
-                  style={{ float: 'right' }}
-               >
-                  ${price_min}-${price_max}
-               </Typography>
-               <Typography
-                  gutterBottom
-                  variant="body2"
-                  style={{ float: 'left' }}
-               >
-                  {/* {rating} */}
-               </Typography>
+                  <Typography
+                     gutterBottom
+                     variant="h5"
+                     style={{ float: 'left', marginLeft: '30px' }}
+                     component="div"
+                  >
+                     {name}
+                  </Typography>
+                  <Typography
+                     gutterBottom
+                     variant="body1"
+                     style={{ float: 'right', marginTop: '5px' }}
+                  >
+                     {address}
+                  </Typography>
+                  <Typography
+                     gutterBottom
+                     variant="body2"
+                     style={{ float: 'left' }}
+                  >
+                     {/*review*/}
+                  </Typography>
+                  <Typography
+                     gutterBottom
+                     variant="body2"
+                     style={{ float: 'right' }}
+                  >
+                     ${price_min}-${price_max}
+                  </Typography>
+                  <Typography
+                     gutterBottom
+                     variant="body2"
+                     style={{ float: 'left' }}
+                  >
+                     {/* {rating} */}
+                  </Typography>
+               </Stack>
             </CardContent>
          </CardActionArea>
       </Card>

src/frontend/src/components/user/getReviewedApts.tsx

@@ -5,6 +5,7 @@ import { AptType } from '../Types';
 const baseURL = 'http://127.0.0.1:5000/user';
 
 export default function getReviewedApts(username: string) {
+   // Get apts that username reviewed
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    const emptyarray: AptType[] = [];

src/frontend/src/pages/MainPage.tsx

@@ -25,6 +25,7 @@ function MainPage() {
    return (
       <>
          <Stack spacing={2}>
+            {/* Top bar */}
             <AppBar component="nav">
                <Toolbar>
                   <Grid container spacing={0}>
@@ -71,6 +72,7 @@ function MainPage() {
                </Toolbar>
             </AppBar>
             <Grid container spacing={3}>
+               {/* Search bar and rest of the components */}
                <Grid item xs={12}>
                   <Box
                      display="flex"

src/frontend/src/pages/User.tsx

@@ -36,6 +36,7 @@ export default function User() {
       <>
          <Stack spacing={1}>
             <AppBar component="nav">
+               {/*Renders top bar*/}
                <Toolbar>
                   <Grid container spacing={0}>
                      <Grid item>
@@ -81,6 +82,7 @@ export default function User() {
                </Toolbar>
             </AppBar>
             <Grid container spacing={2}>
+               {/*Headers*/}
                <Grid item xs={4}>
                   <Box display="flex" justifyContent="center">
                      <Typography variant="h4">User</Typography>
@@ -93,6 +95,7 @@ export default function User() {
                </Grid>
             </Grid>
             <Grid container spacing={2}>
+               {/* User info and list of reviewed apts */}
                <Grid item xs={4}>
                   <FormUser />
                   <Button variant="outlined" style={btnstyle}>
@@ -115,6 +118,7 @@ function FormUser() {
    const user_info = getUser('Zongxian');
    return (
       <React.Fragment>
+         {/* Form UI for user info */}
          <List>
             <ListItem>
                <ListItemAvatar>
@@ -145,6 +149,7 @@ function FormEmail({ email }: EmailComponentProps) {
    const [newEmail, setNewEmail] = useState('');
    return (
       <React.Fragment>
+         {/* Email box changes based on click */}
          {editEmail == false && (
             <ListItem>
                <ListItemAvatar>
@@ -217,6 +222,7 @@ function FormPhone({ phone }: PhoneComponentProps) {
    const [newPhone, setNewPhone] = useState('');
    return (
       <React.Fragment>
+         {/* Phone box changes based on click */}
          {editPhone == false && (
             <ListItem>
                <ListItemAvatar>
@@ -287,6 +293,7 @@ function FormLikedApts() {
    const reviewed_apts = getReviewedApts('Zongxian');
    return (
       <React.Fragment>
+         {/* UI for liked apartments */}
          <Box>
             <Stack spacing={2}>
                {reviewed_apts.apartments.map((apt, i) => {