Skip to content

[FEATURE] Improve FAQ hover interaction and open state styling #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mi-vaishnavi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[FEATURE] Improve FAQ hover interaction and open state styling #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 18 additions & 19 deletions src/Pages/FaqPage/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const faqs = [

export default function FAQ() {
const [activeIndex, setActiveIndex] = useState<number | null>(null);
const [darkMode, ] = useState<boolean>(() => {
const [darkMode,] = useState<boolean>(() => {
return (
localStorage.getItem("darkMode") === "true" ||
(!("darkMode" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
Expand All @@ -47,9 +47,9 @@ export default function FAQ() {
return (
<section className="relative py-20 overflow-hidden min-h-screen transition-colors duration-300 text-black dark:bg-black dark:text-white">
<BackgroundAnimation darkMode={darkMode} />

<div className="container relative z-10 mx-auto px-4 md:px-8">
<motion.div
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
Expand All @@ -59,7 +59,7 @@ export default function FAQ() {
Frequently Asked Questions
</h2>
<p className="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">
Everything you need to know about PictoCopy's smart photo organization
Everything you need to know about PictoCopy's smart photo organization
and AI-powered tagging features.
Comment on lines +62 to 63
Copy link

@coderabbitai coderabbitai bot Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix typo: "PictoCopy" should be "PictoPy".

The description text contains "PictoCopy" which should be "PictoPy" to match the application name used throughout the codebase.

✏️ Fix the typo 
-            Everything you need to know about PictoCopy's smart photo organization
+            Everything you need to know about PictoPy's smart photo organization
             and AI-powered tagging features.
📝 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.

Suggested change
Everything you need to know about PictoCopy's smart photo organization
and AI-powered tagging features.
Everything you need to know about PictoPy's smart photo organization
and AI-powered tagging features.
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/FaqPage/FAQ.tsx` around lines 62 - 63, In the FAQ component (FAQ in
src/Pages/FaqPage/FAQ.tsx) replace the stray product name "PictoCopy" in the
description string with the correct name "PictoPy"; locate the JSX text node
that currently reads "Everything you need to know about PictoCopy's smart photo
organization and AI-powered tagging features." and update it to "Everything you
need to know about PictoPy's smart photo organization and AI-powered tagging
features."

</p>
</motion.div>
Expand Down Expand Up @@ -96,13 +96,12 @@ function FAQItem({ question, answer, isOpen, onClick, index, icon }: FAQItemProp

return (
<motion.div
className={`rounded-xl overflow-hidden transition-all duration-300
bg-white dark:bg-black
border
${isOpen
? 'border- 6 border-pink-500 dark:border-grey-500'
: 'border- 6 - dark:border-grey-500'}
`}
className={`rounded-xl overflow-hidden transition-colors duration-200 bg-white dark:bg-black border
hover:bg-gray-100 dark:hover:bg-gray-800
${isOpen
? 'border-2 border-green-400 dark:border-gray-500'
: 'border-2 border-gray-200 dark:border-gray-700'}
`}
Comment on lines +99 to +104
Copy link

@coderabbitai coderabbitai bot Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Dark mode open state border should be green, not gray.

The PR objective states that the border color should change to green when an FAQ item is open. While the light mode correctly uses border-green-400, the dark mode uses dark:border-gray-500 instead of a green variant. This creates an inconsistent experience between light and dark modes.

🎨 Apply green border in dark mode for open state 
       className={`rounded-xl overflow-hidden transition-colors duration-200 bg-white dark:bg-black border
                     hover:bg-gray-100 dark:hover:bg-gray-800
       ${isOpen
-          ? 'border-2 border-green-400 dark:border-gray-500'
+          ? 'border-2 border-green-400 dark:border-green-500'
           : 'border-2 border-gray-200 dark:border-gray-700'}
       `}
📝 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.

Suggested change
className={`rounded-xl overflow-hidden transition-colors duration-200 bg-white dark:bg-black border
hover:bg-gray-100 dark:hover:bg-gray-800
${isOpen
? 'border-2 border-green-400 dark:border-gray-500'
: 'border-2 border-gray-200 dark:border-gray-700'}
`}
className={`rounded-xl overflow-hidden transition-colors duration-200 bg-white dark:bg-black border
hover:bg-gray-100 dark:hover:bg-gray-800
${isOpen
? 'border-2 border-green-400 dark:border-green-500'
: 'border-2 border-gray-200 dark:border-gray-700'}
`}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/FaqPage/FAQ.tsx` around lines 99 - 104, The conditional className
for the FAQ item's container uses isOpen but applies dark:border-gray-500 for
the open state; update the JSX in FAQ.tsx (the className block that checks
isOpen) so the open-state dark mode uses a green border (e.g., replace
dark:border-gray-500 with dark:border-green-400 or another green token) while
leaving the closed-state classes unchanged.

initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
Expand All @@ -115,16 +114,16 @@ function FAQItem({ question, answer, isOpen, onClick, index, icon }: FAQItemProp
>
<div className="flex items-center">
<div className={`mr-4 p-2 rounded-full
${isOpen ? 'bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-300' :
'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 group-hover:bg-green-50 group-hover:text-green-500 dark:group-hover:bg-green-900/30 dark:group-hover:text-green-300'}
${isOpen ? 'bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-300' :
'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 group-hover:bg-green-50 group-hover:text-green-500 dark:group-hover:bg-green-900/30 dark:group-hover:text-green-300'}
transition-colors duration-300`}>
{icon}
</div>
<span className="font-semibold text-lg">{question}</span>
</div>
<div className={`p-1 rounded-full transition-colors duration-300
${isOpen ? 'bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-300' :
'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 group-hover:bg-green-50 group-hover:text-green-500 dark:group-hover:bg-green-900/30 dark:group-hover:text-green-300'}`}>
${isOpen ? 'bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-300' :
'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 group-hover:bg-green-50 group-hover:text-green-500 dark:group-hover:bg-green-900/30 dark:group-hover:text-green-300'}`}>
{isOpen ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
</div>
</button>
Expand All @@ -151,7 +150,7 @@ function BackgroundAnimation({ darkMode }: { darkMode: boolean }) {
return (
<div className="absolute inset-0 overflow-hidden">
{/* Fixed dots pattern */}
<div className="absolute inset-0" style={{
<div className="absolute inset-0" style={{
backgroundImage: `radial-gradient(${darkMode ? '#4B5563' : '#e5e7eb'} 1px, transparent 0)`,
backgroundSize: '30px 30px',
opacity: 0.4
Expand All @@ -161,16 +160,16 @@ function BackgroundAnimation({ darkMode }: { darkMode: boolean }) {
<motion.div
className="absolute"
initial={{ opacity: 0.2, scale: 0.8, x: "10%", y: "10%" }}
animate={{
animate={{
opacity: [0.2, 0.3, 0.2],
scale: [0.8, 1, 0.8],
x: ["10%", "15%", "10%"],
y: ["10%", "5%", "10%"]
}}
transition={{
transition={{
repeat: Infinity,
duration: 20,
ease: "easeInOut"
ease: "easeInOut"
}}
>
<svg width="400" height="400" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down