fixed save ribbon icon not referencing correct styling. added hover a…

…nimation for ribbon. improved readability of ternary operators for saveRibbon
cornell-dti · May 4, 2024 · 234e365 · 234e365
1 parent aa57808
commit 234e365
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/frontend/src/components/ApartmentCard/ApartmentCard.tsx b/frontend/src/components/ApartmentCard/ApartmentCard.tsx
@@ -60,10 +60,14 @@ const useStyles = makeStyles({
  },
  },
  saveRibbonIcon: {
- marginLeft: 'auto',
- padding: 0,
+ width: '40px',
+ height: '24px',
+ objectPosition: 'center',
+ objectFit: 'cover',
+ transition: 'scale 0.2s',
  '&:hover': {
  backgroundColor: 'transparent',
+ scale: 0.9,
  },
  },
 });
@@ -267,13 +271,8 @@ const ApartmentCard = ({
  className={saveRibbonIcon}
  >
  <img
- src={savedIsHovered ? saved : isSaved ? saved : unsaved}
+ src={savedIsHovered || isSaved ? saved : unsaved}
  alt={isSaved ? 'Saved' : 'Unsaved'}
- style={{
- height: '24px',
- objectPosition: 'center',
- objectFit: 'cover',
- }}
  />
  </IconButton>
  </Grid>