fix: make FAQ's menu z-index bigger #406
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThe changes involve a modification to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FAQComponent
participant Menu
User->>FAQComponent: Open FAQ
FAQComponent->>Menu: Display Menu.Items
Menu->>Menu: Set z-index to 10000
Menu-->>User: Show Menu.Items above other elements
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/components/Cashout/Components/Faq.comp.tsx (1)
Line range hint
1-43: Consider refactoring the FAQComponent for better maintainabilityWhile the z-index issue has been addressed, there are a few other aspects of the component that could be improved:
Extract FAQ content: The FAQ content is currently hardcoded within the component. Consider moving this content to a separate file or fetching it from an API. This would make it easier to update and maintain the FAQ content without modifying the component code.
Separate concerns: The component currently mixes presentation and content. Consider splitting it into smaller, more focused components (e.g., a separate component for the FAQ item content).
Add internationalization: If your application supports multiple languages, consider adding internationalization support for the text content.
Here's a high-level example of how you could refactor this:
// faqContent.ts export const faqContent = { title: 'FAQ', items: [ { text: 'Cashing out requires KYC. Min cashout: $10, max $100k.', }, { title: 'Fees:', items: [ 'Peanut sponsors gas', 'we have to charge a $1 fee for EU cashouts, and $0.5 for US transfers', ], }, { text: 'Usually takes 20mins, but can take up to 3 business days.', }, ], }; // FAQContent.tsx import { faqContent } from './faqContent'; const FAQContent = () => ( <div> {faqContent.items.map((item, index) => ( <div key={index}> {item.title && <p>{item.title}</p>} {item.text && <p>{item.text}</p>} {item.items && ( <ul className="list-disc pl-5"> {item.items.map((subItem, subIndex) => ( <li key={subIndex}>{subItem}</li> ))} </ul> )} </div> ))} <CrispButton className="mt-2 text-blue-600 underline"> Need help? Chat with support </CrispButton> </div> ); // Faq.comp.tsx import { FAQContent } from './FAQContent'; export const FAQComponent = ({ className }: { className?: string }) => { // ... (rest of the component remains the same) <Menu.Items className="shadow-primary-4 absolute bottom-full z-dropdown mb-1 mr-1 w-64 border border-n-1 bg-white px-6 py-3 md:left-0 md:right-auto"> <Menu.Item as={'div'} className={'text-h8 font-normal'}> <FAQContent /> </Menu.Item> </Menu.Items> // ... };This refactoring separates the content from the presentation, making it easier to maintain and update the FAQ content independently of the component structure.
|
Holistic thinking: is this the only toggle menu we have? |
|
@Hugo0 A few, but not seeing any that are anywhere near the header |
Summary by CodeRabbit