fix: added hover effects to feedback & issue buttons #4870
Conversation
Gorachand-Senapati
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
📝 WalkthroughWalkthroughThese changes add missing hover background color effects to two button components (Feedback and GitHubIssue) to provide consistent visual feedback when users hover over them, addressing inconsistent UI behavior across the site. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used🧠 Learnings (1)📚 Learning: 2025-12-29T14:21:28.216ZApplied to files:
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4870 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 798 798
Branches 146 146
=========================================
Hits 798 798 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4870--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/Feedback.tsx (1)
72-72: Add hover background color change for visual consistency.The "Follow on GitHub" button at line 72 uses
bg-blackbut only changeshover:shadow-lgon hover. The GitHubIssue button in the error state uses the same black background withhover:bg-gray-700 hover:shadow-lg, providing better visual feedback. Addhover:bg-gray-700to this button for consistent hover behavior across all black buttons.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/Feedback.tsxcomponents/buttons/GitHubIssue.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-29T14:21:28.216Z
Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:28.216Z
Learning: In the asyncapi/website repository, when you intentionally omit dependencies in React hooks (e.g., useEffect, useMemo), add an eslint-disable comment with an explanatory note above the line to justify the design choice. For example: // eslint-disable-next-line react-hooks/exhaustive-deps: intentionally omitting dependencies to avoid unnecessary re-runs. This helps reviewers understand the rationale and keeps lint guidance informative.
Applied to files:
components/buttons/GitHubIssue.tsxcomponents/Feedback.tsx
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test NodeJS PR - windows-latest
- GitHub Check: Lighthouse CI
🔇 Additional comments (2)
components/Feedback.tsx (1)
116-116: LGTM! Hover effect correctly implemented.The addition of
hover:bg-primary-400provides the expected visual feedback when hovering over the submit button, transitioning frombg-primary-500to a lighter shade. This correctly addresses the purple button hover issue mentioned in #4867.components/buttons/GitHubIssue.tsx (1)
10-11: LGTM! Hover effect correctly implemented.The addition of
hover:bg-gray-700provides the expected visual feedback when hovering over the GitHub issue button, lightening frombg-blackto gray. This correctly addresses the dark/black button hover issue mentioned in #4867.
2 participants
New Features:- Now the 2 buttons hover properly, as another buttons
Description
Fixes #4867
Added hover effects to the "Submit feedback" and "Create issue on GitHub" buttons in the Documentation pages (components/Feedback.tsx and components/buttons/GitHubIssue.tsx).
Related issue(s)
#4867
Screen.Recording.2026-01-03.234607.mp4
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.