feat: enhance tracker page with glassmorphism UI#539
Conversation
❌ Deploy Preview for github-spy failed.
|
|
Warning Review limit reached
More reviews will be available in 20 minutes and 17 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe PR refactors the Tracker page's UI with a complete glassmorphism design system. A new 586-line stylesheet defines the visual foundation (dark/light backgrounds, decorative overlays, glass cards) and overrides Material-UI components. The component markup was restructured to use custom CSS classes instead of MUI Container, error handling was simplified to show only data-fetch errors, and an empty-state UI was added. ChangesTracker Page Glassmorphism Redesign
🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
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)
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 |
|
Hi @mehul-m-prajapati , I have completed the Tracker page UI enhancement with modern glassmorphism styling while keeping all existing functionality unchanged. The PR includes:
Also resolved a small existing TypeScript issue caused by an invalid unused Kindly review the PR and please add the required GSSoC labels:
Thank you! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/Tracker/Tracker.css (1)
26-51: Consider monitoring glassmorphism performance impact.The extensive use of blur filters—decorative glow blobs with
blur(120px)andblur(160px),backdrop-filter: blur(18px)on multiple glass cards, anddrop-shadoweffects—creates the intended glassmorphism aesthetic but can impact rendering performance on lower-end devices, older browsers, or when many cards are rendered simultaneously.For production, consider:
- Monitoring Core Web Vitals (LCP, CLS) to detect rendering bottlenecks
- Testing on mid-range and low-end devices
- Providing a reduced-motion or simplified-theme fallback for users who opt out via
prefers-reduced-motion- Considering conditional blur (e.g., disable decorative blobs on <768px viewports if performance metrics show issues)
Also applies to: 124-127, 394-394
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.css` around lines 26 - 51, Decorative heavy blurs in .tracker-root::before, .tracker-root::after and the glass card styles can hurt rendering on low-end devices; add a performance-friendly fallback by: detecting prefers-reduced-motion and using a reduced blur/disabled pseudo-elements, adding a CSS media query (max-width: 768px) to lower or remove filter: blur(...) and drop-shadow on the mentioned selectors, and optionally toggling these effects via a small runtime check (e.g., disable blobs when window.innerWidth < 768) so fewer cards are rendered with heavy filters; also instrument Core Web Vitals (LCP, CLS) and test on mid/low-end devices to validate the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Line 33: Import of the Lucide icon is incorrect: replace the non-existent
export GitBranchIcon with the correct GitBranch export and update any JSX usages
that reference <GitBranchIcon /> to use <GitBranch /> instead; specifically edit
the import line that currently imports KeyIcon and GitBranchIcon from
"lucide-react" and change GitBranchIcon → GitBranch, and update occurrences of
the GitBranchIcon component in Tracker.tsx to the GitBranch component.
---
Nitpick comments:
In `@src/pages/Tracker/Tracker.css`:
- Around line 26-51: Decorative heavy blurs in .tracker-root::before,
.tracker-root::after and the glass card styles can hurt rendering on low-end
devices; add a performance-friendly fallback by: detecting
prefers-reduced-motion and using a reduced blur/disabled pseudo-elements, adding
a CSS media query (max-width: 768px) to lower or remove filter: blur(...) and
drop-shadow on the mentioned selectors, and optionally toggling these effects
via a small runtime check (e.g., disable blobs when window.innerWidth < 768) so
fewer cards are rendered with heavy filters; also instrument Core Web Vitals
(LCP, CLS) and test on mid/low-end devices to validate the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 97f7aaa4-149d-4154-b5bb-42627ca6c772
📒 Files selected for processing (2)
src/pages/Tracker/Tracker.csssrc/pages/Tracker/Tracker.tsx
|
The requested changes have been addressed:
Waiting for checks/review. Thank you! |
|
Hi @mehul-m-prajapati 👋 Could you please add the following labels for contribution tracking under GSSoC'26?
|
|
🎉🎉 Thank you for your contribution! Your PR #539 has been merged! 🎉🎉 |
|
Hi @mehul-m-prajapati 👋 Could you please add the following labels for contribution tracking under GSSoC'26?
|
2 participants
Summary
Enhanced the Tracker page UI with a modern glassmorphism design inspired by the Home page while keeping all existing functionality unchanged.
Closes #537
Changes Made
Additional Notes
authErrorreference causing a TypeScript issue during development/buildScreenshots / Recording
before
gittrackerbefore.mp4
After
gittrackerfinal.mp4
GSSoC 2026
Kindly add label :
gssocgssoc-approvedlevel-advancedquality-cleanSummary by CodeRabbit
Style
New Features