fix(hero): improve accessibility, contrast, and spacing on responsive viewports#714
fix(hero): improve accessibility, contrast, and spacing on responsive viewports#714reach2saksham wants to merge 2 commits intoAOSSIE-Org:mainfrom
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughUpdated responsive styling in the homepage: adjusted hero background visibility breakpoint, added bottom padding to the hero heading, and tuned several text color utilities (including lg-specific overrides) for hero, social links, and "Our Projects" to improve contrast and responsiveness. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested reviewers
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}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/page.jsx (1)
203-208:⚠️ Potential issue | 🟡 MinorSame concern: reduced contrast for body text outside hero section.
This paragraph is in the "Our Projects" section with a standard background. Changing to
text-zinc-500on smaller viewports reduces readability compared to the originaltext-zinc-600. Thelg:text-zinc-800modifier provides no benefit here since this section doesn't use the yellow background.💡 Suggested fix
- <p className=" font-mono text-lg text-zinc-500 lg:text-zinc-800 dark:text-zinc-400 text-center "> + <p className=" font-mono text-lg text-zinc-600 dark:text-zinc-400 text-center ">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/page.jsx` around lines 203 - 208, The paragraph's tailwind classes reduce contrast on small viewports; update the class string on the paragraph element (the <p> with className starting "font-mono text-lg ...") to use text-zinc-600 for small screens instead of text-zinc-500 and remove the unnecessary lg:text-zinc-800 modifier so the text color remains consistently readable in the "Our Projects" section.
🧹 Nitpick comments (1)
src/app/page.jsx (1)
78-78: Verify contrast ratio fortext-zinc-500on white background.The
lg:text-zinc-800correctly improves contrast on the yellow background. However, changing the base color fromtext-zinc-600totext-zinc-500results in lighter text on smaller viewports with white backgrounds, which may reduce contrast. Tailwind'szinc-500(#71717a) on white is borderline for WCAG AA (≈4.48:1), whilezinc-600(#52525b) provides better margin (≈5.74:1).Consider keeping
text-zinc-600as the base and only applyinglg:text-zinc-800:💡 Suggested change
- className="mt-8 font-mono text-xl leading-8 text-zinc-500 lg:text-zinc-800 dark:text-zinc-300 md:dark:text-[`#FED41E`]/90 bg-white/50 md:bg-transparent dark:bg-zinc-900/50 md:dark:bg-transparent backdrop-blur-sm md:backdrop-blur-none rounded-xl p-4 md:p-0 text-center lg:text-left" + className="mt-8 font-mono text-xl leading-8 text-zinc-600 lg:text-zinc-800 dark:text-zinc-300 md:dark:text-[`#FED41E`]/90 bg-white/50 md:bg-transparent dark:bg-zinc-900/50 md:dark:bg-transparent backdrop-blur-sm md:backdrop-blur-none rounded-xl p-4 md:p-0 text-center lg:text-left"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/page.jsx` at line 78, The base text color in the className on the element rendered in page.jsx uses text-zinc-500 which lowers contrast on white backgrounds; update the className to use text-zinc-600 as the default (keep lg:text-zinc-800 for large screens) so the element (the JSX element with the long className string containing mt-8 font-mono ... text-zinc-500 lg:text-zinc-800 ...) has improved WCAG AA contrast on smaller viewports.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/page.jsx`:
- Around line 197-199: Revert the small-viewport text color change on the "Our
Projects" heading: update the h1 with className containing "Our Projects" so it
uses text-zinc-800 for normal/smaller viewports (keeping any existing lg: or
dark: variants intact) instead of text-zinc-500, ensuring the non-hero section
retains the original higher contrast; locate the h1 element in page.jsx and
replace the small-viewport token in the className back to text-zinc-800.
---
Outside diff comments:
In `@src/app/page.jsx`:
- Around line 203-208: The paragraph's tailwind classes reduce contrast on small
viewports; update the class string on the paragraph element (the <p> with
className starting "font-mono text-lg ...") to use text-zinc-600 for small
screens instead of text-zinc-500 and remove the unnecessary lg:text-zinc-800
modifier so the text color remains consistently readable in the "Our Projects"
section.
---
Nitpick comments:
In `@src/app/page.jsx`:
- Line 78: The base text color in the className on the element rendered in
page.jsx uses text-zinc-500 which lowers contrast on white backgrounds; update
the className to use text-zinc-600 as the default (keep lg:text-zinc-800 for
large screens) so the element (the JSX element with the long className string
containing mt-8 font-mono ... text-zinc-500 lg:text-zinc-800 ...) has improved
WCAG AA contrast on smaller viewports.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-500 lg:text-zinc-800 dark:text-white"> | ||
| Our Projects | ||
| </h1> |
There was a problem hiding this comment.
This change reduces contrast outside the hero section.
The "Our Projects" section isn't part of the hero area and doesn't have a yellow background. Changing from text-zinc-800 to text-zinc-500 on smaller viewports reduces contrast on what is likely a white/neutral background. The PR objectives specifically target the hero section's yellow background.
Consider reverting this to maintain the original contrast:
💡 Suggested fix
- <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-500 lg:text-zinc-800 dark:text-white">
+ <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-500 lg:text-zinc-800 dark:text-white"> | |
| Our Projects | |
| </h1> | |
| <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white"> | |
| Our Projects | |
| </h1> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/page.jsx` around lines 197 - 199, Revert the small-viewport text
color change on the "Our Projects" heading: update the h1 with className
containing "Our Projects" so it uses text-zinc-800 for normal/smaller viewports
(keeping any existing lg: or dark: variants intact) instead of text-zinc-500,
ensuring the non-hero section retains the original higher contrast; locate the
h1 element in page.jsx and replace the small-viewport token in the className
back to text-zinc-800.
1 participant
Addressed Issues:
Fixes #713
text-zinc-500→text-zinc-800on lg screens (better contrast on yellow background)Screenshots/Recordings:
Before:
After:
Before:
After:
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit