Add post card shadow on hover

[joannacheng21]

Add post card shadow on hover

Issue Number(s): #226

Adds post card shadow on hover. Had to change some margins/paddings because otherwise the shadow gets cut off.

Checklist

• Requirements have been implemented
• Acceptance criteria are met
• Database schema docs have been updated or are not necessary
• Code follows design and style guidelines
• Commits follow guidelines (concise, squashed, etc)
• Relevant reviewers (Senior Dev/EM/Designers) have been assigned to this PR

Critical Changes

None

Related PRs

None

Testing

Check shadow appears on hover.

[netlify]

✅ Deploy Preview for angels-among-us ready!

Name	Link
🔨 Latest commit	228b14f
🔍 Latest deploy log	https://app.netlify.com/sites/angels-among-us/deploys/6546e6d03bdcde0008cfadc1
😎 Deploy Preview	https://deploy-preview-260--angels-among-us.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Coverage report for web

St.❔	Category	Percentage	Covered / Total
🔴	Statements	26%	526/2023
🔴	Branches	9.33% (+0.03% 🔼)	64/686
🔴	Functions	12.42%	77/620
🔴	Lines	22.33%	401/1796

Test suite run success

40 tests passing in 5 suites.

Report generated by 🧪jest coverage report action from 903bc62

[katsukixyz]

Wondering if there's a way to keep the padding as it is and just allow overflow: visible to show the box shadow. Let me know if that works - I'm a little biased against using margin wherever possible.

Also, two points: could you have a longer transition for the hover (short, maybe 200ms?) and make the box shadow a bit more subtle (https://chakra-ui.com/docs/styled-system/style-props#shadow, use boxShadow='md')?

[joannacheng21]

Wondering if there's a way to keep the padding as it is and just allow overflow: visible to show the box shadow. Let me know if that works - I'm a little biased against using margin wherever possible.

Also, two points: could you have a longer transition for the hover (short, maybe 200ms?) and make the box shadow a bit more subtle (https://chakra-ui.com/docs/styled-system/style-props#shadow, use boxShadow='md')?

I couldn't use boxShadow='md' because the opacity for the overlay messes it up so I just tried to replicate what it looks like by passing in the parameters to boxShadow. Also overflow: visible didn't work :( but I changed it so there's just padding in FeedPostCard now