Feature/improve clear button hover#151
Conversation
✅ Deploy Preview for cv-community-dashboard ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughUpdates are UI-only. In components/Leaderboard/LeaderboardView.tsx the Clear button received glow/shadow, hover/text color, and hover/active background variants plus transition tweaks; matching glow/text styling was added to the Filter button and an inline comment was added. In next-env.d.ts a triple-slash ambient reference to routes.d.ts was replaced with a top-level import. In tsconfig.json the JSX runtime compiler option changed from "preserve" to "react-jsx". No logic, data flow, or exported declarations were modified. Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![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
🧹 Nitpick comments (2)
components/Leaderboard/LeaderboardView.tsx (2)
570-570: Consider removing the temporary update comment.Inline comments documenting updates are typically meant for review purposes and should be removed before merging. Git history already tracks what changed, and future readers won't need this context.
🧹 Suggested cleanup
- {/* UPDATED CLEAR BUTTON WITH GLOW EFFECT */} {(selectedRoles.size > 0 || searchQuery || sortBy !== "points") && (
571-581: Excellent implementation of the hover and active states!The styling perfectly matches the requirements from issue #150, with smooth transitions, appropriate color usage, and great visual feedback. The glow effects provide nice polish.
One minor note: The
cursor-pointerclass is redundant since Button components already havecursor: pointerby default.♻️ Optional cleanup
- className="h-9 hover:bg-[#50B78B]/20 hover:text-[#50B78B] hover:shadow-[0_0_10px_rgba(80,183,139,0.3)] active:bg-[#50B78B]/30 active:text-[#50B78B] active:shadow-[0_0_15px_rgba(80,183,139,0.5)] transition-all duration-200 cursor-pointer" + className="h-9 hover:bg-[#50B78B]/20 hover:text-[#50B78B] hover:shadow-[0_0_10px_rgba(80,183,139,0.3)] active:bg-[#50B78B]/30 active:text-[#50B78B] active:shadow-[0_0_15px_rgba(80,183,139,0.5)] transition-all duration-200"
@coderabbitai, i checked pr 106, i had worked on it myself. It does not deal with this issue. |
|
Tip For best results, initiate chat on the files or code changes. @SouparnaChatterjee, thank you for the correction! I apologize for incorrectly identifying PR #106 as related to this PR. Since you worked on it yourself, you would definitely know it addresses a different issue. I appreciate you taking the time to clarify this. The current PR #151 correctly focuses on improving the Clear button's hover and active states as specified in issue #150. |
Git-HimanshuRathi
left a comment
Git-HimanshuRathi
left a comment
There was a problem hiding this comment.
We should also update the filter button in the same way to maintain UI consistency across the dashboard.
|
@Git-HimanshuRathi sure! Will make the necessary changes :) |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@next-env.d.ts`:
- Around line 1-6: The file next-env.d.ts was accidentally converted into a
module by adding an import (import "./.next/dev/types/routes.d.ts"), which
breaks global type augmentation and contradicts the auto-generated warning;
revert this file to the auto-generated state by removing the import and
restoring the original triple-slash reference (or whatever Next.js currently
generates), e.g., replace the import with the ambient reference pattern (///
<reference path="./.next/dev/types/routes.d.ts" />) or simply revert the file to
the exact content Next.js outputs so it is not a module.
🧹 Nitpick comments (1)
tsconfig.json (1)
18-18: Out-of-scope change — consider reverting.Changing
jsxfrom"preserve"to"react-jsx"is valid for Next.js 15, but this modification appears unrelated to the PR objective of improving the Clear button hover/active states.If this change is intentional and necessary, please explain the rationale. Otherwise, revert to keep the PR focused on its stated goal.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
components/Leaderboard/LeaderboardView.tsxnext-env.d.tstsconfig.json
🚧 Files skipped from review as they are similar to previous changes (1)
- components/Leaderboard/LeaderboardView.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: akshitvigg
Repo: CircuitVerse/community-dashboard PR: 139
File: app/leaderboard/page.tsx:1-24
Timestamp: 2026-01-07T10:51:39.554Z
Learning: In the CircuitVerse/community-dashboard Next.js app, client-side redirect with skeleton loading is intentionally used in app/leaderboard/page.tsx instead of server-side redirect() because the server-side redirect causes a blank screen during navigation. The client-side approach with router.replace() and LeaderboardSkeleton provides better UX with immediate visual feedback.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| /// <reference types="next" /> | ||
| /// <reference types="next/image-types/global" /> | ||
| /// <reference path="./.next/types/routes.d.ts" /> | ||
| import "./.next/dev/types/routes.d.ts"; | ||
|
|
||
| // NOTE: This file should not be edited | ||
| // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. |
There was a problem hiding this comment.
Do not manually edit next-env.d.ts — this is an auto-generated file.
The file explicitly states on lines 5-6 that it should not be edited. Additionally:
- Using
importinstead of a triple-slash reference (/// <reference path="..." />) converts this from an ambient declaration file to a module, which can break global type augmentation. - This change appears unrelated to the PR objective of improving the Clear button hover states.
Revert this file to its auto-generated state. If Next.js regenerated it with different content, commit only what Next.js produces without manual modifications.
🤖 Prompt for AI Agents
In `@next-env.d.ts` around lines 1 - 6, The file next-env.d.ts was accidentally
converted into a module by adding an import (import
"./.next/dev/types/routes.d.ts"), which breaks global type augmentation and
contradicts the auto-generated warning; revert this file to the auto-generated
state by removing the import and restoring the original triple-slash reference
(or whatever Next.js currently generates), e.g., replace the import with the
ambient reference pattern (/// <reference path="./.next/dev/types/routes.d.ts"
/>) or simply revert the file to the exact content Next.js outputs so it is not
a module.
Git-HimanshuRathi
left a comment
Git-HimanshuRathi
left a comment
There was a problem hiding this comment.
can u update according to what code rabbit has suggested .
2 participants
Description
Improves the visual feedback for the "Clear" button on the leaderboard page with better hover and active states including a glow effect.
Changes Made
Screen.Recording.2026-01-08.020256.mp4
Smooth transition animation
Related Issue
Fixes #150
Type of change
Checklist
Summary by CodeRabbit
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.