Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add post card shadow on hover #260

Open
wants to merge 4 commits into
base: staging
Choose a base branch
from
Open

Add post card shadow on hover #260

wants to merge 4 commits into from

Conversation

joannacheng21
Copy link
Contributor

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 Netlify
Copy link

netlify bot commented Nov 1, 2023 •
edited

✅ 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...

QR Code

Use your smartphone camera to open QR code link.

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

@joannacheng21 joannacheng21 temporarily deployed to development November 1, 2023 01:52 — with GitHub Actions Inactive
@joannacheng21 joannacheng21 linked an issue Nov 1, 2023 that may be closed by this pull request
[BUG] Feed on-hover effect #226
Open
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2023

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
katsukixyz requested changes Nov 1, 2023
View reviewed changes
Copy link
Collaborator

@katsukixyz katsukixyz left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@katsukixyz katsukixyz Awaiting requested review from katsukixyz

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[BUG] Feed on-hover effect
2 participants
@joannacheng21 @katsukixyz