open-sauced / hot

πŸ•The site that recommends the hottest projects on GitHub.
https://hot.opensauced.pizza
MIT License
426 stars 148 forks source link

fix: unwanted drop shadow to the right side of the hero section. #402

Closed shamimbinnur closed 1 year ago

shamimbinnur commented 1 year ago

What type of PR is this? (check all applicable)

Description

Basically, the SVG file of the hero's background had an issue that resulted in the unwanted drop shadow to the right side of the hero section. So, I have slightly tweaked the SVG file which has fixed the problem.

Related Tickets & Documents

Fixes #227

Mobile & Desktop Screenshots/Recordings

Before:

Screenshot 2022-12-02 at 9 25 07 PM

After:

Screenshot 2022-12-02 at 9 25 16 PM

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify[bot] commented 1 year ago

Deploy Preview for hot-sauced-ui ready!

Name Link
Latest commit 9379fe815ee2b76617726a415f75bb7bb54f2f22
Latest deploy log https://app.netlify.com/sites/hot-sauced-ui/deploys/638491aea194320009a7584a
Deploy Preview https://deploy-preview-402--hot-sauced-ui.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 settings.

shamimbinnur commented 1 year ago

https://deploy-preview-402--hot-sauced-ui.netlify.app/

I can see there is an inner shadow on the left side which seems to be intentional by the designer. Can we keep it? @0-vortex

bdougie commented 1 year ago

@shamimbinnur I don't see the difference between the before and after. I honestly was not bothered by this and was confused because the linked issue seems unrelated. https://github.com/open-sauced/hot/issues/227

My recommendation is to annotate the screenshot. Also provide more context on how this relates to the issue.

0-vortex commented 1 year ago

@shamimbinnur I don't see the difference between the before and after. I honestly was not bothered by this and was confused because the linked issue seems unrelated. #227

My recommendation is to annotate the screenshot. Also provide more context on how this relates to the issue.

The image used as SVG gradient has a 1px space on the left and right - without this limitation, we could just be using colors. On browser platforms that don't support scrollbar styling this is making the right tear visible, while the left tear has always been visible, just ignored.

Ideally, we should remove the image and use the tailwind gradient colors for left and right. For what it's worth, the current PR does indeed solve the right tearing, tho it should do the left one too IMHO πŸ˜…

shamimbinnur commented 1 year ago

@bdougie I added the annotated screenshot.

bdougie commented 1 year ago

@bdougie I added the annotated screenshot.

Wow. I wasn't event looking there or noticed. Annotations help.

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 2.28.0-beta.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 2.28.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: