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.

Author: waleedlatif1

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

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

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

@@ -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' }}
             />