[FEATURE] Improve FAQ hover interaction and open state styling#6
[FEATURE] Improve FAQ hover interaction and open state styling#6mi-vaishnavi wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
…o green Signed-off-by: Vaishnavi <majojuvaishnavi@gmail.com>
github-actions
bot
added
enhancement
WalkthroughThe FAQ component styling was updated to enhance visual interactions. Transitions were modified from Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ 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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/Pages/FaqPage/FAQ.tsx (3)
1-4:⚠️ Potential issue | 🔴 CriticalAdd "use client" directive for Next.js client component.
This file uses client-side React features (
useState,useEffect,useRef) andframer-motionanimations, which require client-side rendering. The "use client" directive must be added at the top of the file.🔧 Add the "use client" directive
+"use client"; + // FAQ.tsx import React, { useState, useEffect, useRef } from "react";As per coding guidelines, ensure that "use client" is being used for Next.js files with client-side 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 1 - 4, This file uses client-side hooks (useState, useEffect, useRef) and framer-motion, so add the Next.js client directive by inserting "use client" as the very first statement in the file (before any imports) so the FAQ component and its use of motion/AnimatePresence and hooks (e.g., the FAQ component that imports useState/useEffect/useRef and motion/AnimatePresence) are rendered on the client.
35-40: 🧹 Nitpick | 🔵 TrivialConsider using
useMemoinstead ofuseStatefor immutable derived value.The
darkModevalue is derived from localStorage and never updated via the setter. Since this value is computed once and remains constant,useMemowould be more semantically appropriate thanuseState.♻️ Refactor to use useMemo
- const [darkMode,] = useState<boolean>(() => { + const darkMode = useMemo(() => { return ( localStorage.getItem("darkMode") === "true" || (!("darkMode" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ); - }); + }, []);🤖 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 35 - 40, The darkMode value is computed once and never updated but currently uses useState; replace the useState initializer with useMemo to reflect an immutable derived value: remove the const [darkMode,] = useState<boolean>(...) and instead create const darkMode = useMemo(() => { /* same localStorage and matchMedia logic */ }, []); keep the same logic that checks localStorage.getItem("darkMode") and window.matchMedia("(prefers-color-scheme: dark)").matches so behavior is unchanged, and import useMemo at the top if not already present.
6-31:⚠️ Potential issue | 🟠 MajorExternalize user-visible strings for internationalization.
All FAQ content (questions, answers) and UI strings are currently hardcoded in English. This prevents the application from being localized to other languages and violates internationalization best practices.
Consider using a solution like
react-i18nextor Next.js internationalization features to externalize these strings to resource files.As per coding guidelines, user-visible strings should be externalized to resource files (i18n).
🤖 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 6 - 31, The hardcoded English strings in the faqs array (the question and answer properties in FAQ.tsx) must be externalized for i18n: create locale resource entries (e.g., en/faq.json) for each question and answer key, import your i18n hook (e.g., useTranslation from react-i18next) into FAQ.tsx, replace the literal question/answer values in the faqs array with translation keys or functions (e.g., question: t('faq.question1') or questionKey: 'faq.question1'), and update the code that renders each FAQ to call t(...) to fetch the localized text; keep the icon JSX (Tag, Lock, Globe) unchanged. Ensure all new keys are added to the resource files and referenced consistently.
🤖 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/Pages/FaqPage/FAQ.tsx`:
- Around line 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."
- Around line 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.
---
Outside diff comments:
In `@src/Pages/FaqPage/FAQ.tsx`:
- Around line 1-4: This file uses client-side hooks (useState, useEffect,
useRef) and framer-motion, so add the Next.js client directive by inserting "use
client" as the very first statement in the file (before any imports) so the FAQ
component and its use of motion/AnimatePresence and hooks (e.g., the FAQ
component that imports useState/useEffect/useRef and motion/AnimatePresence) are
rendered on the client.
- Around line 35-40: The darkMode value is computed once and never updated but
currently uses useState; replace the useState initializer with useMemo to
reflect an immutable derived value: remove the const [darkMode,] =
useState<boolean>(...) and instead create const darkMode = useMemo(() => { /*
same localStorage and matchMedia logic */ }, []); keep the same logic that
checks localStorage.getItem("darkMode") and
window.matchMedia("(prefers-color-scheme: dark)").matches so behavior is
unchanged, and import useMemo at the top if not already present.
- Around line 6-31: The hardcoded English strings in the faqs array (the
question and answer properties in FAQ.tsx) must be externalized for i18n: create
locale resource entries (e.g., en/faq.json) for each question and answer key,
import your i18n hook (e.g., useTranslation from react-i18next) into FAQ.tsx,
replace the literal question/answer values in the faqs array with translation
keys or functions (e.g., question: t('faq.question1') or questionKey:
'faq.question1'), and update the code that renders each FAQ to call t(...) to
fetch the localized text; keep the icon JSX (Tag, Lock, Globe) unchanged. Ensure
all new keys are added to the resource files and referenced consistently.
| Everything you need to know about PictoCopy's smart photo organization | ||
| and AI-powered tagging features. |
There was a problem hiding this comment.
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.
| 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."
| 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'} | ||
| `} |
There was a problem hiding this comment.
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.
| 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.
1 participant
Fixes #5
Screenshots/Recordings:
Changes
Summary by CodeRabbit