Skip to content

Commit

Permalink
feat: dark mode support for emails (#86)
Browse files Browse the repository at this point in the history 
* feat: do not specify color for links

* Dark mode for FIP

* Improve dark mode

* Background color as well

* More fixes

* Bottom margin

* Tweak margins

* Adjust email preview

* Adjust logos

* Bump version

* Update tests

* Resize

* Bust Google image cache
  • Loading branch information
@AntoineAugusti
AntoineAugusti authored May 31, 2021
1 parent fda870d commit be70e9d
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 113 deletions.
2 changes: 1 addition & 1 deletion notifications_utils/formatters.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import smartypants


LINK_STYLE = 'word-wrap: break-word; color: #005ea5;'
LINK_STYLE = 'word-wrap: break-word;'

OBSCURE_WHITESPACE = (
'\u180E' # Mongolian vowel separator
Expand Down
33 changes: 18 additions & 15 deletions notifications_utils/jinja_templates/email_preview_template.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,33 +34,33 @@
</tbody>
</table>

<div class="email-message-body w-full m-0 relative break-words clear-both box-border px-doubleGutter py-4 border-gray-grey2 border">
<div class="email-message-body w-full relative break-words box-border px-doubleGutter border-gray-grey2 border">

<div style="max-width: 580px; margin: 0 auto">
<div style="max-width: 580px; margin: 0 auto;">
{% if fip_banner_english %}
<div style="max-width: 326px">
<div style="margin: 20px auto 30px auto;">
<img
src="https://{{ asset_domain }}/gov-canada-en.png"
src="https://{{ asset_domain }}/gc-logo-en.png"
alt="Government of Canada / Gouvernement du Canada"
height="30"
style="padding-bottom:30px; max-width: 100%; height: auto;"
height="55"
width="281"
/>
</div>
{% endif %}

{% if fip_banner_french or brand_name == "canada.ca-fr" %}
<div style="max-width: 326px">
<div style="margin: 20px auto 30px auto;">
<img
src="https://{{ asset_domain }}/gov-canada-fr.png"
src="https://{{ asset_domain }}/gc-logo-fr.png"
alt="Gouvernement du Canada / Government of Canada"
height="30"
style="padding-bottom:30px; max-width: 100%; height: auto;"
height="55"
width="281"
/>
</div>
{% endif %}

{% if brand_logo %}
<div style="padding: 0 5px 0 {% if brand_colour %} 8px; border-left: solid 2px {{ brand_colour }}{% else %} 10px{% endif %}; display: inline-block">
<div style="margin: 20px auto 30px auto; padding: 0 5px 0 {% if brand_colour %} 8px; border-left: solid 2px {{ brand_colour }}{% else %} 10px{% endif %}; display: inline-block">
<img
src="https://{{ asset_domain }}/{{ brand_logo }}"
style="padding-left:0; display: block; border: 0; height:{% if brand_text -%} 27 {%- else -%} 108 {%- endif %}px"
Expand All @@ -75,14 +75,17 @@
</p>
{% endif %}

{{ body }}
<div style="padding: 0 10px">
{{ body }}
</div>

{% if fip_banner_english or fip_banner_french or brand_name == "canada.ca-fr" %}
<div>
<div style="margin: 10px 0 20px 0; float: right">
<img
src="https://{{ asset_domain }}/wmms-blk.png"
src="https://{{ asset_domain }}/canada-logo.png"
alt=" "
style="padding-top:20px; float: right; height: 45px"
height="55"
width="123"
/>
</div>
<div style="clear:both;"></div>
Expand Down
100 changes: 38 additions & 62 deletions notifications_utils/jinja_templates/email_template.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
}
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }
.force-white-bg { background-color: #fff; background: linear-gradient(#fff, #fff); background-image: url("https://assets.notification.canada.ca/1x1-ffffff.png"); }
[data-ogsc] .force-white-bg { background-color: #fff; }
</style>
<!--[if gte mso 9]>
<style>
Expand All @@ -28,39 +30,36 @@
{% endif %}
<span style="display: none;font-size: 1px;color: #fff; max-height: 0;">{{ preheader }}…</span>

<div style="height:20px">&nbsp;</div>
<!-- start primary template header EN + FR -->
{% if fip_banner_english or fip_banner_french or brand_name == "canada.ca-fr" %}
<table role="presentation" style="border-collapse: collapse; max-width: calc(100% - 10px); width: 580px; margin: 0 auto;">
<table role="presentation" style="border-collapse: collapse; width:100% !important; max-width: 580px; margin: 0px auto">
<tr>
<td width="100%" height="53" bgcolor="#fff" style="padding: 0;">
<td width="100%" class="force-white-bg" style="border-radius: 10px;">
<!-- start fip -->
<table role="presentation" style="border-collapse: collapse; max-width: 326px; width: calc(100% - 10px) !important;" align="left">
<table role="presentation" style="border-collapse: collapse; max-width: 286px;" align="left">
<tr>
<td style="padding-left: 10px;">
<td style="line-height: 0px; border: 0; padding: 0">

{% if fip_banner_english %}
<img
src="https://assets.notification.canada.ca/gov-canada-en.png"
src="https://assets.notification.canada.ca/gc-logo-en.png?20210531"
alt="Government of Canada / Gouvernement du Canada"
height="30"
style="padding-bottom:30px; max-width: 100%; height: auto;"
height="55"
width="286"
border="0"
/>
{% endif %}

<!-- FR Fip -->
{% if fip_banner_french or brand_name == "canada.ca-fr" %}

{% if fip_banner_french or brand_name == "canada.ca-fr" %}
<img
src="https://assets.notification.canada.ca/gov-canada-fr.png"
src="https://assets.notification.canada.ca/gc-logo-fr.png?20210531"
alt="Gouvernement du Canada / Government of Canada"
height="30"
style="padding-bottom:30px; max-width: 100%; height: auto;"
height="70"
width="286"
border="0"
/>

{% endif %}

{% endif %}

</td>
</tr>
Expand All @@ -69,14 +68,15 @@
</td>
</tr>
</table>
<div style="height:30px">&nbsp;</div>
{% endif %}

{% if logo_with_background_colour %}
{% set brand_colour = brand_colour if brand_colour else '#0b0c0c' %}
<table role="presentation" style="border-collapse: collapse; max-width: 100%; width: 580px; margin: 0 auto;">
<tr style="margin-bottom:20px;">
<td width="100%" height="53" bgcolor="{{brand_colour}}" style="padding: 0;">
<table role="presentation" width="100%" style="border-collapse: collapse;max-width: 580px; padding-left: 10px;" cellpadding="0" cellspacing="0" border="0" align="left">
<table role="presentation" style="border-collapse: collapse; width:100% !important; max-width: 580px; margin: 0px auto">
<tr>
<td width="100%" bgcolor="{{brand_colour}}" style="padding: 15px 0; background-color: {{brand_colour}}; background: linear-gradient({{brand_colour}}, {{brand_colour}}); border-radius: 10px;">
<table role="presentation" width="100%" style="border-collapse: collapse;max-width: 580px; padding-left: 10px;" align="left">
<tr>
{% if brand_logo %}
<td
Expand Down Expand Up @@ -111,38 +111,27 @@
{% endif %}
</tr>
</table>

<!-- push content -->
<table>
<tr>
<td height="20">&nbsp;</td>
</tr>
<table>
<!-- end push content -->

</td>
</tr>
</table>
<div style="height:30px">&nbsp;</div>
{% endif %}

{% if brand_logo and not logo_with_background_colour %}
<table
role="presentation"
class="content"
style="border-collapse: collapse; max-width: 100%; width: 580px; margin: 0 auto;"
style="border-collapse: collapse; width:100% !important; max-width: 580px; margin: 0px auto"
>
<tr>
<td style="padding: 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; padding-left: 10px;">
<tr>
<td height="24" width="100%" colspan="2" style="padding: 0;"><br /></td>
</tr>
<td class="force-white-bg" style="padding: 15px 0; border-radius: 10px;">
<table role="presentation" width="100%" style="border-collapse: collapse;">
<tr>
<td style="padding: 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse">
<tr>
<td style="padding: 0 5px 0 {% if brand_colour %} 8px; border-left: solid 2px {{ brand_colour }}{% else %} 10px{% endif %}">
<img src="{{ brand_logo }}" style="padding-left:0; display: block; border: 0" height="{% if brand_text -%} 27 {%- else -%} 108 {%- endif %}"
<td style="padding: 0 10px 0 {% if brand_colour %} 8px; border-left: solid 2px {{ brand_colour }}{% else %} 10px{% endif %}">
<img src="{{ brand_logo }}" style="display: block; border: 0" height="{% if brand_text -%} 27 {%- else -%} 108 {%- endif %}"
alt="{% if brand_text %} {% else -%}{{ brand_name }}{%- endif %}" />
</td>
<td width="100%" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 23px;" valign="center">
Expand All @@ -152,64 +141,51 @@
</td>
</tr>
</table>
<!-- push content -->
<table>
<tr>
<td height="20">&nbsp;</td>
</tr>
<table>
<!-- end push content -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
<div style="height:30px">&nbsp;</div>
{% endif %}

<!-- main content -->
<table
role="presentation"
class="content"
style="border-collapse: collapse; max-width: calc(100% - 10px); width: 580px; margin: 0 auto;"
style="border-collapse: collapse; width:100% !important; max-width: 580px; margin: 0 auto;"
>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.315789474; max-width: 580px; padding-left: 10px;">
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.315789474; padding: 0 10px;">
{{ body|safe }}
</td>
</tr>
</table>
<!-- end main content -->

{% if fip_banner_english or fip_banner_french or brand_name == "canada.ca-fr" %}
<!-- for some reason some mobile clients don't want to respect the width: 580px / max-width:100% relationship here -->
<!-- so added the min-width: 320 to make sure it looks right on small screens -->
<table role="presentation" width="100%" style="border-collapse: collapse; min-width: 320px; max-width: 100%; width: 580px; margin: 0 auto;">
<div style="height:10px">&nbsp;</div>
<table role="presentation" width="100%" style="border-collapse: collapse; width:100% !important; max-width: 580px; margin: 0px auto;">
<tr>
<td width="100%" bgcolor="#fff" style="width:100%!important; padding: 0;">
<td width="100%" class="force-white-bg" style="text-align:right; width:100%!important; border-radius: 10px;">
<table role="presentation" style="border-collapse: collapse; width: 100%!important; text-align: right;" align="right">
<tr>
<td bgcolor="#fff" style="text-align:right;width:100%!important; padding-left: 10px;">
<!-- start fip -->
<td style="line-height: 0px; border: 0; padding: 0">
<img
src="https://assets.notification.canada.ca/wmms-blk.png"
src="https://assets.notification.canada.ca/canada-logo.png?20210531"
alt=" "
height="25"
style="padding-top:20px;"
width="123"
height="55"
border="0"
style="Margin-top: 4px;"
/>
<!-- end fip -->
</td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}

{% if no_branding and brand_name != "canada.ca-fr" %}
{{ body|safe }}
<div style="height:20px">&nbsp;</div>
{% endif %}

{% if complete_html %}
Expand Down
2 changes: 1 addition & 1 deletion notifications_utils/version.py
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
__version__ = '43.10.0'
__version__ = '43.11.0'
# GDS version '34.0.1'
28 changes: 14 additions & 14 deletions tests/test_formatters.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
]
)
def test_makes_links_out_of_URLs(url):
link = '<a style="word-wrap: break-word; color: #005ea5;" href="{}">{}</a>'.format(url, url)
link = '<a style="word-wrap: break-word;" href="{}">{}</a>'.format(url, url)
assert (notify_email_markdown(url) == (
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; color: #0B0C0C;">'
'{}'
Expand All @@ -56,7 +56,7 @@ def test_makes_links_out_of_URLs(url):
),
(
'this is some text with a link '
'<a style="word-wrap: break-word; color: #005ea5;" href="http://example.com">http://example.com</a>'
'<a style="word-wrap: break-word;" href="http://example.com">http://example.com</a>'
' in the middle'
),
),
Expand All @@ -66,7 +66,7 @@ def test_makes_links_out_of_URLs(url):
),
(
'this link is in brackets '
'(<a style="word-wrap: break-word; color: #005ea5;" href="http://example.com">http://example.com</a>)'
'(<a style="word-wrap: break-word;" href="http://example.com">http://example.com</a>)'
),
)
])
Expand Down Expand Up @@ -101,7 +101,7 @@ def test_handles_placeholders_in_urls():
"http://example.com/?token=<span class='placeholder'>((token))</span>&key=1"
) == (
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; color: #0B0C0C;">'
'<a style="word-wrap: break-word; color: #005ea5;" href="http://example.com/?token=">'
'<a style="word-wrap: break-word;" href="http://example.com/?token=">'
'http://example.com/?token='
'</a>'
'<span class=\'placeholder\'>((token))</span>&amp;key=1'
Expand All @@ -113,13 +113,13 @@ def test_handles_placeholders_in_urls():
"url, expected_html, expected_html_in_template", [
(
"""https://example.com"onclick="alert('hi')""",
"""<a style="word-wrap: break-word; color: #005ea5;" href="https://example.com%22onclick=%22alert%28%27hi">https://example.com"onclick="alert('hi</a>')""", # noqa
"""<a style="word-wrap: break-word; color: #005ea5;" href="https://example.com%22onclick=%22alert%28%27hi">https://example.com"onclick="alert('hi</a>‘)""", # noqa
"""<a style="word-wrap: break-word;" href="https://example.com%22onclick=%22alert%28%27hi">https://example.com"onclick="alert('hi</a>')""", # noqa
"""<a style="word-wrap: break-word;" href="https://example.com%22onclick=%22alert%28%27hi">https://example.com"onclick="alert('hi</a>‘)""", # noqa
),
(
"""https://example.com"style='text-decoration:blink'""",
"""<a style="word-wrap: break-word; color: #005ea5;" href="https://example.com%22style=%27text-decoration:blink">https://example.com"style='text-decoration:blink</a>'""", # noqa
"""<a style="word-wrap: break-word; color: #005ea5;" href="https://example.com%22style=%27text-decoration:blink">https://example.com"style='text-decoration:blink</a>’""", # noqa
"""<a style="word-wrap: break-word;" href="https://example.com%22style=%27text-decoration:blink">https://example.com"style='text-decoration:blink</a>'""", # noqa
"""<a style="word-wrap: break-word;" href="https://example.com%22style=%27text-decoration:blink">https://example.com"style='text-decoration:blink</a>’""", # noqa
),
]
)
Expand All @@ -134,7 +134,7 @@ def test_URLs_get_escaped(url, expected_html, expected_html_in_template):

