🎨 Add fancy html emails

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

lib/mobilizon/config.ex

@@ -6,9 +6,6 @@ defmodule Mobilizon.Config do
   @spec instance_config :: keyword
   def instance_config, do: Application.get_env(:mobilizon, :instance)
 
-  @spec instance_url :: String.t()
-  def instance_url, do: instance_config()[:instance]
-
   @spec instance_name :: String.t()
   def instance_name, do: instance_config()[:name]
 

lib/mobilizon_web/email/admin.ex

@@ -5,7 +5,7 @@ defmodule MobilizonWeb.Email.Admin do
 
   use Bamboo.Phoenix, view: MobilizonWeb.EmailView
 
-  import Bamboo.{Email, Phoenix}
+  import Bamboo.Phoenix
 
   import MobilizonWeb.Gettext
 
@@ -19,20 +19,17 @@ defmodule MobilizonWeb.Email.Admin do
   def report(%User{email: email}, %Report{} = report, locale \\ "en") do
     Gettext.put_locale(locale)
 
-    instance_url = Config.instance_url()
-
     subject =
       gettext(
-        "Mobilizon: New report on instance %{instance}",
-        instance: instance_url
+        "New report on Mobilizon instance %{instance}",
+        instance: Config.instance_name()
       )
 
-    Email.base_email()
-    |> to(email)
-    |> subject(subject)
-    |> put_header("Reply-To", Config.instance_email_reply_to())
+    Email.base_email(to: email, subject: subject)
+    |> assign(:locale, locale)
+    |> assign(:subject, subject)
     |> assign(:report, report)
-    |> assign(:instance, instance_url)
-    |> render(:report)
+    |> render("report.html")
+    |> Email.premail()
   end
 end

lib/mobilizon_web/email/email.ex

@@ -7,11 +7,24 @@ defmodule MobilizonWeb.Email do
 
   alias Mobilizon.Config
 
-  @spec base_email :: Bamboo.Email.t()
-  def base_email do
-    new_email()
+  @spec base_email(keyword()) :: Bamboo.Email.t()
+  def base_email(args) do
+    instance = Config.instance_config()
+
+    new_email(args)
     |> from(Config.instance_email_from())
+    |> put_header("Reply-To", Config.instance_email_reply_to())
+    |> assign(:instance, instance)
     |> put_html_layout({MobilizonWeb.EmailView, "email.html"})
-    |> put_text_layout({MobilizonWeb.EmailView, "email.text"})
+    |> put_text_layout(false)
+  end
+
+  def premail(email) do
+    html = Premailex.to_inline_css(email.html_body)
+    text = Premailex.to_text(email.html_body)
+
+    email
+    |> html_body(html)
+    |> text_body(text)
   end
 end

lib/mobilizon_web/email/user.ex

@@ -5,7 +5,7 @@ defmodule MobilizonWeb.Email.User do
 
   use Bamboo.Phoenix, view: MobilizonWeb.EmailView
 
-  import Bamboo.{Email, Phoenix}
+  import Bamboo.Phoenix
 
   import MobilizonWeb.Gettext
 
@@ -21,21 +21,18 @@ defmodule MobilizonWeb.Email.User do
       ) do
     Gettext.put_locale(locale)
 
-    instance_url = Config.instance_url()
-
     subject =
       gettext(
-        "Mobilizon: Confirmation instructions for %{instance}",
-        instance: instance_url
+        "Instructions to confirm your Mobilizon account on %{instance}",
+        instance: Config.instance_name()
       )
 
-    Email.base_email()
-    |> to(email)
-    |> subject(subject)
-    |> put_header("Reply-To", Config.instance_email_reply_to())
+    Email.base_email(to: email, subject: subject)
+    |> assign(:locale, locale)
     |> assign(:token, confirmation_token)
-    |> assign(:instance, instance_url)
-    |> render(:registration_confirmation)
+    |> assign(:subject, subject)
+    |> render("registration_confirmation.html")
+    |> Email.premail()
   end
 
   @spec reset_password_email(User.t(), String.t()) :: Bamboo.Email.t()
@@ -45,20 +42,17 @@ defmodule MobilizonWeb.Email.User do
       ) do
     Gettext.put_locale(locale)
 
-    instance_url = Config.instance_url()
-
     subject =
       gettext(
-        "Mobilizon: Reset your password on %{instance} instructions",
-        instance: instance_url
+        "Instructions to reset your password on %{instance}",
+        instance: Config.instance_name()
       )
 
-    Email.base_email()
-    |> to(email)
-    |> subject(subject)
-    |> put_header("Reply-To", Config.instance_email_reply_to())
+    Email.base_email(to: email, subject: subject)
+    |> assign(:locale, locale)
     |> assign(:token, reset_password_token)
-    |> assign(:instance, instance_url)
-    |> render(:password_reset)
+    |> assign(:subject, subject)
+    |> render("password_reset.html")
+    |> Email.premail()
   end
 end

lib/mobilizon_web/templates/email/email.html.eex

@@ -1,10 +1,138 @@
-<html>
-  <head>
-    <link rel="stylesheet" href="<%= static_url(MobilizonWeb.Endpoint, "/css/email.css") %>">
-  </head>
-  <body>
-    <%= render @view_module, @view_template, assigns %>
+<!-- THIS EMAIL WAS BUILT AND TESTED WITH LITMUS http://litmus.com -->
+<!-- IT WAS RELEASED UNDER THE MIT LICENSE https://opensource.org/licenses/MIT -->
+<!-- QUESTIONS? TWEET US @LITMUSAPP -->
+<!DOCTYPE html>
+<html lang="<%= @locale %>">
+<head>
+<title><%= @subject %></title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<style type="text/css">
+    /* CLIENT-SPECIFIC STYLES */
+    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+    img { -ms-interpolation-mode: bicubic; }
 
-    <p><%= gettext "An email sent by Mobilizon on %{instance}.", instance: @instance %></p>
-  </body>
+    /* RESET STYLES */
+    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
+    table { border-collapse: collapse !important; }
+    body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
+
+    /* iOS BLUE LINKS */
+    a[x-apple-data-detectors] {
+        color: inherit !important;
+        text-decoration: none !important;
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+    }
+
+    /* MOBILE STYLES */
+    @media screen and (max-width:600px){
+        h1 {
+            font-size: 32px !important;
+            line-height: 32px !important;
+        }
+    }
+
+    /* ANDROID CENTER FIX */
+    div[style*="margin: 16px 0;"] { margin: 0 !important; }
+</style>
+</head>
+<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
+<!-- HIDDEN PREHEADER TEXT -->
+<!--<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
+    Looks like you tried signing in a few too many times. Let's see if we can get you back into your account.
+</div>-->
+<table border="0" cellpadding="0" cellspacing="0" width="100%">
+    <!-- LOGO -->
+    <tr>
+        <td bgcolor="#424056" align="center">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+                <tr>
+                    <td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
+                        <a href="<%= MobilizonWeb.Endpoint.url() %>" target="_blank">
+                            <img alt="Logo" src="<%= "#{MobilizonWeb.Endpoint.url()}/img/mobilizon_logo.png" %>" width="366" height="108" style="display: block; width: 366px; max-width: 366px; min-width: 366px; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0">
+                        </a>
+                    </td>
+                </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <%= render @view_module, @view_template, assigns %>
+    <!-- SUPPORT CALLOUT -->
+        <tr>
+            <td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
+                <!--[if (gte mso 9)|(IE)]>
+                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+                <tr>
+                <td align="center" valign="top" width="600">
+                <![endif]-->
+                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+                    <!-- HEADLINE -->
+                    <tr>
+                      <td bgcolor="#C6C2ED" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                        <h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">
+                            <%= gettext "Need some help? Something not working properly?" %>
+                        </h2>
+                        <p style="margin: 0;"><a href="https://framacolibri.org/c/mobilizon" target="_blank" style="color: #424056;">
+                            <%= gettext "Ask the community on Framacolibri" %>
+                        </a></p>
+                      </td>
+                    </tr>
+                </table>
+                <!--[if (gte mso 9)|(IE)]>
+                </td>
+                </tr>
+                </table>
+                <![endif]-->
+            </td>
+        </tr>
+    <!-- FOOTER -->
+    <tr>
+        <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+              <!-- UNSUBSCRIBE -->
+              <!--<tr>
+                <td bgcolor="#f4f4f4" align="left" style="padding: 30px 30px 30px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;" >
+                  <p style="margin: 0;">If these emails get annoying, please feel free to <a href="http://litmus.com" target="_blank" style="color: #111111; font-weight: 700;">unsubscribe</a>.</p>
+                </td>
+              </tr>-->
+              <!-- ADDRESS -->
+              <tr>
+                <td bgcolor="#f4f4f4" align="center" style="padding: 0px 30px 30px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;" >
+                  <p style="margin: 0;">
+                  <%= gettext "%{instance} is a Mobilizon server.", instance: @instance[:name] %>
+                  <a href="https://joinmobilizon.org"><%= gettext "Learn more about Mobilizon." %></a>
+                  </p>
+                </td>
+              </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+</table>
+
+</body>
 </html>

lib/mobilizon_web/templates/email/password_reset.html.eex

