feat: Comprehensive UI/UX Overhaul & Premium Design System Refresh#218
Open
dhaanisi wants to merge 2 commits into
Open
feat: Comprehensive UI/UX Overhaul & Premium Design System Refresh#218dhaanisi wants to merge 2 commits into
dhaanisi wants to merge 2 commits into
Conversation
…nd improved theme styling
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThis PR implements a comprehensive design refresh by introducing a custom dark color palette in Tailwind configuration, adding animation utilities and CSS helper classes, redesigning core components with framer-motion animations, and updating styling across the application to use the new theme system consistently. ChangesDesign Refresh with Custom Dark Theme and Animations
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @dhaanisi for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/components/Footer.tsx (1)
6-25: ⚡ Quick winComplete the dark-border token migration in Footer.
The inner divider still uses
dark:border-gray-800; switching it todark:border-dark-borderkeeps the footer visually consistent with the refreshed design system.Proposed patch
- <div className="p-2 border-t border-gray-200 dark:border-gray-800 text-center text-gray-600 dark:text-gray-400"> + <div className="p-2 border-t border-gray-200 dark:border-dark-border text-center text-gray-600 dark:text-gray-400">🤖 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/components/Footer.tsx` around lines 6 - 25, The inner divider in the Footer component still uses the old token dark:border-gray-800; update the divider div (the element with class "p-2 border-t border-gray-200 dark:border-gray-800 text-center ...") to use dark:border-dark-border so it matches the refreshed design system; modify that class string inside the Footer component (Footer or default export in src/components/Footer.tsx) to replace dark:border-gray-800 with dark:border-dark-border.src/components/Hero.tsx (1)
68-75: ⚡ Quick winConsider using local placeholder images instead of external service.
The
pravatar.ccservice introduces an external dependency that could impact reliability and privacy. For production, consider using local placeholder images or a self-hosted avatar service.Alternative approach
You could:
- Add placeholder avatar images to your
/publicfolder- Use a pattern like
src={/avatars/placeholder-${i}.jpg}- Or use a single placeholder with different CSS transformations
This eliminates the external dependency and improves load reliability.
🤖 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/components/Hero.tsx` around lines 68 - 75, Replace the external pravatar.cc avatars in the map rendering inside the Hero component with local placeholders: stop using src={`https://i.pravatar.cc/100?u=${i + 10}`} in the <img> elements and point src to files in your public assets (e.g., `/avatars/placeholder-${i}.jpg` or a single `/avatars/placeholder.jpg`) and update any alt/title text as needed; ensure the files are added to the public folder and the <img> rendering logic in the map callback (the anonymous function mapping [1,2,3,4]) references the chosen local path or CSS-based variant so the component no longer depends on the external pravatar service.src/components/HowItWorks.tsx (1)
62-64: 💤 Low valueConsider using CSS variables for the connector line calculations.
The connector line uses magic numbers (60px, 120px) that are tightly coupled to the icon size (w-20/h-20). If the icon dimensions change, the line positioning will break. Consider extracting these as CSS custom properties or using a more maintainable approach.
♻️ Suggested approach with CSS variables
You could define the icon size as a custom property and derive the connector positions from it, making the relationship explicit and easier to maintain.
🤖 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/components/HowItWorks.tsx` around lines 62 - 64, The connector line uses hard-coded offsets (left: calc(50% + 60px), width: calc(100% - 120px)) tied to the icon size; change this to derive values from a CSS custom property by introducing an icon-size variable (e.g., --icon-size) applied to the icon container (currently using w-20 h-20) and then update the connector div (the conditional div rendered when index < steps.length - 1) to use calc() expressions with var(--icon-size) (for example calc(50% + var(--icon-size) / 2) and calc(100% - var(--icon-size))) so the connector stays correct if the icon dimensions 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/components/Hero.tsx`:
- Around line 8-10: The two decorative background glow divs in the Hero
component (the elements with className "bg-glow top-[-10%]..." and "bg-glow
bottom-[-10%]...") should be hidden from assistive tech; add aria-hidden="true"
to both of those <div> elements (you may also add role="presentation" if
desired) so screen readers ignore these purely decorative elements.
In `@src/components/Navbar.tsx`:
- Around line 69-78: In the Navbar component, update the hamburger <button> (the
one using setIsOpen and reading isOpen) to include accessible attributes: add
aria-expanded={isOpen} and an appropriate aria-label that reflects action/state
(e.g., aria-label={isOpen ? "Close navigation menu" : "Open navigation menu"});
if the mobile menu has an id, also add aria-controls="your-mobile-menu-id" to
the same button so screen readers can map the control to the menu.
- Around line 63-68: The mobile theme toggle button (the element with
onClick={toggleTheme} that renders Sun/Moon based on mode) is missing an
aria-label; add aria-label="Toggle theme" to that button to match the desktop
toggle and ensure consistent accessibility for assistive technologies.
---
Nitpick comments:
In `@src/components/Footer.tsx`:
- Around line 6-25: The inner divider in the Footer component still uses the old
token dark:border-gray-800; update the divider div (the element with class "p-2
border-t border-gray-200 dark:border-gray-800 text-center ...") to use
dark:border-dark-border so it matches the refreshed design system; modify that
class string inside the Footer component (Footer or default export in
src/components/Footer.tsx) to replace dark:border-gray-800 with
dark:border-dark-border.
In `@src/components/Hero.tsx`:
- Around line 68-75: Replace the external pravatar.cc avatars in the map
rendering inside the Hero component with local placeholders: stop using
src={`https://i.pravatar.cc/100?u=${i + 10}`} in the <img> elements and point
src to files in your public assets (e.g., `/avatars/placeholder-${i}.jpg` or a
single `/avatars/placeholder.jpg`) and update any alt/title text as needed;
ensure the files are added to the public folder and the <img> rendering logic in
the map callback (the anonymous function mapping [1,2,3,4]) references the
chosen local path or CSS-based variant so the component no longer depends on the
external pravatar service.
In `@src/components/HowItWorks.tsx`:
- Around line 62-64: The connector line uses hard-coded offsets (left: calc(50%
+ 60px), width: calc(100% - 120px)) tied to the icon size; change this to derive
values from a CSS custom property by introducing an icon-size variable (e.g.,
--icon-size) applied to the icon container (currently using w-20 h-20) and then
update the connector div (the conditional div rendered when index < steps.length
- 1) to use calc() expressions with var(--icon-size) (for example calc(50% +
var(--icon-size) / 2) and calc(100% - var(--icon-size))) so the connector stays
correct if the icon dimensions 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: e04b3e8d-5e60-4ddd-b612-59b74c66fbc7
📒 Files selected for processing (11)
src/App.tsxsrc/components/Features.tsxsrc/components/Footer.tsxsrc/components/Hero.tsxsrc/components/HowItWorks.tsxsrc/components/Navbar.tsxsrc/index.csssrc/pages/About/About.tsxsrc/pages/ContributorProfile/ContributorProfile.tsxsrc/pages/Contributors/Contributors.tsxtailwind.config.js
Author
|
Hey! |
Collaborator
|
@dhaanisi - navbar color on dark mode looks too light, make it dark |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Description
This PR implements a comprehensive UI/UX overhaul of the GitHub Tracker landing page. The goal was to transition the current interface into a premium, high-quality design system using modern frontend practices.
Key Improvements:
How Has This Been Tested?
[x] Local Environment: Verified all animations and layout changes on a local development server.
[x] Responsiveness: Tested across multiple breakpoints (Mobile, Tablet, Desktop) using Chrome DevTools.
[x] Syntax: Fixed a pre-existing syntax error in the Navbar component that was causing layout shifts.
[x] Performance: Ensured background animations do not cause frame drops.
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit
New Features
Style