Skip to content

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

Merged
waleedlatif1 merged 1 commit into
stagingfrom
worktree-fix+email-wordmark-icons
Jul 21, 2026
Merged

fix(emails): sharpen wordmark, add clear space, and standardize footer icon sizes#5802
waleedlatif1 merged 1 commit into
stagingfrom
worktree-fix+email-wordmark-icons

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

  • Re-rasterize the transactional email wordmark from vector at 4x with baked-in vertical clear space — it was low-res/soft and slightly clipped at the top. Header logo box is now sized 68x41 to match the padded asset.
  • Standardize the footer social icons (X, LinkedIn, GitHub, Slack). They were all rendered at 20×20 but their glyphs filled the source canvas differently (X 32×30, LinkedIn 24×24, GitHub 28×27, Slack 28×28), so they looked mismatched. Each is now normalized to a uniform 28px cap-height on a 40×40 (2x) canvas.
  • Add display: block + border: 0 to the linked social icons per email best practices (removes Outlook's 2–3px inline-image gap and the blue link border).

Type of Change

  • Bug fix

Testing

Rendered the wordmark and footer icon row locally at display size to confirm the wordmark is crisp with clear space (no clipping) and left-aligns with the body text, and that all four social icons read as the same visual size. Lint clean.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

…r icon sizes

- 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.
@vercel

vercel Bot commented Jul 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Jul 21, 2026 5:54pm

Request Review

@cursor

cursor Bot commented Jul 21, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Email template and styling-only changes with no auth, data, or business-logic impact.

Overview
Updates transactional email presentation: the header wordmark in email-layout is sized to 68×41 (was 70×34) to match a re-rasterized asset with clearer vertical spacing and less clipping.

Footer social icons in email-footer get a shared socialIconStyle (display: block, border: 0) on each linked Img so Outlook drops the usual inline-image gap and blue link border around icons. Display size for those icons stays 20×20 in markup; companion asset normalization is described in the PR but is outside this TSX diff.

Reviewed by Cursor Bugbot for commit 9e4b94b. Configure here.

@waleedlatif1
waleedlatif1 merged commit 7b8bbeb into staging Jul 21, 2026
13 of 15 checks passed
@waleedlatif1
waleedlatif1 deleted the worktree-fix+email-wordmark-icons branch July 21, 2026 17:56
@greptile-apps

greptile-apps Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR refreshes the image assets and sizing used in transactional emails. The main changes are:

  • Replaces the bundled wordmark with a sharper, padded asset.
  • Normalizes the four footer social icons.
  • Adds block display and border removal to linked icons.
  • Updates the default wordmark display dimensions.

Confidence Score: 4/5

The custom-logo sizing regression needs to be fixed before merging.

  • The footer image styling follows the existing email image pattern.
  • The default wordmark dimensions match the newly padded asset.
  • Configured custom logos now inherit the asset-specific 41px height and can render oversized.

apps/sim/components/emails/components/email-layout.tsx

Important Files Changed

Filename Overview
apps/sim/components/emails/components/email-layout.tsx Updates the wordmark dimensions but also applies the new height to configured custom logos.
apps/sim/components/emails/components/email-footer.tsx Adds email-safe block and border styling to all linked social icons.
apps/sim/public/brand/color/email/wordmark.png Replaces the transactional-email wordmark with a sharper padded raster.
apps/sim/public/static/github-icon.png Replaces the GitHub icon with normalized artwork.
apps/sim/public/static/linkedin-icon.png Replaces the LinkedIn icon with normalized artwork.
apps/sim/public/static/slack-icon.png Replaces the Slack icon with normalized artwork.
apps/sim/public/static/x-icon.png Replaces the X icon with normalized artwork.

Reviews (1): Last reviewed commit: "fix(emails): sharpen wordmark, add clear..." | Re-trigger Greptile

Comment on lines +57 to +58
height='41'
{...(hasCustomLogo ? {} : { width: '68' })}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Custom Logos Inherit Wordmark Height

When brand.logoUrl is configured, this branch now enlarges that custom logo from 34px to 41px even though the new height is specific to the padded bundled wordmark. Wide or tall custom assets can expand the email header or appear oversized; retain the old height for custom logos.

Suggested change
height='41'
{...(hasCustomLogo ? {} : { width: '68' })}
height={hasCustomLogo ? '34' : '41'}
{...(hasCustomLogo ? {} : { width: '68' })}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant