Update: Improved hover styles to Watch Page #4677
Conversation
|
Hi @tusharpardhe18! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
| margin: 2rem auto; | ||
| } | ||
|
|
||
| .videoContainer { | ||
| border: 1px solid var(--home-border); | ||
| /* border: 1px solid var(--home-border); */ |
There was a problem hiding this comment.
Let's retain the border for the container.
There was a problem hiding this comment.
Sure, no problem. I'll remove it for a cleaner look but totally okay keeping the border if you think it's important for layout clarity.
| border-radius: 12px; | ||
| box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03); | ||
| padding: 16px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
| max-width: 400px; | ||
| max-width: 500px; |
There was a problem hiding this comment.
Ideally, we should also set proper aspect-ratio to ensure that there are no black bars when manipulating the viewport.
There was a problem hiding this comment.
Makes sense. I’ll experiment with a couple of aspect-ratio settings and test how it behaves on various viewports will push an update soon.
Description
Enhanced the Watch section UI and styling:
Updated the call-to-action message with a direct link to the latest React Native talks.
Improved responsiveness by modifying the
max-widthandheightof.videoand.videoContainer.Added hover and light theme-specific styles to improve visual feedback and accessibility.
These changes improve user experience and maintain visual consistency across themes.
How to Test