@@ -1,5 +1,105 @@
-<h1><%= gettext "Password reset" %></h1>
-<p><%= gettext "You requested a new password for your account on %{host}.", host: @instance  %></p>
-<p><%= gettext "If you didn't request this, please ignore this email. Your password won't change until you access the link below and create a new one." %></p>
-
-<p><%= link "Change password", to: MobilizonWeb.Endpoint.url() <> "/password-reset/#{@token}", target: "_blank" %></p>
+<!-- HERO -->
+    <tr>
+        <td bgcolor="#424056" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+                <tr>
+                    <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
+                      <h1 style="font-size: 48px; font-weight: 400; margin: 0;">
+                      <%= gettext "Trouble signing in?" %>
+                      </h1>
+                    </td>
+                </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <!-- COPY BLOCK -->
+    <tr>
+        <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+              <!-- COPY -->
+              <tr>
+                <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                  <p style="margin: 0;">
+                    <%= gettext "You requested a new password for your account on %{server}.", server: @instance[:name] %>
+                  </p>
+                  <p style="margin: 0">
+                    <%= gettext "Resetting your password is easy. Just press the button below and follow the instructions. We'll have you up and running in no time." %>
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #777777; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px;" >
+                  <p style="margin: 0">
+                    <%= gettext "If you didn't request this, please ignore this email. Your password won't change until you access the link below and create a new one." %>
+                  </p>
+                </td>
+              </tr>
+              <!-- BULLETPROOF BUTTON -->
+              <tr>
+                <td bgcolor="#ffffff" align="left">
+                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
+                    <tr>
+                      <td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
+                        <table border="0" cellspacing="0" cellpadding="0">
+                          <tr>
+                              <td align="center" style="border-radius: 3px;" bgcolor="#424056"><a href="<%= "#{MobilizonWeb.Endpoint.url()}/password-reset/#{@token}" %>" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #424056; display: inline-block;">
+                              <%= gettext "Reset Password" %>
+                              </a></td>
+                          </tr>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <!-- SUPPORT CALLOUT -->
+    <tr>
+        <td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+                <!-- HEADLINE -->
+                <tr>
+                  <td bgcolor="#C6C2ED" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                    <h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">
+                        <%= gettext "Need some help? Something not working properly?" %>
+                    </h2>
+                    <p style="margin: 0;"><a href="https://framacolibri.org/c/mobilizon" target="_blank" style="color: #424056;">
+                        <%= gettext "Ask the community on Framacolibri" %>
+                    </a></p>
+                  </td>
+                </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>

lib/mobilizon_web/templates/email/password_reset.text.eex

@@ -1,11 +0,0 @@
-<%= gettext "Password reset" %>
-
-==
-
-<%= gettext "You requested a new password for your account on %{host}.", host: @instance %>
-
-<%= gettext "If you didn't request this, please ignore this email. Your password won't change until you access the link below and create a new one." %>
-
-<%= MobilizonWeb.Endpoint.url() <> "/password-reset/#{@token}" %>
-
-

lib/mobilizon_web/templates/email/registration_confirmation.html.eex

@@ -1,4 +1,74 @@
-<h1><%= gettext "Confirm the email address" %></h1>
-<p><%= gettext "You created an account on %{host} with this email address. You are one click away from activating it. If this wasn't you, please ignore this email.", host: @instance %></p>
-
-<p><%= link "Confirm your email address", to: MobilizonWeb.Endpoint.url() <> "/validate/#{@token}", target: "_blank" %></p>
+<!-- HERO -->
+    <tr>
+        <td bgcolor="#424056" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+                <tr>
+                    <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
+                      <h1 style="font-size: 48px; font-weight: 400; margin: 0;">
+                      <%= gettext "Nearly here!" %>
+                      </h1>
+                    </td>
+                </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <!-- COPY BLOCK -->
+    <tr>
+        <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+              <!-- COPY -->
+              <tr>
+                <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                  <p style="margin: 0;">
+                    <%= gettext "You created an account on %{host} with this email address. You are one click away from activating it.", host: @instance[:name] %>
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #777777; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px;" >
+                  <p style="margin: 0">
+                    <%= gettext "If you didn't request this, please ignore this email." %>
+                  </p>
+                </td>
+              </tr>
+              <!-- BULLETPROOF BUTTON -->
+              <tr>
+                <td bgcolor="#ffffff" align="left">
+                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
+                    <tr>
+                      <td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
+                        <table border="0" cellspacing="0" cellpadding="0">
+                          <tr>
+                              <td align="center" style="border-radius: 3px;" bgcolor="#424056"><a href="<%= "#{MobilizonWeb.Endpoint.url()}/validate/#{@token}" %>" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #424056; display: inline-block;">
+                              <%= gettext "Activate my account" %>
+                              </a></td>
+                          </tr>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>

lib/mobilizon_web/templates/email/registration_confirmation.text.eex

