Improve HTML e-mails based on Litmus tests (#6301)

* Use PNG images in HTML e-mails

* Make webpack use URLs with host so fonts load inside HTML e-mails

Convert this back to a relative URL in the premailer CSS loader
since local requests are quicker

* Improve responsive design

* Add missing PNG icon

10 files changed, 33 insertions, 1 deletions

diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png
new file mode 100644
index 000000000..e62c064c8
--- /dev/null
+++ b/app/javascript/images/mailer/icon_cached.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png
new file mode 100644
index 000000000..0d2ef0cb8
--- /dev/null
+++ b/app/javascript/images/mailer/icon_done.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png
new file mode 100644
index 000000000..aae9d2bb9
--- /dev/null
+++ b/app/javascript/images/mailer/icon_email.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png
new file mode 100644
index 000000000..895b57d0a
--- /dev/null
+++ b/app/javascript/images/mailer/icon_grade.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png
new file mode 100644
index 000000000..9f62eadc2
--- /dev/null
+++ b/app/javascript/images/mailer/icon_lock_open.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png
new file mode 100644
index 000000000..3453060ae
--- /dev/null
+++ b/app/javascript/images/mailer/icon_person_add.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png
new file mode 100644
index 000000000..8bce4955c
--- /dev/null
+++ b/app/javascript/images/mailer/icon_reply.png
Binary files differdiff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png
new file mode 100644
index 000000000..1c4f33287
--- /dev/null
+++ b/app/javascript/images/mailer/logo_full.png
Binary files differdiff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png
new file mode 100644
index 000000000..8fda4f67f
--- /dev/null
+++ b/app/javascript/images/mailer/logo_transparent.png
Binary files differdiff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index b3bcc9209..dbe070f9a 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -17,7 +17,7 @@ body {
   -ms-text-size-adjust: 100%;
 }
 
-.email_body {
+.email-body {
   td,
   div,
   a,
@@ -235,6 +235,12 @@ h5 {
   color: lighten($ui-base-color, 34%);
 }
 
+.input-cell {
+  h5 {
+    margin-top: 4px;
+  }
+}
+
 .input {
   td {
     background: darken($ui-base-color, 8%);
@@ -512,3 +518,29 @@ ul {
     min-height: 1024px !important;
   }
 }
+
+@media (max-width: 697px) {
+  .email-container,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .email-start {
+    padding-top: 16px !important;
+  }
+
+  .email-end {
+    padding-bottom: 16px !important;
+  }
+
+  .padded {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}