Fixed UI Inconsistencies with Figma (LocationCards and ApartmentCard)

[kea-roy]

Summary

Background

After feedback from designers and devs, our team found many inconsistencies between the designs on Figma and the implemented design in the main branch. This pull request fixes inconsistencies found on the LocationCards and ApartmentCard components.

Changes

This pull request contains the following changes:

• Fixed LocationCard and LocationCards styling to match the Figma design.
  • Adjusted the spacing
  • Adjusted the drop shadow
  • Added the hover effect
  • Adjusted the font styling and margin/padding values for responsiveness.
  • Adjusted the image styling to account for rounded SVGs, so the style matches the Figma on all screen sizes.
• Fixed ApartmentCard styling to match the Figma design.
  • Adjusting the grid layout
  • Adjusting the spacing
  • Adjusting the font styling
  • Adjusting the responsiveness
  • Reworking the HeartRating component to support different numerical font sizes
  • Added hover effect for saved icon
• Added documentation for LocationCard, LocationCards, and HeartRating components.

Test Plan

Compared design to Figma using Chrome's developer tools. I tested out the design on desktop-sized screens and mobile screens. Below are some images comparing the design in Figma to the coded design.

LocationCards Old Design

Location Cards Figma

Location Cards New Design

ApartmentCard Old Design

ApartmentCard Figma

ApartmentCard New Design

ApartmentCard Mobile Old Design

ApartmentCard Mobile Figma

ApartmentCard Mobile New Design

[dti-github-bot]

[diff-counting] Significant lines: 281.

[ggsawatyanon]

You did a good job matching the UI inconsistencies with the Figma but I noticed that the height of the white part of the location cards is too long. Could you fix this? It is especially noticable on mobile version.
Figma:

On mobile:

On desktop:

[kea-roy]

You did a good job matching the UI inconsistencies with the Figma but I noticed that the height of the white part of the location cards is too long. Could you fix this? It is especially noticable on mobile version. Figma: On mobile: On desktop:

Thanks Grace for pointing out the issue, I resolved the issue and updated the pull request!

[kea-roy]

Commit Changes

1. Added hover effect for saved button on ApartmentCard

[kea-roy]

Commit Changes

1. Simplified CSS code to resolve merge conflicts by removing unused CSS classes.

Completed the requested changes

[kea-roy]

Commit Changes

1. Fixed Save Ribbon Styling
2. Simplfied Save Ribbon ternary operators for readability
3. Added save ribbon hover animation

[ggsawatyanon]

Good job on fixing the inconsistencies and the ribbon icon. In the future, try to avoid reverting a merge commit because it can cause a lot of issues when trying to merge main into the branch. You can reset the merge commit before pushing to remote.