Add review photo carousel functionality

[kea-roy]

Summary

The photo previews in reviews are small, making it difficult to check if a photo is appropriate as an admin and difficult for users to view. This pull request extends the usage of the PhotoCarousel component to support review photo previews and different starting indexes.

• Refactor the PhotoCarousel component to update the styling to handle large photos.
• Add functionality to the PhotoCarousel component to display a carousel with a different start index
• The PhotoCarousel component now accepts a start index as a prop.
• Clicking on a photo in the Review and AdminReview components triggers the photo carousel with the corresponding photos and start index.
• Added hover effects and cursor adjustment to indicate the photos are expandable.
• Added documentation for PhotoCarousel and showPhotoCarousel
• Created usePhotoCarousel with functions and states to avoid code duplication.
• Fixed styling issues with the photo carousel.
• Improved loading speeds when processing large images by using lazy loading
• Fixed onClose functionality to close the modal

Test Plan

I tested the review pop up on all pages with review components or admin review components, including AdminPage, ApartmentPage, BookmarksPage, LandlordPage, ProfilePage. I tested it on large vertical and horizontal photos to make sure buttons remain on the screen. I also tested responsiveness across mobile and desktop devices. I also tested the photo carousel still works on previewing apartment photos to ensure backward compatibility.

Desktop

Mobile

Desktop

Mobile

Notes

• Hover effects can be discussed in more detail. Currently, it expands in size and darkens.

[dti-github-bot]

[diff-counting] Significant lines: 262.

[CasperL1218]

PR Review

The refactoring of the component performs greatly and it is well handled across multiple different file/page locations. Some suggestions:

1. The line of dot circles below the photo carousel is a great indication of the display progress. Currently the circles will follow the height of the image thus have some vertical translations. This situation is more visible for photos of significant size differences.

--> Large photo. The display is really nice. --> Tiny photo. The dot circles move vertically upward adjusting to the size of the photo. This could be a design choice, but this could create a jumping effect. Fixed positioning provides a predictable, stable interface element that users can rely on. Users don't have to "chase" the dots as they move up and down, which might help reduce some cognitive load.

2. The modal carousel's interaction pattern could be refined - currently, users need to move their cursor beyond the navigation arrows to exit the view. While this prevents accidental closures, it may not align with common user expectations, where clicking any area outside the main image content typically dismisses a modal. Consider adjusting the active zone to create a more fluid browsing experience.

[kea-roy]

PR Changes

• Fixed styling issues with the photo carousel.
• Improved loading speeds when processing large images by using lazy loading
• Fixed onClose functionality to close the modal

Notes

• While the styling is meant to match Figma as closely as possible, I added a low transparency background on the images to indicate where transparent image borders are located so that users don't feel confused when they click the background of a transparent image and it doesn't close the modal.

Resolved suggested changes

[ggsawatyanon]

This PR is super useful so users can see pictures in bigger resolutions. Thanks for coordinating with designers to get their response!