Improve Contact Us Page UI/UX and Theme Consistency#441
Open
yuvraj-k-singh wants to merge 2 commits into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Warning Review limit reached
Your plan currently allows 1 review/hour. Refill in 22 minutes and 40 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, 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 have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe Contact page has been substantially redesigned with a controlled form state system, unified submit handler with async simulation and auto-dismissing success toast, and a new glassmorphism layout featuring a left sidebar with communication badges and a right-aligned form with dynamic radial glow effects. ChangesContact Page Redesign
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)
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.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/pages/Contact/Contact.tsx (1)
36-48: ⚡ Quick winConsider adding client-side validation.
The form relies solely on HTML5
requiredattributes. The Signup component shows explicit validation patterns (email regex, field-specific error messages). Consider adding similar validation here for better UX, especially for email format and subject selection.♻️ Example validation pattern
const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); // Validate email format if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())) { // Show error: "Enter a valid email" return; } // Validate subject selected if (!formData.subject) { // Show error: "Please select a subject" return; } setIsSubmitting(true); // ... rest of submission logic };🤖 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/Contact/Contact.tsx` around lines 36 - 48, The handleSubmit function currently only relies on HTML required attributes; add client-side validation inside handleSubmit before calling setIsSubmitting or awaiting the delay: validate formData.email with a robust regex (e.g., /^[^\s@]+@[^\s@]+\.[^\s@]+$/) and ensure formData.subject is non-empty, set and show field-specific errors via a local errors state (e.g., useState for errors) and return early on validation failure so setIsSubmitting/setShowPopup are not triggered; trim inputs (formData.email.trim()) and optionally focus the first invalid field to improve UX, then proceed with the existing submission flow and reset setFormData only after successful validation/submission.
🤖 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/Contact/Contact.tsx`:
- Line 105: Update the image alt text in the Contact component: locate the <img>
with src "/crl-icon.png" (in Contact or Contact.tsx) and replace the generic
alt="Logo" with a more descriptive alt like "GitHub Tracker logo" so screen
readers get meaningful context.
- Around line 36-48: The handleSubmit async flow currently has no error
handling; wrap the simulated API delay and any future API call inside a
try/catch/finally in the handleSubmit function so failures are caught, an error
state is set or logged (e.g., setError or process the caught error), and
setIsSubmitting(false) is always executed in finally; only call
setShowPopup(true) and resetFormData (setFormData(...)) on success inside the
try block (follow the pattern used in Signup.tsx for try/catch/finally and error
state management).
- Around line 127-138: The badge elements currently rendered in Contact.tsx (the
block using label, Icon, detail) use a non-interactive <div> with cursor-pointer
and hover styles, which misleads users; change each badge to an interactive
element (wrap the outer <div key={label} ...> in a semantic <a> when linking
(mailto:, tel:, external URL) or a <button> when performing actions like
copy-to-clipboard), add the appropriate onClick handler (e.g., open mailto/tel
or copy detail), include accessible attributes (aria-label describing the
action, role if needed, and ensure keyboard focusability), and remove misleading
cursor styles when an item is intentionally static; update any event handlers to
reference label/detail/Icon so behavior matches the rendered content.
- Around line 50-54: The timeout cleanup in handleSubmit is incorrect because
returning a function there does nothing; move the timer logic into a useEffect
that watches showPopup (or store the timer ID in a ref and clear on unmount).
Specifically, remove the setTimeout/return cleanup from handleSubmit, add a
useEffect that when showPopup becomes true sets a timer to call
setShowPopup(false) after 5000ms and clears the timer in its cleanup, and/or
create a ref (e.g., popupTimerRef) to hold the timer ID and clear it in a
useEffect cleanup that runs on unmount; ensure you update references to
showPopup and setShowPopup accordingly.
---
Nitpick comments:
In `@src/pages/Contact/Contact.tsx`:
- Around line 36-48: The handleSubmit function currently only relies on HTML
required attributes; add client-side validation inside handleSubmit before
calling setIsSubmitting or awaiting the delay: validate formData.email with a
robust regex (e.g., /^[^\s@]+@[^\s@]+\.[^\s@]+$/) and ensure formData.subject is
non-empty, set and show field-specific errors via a local errors state (e.g.,
useState for errors) and return early on validation failure so
setIsSubmitting/setShowPopup are not triggered; trim inputs
(formData.email.trim()) and optionally focus the first invalid field to improve
UX, then proceed with the existing submission flow and reset setFormData only
after successful validation/submission.
🪄 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: a5d2d605-5055-4fe8-85ed-ec67082dcccf
📒 Files selected for processing (1)
src/pages/Contact/Contact.tsx
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 completely overhauls the Contact Us page to elevate its UI/UX and establish comprehensive dark/light theme consistency across the platform.
Key improvements include:
h-11) to prevent vertical layout compression.<select>drop-down styles to hide native system arrows and perfectly match text input line heights.formData) so payload metrics can be cleanly captured and dispatched to core platform handlers.How Has This Been Tested?
ThemeContextmode switch to guarantee optimal text contrast (placeholder-slate-500against deep#0c101dpanel slots) for flawless dark mode legibility.Screenshots (if applicable)
Before:
After:
Type of Change
Summary by CodeRabbit
New Features
UI/UX Improvements