def test_HTML_template_has_URLs_replaced_with_links():
assert (
'<a style="word-wrap: break-word; color: #005ea5;" href="https://service.example.com/accept_invite/a1b2c3d4">'
'<a style="word-wrap: break-word;" href="https://service.example.com/accept_invite/a1b2c3d4">'
'https://service.example.com/accept_invite/a1b2c3d4'
'</a>'
) in str(HTMLEmailTemplate({'content': (
Expand All @@ -148,7 +148,7 @@ def test_HTML_template_has_URLs_replaced_with_links():
@pytest.mark.parametrize('markdown_function, expected_output', [
(notify_email_markdown, (
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; color: #0B0C0C;">'
'<a style="word-wrap: break-word; color: #005ea5;" href="https://example.com">'
'<a style="word-wrap: break-word;" href="https://example.com">'
'https://example.com'
'</a>'
'</p>'
Expand Down Expand Up @@ -657,7 +657,7 @@ def test_table(markdown_function):
'http://example.com',
(
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; color: #0B0C0C;">'
'<a style="word-wrap: break-word; color: #005ea5;" href="http://example.com">http://example.com</a>'
'<a style="word-wrap: break-word;" href="http://example.com">http://example.com</a>'
'</p>'
)
],
Expand All @@ -666,7 +666,7 @@ def test_table(markdown_function):
"""https://example.com"onclick="alert('hi')""",
(
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; color: #0B0C0C;">'
'<a style="word-wrap: break-word; color: #005ea5;" href="https://example.com%22onclick=%22alert%28%27hi">'
'<a style="word-wrap: break-word;" href="https://example.com%22onclick=%22alert%28%27hi">'
'https://example.com"onclick="alert(\'hi'
'</a>\')'
'</p>'
Expand Down Expand Up @@ -789,7 +789,7 @@ def test_image(markdown_function):
(
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; '
'color: #0B0C0C;">'
'<a style="word-wrap: break-word; color: #005ea5;" href="http://example.com">Example</a>'
'<a style="word-wrap: break-word;" href="http://example.com">Example</a>'
'</p>'
)
],
Expand Down Expand Up @@ -819,7 +819,7 @@ def test_link(markdown_function, expected):
(
'<p style="Margin: 0 0 20px 0; font-size: 19px; line-height: 25px; '
'color: #0B0C0C;">'
'<a style="word-wrap: break-word; color: #005ea5;" href="http://example.com" title="An example URL">'
'<a style="word-wrap: break-word;" href="http://example.com" title="An example URL">'
'Example'
'</a>'
'</p>'
Expand Down
Loading

0 comments on commit be70e9d

Please sign in to comment.