feat: enhance footer UI and responsiveness#304
Open
pari-dubey1 wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe Footer component receives styling refinements across three areas: the main wrapper gains a gradient pseudo-element overlay, the subscribe button gets enhanced transition timing and hover shadows, and social icon links shift from color-only transitions to full movement effects including translate and scale transforms. ChangesFooter UI Styling Updates
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 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)
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}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Footer.tsx (1)
136-158:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winImprove accessibility and performance for social icon animations.
The social icon hover effects have two opportunities for improvement:
- Accessibility: The transform animations should respect
prefers-reduced-motionto accommodate users with vestibular disorders or motion sensitivity.- Performance: Using
transition-allanimates every property; specify onlycolorandtransformfor better performance.♿ Proposed fix for accessibility and performance
<a href="https://github.com/GitMetricsLab/github_tracker" target="_blank" rel="noopener noreferrer" - className="text-zinc-400 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110" + className="text-zinc-400 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-[color,transform] duration-300 motion-safe:hover:-translate-y-1 motion-safe:hover:scale-110" aria-label="GitHub Repository" > <FaGithub className="h-7 w-7" /> </a> <a href="https://x.com/your_handle" target="_blank" rel="noopener noreferrer" - className="text-zinc-400 dark:text-zinc-500 hover:text-sky-500 dark:hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110" + className="text-zinc-400 dark:text-zinc-500 hover:text-sky-500 dark:hover:text-zinc-100 transition-[color,transform] duration-300 motion-safe:hover:-translate-y-1 motion-safe:hover:scale-110" aria-label="Twitter" > <FaTwitter className="h-7 w-7" /> </a> <a href="https://discord.gg/your_invite" target="_blank" rel="noopener noreferrer" - className="text-zinc-400 dark:text-zinc-500 hover:text-indigo-500 dark:hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110" + className="text-zinc-400 dark:text-zinc-500 hover:text-indigo-500 dark:hover:text-zinc-100 transition-[color,transform] duration-300 motion-safe:hover:-translate-y-1 motion-safe:hover:scale-110" aria-label="Discord" > <FaDiscord className="h-7 w-7" /> </a>🤖 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 136 - 158, Update the three social anchor elements that render FaGithub, FaTwitter, and FaDiscord: replace the generic "transition-all" with explicit "transition-colors transition-transform" and add motion-reduce utilities so motion is disabled for users who prefer reduced motion (e.g., "motion-reduce:transition-none motion-reduce:transform-none"); also scope the translate/scale hover rules to motion-safe (e.g., change "hover:-translate-y-1 hover:scale-110" to "motion-safe:hover:-translate-y-1 motion-safe:hover:scale-110") so animations respect prefers-reduced-motion and only color/transform are animated for better performance.
🧹 Nitpick comments (1)
src/components/Footer.tsx (1)
105-105: ⚡ Quick winPrefer specific transition properties over
transition-all.Using
transition-allanimates every CSS property, which can impact performance. Consider specifying only the properties that actually change.⚡ Proposed fix for more performant transitions
- className="px-5 py-3 text-sm font-bold bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-sm active:scale-[0.98] transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20 flex items-center justify-center space-x-1.5 whitespace-nowrap" + className="px-5 py-3 text-sm font-bold bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-sm active:scale-[0.98] transition-[background-color,box-shadow,transform] duration-300 hover:shadow-lg hover:shadow-blue-500/20 flex items-center justify-center space-x-1.5 whitespace-nowrap"🤖 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` at line 105, The button in Footer.tsx uses "transition-all" which animates every property; update the className on the button element (the JSX with className="...transition-all...") to replace transition-all with only the properties that actually change—e.g., use "transition-colors transition-transform transition-shadow duration-300" (or a similar combination) so hover color, scale (transform) and shadow are animated explicitly for better performance while preserving the existing duration.
🤖 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.
Outside diff comments:
In `@src/components/Footer.tsx`:
- Around line 136-158: Update the three social anchor elements that render
FaGithub, FaTwitter, and FaDiscord: replace the generic "transition-all" with
explicit "transition-colors transition-transform" and add motion-reduce
utilities so motion is disabled for users who prefer reduced motion (e.g.,
"motion-reduce:transition-none motion-reduce:transform-none"); also scope the
translate/scale hover rules to motion-safe (e.g., change "hover:-translate-y-1
hover:scale-110" to "motion-safe:hover:-translate-y-1
motion-safe:hover:scale-110") so animations respect prefers-reduced-motion and
only color/transform are animated for better performance.
---
Nitpick comments:
In `@src/components/Footer.tsx`:
- Line 105: The button in Footer.tsx uses "transition-all" which animates every
property; update the className on the button element (the JSX with
className="...transition-all...") to replace transition-all with only the
properties that actually change—e.g., use "transition-colors
transition-transform transition-shadow duration-300" (or a similar combination)
so hover color, scale (transform) and shadow are animated explicitly for better
performance while preserving the existing duration.
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
1 participant
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
Enhanced the existing footer section by improving UI interactions and visual polish while maintaining responsiveness and dark mode compatibility.
Changes Made
How Has This Been Tested?
npm run devScreenshots
Type of Change
Summary by CodeRabbit
Bug Fixes
Style