Fix mobile nav toggle visibility on dark hero backgrounds#381
Conversation
The nav toggle (hamburger menu) icon was nearly invisible on landing pages with dark hero backgrounds (data-platform, labs, component-home, home). The icon uses a dark color (#222) that doesn't contrast against the dark gradient backgrounds. Fix by applying the same invert filter used in dark mode to these specific landing pages, making the icon white and visible. Also add Widget Test page to preview nav under "Dev Tools" for easy access during development.
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
Disabled knowledge base sources:
📝 WalkthroughWalkthroughThis PR updates the navigation configuration in the Dev Tools menu by replacing the "Sticky Footer Test" link with a new "Widget Test (Bump.sh)" pointing to Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/css/component-home-v3.cssParsing error: Unexpected token . src/css/data-platform.cssParsing error: Unexpected token . src/css/home.cssParsing error: Unexpected token {
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 |
micheleRP
left a comment
micheleRP
left a comment
There was a problem hiding this comment.
Review
Approving — small, focused, low-risk visibility fix. Deploy preview confirms it works on the affected pages.
Minor
- DRY — the same
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%)is repeated in four files (component-home-v3.css,data-platform.css,home.css,labs-home.css). Consider extracting to a utility class like.nav-toggle--invertedor a CSS variable so a future tweak happens in one place. Not blocking. - Merge order with #380 —
preview-src/ui-model.ymladds a "Dev Tools → Widget Test (Bump.sh)" entry pointing to/_/widget-test.html, which is created in PR #380. If this PR lands first, the preview nav link will 404 until #380 merges. Coordinate the merge order (or move the nav entry into #380).
What works well
- Scope matches the description exactly.
- Targets only the affected landing pages via existing body/wrapper classes — no global side effects.
- All checks green including Netlify deploy preview.
2 participants
Summary
Fix the mobile navigation toggle (hamburger menu) icon being nearly invisible on landing pages with dark hero backgrounds in Brave browser and other browsers.
Problem
The nav toggle icon uses a dark color (
#222) that doesn't contrast against the dark gradient backgrounds on:Solution
Apply the same CSS
filter: invert()used in dark mode to these specific landing pages, making the icon white and visible against dark backgrounds.Files Changed
src/css/data-platform.csssrc/css/labs-home.csssrc/css/component-home-v3.csssrc/css/home.csspreview-src/ui-model.ymlPreview Links
Test on mobile viewport (< 1024px width) or resize browser:
Test Plan