fix: resolve dark mode contrast issues on legal pages - #7789
fix: resolve dark mode contrast issues on legal pages#7789AnkitRewar11 wants to merge 7 commits into
Conversation
Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
|
Hey @Rajesh-Nagarajan-11, @banana-three-join, @KatalKavya96, @rishiraj38 👋 |
|
Preview deployment for PR #7789 removed. This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits. If needed, push a new commit to this PR to generate a fresh preview. |
KatalKavya96
left a comment
KatalKavya96
left a comment
There was a problem hiding this comment.
@AnkitRewar11 I can see the issue on the Code of Conduct and Terms of Service pages, and both the issue description and reproduction steps also point to these two pages only.
Could you please clarify why changes were made to additional pages as well? The expected fix seems to be limited to Code of Conduct and Terms of Service.
|
@KatalKavya96 These pages were affected because they all share the same Also, Privacy Policy, Cookie Notice, and Sub-Processors use the same dark mode setup ( Limiting the change to only Code of Conduct and Terms of Service would have left the same issue on the other legal pages. |
KatalKavya96
left a comment
KatalKavya96
left a comment
There was a problem hiding this comment.
@AnkitRewar11 Ok, fair enough. Thanks for clarifying.
I rechecked the preview as well, and the fix looks good overall. Since the PR covers both the shared terms.style.js contrast issue and the theme rendering issue on Privacy Policy, Cookie Notice, and Sub-Processors, could you please update the PR description to mention this clearly?
Rest all looks good to me.
|
@AnkitRewar11 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
|
@rishiraj38 @Rajesh-Nagarajan-11 please take a look. |
Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
a560db7 to
d6136fa
Compare
|
@AnkitRewar11 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
|
|
|
@Sbragul26 You're right bro. This change will prevent unnecessary work on each render and significantly improve performance. I've updated it. Thanks for the heads-up! |
…very render Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
…ewar11/layer5 into fix/dark-mode-legal-clean
|
@AnkitRewar11 ,LGTM |
|
@AnkitRewar11 LGTM |
📝 WalkthroughWalkthroughLegal pages now initialize custom themes after mounting and remount providers when the color mode changes. Terms page text also uses the theme’s ChangesLegal theme rendering
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 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
ESLint install timed out. The project may have too many dependencies for the sandbox. 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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/sections/Company/Legal/cookie-notice/index.js (1)
161-198: 🩺 Stability & Availability | 🟠 Major | 🏗️ Heavy liftRender all legal tables during SSR and the initial client render.
didLoadis false in SSR and becomes true only inuseEffectin all three confirmed files. This omits the tables from the generated HTML and leaves them unavailable when JavaScript fails or is disabled. The table insertion also shifts the following content because no space is reserved. Keep the table subtree mounted while updating the theme after hydration.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/sections/Company/Legal/cookie-notice/index.js` around lines 161 - 198, Render the legal table subtrees unconditionally during SSR and the initial client render instead of gating them on didLoad, while preserving theme updates after hydration through SistentThemeProvider. Apply this change at the table blocks in src/sections/Company/Legal/cookie-notice/index.js (lines 161-198), src/sections/Company/Legal/privacy/index.js (lines 195-238), and src/sections/Company/Legal/sub-processors/index.js (lines 240-298); ensure the existing layout reserves space and the tables remain available without JavaScript.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/sections/Company/Legal/terms.style.js`:
- Around line 47-49: Update the dark-mode text-color rule in the terms styles so
the h2–h6, p, and li selector is scoped under .terms-content instead of the
current scope. Preserve the existing theme.whiteToBlack color value and selector
coverage.
---
Outside diff comments:
In `@src/sections/Company/Legal/cookie-notice/index.js`:
- Around line 161-198: Render the legal table subtrees unconditionally during
SSR and the initial client render instead of gating them on didLoad, while
preserving theme updates after hydration through SistentThemeProvider. Apply
this change at the table blocks in
src/sections/Company/Legal/cookie-notice/index.js (lines 161-198),
src/sections/Company/Legal/privacy/index.js (lines 195-238), and
src/sections/Company/Legal/sub-processors/index.js (lines 240-298); ensure the
existing layout reserves space and the tables remain available without
JavaScript.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4d733226-78a6-4c4f-b4c8-5cb7a60516e9
📒 Files selected for processing (4)
src/sections/Company/Legal/cookie-notice/index.jssrc/sections/Company/Legal/privacy/index.jssrc/sections/Company/Legal/sub-processors/index.jssrc/sections/Company/Legal/terms.style.js
8 participants
Description
This PR fixes #7677
In dark mode, text on Code of Conduct and Terms of Service pages was invisible (dark text on dark background). On Privacy page, the data processing table was rendering in light mode regardless of user's theme preference. Issue resolved only after manually switching theme.
Root Cause
terms.style.jshad no color properties defined, so text became invisible in dark modeprivacy/index.js—SistentThemeProviderwas rendering with wrong initial theme beforeThemeManagerresolved correct theme from localStoragesub-processors/index.js—SistentThemeProviderwas not re-mounting on theme changecookie-notice/index.js- used the same table rendering pattern and was affected by the same theme initialization behavior.Changes Made
terms.style.js: addedprops.theme.whiteToBlackcolor for all text elements to ensure proper contrast in dark and light modeprivacy/index.js: addeddidLoadflag to deferSistentThemeProviderrender until theme is fully resolved, preventing incorrect light mode flash on tablesub-processors/index.js: addedkey={isDark ? "dark" : "light"}anddidLoadflag toSistentThemeProviderto force re-mount on theme changecookie-notice/index.js: addeddidLoadflag andkeyprop toSistentThemeProvider(same table setup as privacy page)Affected Pages
Notes for Reviewers
No new dependencies added. Changes are scoped only to legal pages.
Signed commits
Screen.Recording.2026-06-12.003525.mp4
Summary by CodeRabbit