feat(live-loan): render compact bundle card as transparent PNG - #7204
Open
roger-in-kiva wants to merge 1 commit into
Open
feat(live-loan): render compact bundle card as transparent PNG#7204roger-in-kiva wants to merge 1 commit into
roger-in-kiva wants to merge 1 commit into
Conversation
The compact-bundle card was a JPEG baked onto a white margin, so its drop shadow only worked on a white email background. Dark-mode templates need a transparent margin instead. Render the compact card with an alpha channel: clear the canvas to transparent (no white fill) and export PNG, so the margin is see-through and the card + shadow composite onto whatever background the email uses. Content type is resolved per style via contentTypeForStyle so the response header is correct on both fresh draws and cache hits (the cache stores only the buffer). Other card styles are unchanged and still JPEG. Card sizing was verified against the design and already matches; no dimension changes were needed.
Contributor
|
(doubt) this feat is for the dark mode in some devices? |
Collaborator
Author
that's correct! |
Contributor
|
@roger-in-kiva nice! could you please add some screenshots for references/evidences ?, then I will approve it 🎉 |
Collaborator
Author
|
christian14b
approved these changes
Aug 28, 2026
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
3 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.
What
The
compact-bundlelive-loan card now renders as a transparent PNG instead of a JPEG baked onto a white margin.Why
The card's drop shadow was baked onto a white background, so it only read on white email templates. Dark-mode templates need the margin transparent so the card + shadow composite onto the email's own background.
How
drawCompact: keep the canvas alpha channel,clearRectthe canvas to transparent (instead of a whitefillRect), and exporttoBuffer('image/png'). The white card body and drop shadow are unchanged; only the surrounding margin is now transparent.contentTypeForStyle(style)helper, used by the router for both fresh draws and cache hits (the cache stores only the buffer, so the header is derived from the style). Onlycompact-bundleis PNG; all other styles stay JPEG.Testing
contentTypeForStylemapping unit test; router content-type assertions flipped toimage/pngfor the three compact routes, JPEG retained for the others.Known follow-up (not in this PR)
On a dark background the existing
rgba(0,0,0,0.08)black shadow is very faint (a black shadow has little contrast against dark). This PR delivers the transparency the dark template needs; tuning the shadow treatment for dark (stronger shadow / light glow / per-template) is a separate design decision still open.