From be70e9de062597c4e4f62fa8bb4b490ad169b921 Mon Sep 17 00:00:00 2001
From: Antoine Augusti <antoine.augusti@cds-snc.ca>
Date: Mon, 31 May 2021 14:16:44 -0400
Subject: [PATCH] feat: dark mode support for emails (#86)

* 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
---
 notifications_utils/formatters.py             |   2 +-
 .../email_preview_template.jinja2             |  33 +++---
 .../jinja_templates/email_template.jinja2     | 100 +++++++-----------
 notifications_utils/version.py                |   2 +-
 tests/test_formatters.py                      |  28 ++---
 tests/test_template_types.py                  |  38 ++++---
 6 files changed, 90 insertions(+), 113 deletions(-)

diff --git a/notifications_utils/formatters.py b/notifications_utils/formatters.py
index fec43fce..d4535e16 100644
--- a/notifications_utils/formatters.py
+++ b/notifications_utils/formatters.py
@@ -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
diff --git a/notifications_utils/jinja_templates/email_preview_template.jinja2 b/notifications_utils/jinja_templates/email_preview_template.jinja2
index f353fac0..016e0cd4 100644
--- a/notifications_utils/jinja_templates/email_preview_template.jinja2
+++ b/notifications_utils/jinja_templates/email_preview_template.jinja2
@@ -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"
@@ -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>
diff --git a/notifications_utils/jinja_templates/email_template.jinja2 b/notifications_utils/jinja_templates/email_template.jinja2
index e78bb3f8..313c53df 100644
--- a/notifications_utils/jinja_templates/email_template.jinja2
+++ b/notifications_utils/jinja_templates/email_template.jinja2
@@ -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>
@@ -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>
@@ -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
@@ -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">
@@ -152,29 +141,23 @@
                 </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>
@@ -182,34 +165,27 @@
 <!-- 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 %}
diff --git a/notifications_utils/version.py b/notifications_utils/version.py
index 01fcf4ce..22b3f7df 100644
--- a/notifications_utils/version.py
+++ b/notifications_utils/version.py
@@ -1,2 +1,2 @@
-__version__ = '43.10.0'
+__version__ = '43.11.0'
 # GDS version '34.0.1'
diff --git a/tests/test_formatters.py b/tests/test_formatters.py
index cc5c8091..3b6de721 100644
--- a/tests/test_formatters.py
+++ b/tests/test_formatters.py
@@ -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;">'
         '{}'
@@ -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'
         ),
     ),
@@ -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>)'
         ),
     )
 ])
@@ -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'
@@ -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
         ),
     ]
 )
@@ -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': (
@@ -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>'
@@ -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>'
         )
     ],
@@ -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>'
@@ -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>'
         )
     ],
@@ -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>'
diff --git a/tests/test_template_types.py b/tests/test_template_types.py
index b8d3c2d9..253b2d6c 100644
--- a/tests/test_template_types.py
+++ b/tests/test_template_types.py
@@ -53,11 +53,11 @@ def test_fip_banner_english(renderer, show_banner):
     email = renderer({'content': 'hello world', 'subject': ''})
     email.fip_banner_english = show_banner
     if show_banner:
-        assert "gov-canada-en.png" in str(email)
-        assert "wmms-blk.png" in str(email)
+        assert "gc-logo-en.png" in str(email)
+        assert "canada-logo.png" in str(email)
     else:
-        assert "gov-canada-en.png" not in str(email)
-        assert "wmms-blk.png" not in str(email)
+        assert "gc-logo-en.png" not in str(email)
+        assert "canada-logo.png" not in str(email)
 
 
 @pytest.mark.parametrize('lang', ['en', 'fr'])
@@ -74,7 +74,7 @@ def test_custom_asset_domain(lang, asset_domain):
         asset_domain=asset_domain
     )
 
-    assert f"https://{expected_domain}/gov-canada-{lang}.png" in str(email)
+    assert f"https://{expected_domain}/gc-logo-{lang}.png" in str(email)
 
 
 @pytest.mark.parametrize('renderer', [HTMLEmailTemplate, EmailPreviewTemplate])
@@ -86,25 +86,23 @@ def test_fip_banner_french(renderer, show_banner):
     email.fip_banner_english = False
     email.fip_banner_french = show_banner
     if show_banner:
-        assert "gov-canada-fr.png" in str(email)
-        assert "wmms-blk.png" in str(email)
+        assert "gc-logo-fr.png" in str(email)
+        assert "canada-logo.png" in str(email)
     else:
-        assert "gov-canada-fr.png" not in str(email)
-        assert "wmms-blk.png" not in str(email)
+        assert "gc-logo-fr.png" not in str(email)
+        assert "canada-logo.png" not in str(email)
 
 
 def test_logo_with_background_colour_shows():
     email = str(HTMLEmailTemplate(
         {'content': 'hello world', 'subject': ''},
         logo_with_background_colour=True,
-        fip_banner_english=False
+        fip_banner_english=False,
+        brand_colour='#eee'
     ))
-    assert (
-        '<td width="10" height="10" valign="middle"></td>'
-    ) not in email
-    assert (
-        'role="presentation" style="border-collapse: collapse; max-width: 100%; width: 580px; margin: 0 auto;"' # noqa
-    ) in email
+    assert "gc-logo-en.png" not in email
+    assert 'bgcolor="#eee"' in email
+    assert 'background: linear-gradient(#eee, #eee);' in email
 
 
 @pytest.mark.parametrize(
@@ -391,7 +389,7 @@ def test_markdown_in_templates(
     ]
 )
 def test_makes_links_out_of_URLs(template_class, url, url_with_entities_replaced):
-    assert '<a style="word-wrap: break-word; color: #005ea5;" href="{}">{}</a>'.format(
+    assert '<a style="word-wrap: break-word;" href="{}">{}</a>'.format(
         url_with_entities_replaced, url_with_entities_replaced
     ) in str(template_class({'content': url, 'subject': ''}))
 
@@ -405,7 +403,7 @@ def test_makes_links_out_of_URLs(template_class, url, url_with_entities_replaced
             'Thanks\n'
         ),
         (
-            '<a style="word-wrap: break-word; color: #005ea5;"'
+            '<a style="word-wrap: break-word;"'
             ' href="https://service.example.com/accept_invite/a1b2c3d4">'
             'https://service.example.com/accept_invite/a1b2c3d4'
             '</a>'
@@ -416,7 +414,7 @@ def test_makes_links_out_of_URLs(template_class, url, url_with_entities_replaced
             'https://service.example.com/accept_invite/?a=b&c=d&'
         ),
         (
-            '<a style="word-wrap: break-word; color: #005ea5;"'
+            '<a style="word-wrap: break-word;"'
             ' href="https://service.example.com/accept_invite/?a=b&amp;c=d&amp;">'
             'https://service.example.com/accept_invite/?a=b&amp;c=d&amp;'
             '</a>'
@@ -2046,7 +2044,7 @@ def test_plain_text_email_whitespace():
     (HTMLEmailTemplate, (
         '<h2 style="Margin: 0 0 20px 0; padding: 0; font-size: 27px; '
         'line-height: 35px; font-weight: bold; color: #0B0C0C;">'
-        'Heading <a style="word-wrap: break-word; color: #005ea5;" href="https://example.com">link</a>'
+        'Heading <a style="word-wrap: break-word;" href="https://example.com">link</a>'
         '</h2>'
     )),
     (LetterPreviewTemplate, (