remove much of redundant/bad html/css from emails

packages/ilmomasiina-backend/emails/css/base.css

@@ -1,58 +1,30 @@
-/* -------------------------------------
-    GLOBAL
-    A very basic CSS reset
-------------------------------------- */
-* {
+html {
   margin: 0;
-  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
-  box-sizing: border-box;
+  padding: 0;
   font-size: 14px;
-}
-
-img {
-  max-width: 100%;
-}
-
-body {
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
-  width: 100% !important;
-  height: 100%;
-  line-height: 1.6em;
-  /* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
-  /*line-height: 22px;*/
 }
-
-/* Let's make sure all tables have defaults */
-table td {
-  vertical-align: top;
-}
-
-/* -------------------------------------
-    BODY & CONTAINER
-------------------------------------- */
 body {
-  background-color: #f6f6f6;
-}
-
-.body-wrap {
-  background-color: #f6f6f6;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   width: 100%;
+  height: 100%;
+  line-height: 1.6em;
+  background-color: #f6f6f6;
 }
 
 .container {
-  display: block !important;
-  max-width: 600px !important;
-  margin: 0 auto !important;
-  /* makes it centered */
-  clear: both !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
 
 .content {
   max-width: 600px;
-  margin: 0 auto;
-  display: block;
-  padding: 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 /* -------------------------------------
@@ -79,9 +51,7 @@ body {
 
 .footer {
   width: 100%;
-  clear: both;
   color: #999;
-  padding: 20px;
 }
 .footer p,
 .footer a,
@@ -96,9 +66,8 @@ body {
 h1,
 h2,
 h3 {
-  font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   color: #000;
-  margin: 40px 0 0;
   line-height: 1.2em;
   font-weight: 400;
 }
@@ -130,110 +99,49 @@ h4 {
 p,
 ul,
 ol {
-  margin-bottom: 10px;
   font-weight: normal;
 }
 p li,
 ul li,
 ol li {
-  margin-left: 5px;
   list-style-position: inside;
 }
 
-/* -------------------------------------
-    LINKS & BUTTONS
-------------------------------------- */
 a {
   color: #348eda;
   text-decoration: underline;
 }
 
-.btn-primary {
-  text-decoration: none;
-  color: #fff;
-  background-color: #348eda;
-  border: solid #348eda;
-  border-width: 10px 20px;
-  line-height: 2em;
-  /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
-  /*line-height: 28px;*/
-  font-weight: bold;
-  text-align: center;
-  cursor: pointer;
-  display: inline-block;
-  border-radius: 5px;
-  text-transform: capitalize;
-}
-
-/* -------------------------------------
-    OTHER STYLES THAT MIGHT BE USEFUL
-------------------------------------- */
-.last {
-  margin-bottom: 0;
-}
-
-.first {
-  margin-top: 0;
-}
-
-.aligncenter {
-  text-align: center;
-}
-
-.alignright {
-  text-align: right;
-}
-
-.alignleft {
-  text-align: left;
-}
-
-.clear {
-  clear: both;
-}
-
-/* -------------------------------------
-    RESPONSIVE AND MOBILE FRIENDLY STYLES
-------------------------------------- */
 @media only screen and (max-width: 640px) {
   body {
-    padding: 0 !important;
+    padding: 0;
   }
 
   h1,
   h2,
   h3,
   h4 {
-    font-weight: 800 !important;
-    margin: 20px 0 5px !important;
+    font-weight: 800;
   }
 
   h1 {
-    font-size: 22px !important;
+    font-size: 22px;
   }
 
   h2 {
-    font-size: 18px !important;
+    font-size: 18px;
   }
 
   h3 {
-    font-size: 16px !important;
+    font-size: 16px;
   }
 
   .container {
-    padding: 0 !important;
-    width: 100% !important;
-  }
-
-  .content {
-    padding: 0 !important;
+    padding: 0;
+    width: 100%;
   }
 
   .content-wrap {
-    padding: 10px !important;
-  }
-
-  .invoice {
-    width: 100% !important;
+    padding: 10px;
   }
 }

packages/ilmomasiina-backend/emails/layout.pug

@@ -1,43 +1,30 @@
 doctype transitional
 html(lang='fi', xmlns='http://www.w3.org/1999/xhtml')
-	head
-		meta(name='viewport', content='width-device-width')
-		meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
-		title Ilmomasiina
-		link(href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet')
-		link(href='base.css', rel='stylesheet', data-inline='data-inline')
-		link(href='header.css', rel='stylesheet', data-inline='data-inline')
-		link(href='footer.css' rel='stylesheet' data-inline='data-inline')
-		link(href='content.css' rel='stylesheet' data-inline='data-inline')
-		block headContent
-	body(itemscope, itemtype='http://schema.org/EmailMessage')
-		table.body-wrap
-			tr
-				td
-				td(class='container', width='600')
-					div.content
-						table(class='header', width='100%', cellpadding='0', cellspacing='0')
-							tr
-								td(class='align-center content-block')
-									block headerContent
-										h1.headerTitle Ilmomasiina
-					div.content
-						table(class='main', width='100%', cellpadding='0', cellspacing='0')
-							tr
-								td(class='alert alert-good')
-									p.alertText #{topText}
-							tr
-								td.content-wrap
-									table(width='100%', cellpadding='0', cellspacing='0')
-										block mainContent
-						if branding.footerText || branding.footerLink
-							div.footer
-								table(width='100%')
-									tr
-										td(class='align-center content-block')
-											block footerContent
-												if branding.footerText
-													p.footerText #{branding.footerText}
-												if branding.footerLink
-													p.footerText
-														a.footerLink(href=branding.footerLink) #{branding.footerLink.replace(/^https?:\/\//, '')}
+  head
+    meta(name='viewport', content='width-device-width')
+    meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
+    title Ilmomasiina
+    link(href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet')
+    link(href='base.css', rel='stylesheet', data-inline='data-inline')
+    link(href='header.css', rel='stylesheet', data-inline='data-inline')
+    link(href='footer.css' rel='stylesheet' data-inline='data-inline')
+    link(href='content.css' rel='stylesheet' data-inline='data-inline')
+    block headContent
+  body(itemscope, itemtype='http://schema.org/EmailMessage')
+    div.container
+      div.content
+        block headerContent
+          h1.headerTitle Ilmomasiina
+      div.content
+        div(class='alert alert-good')
+          p.alertText #{topText}
+        div.content-wrap.main
+          block mainContent
+        if branding.footerText || branding.footerLink
+          div.footer
+            block footerContent
+              if branding.footerText
+                p.footerText #{branding.footerText}
+              if branding.footerLink
+                p.footerText
+                  a.footerLink(href=branding.footerLink) #{branding.footerLink.replace(/^https?:\/\//, '')}

packages/ilmomasiina-backend/package.json

@@ -18,7 +18,7 @@
   },
   "betterScripts": {
     "start:dev": {
-      "command": "ts-node-dev -r tsconfig-paths/register --respawn --project tsconfig.json src/bin/server.ts",
+      "command": "ts-node-dev -r tsconfig-paths/register --respawn --project tsconfig.json src/bin/server.ts --watch emails",
       "env": {
         "NODE_ENV": "development",
         "DEBUG": "app:*",

packages/ilmomasiina-backend/src/mail/config.ts

@@ -48,6 +48,8 @@ const mailTransporter: Transporter = (() => {
       });
       input.on('end', () => {
         console.log(data);
+        // temporary writefile
+        // writeFile('emails/mail.html', mail.data.html as string, (err) => console.log(err));
         callback(null, { envelope, messageId } as any);
       });
     },