From 24fb601739c9c527ae999cc4c74608678c325322 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 17 Sep 2019 15:17:36 +0100
Subject: [PATCH] clean up email template

---
 .../middleware/email/templates/signup.html    | 107 +++++-------------
 1 file changed, 27 insertions(+), 80 deletions(-)
diff --git a/backend/src/middleware/email/templates/signup.html b/backend/src/middleware/email/templates/signup.html
index fd286a553..9acdd8887 100644
--- a/backend/src/middleware/email/templates/signup.html
+++ b/backend/src/middleware/email/templates/signup.html
@@ -3,37 +3,27 @@
   xmlns:o="urn:schemas-microsoft-com:office:office">
 
 <head>
-  <meta charset="utf-8"> <!-- utf-8 works for most cases -->
-  <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
-  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
-  <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
   <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
-  <!-- Tell iOS not to automatically link certain text strings. -->
-  <title>Welcome to Human Connection</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
+  <title>Welcome to Human Connection</title>
 
-  <!-- Web Font / @font-face : BEGIN -->
-  <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
-
-  <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
   <!--[if mso]>
-        <style>
-            * {
-                font-family: Lato, sans-serif !important;
-            }
-        </style>
-    <![endif]-->
+    <style>
+        * {
+          font-family: sans-serif !important;
+        }
+    </style>
+  <![endif]-->
 
-  <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
   <!--[if !mso]><!-->
-  <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> -->
+  <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
   <!--<![endif]-->
 
-  <!-- Web Font / @font-face : END -->
-
-  <!-- CSS Reset : BEGIN -->
+  <!-- CSS RESETS -->
   <style>
-    /* What it does: Remove spaces around the email design added by some email clients. */
-    /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
     html,
     body {
       margin: 0 !important;
@@ -42,25 +32,21 @@
       width: 100% !important;
     }
 
-    /* What it does: Stops email clients resizing small text. */
     * {
       -ms-text-size-adjust: 100%;
       -webkit-text-size-adjust: 100%;
     }
 
-    /* What it does: Centers email on Android 4.4 */
     div[style*="margin: 16px 0"] {
       margin: 0 !important;
     }
 
-    /* What it does: Stops Outlook from adding extra spacing to tables. */
     table,
     td {
       mso-table-lspace: 0pt !important;
       mso-table-rspace: 0pt !important;
     }
 
-    /* What it does: Fixes webkit padding issue. */
     table {
       border-spacing: 0 !important;
       border-collapse: collapse !important;
@@ -68,12 +54,10 @@
       margin: 0 auto !important;
     }
 
-    /* What it does: Uses a better rendering method when resizing images in IE. */
     img {
       -ms-interpolation-mode: bicubic;
     }
 
-    /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
     a {
       text-decoration: none;
     }
@@ -82,9 +66,7 @@
       text-decoration: underline;
     }
 
-    /* What it does: A work-around for email clients meddling in triggered links. */
     a[x-apple-data-detectors],
-    /* iOS */
     .unstyle-auto-detected-links a,
     .aBn {
       border-bottom: 0 !important;
@@ -97,25 +79,19 @@
       line-height: inherit !important;
     }
 
-    /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
     .a6S {
       display: none !important;
       opacity: 0.01 !important;
     }
 
-    /* What it does: Prevents Gmail from changing the text color in conversation threads. */
     .im {
       color: inherit !important;
     }
 
-    /* If the above doesn't work, add a .g-img class to any image in question. */
     img.g-img+div {
       display: none !important;
     }
 
-    /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
-    /* Create one of these media queries for each additional viewport size you'd like to fix */
-
     /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
     @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
       u~div .email-container {
@@ -138,7 +114,6 @@
     }
   </style>
 
-  <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
   <!--[if gte mso 9]>
     <xml>
         <o:OfficeDocumentSettings>
@@ -148,11 +123,8 @@
     </xml>
     <![endif]-->
 
-  <!-- CSS Reset : END -->
-
-  <!-- Progressive Enhancements : BEGIN -->
+  <!-- PROGRESSIVE ENHANCEMENTS -->
   <style>
-    /* What it does: Hover styles for buttons */
     .button-td,
     .button-a {
       transition: all 100ms ease-in;
@@ -164,70 +136,45 @@
       border-color: #555555 !important;
     }
 
-    /* Media Queries */
     @media screen and (max-width: 600px) {
-
-      /* What it does: Adjust typography on small screens to improve readability */
       .email-container p {
         font-size: 17px !important;
       }
-
     }
   </style>
-  <!-- Progressive Enhancements : END -->
-
 </head>
-<!--
-	The email background color (#faf9fa) is defined in three places:
-	1. body tag: for most email clients
-	2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
-	3. mso conditional: For Windows 10 Mail
--->
 
 <body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f5f4f6;">
   <center style="width: 100%; background-color: #f5f4f6;">
     <!--[if mso | IE]>
-    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
-    <tr>
-    <td>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
+        <tr>
+          <td>
     <![endif]-->
 
-    <!-- Visually Hidden Preheader Text : BEGIN -->
+    <!-- VISUALLY HIDDEN PRE-HEADER TEXT -->
     <div
       style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
       Here is your signup link.
     </div>
-    <!-- Visually Hidden Preheader Text : END -->
-
-    <!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
-    <!-- Preview Text Spacing Hack : BEGIN -->
     <div
       style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
       &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;<br>
     </div>
-    <!-- Preview Text Spacing Hack : END -->
 
-    <!--
-            Set the email width. Defined in two places:
-            1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
-            2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-        -->
     <div style="max-width: 600px; margin: 0 auto;" class="email-container">
       <!--[if mso]>
-            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
-            <tr>
+        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
+          <tr>
             <td>
-            <![endif]-->
+      <![endif]-->
 
-      <!-- Email Body : BEGIN -->
       <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
         style="margin: auto;">
-        <!-- Email Header : BEGIN -->
         <tr>
           <td style="padding: 20px 0; text-align: center">
           </td>
         </tr>
-        <!-- Email Header : END -->
 
         <!-- Hero Image, Flush : BEGIN -->
         <tr>
@@ -354,15 +301,15 @@
 
       <!--[if mso]>
             </td>
-            </tr>
-            </table>
-            <![endif]-->
+          </tr>
+        </table>
+      <![endif]-->
     </div>
 
     <!--[if mso | IE]>
-    </td>
-    </tr>
-    </table>
+          </td>
+        </tr>
+      </table>
     <![endif]-->
   </center>
 </body>
