From 96d095b92f769f2391c4898fc26b3d25b7224e5e Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cyrus@dhcp-vl2041-25063.eduroam.cornell.edu>
Date: Sun, 24 Sep 2023 20:45:25 -0400
Subject: [PATCH 1/4] changed the individual feature reviews to pill form to
 match the figma

---
 .../utils/LabeledLinearProgress.tsx           | 45 ++++++++++++-------
 frontend/src/pages/ApartmentPage.tsx          |  1 -
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index a9f10ec8..f425f2c7 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -10,25 +10,40 @@ 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();
+
+  const segments = Array.from({ length: 5 }, (_, index) => (
+    <div
+      key={index}
+      className={barSegment}
+      style={{
+        backgroundColor: index < value ? '#B94630' : 'gray', // Change color based on the rating
+      }}
+    ></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 c863b2e4..ed9e7607 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -534,7 +534,6 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       </Grid>
     </>
   );
-
   const InfoSection = landlordData && (
     <Grid item xs={12} sm={4}>
       <AptInfo

From 9d0e2db30f5ee299ef1fb1fb2518a71295fd5217 Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Sun, 1 Oct 2023 20:59:48 -0400
Subject: [PATCH 2/4] apartmentPage redesign to fit figma

---
 frontend/src/pages/ApartmentPage.tsx | 163 ++++++++++++++-------------
 1 file changed, 83 insertions(+), 80 deletions(-)

diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index ed9e7607..6116483e 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -340,7 +340,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const Header = (
     <>
       <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 && (
@@ -362,6 +362,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 && (
@@ -377,42 +389,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>
@@ -535,7 +513,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     </>
   );
   const InfoSection = landlordData && (
-    <Grid item xs={12} sm={4}>
+    <Grid item xs={12}>
       <AptInfo
         landlord={landlordData.name}
         contact={landlordData.contact}
@@ -564,7 +542,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 && (
@@ -583,51 +561,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 3e7d792b034cf4a34c16dfee6b84a402ad0217be Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Fri, 20 Oct 2023 15:23:00 -0400
Subject: [PATCH 3/4] finished the review bar segments to display correctly

---
 frontend/src/colors.js                              |  1 +
 frontend/src/components/Review/ReviewHeader.tsx     |  2 +-
 .../src/components/utils/LabeledLinearProgress.tsx  | 13 +++++++++++--
 frontend/src/pages/ApartmentPage.tsx                |  7 ++++++-
 4 files changed, 19 insertions(+), 4 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 f425f2c7..51dd25df 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { colors } from '../../colors';
 import Box from '@material-ui/core/Box';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Typography from '@material-ui/core/Typography';
@@ -27,13 +28,21 @@ 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);
   const segments = Array.from({ length: 5 }, (_, index) => (
     <div
       key={index}
       className={barSegment}
       style={{
-        backgroundColor: index < value ? '#B94630' : 'gray', // Change color based on the rating
+        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>
   ));
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index 6116483e..9aed5f17 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -338,6 +338,8 @@ 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 alignItems="center" justifyContent="space-between">
@@ -349,7 +351,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 />
@@ -524,10 +526,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>

From 16a14c0a094d8817f8f8313ed95f84405227477d Mon Sep 17 00:00:00 2001
From: Cyrus Irani <cri23@cornell.edu>
Date: Fri, 20 Oct 2023 15:27:59 -0400
Subject: [PATCH 4/4] final changes

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

diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index 51dd25df..900b9f14 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -1,9 +1,6 @@
 import React, { ReactElement } from 'react';
 import { colors } from '../../colors';
-import Box from '@material-ui/core/Box';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import Typography from '@material-ui/core/Typography';
-import styles from '../Review/Review.module.scss';
 import { makeStyles } from '@material-ui/core';
 
 type Props = {
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index 9aed5f17..f1e29536 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -141,9 +141,9 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     }
   }, [isMobile, reviewData.length]);
 
-  const handleShowMore = () => {
-    setResultsToShow(resultsToShow + 5);
-  };
+  // const handleShowMore = () => {
+  //   setResultsToShow(resultsToShow + 5);
+  // };
 
   const handlePageNotFound = () => {
     setNotFound(true);
@@ -159,7 +159,6 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     container,
     expand,
     expandOpen,
-    horizontalLine,
   } = useStyles();
 
   useTitle(