fixed save ribbon styling, simplified ternary readability, added save…

… ribbon hover animation
cornell-dti · May 4, 2024 · 100b703 · 100b703
1 parent 3e2050d
commit 100b703
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: '34px',
+ 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>