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.
@@ -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' }}
|
||||
/>
|
||||
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 394 B After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 652 B After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 841 B After Width: | Height: | Size: 774 B |
|
Before Width: | Height: | Size: 407 B After Width: | Height: | Size: 2.0 KiB |