Removed the UI Inconsistencies in Testimonials and FAQs Pages#1288
Removed the UI Inconsistencies in Testimonials and FAQs Pages#1288iaadillatif wants to merge 0 commit intorecodehive:mainfrom
Conversation
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
@iaadillatif is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
✅ Synchronized metadata from Issue #1287:
|
There was a problem hiding this comment.
Pull request overview
This PR addresses UI/UX inconsistencies on the Testimonials and FAQs pages by refining avatar rendering and aligning the FAQ accordion’s container, header/answer hierarchy, and large-screen layout constraints.
Changes:
- Updated Testimonials avatar styling to better fill the circular container with improved visual treatment.
- Refactored FAQ accordion item styling so question + answer render within a single consistent card, with clearer open/closed state visuals.
- Adjusted FAQ layout constraints and centering for improved readability on large screens.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
src/components/testimonials/TestimonialCard.tsx |
Updates avatar sizing/gradient treatment and image fitting behavior in testimonial cards. |
src/components/faqs/faqs.tsx |
Unifies FAQ item container styling, refines header/expanded state visuals, and adjusts large-screen width/centering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <AvatarImage src={avatar} className="object-contain" /> | ||
| <div className="pointer-events-none absolute -inset-1 rounded-full bg-gradient-to-br from-purple-500/35 via-fuchsia-500/25 to-blue-500/35 blur-md" /> | ||
| <Avatar className="relative z-10 h-20 w-20 overflow-hidden border border-white/70 bg-white/70 shadow-[0_10px_30px_-12px_rgba(147,51,234,0.7)] ring-2 ring-purple-300/50"> | ||
| <AvatarImage src={avatar} className="h-full w-full scale-300 object-cover object-center" /> |
There was a problem hiding this comment.
scale-300 is not a standard Tailwind utility (and it’s the only occurrence in the repo), so this class will likely be ignored and the avatar may not fill as intended. Use an arbitrary scale value (e.g., scale-[3]) or adjust sizing/cropping without relying on a non-existent utility.
| <AvatarImage src={avatar} className="h-full w-full scale-300 object-cover object-center" /> | |
| <AvatarImage src={avatar} className="h-full w-full scale-[3] object-cover object-center" /> |
| <p | ||
| className={`${ | ||
| isDark ? "text-gray-400" : "text-gray-600" | ||
| } text-center lg:text-left`} | ||
| } mx-auto text-center`} | ||
| > | ||
| Find answers to the most common questions about recode hive. | ||
| </p> |
There was a problem hiding this comment.
PR description mentions constraining the header text with something like max-w-2xl, but the updated paragraph is only mx-auto text-center with no max-width, so on wide screens it may still span too wide and doesn’t match the described change. Consider adding a max-width utility (or adjust the PR description if that’s not intended).
| <button | ||
| className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between rounded-lg p-4 text-lg font-medium transition-all duration-300 focus:outline-none ${ | ||
| className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between p-4 text-left text-lg font-medium transition-all duration-300 focus:outline-none ${ | ||
| isDark | ||
| ? "text-gray-200 hover:text-indigo-400" | ||
| : "text-gray-700 hover:text-indigo-600" | ||
| ? "text-gray-200 hover:text-indigo-300" | ||
| : "text-gray-700 hover:text-indigo-700" | ||
| }`} |
There was a problem hiding this comment.
The accordion toggle button uses focus:outline-none but doesn’t add a replacement focus-visible style, which removes the visible focus indicator for keyboard users. Please add an explicit focus-visible ring/outline style (or stop removing the outline).
| <button | ||
| className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between rounded-lg p-4 text-lg font-medium transition-all duration-300 focus:outline-none ${ | ||
| className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between p-4 text-left text-lg font-medium transition-all duration-300 focus:outline-none ${ | ||
| isDark |
There was a problem hiding this comment.
Accordion toggle doesn’t expose state to assistive tech (missing aria-expanded, and missing aria-controls pointing at the associated panel id). Please add aria-expanded={activeIndex === index} and wire aria-controls to an id on the corresponding content element.
| <AvatarImage src={avatar} className="object-contain" /> | ||
| <div className="pointer-events-none absolute -inset-1 rounded-full bg-gradient-to-br from-purple-500/35 via-fuchsia-500/25 to-blue-500/35 blur-md" /> | ||
| <Avatar className="relative z-10 h-20 w-20 overflow-hidden border border-white/70 bg-white/70 shadow-[0_10px_30px_-12px_rgba(147,51,234,0.7)] ring-2 ring-purple-300/50"> | ||
| <AvatarImage src={avatar} className="h-full w-full scale-300 object-cover object-center" /> |
There was a problem hiding this comment.
AvatarImage is rendered without an alt attribute. For accessibility, please provide meaningful alt text (e.g., the person’s name) or explicitly mark it as decorative if appropriate.
| <AvatarImage src={avatar} className="h-full w-full scale-300 object-cover object-center" /> | |
| <AvatarImage | |
| src={avatar} | |
| alt={`${name}'s avatar`} | |
| className="h-full w-full scale-300 object-cover object-center" | |
| /> |
|
✅ Synchronized metadata from Issue #1287:
|
|
✅ Synchronized metadata from Issue #1287:
|
This PR resolves the visual and structural inconsistencies identified in the Testimonials and FAQs pages.
The goal was to improve layout alignment, visual hierarchy, and container consistency while keeping all existing animation logic and functionality unchanged.
Fixes #1287
Type of Change
Changes Made
1. Testimonials Page
AvatarImagestyling to properly fill the circular container.Preview
Below is a visual reference of the updated Testimonials avatar rendering.
2. FAQs Page Structural Fix
3. FAQs Header Refinement
4. Large Screen Layout Improvements
lg:max-w-6xlandxl:max-w-7xl.Preview
Below is a visual reference of the updated FAQs layout after resolving the alignment and structural inconsistencies. This reflects the improved avatar rendering and refined large screen spacing.
Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.