fix(emails): sharpen wordmark, add clear space, and standardize footer icon sizes (#5802)

- Re-rasterize the email wordmark from vector at 4x with baked-in vertical clear space so it renders crisp and is no longer clipped at the top/bottom; size the header logo box to 68x41 to match.
- Normalize the footer social icons (X, LinkedIn, GitHub, Slack) to a uniform cap-height on 40x40 (2x) canvases so they read as the same visual size.
- Add display:block + border:0 to the linked social icons to avoid Outlook's inline-image gap and blue link border.
This commit is contained in:
Waleed
2026-07-21 10:56:07 -07:00
committed by GitHub
parent 3507934427
commit 7b8bbeb74f
7 changed files with 16 additions and 2 deletions
@@ -37,6 +37,16 @@ export function EmailFooter({
fontFamily: typography.fontFamily,
}
/**
* Social icons are linked images. `display: block` removes the 2–3px gap
* Outlook adds under inline images, and `border: 0` prevents the blue link
* border older Outlook versions draw around linked images.
*/
const socialIconStyle = {
display: 'block' as const,
border: 0,
}
return (
<Section
style={{
@@ -77,6 +87,7 @@ export function EmailFooter({
width='20'
height='20'
alt='X'
style={socialIconStyle}
/>
</Link>
</td>
@@ -87,6 +98,7 @@ export function EmailFooter({
width='20'
height='20'
alt='LinkedIn'
style={socialIconStyle}
/>
</Link>
</td>
@@ -97,6 +109,7 @@ export function EmailFooter({
width='20'
height='20'
alt='GitHub'
style={socialIconStyle}
/>
</Link>
</td>
@@ -107,6 +120,7 @@ export function EmailFooter({
width='20'
height='20'
alt='Slack'
style={socialIconStyle}
/>
</Link>
</td>
@@ -54,8 +54,8 @@ export function EmailLayout({
<Section style={baseStyles.header}>
<Img
src={brand.logoUrl || `${baseUrl}/brand/color/email/wordmark.png`}
height='34'
{...(hasCustomLogo ? {} : { width: '70' })}
height='41'
{...(hasCustomLogo ? {} : { width: '68' })}
alt={brand.name}
style={hasCustomLogo ? { display: 'block', width: 'auto' } : { display: 'block' }}
/>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 394 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 841 B

After

Width:  |  Height:  |  Size: 774 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 407 B

After

Width:  |  Height:  |  Size: 2.0 KiB