From 03e921450da07f48b54d6af10806fdfc7e2cd886 Mon Sep 17 00:00:00 2001 From: Lisa Chan Date: Fri, 4 Feb 2022 19:15:47 -0500 Subject: [PATCH] fix(auth-server): subplat email images are at 100% width using the Mail app (#11840) --- .../lib/senders/emails/layouts/fxa/index.mjml | 52 +++++++++---------- .../lib/senders/emails/layouts/fxa/index.scss | 4 -- .../emails/layouts/subscription/index.mjml | 29 ++++++----- .../emails/layouts/subscription/index.scss | 3 -- .../emails/partials/appBadges/index.mjml | 2 + .../emails/partials/appBadges/index.scss | 1 - .../senders/emails/partials/icon/index.mjml | 6 +-- .../lib/senders/emails/partials/images.mjml | 14 +++++ .../templates/cadReminderFirst/index.mjml | 2 +- .../templates/cadReminderSecond/index.mjml | 2 +- .../emails/templates/postVerify/index.mjml | 2 +- 11 files changed, 64 insertions(+), 53 deletions(-) diff --git a/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.mjml b/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.mjml index dbf051ecda..a2452bcfc3 100644 --- a/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.mjml +++ b/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.mjml @@ -17,37 +17,35 @@ - - <% if (locals.preHeader) { %> - - <% } %> - <% if (!locals.sync) { %> -
- + + <% if (locals.preHeader) { %> + + <%- preHeader %> +  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  +  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  +  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  + ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  + ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌‌‌ + + <% } %> + <% if (!locals.sync) { %> +
- <% } else { %> -
- + + <% } else { %> + -
- <% } %> - + title="Sync devices"> + + <% } %> + + <%- body %> diff --git a/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss b/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss index df0b5cdf35..422790e6d2 100644 --- a/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss +++ b/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss @@ -12,7 +12,6 @@ .fxa-logo { padding: global.$s-5 global.$s-0 !important; height: 60px !important; - width: 60px !important; margin: 0 auto !important; display: block !important; } @@ -20,7 +19,6 @@ .sync-img { padding: global.$s-5 global.$s-0 !important; height: 137px; - width: 300px; margin: 0 auto !important; display: block !important; } @@ -70,14 +68,12 @@ } .sync-logo img { - width: 240px !important; margin: 0 auto; @extend .mb-5; @extend .mt-2; } .graphic-devices img { - width: 240px !important; margin: 0 auto; @extend .mb-5; @extend .mt-2; diff --git a/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.mjml b/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.mjml index 69443c88cf..70dedcd510 100644 --- a/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.mjml +++ b/packages/fxa-auth-server/lib/senders/emails/layouts/subscription/index.mjml @@ -19,22 +19,26 @@ - - <% if (locals.preHeader) { %> - - <% } %> - + <% if (locals.preHeader) { %> + + + + <%- preHeader %> +  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  +  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  +  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  + ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌  + ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌‌‌ + + + + <% } %> - + - + <% } else { %> - + <% } %> diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/images.mjml b/packages/fxa-auth-server/lib/senders/emails/partials/images.mjml index d625dca225..d394297159 100644 --- a/packages/fxa-auth-server/lib/senders/emails/partials/images.mjml +++ b/packages/fxa-auth-server/lib/senders/emails/partials/images.mjml @@ -4,6 +4,20 @@ <% if (!locals.productName) { locals.productName = 'Firefox' %><% } %> + + fxa-header-firefox-logo + + + fxa-logo + + + + fxa-header-sync-devices-image + + + sync-devices-image + + subplat-header-firefox-logo diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderFirst/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderFirst/index.mjml index fb971be819..6464dded63 100644 --- a/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderFirst/index.mjml +++ b/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderFirst/index.mjml @@ -7,7 +7,7 @@ Here’s your reminder to sync devices. - + diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderSecond/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderSecond/index.mjml index fe77ce367e..88cbebde29 100644 --- a/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderSecond/index.mjml +++ b/packages/fxa-auth-server/lib/senders/emails/templates/cadReminderSecond/index.mjml @@ -7,7 +7,7 @@ Last reminder to sync devices! - + diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/postVerify/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/postVerify/index.mjml index 3f7b6b2257..c7076a293d 100644 --- a/packages/fxa-auth-server/lib/senders/emails/templates/postVerify/index.mjml +++ b/packages/fxa-auth-server/lib/senders/emails/templates/postVerify/index.mjml @@ -10,7 +10,7 @@ Next sync between your devices! - +