@@ -1,9 +0,0 @@
-<%= gettext "Confirm the email address" %>
-
-==
-
-<%= gettext "You created an account on %{host} with this email address. You are one click away from activating it. If this wasn't you, please ignore this email.", host: @instance %>
-
-<%= MobilizonWeb.Endpoint.url() <> "/validate/#{@token}" %>
-
-

lib/mobilizon_web/templates/email/report.html.eex

@@ -1,15 +1,116 @@
-<h1><%= gettext "New report from %{reporter} on %{instance}", reporter: @report.reporter.preferred_username, instance: @instance %></h1>
-
-<% if @report.event do %>
-<p><%= gettext "Event: %{event}", event: @report.event.title %></p>
-<% end %>
-
-<%= for comment <- @report.comments do %>
-<p><%= gettext "Comment: %{comment}", comment: comment %></p>
-<% end %>
-
-<% if @report.content do %>
-<p><%= gettext "Reason: %{content}", event: @report.content %></p>
-<% end %>
-
-<p><%= link "View the report", to: moderation_report_url(MobilizonWeb.Endpoint, :index, @report.id), target: "_blank" %></p>
+<!-- HERO -->
+    <tr>
+        <td bgcolor="#424056" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+                <tr>
+                    <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
+                      <h1 style="font-size: 48px; font-weight: 400; margin: 0;">
+                      <%= gettext "New report on %{instance}", instance: @instance[:name] %>
+                      </h1>
+                    </td>
+                </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>
+    <!-- COPY BLOCK -->
+    <tr>
+        <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
+            <!--[if (gte mso 9)|(IE)]>
+            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
+            <tr>
+            <td align="center" valign="top" width="600">
+            <![endif]-->
+            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
+              <!-- COPY -->
+              <tr>
+                <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                  <p style="margin: 0;">
+                    <%= gettext "%{reporter_name} (%{reporter_username}) reported the following content.", reporter_name: @report.reporter.name, reporter_username: Mobilizon.Actors.Actor.preferred_username_and_domain(@report.reporter) %>
+                  </p>
+                </td>
+              </tr>
+              <%= if Map.has_key?(@report, :event) do %>
+                <tr>
+                  <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                    <p style="margin: 0;">
+                      <h3><%= gettext "Event" %></h3>
+                      <a href="<%= "#{MobilizonWeb.Endpoint.url()}/events/#{@report.event.uuid}" %>" target="_blank">
+                        <%= gettext "%{title} by %{creator}", title: @report.event.title, creator: Mobilizon.Actors.Actor.preferred_username_and_domain(@report.reported) %>
+                      </a>
+                    </p>
+                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
+                      <tr>
+                        <td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              <% end %>
+              <%= if Map.has_key?(@report, :comments) && length(@report.comments) > 0 do %>
+              <tr>
+              <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                <p><%= gettext "Comments" %></p>
+                <%= for comment <- @report.comments do %>
+                  <p style="margin: 0;">
+                    <%= comment.text %>
+                  </p>
+                <% end %>
+                <table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
+                  <tr>
+                    <td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
+                  </tr>
+                </table>
+              </td>
+              </tr>
+              <% end %>
+              <%= if Map.has_key?(@report, :content) do %>
+                <tr>
+                  <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
+                    <p style="margin: 0">
+                      <h3><%= gettext "Reason" %></h3>
+                      <%= @report.content %>
+                    </p>
+                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
+                      <tr>
+                        <td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              <% end %>
+              <!-- BULLETPROOF BUTTON -->
+              <tr>
+                <td bgcolor="#ffffff" align="left">
+                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
+                    <tr>
+                      <td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
+                        <table border="0" cellspacing="0" cellpadding="0">
+                          <tr>
+                              <td align="center" style="border-radius: 3px;" bgcolor="#424056"><a href="<%= moderation_report_url(MobilizonWeb.Endpoint, :index, @report.id) %>" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #424056; display: inline-block;">
+                              <%= gettext "View the report" %>
+                              </a></td>
+                          </tr>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+            <!--[if (gte mso 9)|(IE)]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </td>
+    </tr>

lib/mobilizon_web/templates/email/report.text.eex

@@ -1,19 +0,0 @@
-<%= gettext "New report from %{reporter} on %{instance}", reporter: @report.reporter.preferred_username, instance: @instance %>
-
---
-
-<% if @report.event do %>
-    <%= gettext "Event: %{event}", event: @report.event.title %>
-<% end %>
-
-<%= for comment <- @report.comments do %>
-<%= gettext "Comment: %{comment}", comment: comment.text %>
-<% end %>
-
-<% if @report.content do %>
-<%= gettext "Reason: %{content}", event: @report.content %>
-<% end %>
-
-View the report: <%= moderation_report_url(MobilizonWeb.Endpoint, :index, @report.id) %>
-
-