fix: added hover effects to feedback & issue buttons#4870
fix: added hover effects to feedback & issue buttons#4870Gorachand-Senapati wants to merge 2 commits intoasyncapi:masterfrom
Conversation
Gorachand-Senapati
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
❌ Deploy Preview for asyncapi-website failed.Built without sensitive environment variables
|
![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.
📝 WalkthroughWalkthroughTwo button components had their hover behavior altered: the Feedback submit button now adds a lighter primary background on hover; the GitHubIssue anchor now uses a gray background on hover. No API or exported signatures changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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 796 -2
Branches 146 146
=========================================
- Hits 798 796 -2 ☔ 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.
|
@princerajpoot20 Sir, please review this PR when you get some time. Thank you. |
components/buttons/GitHubIssue.tsx
Outdated
| <a | ||
| className={`flex flex-row justify-center rounded bg-black py-2 text-white | ||
| shadow-md transition-all duration-500 ease-in-out hover:shadow-lg lg:w-6/12 ${className}`} | ||
| shadow-md transition-all duration-500 ease-in-out hover:bg-gray-700 hover:shadow-lg lg:w-6/12 ${className}`} |
There was a problem hiding this comment.
@Gorachand-Senapati do we really need to add hover 2 times? don't you think it is duplicated, and should be used only once.
|
3 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