Show newsletter section descriptions inline and fix email dark-mode rendering - #1057
Merged
Merged
Conversation
Move each newsletter section's explanation under its heading, above the rule, and drop the closing glossary box that repeated the same copy. Rewrite the descriptions in both languages so they describe the section rather than the UI. Fix three rendering bugs found while verifying. The card's paper-stack shadow painted opaque white sheets that survived a client's dark-mode recolor and showed as bright bars under the card. The mobile top margin never collapsed because React Email serializes max-sm: variants as invalid CSS. Colored text could not be restyled for dark mode at all, since the Tailwind transform rewrites utilities to inline styles and drops the class names.
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
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.
Summary
Each newsletter section now explains itself under its own heading instead of deferring to a glossary box at the bottom of the email. Verifying that against real renders turned up three bugs in the shared shell that affect every template we send, so they are fixed here too: the card's shadow showed light bars in dark mode, the mobile top margin never collapsed, and no colored text could be restyled for dark mode at all.
Related issues
Closes #1056
Important changes
renderSectionGlossaryandGLOSSARY_TITLEare gone, since keeping both would print the same sentences twice.#ffffff,#f3f4f6). Clients that recolor the card leavebox-shadowuntouched, so those sheets survived as bright bars under a dark card. Every layer is now translucent black.max-sm:mt-0was dead code: React Email's Tailwind serializes it as@media not all and(min-width:640px), which is invalid CSS that every client drops. Replaced with a hand-written media query keyed off anemail-cardclass.text-inkand friends into inline styles and deletes the class names, so a media query had nothing to target. Every element carrying a color now also carries a marker class that survives the transform, and aprefers-color-scheme: darkblock recolors it. Paired withcolor-schememeta so Apple Mail and Outlook use the palette instead of force-inverting.Two dark-mode bugs only appeared under render.
Bodypaints the canvas colour twice, once on<body>and again on an inner full-width cell that carries no className, so the recoloured body was covered until the rule reached that cell as well. Aborder-colorshorthand also flattened the callout's brand-blue left accent, now scoped toborder-left-color.Other changes
#111827on a dark card it would have been close to invisible.Key files to review
packages/shared/email-templates/src/shared/email-shell.tsx- the marker classes, dark stylesheet, card shadow, and mobile rule. The three- Important:callouts explain why each workaround exists.packages/shared/email-templates/src/newsletter/default-newsletter.tsx-renderSectionHeaderand the rewrittenSECTION_COPY.packages/shared/email-templates/src/render-newsletter-email.test.tsx- two new tests: description placement and ordering, and a guard that the dark stylesheet plus every marker class survive rendering.How to test
pnpm --filter @workspace/email-templates test- 94 tests pass.pnpm --filter @workspace/email-templates email:devand opennewsletter-enandnewsletter-id. Each section shows its description under the heading, above the rule, with no glossary box at the bottom.@media (prefers-color-scheme:dark)for@media all, then open it. Confirm the canvas, card, headings, body copy, bylines, rules, and links all recolor, with no light bars under the card. Repeat for the three registration templates and check the callout accent and confirm button.pnpm code-qualityfrom the repository root.Notes for reviewers
Gmail is deliberately not covered. It supports none of the dark-mode hooks and its mobile apps auto-invert with no opt-out, so there is no way to hand it this palette. It keeps inverting the light one, which reads fine now that the bars are gone.