fix(web): make FAQ section theme-aware and align nav/footer label to FAQ [GSSoC 2025] #98
Conversation
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
…o FAQ - Replace inline styles in FAQ accordion content with Tailwind classes that respect dark mode - Update header and footer link labels from Pricing to FAQ for correct navigation This improves theme toggle behavior for the FAQ content and aligns labels with the section anchor `#faq-footer`.
|
@piyushkumar0707 is attempting to deploy a commit to the Piyush Patel's projects Team on Vercel. A member of the Team first needs to authorize it. |
Author
|
closes #97 |
piyushkumar0707
changed the title
piyushpatelcodes
requested changes
Oct 20, 2025
Owner
piyushpatelcodes
left a comment
piyushpatelcodes
left a comment
There was a problem hiding this comment.
Apply Poppins Font in requested area
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.
This PR fixes the FAQ section's dark mode compatibility and updates navigation/footer labels for consistency.
What problem are you solving?
Problem 1: FAQ Section Not Respecting Theme Toggle
The FAQ accordion content boxes used hardcoded inline styles (background-color: #1e1e1e; color: #ddd;), which prevented them from responding to the light/dark theme toggle. When users switched to light mode, the FAQ content remained dark, creating poor readability and an inconsistent user experience.
Problem 2: Misleading Navigation Label
The header navigation and footer links displayed "Pricing" but actually navigated to the FAQ section (#faq-footer). Since this project doesn't have pricing tiers, the label was misleading and didn't match the destination.
Approach:
Replaced all inline styles in the three FAQ accordion .content divs with Tailwind utility classes that include both light and dark mode variants
Updated the navigation link label from "Pricing" to "FAQ" in both the header and footer while preserving the existing anchor link
Related Issue
Closes #75 (Theme toggle not working for FAQ section)
Checklist
Attach Proof of Work - Screenshots showing before/after in light and dark mode (see below)
Explain Your Approach - Problem and solution clearly described above
PR links to the issue - This PR closes #75
I have tested my changes locally (manually toggled theme and verified FAQ content responds correctly)
My code follows the project's coding standards (uses existing Tailwind conventions)
I have added appropriate comments to my code (N/A - HTML/CSS only, self-documenting)
I have updated documentation if necessary (N/A - no user-facing docs to update)
FAQ content boxes remain dark (#1e1e1e background, #ddd text)
Poor contrast and readability
Navigation shows "Pricing" but links to FAQ section
After:
Dark Mode:
FAQ content maintains dark styling (dark:tw-bg-[#1e1e1e] dark:tw-text-gray-300)
Consistent with rest of the page
Light Mode:
FAQ content now uses light styling (tw-bg-gray-100 tw-text-gray-800)
Excellent readability and contrast
Navigation correctly labeled "FAQ"
Header Navigation:
Footer:
FAQ section in light mode (before fix showing dark boxes)
FAQ section in light mode (after fix showing light boxes)
Navigation header showing the label change
Additional Notes
Technical Details:
Files Changed: index.html only
Lines Changed: 5 insertions, 27 deletions (net reduction due to removing verbose inline styles)
Breaking Changes: None
Performance Impact: None (purely visual/CSS changes)
Testing:
Opened index.html in browser
Toggled theme using the sun/moon icon in header
Scrolled to FAQ section and verified:
Content boxes change from light gray (light mode) to dark gray (dark mode)
Text color adjusts accordingly for readability
Clicked "FAQ" link in header and footer → navigates correctly to #faq-footer
Why Tailwind Classes Instead of Fixing Inline Styles:
The rest of the page uses Tailwind's utility-first approach with dark mode variants (e.g., dark:tw-bg-black dark:tw-text-white). Keeping inline styles would create maintenance inconsistency. Tailwind classes are:
More maintainable (centralized theme control)
Consistent with existing codebase patterns
Support automatic dark mode via the .tw-dark class toggle
Contribution Context:
This is my first contribution to the gssocFAQ-Bot project as part of GSSoC'25. I chose this issue because:
It's beginner-friendly (CSS/HTML only, no backend logic)
It improves UX for all users
It follows the existing code patterns
How to Test This PR
Pull this branch: git fetch origin fix/faq-theme-and-link-label && git checkout fix/faq-theme-and-link-label
Open index.html in a browser (or run the dev server if applicable)
Toggle theme with the sun/moon icon in the header
Scroll to the FAQ section at the bottom
Verify:
✅ FAQ accordion content boxes change background/text color with theme
✅ Light mode shows light gray boxes with dark text
✅ Dark mode shows dark gray boxes with light text
✅ Header and footer show "FAQ" instead of "Pricing"
✅ Clicking "FAQ" links navigate to the FAQ section