From c468372a19542eec194ff9d4882f2a87c3ae6c72 Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Sun, 22 Oct 2023 13:54:55 -0400
Subject: [PATCH 1/8] migrating changes

---
 frontend/src/colors.js                        |   1 +
 .../src/components/Review/ReviewHeader.tsx    |   2 +-
 .../utils/LabeledLinearProgress.tsx           |  57 ++++--
 frontend/src/pages/ApartmentPage.tsx          | 179 +++++++++---------
 4 files changed, 133 insertions(+), 106 deletions(-)

diff --git a/frontend/src/colors.js b/frontend/src/colors.js
index 3569e748..d8447c4d 100644
--- a/frontend/src/colors.js
+++ b/frontend/src/colors.js
@@ -9,6 +9,7 @@ export const colors = {
   gray1: '#5D5D5D',
   gray2: '#898989',
   gray3: '#F9F9F9',
+  gray4: '#C4C4C4',
   white: '#FFFFFF',
   landlordCardRed: '#F3664B',
   green1: '#68BB59',
diff --git a/frontend/src/components/Review/ReviewHeader.tsx b/frontend/src/components/Review/ReviewHeader.tsx
index 4e75c1d5..18361a0d 100644
--- a/frontend/src/components/Review/ReviewHeader.tsx
+++ b/frontend/src/components/Review/ReviewHeader.tsx
@@ -20,7 +20,7 @@ export default function ReviewHeader({ aveRatingInfo }: Props): ReactElement {
                   {feature.charAt(0).toUpperCase() + feature.slice(1)}
                 </Typography>
               </Grid>
-              <Grid item xs={7} md={7} lg={7}>
+              <Grid item xs={7} style={{ marginLeft: '-10%' }}>
                 <LabeledLinearProgress value={rating} />
               </Grid>
             </Grid>
diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index a9f10ec8..900b9f14 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -1,8 +1,6 @@
 import React, { ReactElement } from 'react';
-import Box from '@material-ui/core/Box';
-import LinearProgress from '@material-ui/core/LinearProgress';
+import { colors } from '../../colors';
 import Typography from '@material-ui/core/Typography';
-import styles from '../Review/Review.module.scss';
 import { makeStyles } from '@material-ui/core';
 
 type Props = {
@@ -10,25 +8,48 @@ type Props = {
 };
 
 const useStyles = makeStyles((theme) => ({
-  bar: {
-    width: '90%',
+  barContainer: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  barSegment: {
+    flex: 1,
+    height: '8px', // Adjust the height as needed
+    borderRadius: '4px', // Adjust the border radius as needed
+    marginRight: '4px', // Add a small gap between segments
+  },
+  aveRating: {
+    marginLeft: '8px', // Add spacing between the segments and the rating
   },
 }));
 
 export default function LabeledLinearProgress({ value }: Props): ReactElement {
-  const { bar } = useStyles();
+  const { barContainer, barSegment, aveRating } = useStyles();
+  let rating_value = value * 2;
+  rating_value = Math.round(rating_value);
+  rating_value = rating_value / 2 - 1;
+  console.log(rating_value);
+  const segments = Array.from({ length: 5 }, (_, index) => (
+    <div
+      key={index}
+      className={barSegment}
+      style={{
+        background:
+          index <= rating_value
+            ? colors.red1
+            : index > rating_value && rating_value + 0.5 === index
+            ? `linear-gradient(to right, ${colors.red1} 0%, ${colors.red1} 50%, ${colors.gray4} 50%, ${colors.gray4} 100%)`
+            : colors.gray4,
+      }}
+    ></div>
+  ));
+
   return (
-    <Box className={styles.barContainer} display="flex" alignItems="center">
-      <Box width="90%" mr={1}>
-        <LinearProgress className={bar} variant="determinate" value={value * 20} />
-      </Box>
-      <Box minWidth={35}>
-        <Typography
-          className={styles.aveRating}
-          variant="body2"
-          color="textSecondary"
-        >{`${value.toFixed(1)}`}</Typography>
-      </Box>
-    </Box>
+    <div className={barContainer}>
+      {segments}
+      <Typography className={aveRating} variant="body2" color="textSecondary">
+        {`${value.toFixed(1)}`}
+      </Typography>
+    </div>
   );
 }
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index cef77917..67a5d25e 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -156,10 +156,9 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     }
   }, [isMobile, reviewData.length]);
 
-  // Increase the number of results to show when the "Show More" button is clicked.
-  const handleShowMore = () => {
-    setResultsToShow(resultsToShow + 5);
-  };
+  // const handleShowMore = () => {
+  //   setResultsToShow(resultsToShow + 5);
+  // };
 
   // Set 'notFound' to true when a page is not found.
   const handlePageNotFound = () => {
@@ -176,7 +175,6 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     container,
     expand,
     expandOpen,
-    horizontalLine,
   } = useStyles();
 
   // Set the page title based on whether apartment data is loaded.
@@ -364,9 +362,11 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   );
 
   const Header = (
+    // Header section with review count, average rating, and leave review button
+
     <>
       <Grid container alignItems="center">
-        <Grid container spacing={1}>
+        <Grid container alignItems="center" justifyContent="space-between">
           <Grid item>
             <Typography variant="h6">Reviews ({reviewData.length})</Typography>
             {reviewData.length === 0 && (
@@ -375,7 +375,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
           </Grid>
 
           {reviewData.length > 0 && (
-            <Grid item>
+            <Grid item style={{ paddingLeft: '20px' }}>
               <Grid container alignItems="center">
                 <Grid item className={heartRating}>
                   <HeartRating value={getAverageRating(reviewData)} precision={0.5} readOnly />
@@ -388,6 +388,18 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
               </Grid>
             </Grid>
           )}
+
+          <Grid item style={{ marginLeft: 'auto' }}>
+            <Button
+              color="primary"
+              className={reviewButton}
+              variant="contained"
+              disableElevation
+              onClick={openReviewModal}
+            >
+              Leave a Review
+            </Button>
+          </Grid>
         </Grid>
 
         {landlordData && landlordData.photos.length > 0 && (
@@ -403,42 +415,8 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
 
         <Grid item className={leaveReviewContainer} xs={12}>
           <Grid container spacing={1} alignItems="center" justifyContent="space-between">
-            <Grid item>
-              <Button
-                color="primary"
-                className={reviewButton}
-                variant="contained"
-                disableElevation
-                onClick={openReviewModal}
-              >
-                Leave a Review
-              </Button>
-            </Grid>
-            <Grid item>
-              <Grid container spacing={1} direction="row" alignItems="center">
-                <Grid item>
-                  <Typography>Sort by:</Typography>
-                </Grid>
-                <Grid item className={sortByButton}>
-                  <DropDown
-                    menuItems={[
-                      {
-                        item: 'Recent',
-                        callback: () => {
-                          setSortBy('date');
-                        },
-                      },
-                      {
-                        item: 'Helpful',
-                        callback: () => {
-                          setSortBy('likes');
-                        },
-                      },
-                    ]}
-                  />
-                </Grid>
-              </Grid>
-            </Grid>
+            <Grid item></Grid>
+            <Grid item></Grid>
           </Grid>
         </Grid>
       </Grid>
@@ -560,9 +538,8 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       </Grid>
     </>
   );
-
   const InfoSection = landlordData && (
-    <Grid item xs={12} sm={4}>
+    <Grid item xs={12}>
       <AptInfo
         landlord={landlordData.name}
         contact={landlordData.contact}
@@ -573,10 +550,13 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   );
 
   return notFound ? (
+    // Display Not Found page if the apartment is not found
     <NotFoundPage />
   ) : !loaded ? (
+    // Display Not Found page if the apartment is not found
     <LinearProgress />
   ) : (
+    // Display Not Found page if the apartment is not found
     <>
       {landlordData && (
         <Container>
@@ -591,7 +571,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
 
       <Container className={container}>
         <Grid container spacing={5} justifyContent="center" style={{ marginBottom: '20px' }}>
-          <Grid item xs={12} sm={8}>
+          <Grid item xs={12}>
             {isMobile ? MobileHeader : Header}
             {!isMobile && <Hidden smUp>{InfoSection}</Hidden>}
             {showConfirmation && (
@@ -610,51 +590,76 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                 time={toastTime}
               />
             )}
-            <Grid container item spacing={3}>
-              {sortReviews(reviewData, sortBy)
-                .slice(0, resultsToShow)
-                .map((review, index) => (
-                  <Grid item xs={12} key={index}>
-                    <ReviewComponent
-                      review={review}
-                      liked={likedReviews[review.id]}
-                      likeLoading={likeStatuses[review.id]}
-                      addLike={addLike}
-                      removeLike={removeLike}
-                      setToggle={setToggle}
-                      user={user}
-                      setUser={setUser}
-                    />
+            <Grid container alignItems="flex-start" justifyContent="center" spacing={3}>
+              <Grid item xs={12} sm={8}>
+                {!isMobile && (
+                  <Grid
+                    container
+                    spacing={1}
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    style={{ paddingBottom: '10px' }}
+                  >
+                    <Grid item>
+                      <Typography>Sort by:</Typography>
+                    </Grid>
+                    <Grid item className={sortByButton}>
+                      <DropDown
+                        menuItems={[
+                          {
+                            item: 'Recent',
+                            callback: () => {
+                              setSortBy('date');
+                            },
+                          },
+                          {
+                            item: 'Helpful',
+                            callback: () => {
+                              setSortBy('likes');
+                            },
+                          },
+                        ]}
+                      />
+                    </Grid>
                   </Grid>
-                ))}
-            </Grid>
-
-            {isMobile && reviewData.length > resultsToShow && (
-              <Box textAlign="center">
-                <Grid item xs={12}>
-                  <hr className={horizontalLine} />
+                )}
+                {/* Rest of your Review List content */}
+                <Grid container spacing={3}>
+                  {sortReviews(reviewData, sortBy)
+                    .slice(0, resultsToShow)
+                    .map((review, index) => (
+                      <Grid item xs={12} key={index}>
+                        <ReviewComponent
+                          review={review}
+                          liked={likedReviews[review.id]}
+                          likeLoading={likeStatuses[review.id]}
+                          addLike={addLike}
+                          removeLike={removeLike}
+                          setToggle={setToggle}
+                          user={user}
+                          setUser={setUser}
+                        />
+                      </Grid>
+                    ))}
                 </Grid>
-                <Grid item style={{ padding: '30px' }}>
-                  <Button
-                    style={{
-                      backgroundColor: 'white',
-                      border: '1px solid #A3A3A3',
-                      borderRadius: '9px',
-                      width: '10em',
-                      textTransform: 'initial',
-                    }}
-                    variant="contained"
-                    disableElevation
-                    onClick={handleShowMore}
-                  >
-                    Show More
-                  </Button>
+              </Grid>
+
+              {/* Second Grid item (InfoSection) */}
+              {isMobile && (
+                <Hidden smUp>
+                  <Grid item xs={12}>
+                    {InfoSection}
+                  </Grid>
+                </Hidden>
+              )}
+              <Hidden xsDown>
+                <Grid item xs={4}>
+                  {InfoSection}
                 </Grid>
-              </Box>
-            )}
+              </Hidden>
+            </Grid>
           </Grid>
-          {isMobile && <Hidden smUp>{InfoSection}</Hidden>}
-          <Hidden xsDown>{InfoSection}</Hidden>
         </Grid>
       </Container>
       {Modals}

From fc7e186bad2ca415e13724d85d42ddebd9d0f7c5 Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Sun, 22 Oct 2023 15:02:40 -0400
Subject: [PATCH 2/8] specification

---
 .../src/components/utils/LabeledLinearProgress.tsx   | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index 900b9f14..2f6521bc 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -30,6 +30,18 @@ export default function LabeledLinearProgress({ value }: Props): ReactElement {
   rating_value = rating_value / 2 - 1;
   console.log(rating_value);
   const segments = Array.from({ length: 5 }, (_, index) => (
+    /**
+     * This JSX code represents a rendering of a bar segment for a rating display. The rating value is used to determine the visual appearance of the segment.
+     *
+     * @param {number} index - The index of the segment within the rating bar.
+     * @param {string} barSegment - The CSS class name for styling the segment.
+     * @param {number} rating_value - The rating value to be displayed.
+     *
+     * The background style of the div is set based on the index and rating value:
+     * - If the index is less than or equal to the rating_value, the background is set to colors.red1.
+     * - If the index is greater than the rating_value and is exactly 0.5 more than the rating_value, a gradient background is applied. The gradient transitions from colors.red1 to colors.gray4, creating a partial fill effect.
+     * - For all other cases, the background is set to colors.gray4.
+     */
     <div
       key={index}
       className={barSegment}

From ae8afb7952d1da80300bd75f82b000bf4f7ce17a Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Mon, 6 Nov 2023 16:15:03 -0500
Subject: [PATCH 3/8] fixed precentage of segment

---
 .../components/utils/LabeledLinearProgress.tsx    | 15 +++++++++------
 frontend/src/pages/ApartmentPage.tsx              |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index 2f6521bc..12e93a0a 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -25,10 +25,8 @@ const useStyles = makeStyles((theme) => ({
 
 export default function LabeledLinearProgress({ value }: Props): ReactElement {
   const { barContainer, barSegment, aveRating } = useStyles();
-  let rating_value = value * 2;
-  rating_value = Math.round(rating_value);
-  rating_value = rating_value / 2 - 1;
-  console.log(rating_value);
+  let rating_value = value - 1;
+
   const segments = Array.from({ length: 5 }, (_, index) => (
     /**
      * This JSX code represents a rendering of a bar segment for a rating display. The rating value is used to determine the visual appearance of the segment.
@@ -42,6 +40,9 @@ export default function LabeledLinearProgress({ value }: Props): ReactElement {
      * - If the index is greater than the rating_value and is exactly 0.5 more than the rating_value, a gradient background is applied. The gradient transitions from colors.red1 to colors.gray4, creating a partial fill effect.
      * - For all other cases, the background is set to colors.gray4.
      */
+    /**
+     * Make it so the segments fill, and when there is a decimal leftover, the segment gets filled to that decimal.
+     */
     <div
       key={index}
       className={barSegment}
@@ -49,8 +50,10 @@ export default function LabeledLinearProgress({ value }: Props): ReactElement {
         background:
           index <= rating_value
             ? colors.red1
-            : index > rating_value && rating_value + 0.5 === index
-            ? `linear-gradient(to right, ${colors.red1} 0%, ${colors.red1} 50%, ${colors.gray4} 50%, ${colors.gray4} 100%)`
+            : index > rating_value && index - 1 < rating_value
+            ? `linear-gradient(to right, ${colors.red1} ${(rating_value - index + 1 / 1) * 100}%, ${
+                colors.gray4
+              } 0%)`
             : colors.gray4,
       }}
     ></div>
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index 67a5d25e..117769ce 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -570,7 +570,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       )}
 
       <Container className={container}>
-        <Grid container spacing={5} justifyContent="center" style={{ marginBottom: '20px' }}>
+        <Grid container spacing={5} justifyContent="center">
           <Grid item xs={12}>
             {isMobile ? MobileHeader : Header}
             {!isMobile && <Hidden smUp>{InfoSection}</Hidden>}

From 93a853c843fbacb8e093e8f9804cdfab9bfe7c35 Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Tue, 7 Nov 2023 13:50:57 -0500
Subject: [PATCH 4/8] adjust spacing

---
 frontend/src/pages/ApartmentPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index 117769ce..20f2453d 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -422,7 +422,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       </Grid>
 
       {reviewData && reviewData.length > 0 && (
-        <Grid item xs={12} className={ratingInfo}>
+        <Grid item xs={12} className={ratingInfo} style={{ marginTop: '-2%' }}>
           <ReviewHeader aveRatingInfo={aveRatingInfo} />
         </Grid>
       )}
@@ -570,7 +570,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       )}
 
       <Container className={container}>
-        <Grid container spacing={5} justifyContent="center">
+        <Grid container spacing={5} justifyContent="center" style={{ marginBottom: '20px' }}>
           <Grid item xs={12}>
             {isMobile ? MobileHeader : Header}
             {!isMobile && <Hidden smUp>{InfoSection}</Hidden>}

From 6b88cfec5d7d08921ae293abe02363179192865a Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Fri, 10 Nov 2023 14:49:38 -0500
Subject: [PATCH 5/8] fixed bug

---
 frontend/src/pages/ApartmentPage.tsx | 26 +++-----------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index c1e136da..7075941a 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -550,13 +550,10 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   );
 
   return notFound ? (
-    // Display Not Found page if the apartment is not found
     <NotFoundPage />
   ) : !loaded ? (
-    // Display Not Found page if the apartment is not found
     <LinearProgress />
   ) : (
-    // Display Not Found page if the apartment is not found
     <>
       {landlordData && (
         <Container>
@@ -623,33 +620,16 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                         ]}
                       />
                     </Grid>
-                    
-            <Grid container item spacing={3}>
-              {sortReviews(reviewData, sortBy)
-                .slice(0, resultsToShow)
-                .map((review, index) => (
-                  <Grid item xs={12} key={index}>
-                    <ReviewComponent
-                      review={review}
-                      liked={likedReviews[review.id]}
-                      likeLoading={likeStatuses[review.id]}
-                      addLike={addLike}
-                      removeLike={removeLike}
-                      setToggle={setToggle}
-                      user={user}
-                      setUser={setUser}
-                      isLandlord={false}
-                    />
-                  
                   </Grid>
                 )}
-                {/* Rest of your Review List content */}
-                <Grid container spacing={3}>
+
+                <Grid container item spacing={3}>
                   {sortReviews(reviewData, sortBy)
                     .slice(0, resultsToShow)
                     .map((review, index) => (
                       <Grid item xs={12} key={index}>
                         <ReviewComponent
+                          isLandlord={review.landlordId != null} // Make sure this is correct
                           review={review}
                           liked={likedReviews[review.id]}
                           likeLoading={likeStatuses[review.id]}

From 4e8daeabac7c0718fb854ee93145261780a1fa28 Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Mon, 13 Nov 2023 15:33:02 -0500
Subject: [PATCH 6/8] fixed bug

---
 frontend/src/components/utils/LabeledLinearProgress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index 12e93a0a..c6c835a7 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -63,7 +63,7 @@ export default function LabeledLinearProgress({ value }: Props): ReactElement {
     <div className={barContainer}>
       {segments}
       <Typography className={aveRating} variant="body2" color="textSecondary">
-        {`${value.toFixed(1)}`}
+        {value !== null && value !== undefined ? value.toFixed(1) : ''}
       </Typography>
     </div>
   );

From 23f5e4df71911ec1493173e43fc7e853ab7f7a75 Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Mon, 13 Nov 2023 16:08:09 -0500
Subject: [PATCH 7/8] fixed sizing

---
 frontend/src/components/Review/ReviewHeader.tsx | 14 +++++++++++++-
 frontend/src/pages/ApartmentPage.tsx            |  4 ----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Review/ReviewHeader.tsx b/frontend/src/components/Review/ReviewHeader.tsx
index 18361a0d..a81a1d5e 100644
--- a/frontend/src/components/Review/ReviewHeader.tsx
+++ b/frontend/src/components/Review/ReviewHeader.tsx
@@ -3,12 +3,24 @@ import { Grid, Typography } from '@material-ui/core';
 import styles from './Review.module.scss';
 import LabeledLinearProgress from '../utils/LabeledLinearProgress';
 import { RatingInfo } from '../../pages/LandlordPage';
+import { useEffect, useState } from 'react';
 
 type Props = {
   readonly aveRatingInfo: RatingInfo[];
 };
 
 export default function ReviewHeader({ aveRatingInfo }: Props): ReactElement {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 750);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <div className={styles.detail}>
       <Grid className={styles.infoContainer} container spacing={2} direction="row">
@@ -20,7 +32,7 @@ export default function ReviewHeader({ aveRatingInfo }: Props): ReactElement {
                   {feature.charAt(0).toUpperCase() + feature.slice(1)}
                 </Typography>
               </Grid>
-              <Grid item xs={7} style={{ marginLeft: '-10%' }}>
+              <Grid item xs={7} style={{ marginLeft: isMobile ? '0%' : '-4%' }}>
                 <LabeledLinearProgress value={rating} />
               </Grid>
             </Grid>
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index 7075941a..05390e3b 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -156,10 +156,6 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     }
   }, [isMobile, reviewData.length]);
 
-  // const handleShowMore = () => {
-  //   setResultsToShow(resultsToShow + 5);
-  // };
-
   // Set 'notFound' to true when a page is not found.
   const handlePageNotFound = () => {
     setNotFound(true);

From 7d0eb92095a02aaf0fc8095094ebf411cd18b8a6 Mon Sep 17 00:00:00 2001
From: thuypham03 <sophia.phamthuy@gmail.com>
Date: Mon, 13 Nov 2023 18:48:44 -0500
Subject: [PATCH 8/8] size of landlord info

---
 frontend/src/pages/ApartmentPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index e765b796..a08afffb 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -535,7 +535,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     </>
   );
   const InfoSection = landlordData && (
-    <Grid item xs={12} sm={4}>
+    <Grid item xs={12}>
       <Typography variant="h3" style={{ fontSize: '30px', fontWeight: 600, marginBottom: '14px' }}>
         Landlord
       </Typography>