improve movile responsivness and light mode colour contrast#74
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR applies UI styling and layout adjustments across auth pages (branding panel, footer, separators, input/button colors), the dashboard quick actions grid, contact section CSS (overflow, mobile signal animation, mobile form spacing), and the landing hero (CTA layout, stats spacing, mockup visibility). ChangesAuth Pages Styling
Estimated code review effort: 2 (Simple) | ~10 minutes Dashboard Quick Actions Grid
Estimated code review effort: 1 (Trivial) | ~5 minutes Contact Section Mobile/CSS Updates
Estimated code review effort: 2 (Simple) | ~10 minutes Landing Hero Responsive Layout
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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.
🧹 Nitpick comments (2)
features/landing/hero.tsx (1)
236-267: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueVerify mobile spacing with
justify-between+ per-item padding.The stats row uses
justify-betweenon mobile while each item also carries directional padding (pr-2,px-2,pl-2). Combining edge distribution with per-item padding can make the middle stat look off-center relative to the two edge stats on narrow viewports. Worth a quick visual check on a real small-screen device; otherwise this is fine as-is.🤖 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 `@features/landing/hero.tsx` around lines 236 - 267, The hero stats row may look unbalanced on small screens because motion.div uses justify-between while each stat block also applies side-specific padding (pr-2, px-2, pl-2). Check the layout in hero.tsx on narrow viewports and, if needed, adjust the spacing approach in that motion.div so the three stats stay visually centered and evenly separated without double-counting edge spacing.components/contact/ContactSection.module.css (1)
1162-1180: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winLight-mode mobile override duplicates only a subset of the base mobile properties.
This new
:global(html:not(.dark))block re-assertsmargin-bottom/padding-bottomon.cardSubtitle,gapon.form,paddingon.inputGroup,paddingon.input, andheighton.submitBtn— matching the values already set in the unscoped mobile block (lines 729-777). However, it omits sibling properties set alongside them there (.cardSubtitlefont-size/line-height,.inputGroupborder-radius,.inputmin-height,.submitBtnfont-size/border-radius/backdrop-filter). If the conflicting light-mode-specific selector (not shown in this file) that necessitated this specificity fix also affects those other properties, this override may be incomplete and leave inconsistent styling between light/dark mobile views.Please confirm whether the underlying light-mode desktop rule only touches the properties addressed here, or if this list needs to be extended for full parity.
🤖 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 `@components/contact/ContactSection.module.css` around lines 1162 - 1180, The light-mode mobile override in ContactSection.module.css appears to only restate part of the base mobile styling, so verify whether the conflicting `:global(html:not(.dark))` rule also overrides the other mobile properties. If so, extend the existing `@media (max-width: 768px)` light-mode block for `.cardSubtitle`, `.form`, `.inputGroup`, `.input`, and `.submitBtn` to include the full set of mobile values already defined in the unscoped mobile styles, keeping parity between light and dark views.
🤖 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.
Nitpick comments:
In `@components/contact/ContactSection.module.css`:
- Around line 1162-1180: The light-mode mobile override in
ContactSection.module.css appears to only restate part of the base mobile
styling, so verify whether the conflicting `:global(html:not(.dark))` rule also
overrides the other mobile properties. If so, extend the existing `@media
(max-width: 768px)` light-mode block for `.cardSubtitle`, `.form`,
`.inputGroup`, `.input`, and `.submitBtn` to include the full set of mobile
values already defined in the unscoped mobile styles, keeping parity between
light and dark views.
In `@features/landing/hero.tsx`:
- Around line 236-267: The hero stats row may look unbalanced on small screens
because motion.div uses justify-between while each stat block also applies
side-specific padding (pr-2, px-2, pl-2). Check the layout in hero.tsx on narrow
viewports and, if needed, adjust the spacing approach in that motion.div so the
three stats stay visually centered and evenly separated without double-counting
edge spacing.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 374526da-1357-41ff-8cb6-6eb2838995fc
📒 Files selected for processing (8)
app/(auth)/layout.tsxapp/(auth)/sign-in/page.tsxapp/(auth)/sign-up/page.tsxapp/dashboard/page.tsxcomponents/auth/auth-input.tsxcomponents/auth/oauth-button.tsxcomponents/contact/ContactSection.module.cssfeatures/landing/hero.tsx
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
1 participant
Pull Request
Summary
This PR introduces a comprehensive suite of UI/UX improvements focused on mobile responsiveness, layout structure, and a major aesthetic overhaul of the Light Mode for the authentication pages.
Related Issue
Closes #
Type of Change
What Changed?
flex-col, scaled down statistics text to prevent awkward wrapping, and hid the floating AI Mockup card on mobile to eliminate clutter.@keyframes(signalPulseMobile) withoverflow: hiddento prevent the pulsing logo rings from overflowing/clipping the card borders on small screens.bg-slate-50light theme, while retaining the floating dark feature cards and pills for a stunning premium glassmorphism effect.bg-zinc-50and updated form inputs/buttons tobg-whiteto create a beautiful floating card effect.Screenshots (UI Changes Only)
Testing
Checklist
Before requesting a review, confirm the following:
main.npx prettier --write <file>).npm run format:checkpasses.npm run lintpasses.npm run typecheckpasses.npm run buildpasses.Additional Notes
The auth page light mode design now uses a high-contrast dark-glass-on-light-background aesthetic which feels significantly more premium and cohesive.