Fix: ensure email text is visible in light mode (issue #1966)#1994
Fix: ensure email text is visible in light mode (issue #1966)#1994ahmetskilinc merged 2 commits intoMail-0:stagingfrom
Conversation
… mode Fixes issue Mail-0#1966 (white text on white background)Checks all email content elements in light mode. If any text is white, sets it to black for readability. .
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughIntroduces a useEffect in mail-content.tsx that, on processedData or resolvedTheme changes, inspects elements within the component’s shadow root. In light theme only, it computes each element’s color and overrides pure white text (rgb(255, 255, 255)) with inline black (#000). No public API changes. Changes
Sequence Diagram(s)sequenceDiagram
participant React as MailContent Component
participant Effect as useEffect (theme/data)
participant Shadow as shadowRootRef.current
participant DOM as Descendant Elements
React->>Effect: processedData/resolvedTheme change
alt shadowRootRef exists
Effect->>Shadow: querySelectorAll("*")
alt resolvedTheme == "light"
loop For each element
Effect->>DOM: getComputedStyle(el).color
alt color == rgb(255, 255, 255)
Effect->>DOM: el.style.color = "#000"
else color != white
Note right of DOM: No change
end
end
else not light theme
Note right of Effect: Skip color overrides
end
else no shadowRootRef
Note right of Effect: Return early
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/mail/components/mail/mail-content.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{css,js,ts,jsx,tsx,mdx}
📄 CodeRabbit Inference Engine (.cursor/rules/tailwind-css-v4.mdc)
**/*.{css,js,ts,jsx,tsx,mdx}: Chain variants together for composable variants (e.g.,group-has-data-potato:opacity-100).
Use new variants such asstarting,not-*,inert,nth-*,in-*,open(for:popover-open), and**for all descendants.
Do not use deprecated utilities likebg-opacity-*,text-opacity-*,border-opacity-*, anddivide-opacity-*; use the new syntax (e.g.,bg-black/50).
Use renamed utilities:shadow-smis nowshadow-xs,shadowis nowshadow-sm,drop-shadow-smis nowdrop-shadow-xs,drop-shadowis nowdrop-shadow-sm,blur-smis nowblur-xs,bluris nowblur-sm,rounded-smis nowrounded-xs,roundedis nowrounded-sm,outline-noneis nowoutline-hidden.
Usebg-(--brand-color)syntax for CSS variables in arbitrary values instead ofbg-[--brand-color].
Stacked variants now apply left-to-right instead of right-to-left.
Files:
apps/mail/components/mail/mail-content.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (AGENT.md)
**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters
Semicolons are required
Files:
apps/mail/components/mail/mail-content.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit Inference Engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/mail/mail-content.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/mail/mail-content.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: snehendu098
PR: Mail-0/Zero#1323
File: apps/mail/lib/themes/theme-utils.ts:318-318
Timestamp: 2025-06-24T06:22:58.753Z
Learning: In the Mail-0/Zero theme system (apps/mail/lib/themes/theme-utils.ts), when color themes are being applied, all color values come in HSL format, so there's no need for additional format validation when converting colors with hslToHex().
📚 Learning: 2025-06-24T06:22:58.753Z
Learnt from: snehendu098
PR: Mail-0/Zero#1323
File: apps/mail/lib/themes/theme-utils.ts:318-318
Timestamp: 2025-06-24T06:22:58.753Z
Learning: In the Mail-0/Zero theme system (apps/mail/lib/themes/theme-utils.ts), when color themes are being applied, all color values come in HSL format, so there's no need for additional format validation when converting colors with hslToHex().
Applied to files:
apps/mail/components/mail/mail-content.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
|
hey @tanayy07 can you please check the requested changes? |
|
On it
…On Sat, Aug 23, 2025, 3:15 PM Ahmet Kilinc ***@***.***> wrote:
*ahmetskilinc* left a comment (Mail-0/Zero#1994)
<#1994 (comment)>
hey @tanayy07 <https://github.com/tanayy07> can you please check the
requested changes?
—
Reply to this email directly, view it on GitHub
<#1994 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/A2NXWZKJ3323VXO624XU3RT3PAZ3RAVCNFSM6AAAAACEJRS5RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTEMJWGYYTENJRGQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
2 participants
This PR fixes an issue where some email content was unreadable in light mode due to white text on a white background.
Added a useEffect that checks all email elements after render, and if any have white text, it sets them to black for visibility.
Summary by cubic
Ensures email text stays visible in light mode by turning white text to black after render inside the email shadow root. Fixes #1966 (white text on white background).
Summary by CodeRabbit