Merge pull request #256 from AyuntamientoMadrid/improve_emails

Improve emails

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -1,5 +1,18 @@
-<p><%= t("devise_views.mailer.confirmation_instructions.welcome") %> <%= @email %></p>
+<td style="padding-bottom: 20px; padding-left: 10px;">
 
-<p><%= t("devise_views.mailer.confirmation_instructions.text") %></p>
+  <h1 style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;">
+    <%= t("devise_views.mailer.confirmation_instructions.title") %>
+  </h1>
 
-<p><%= link_to t("devise_views.mailer.confirmation_instructions.confirm_link"), confirmation_url(@resource, confirmation_token: @token) %></p>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.confirmation_instructions.welcome") %> <strong><%= @email %></strong>
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.confirmation_instructions.text") %>
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= link_to t("devise_views.mailer.confirmation_instructions.confirm_link"), confirmation_url(@resource, confirmation_token: @token), style: "color: #2895F1; text-decoration:none;" %>
+  </p>
+</td>

app/views/devise/mailer/reset_password_instructions.html.erb

@@ -1,8 +1,22 @@
-<p><%= t("devise_views.mailer.reset_password_instructions.hello") %> <%= @resource.email %></p>
+<td style="padding-bottom: 20px; padding-left: 10px;">
 
-<p><%= t("devise_views.mailer.reset_password_instructions.text") %></p>
+  <h1 style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;">
+    <%= t("devise_views.mailer.reset_password_instructions.title") %>
+  </h1>
 
-<p><%= link_to t("devise_views.mailer.reset_password_instructions.change_link"), edit_password_url(@resource, reset_password_token: @token) %></p>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.reset_password_instructions.hello") %> <strong><%= @resource.email %></strong>
+  </p>
 
-<p><%= t("devise_views.mailer.reset_password_instructions.ignore_text") %></p>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
-<p><%= t("devise_views.mailer.reset_password_instructions.info_text") %></p>
+    <%= t("devise_views.mailer.reset_password_instructions.text") %>
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= link_to t("devise_views.mailer.reset_password_instructions.change_link"), edit_password_url(@resource, reset_password_token: @token), style: "color: #2895F1; text-decoration:none;" %>
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.reset_password_instructions.ignore_text") %> <%= t("devise_views.mailer.reset_password_instructions.info_text") %>
+  </p>
+</td>

app/views/devise/mailer/unlock_instructions.html.erb

@@ -1,7 +1,22 @@
-<p><%= t("devise_views.mailer.unlock_instructions.hello") %> <%= @resource.email %></p>
+<td style="padding-bottom: 20px; padding-left: 10px;">
 
-<p><%= t("devise_views.mailer.unlock_instructions.info_text") %></p>
+  <h1 style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;">
+    <%= t("devise_views.mailer.unlock_instructions.title") %>
+  </h1>
 
-<p><%= t("devise_views.mailer.unlock_instructions.instructions_text") %></p>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.unlock_instructions.hello") %> <strong><%= @resource.email %></strong>
+  </p>
 
-<p><%= link_to t("devise_views.mailer.unlock_instructions.unlock_link"), unlock_url(@resource, unlock_token: @token) %></p>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.unlock_instructions.info_text") %>
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("devise_views.mailer.unlock_instructions.instructions_text") %>
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= link_to t("devise_views.mailer.unlock_instructions.unlock_link"), unlock_url(@resource, unlock_token: @token), style: "color: #2895F1; text-decoration:none;" %>
+  </p>
+</td>

app/views/layouts/mailer.html.erb

@@ -1,5 +1,42 @@
-<html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-  <body>
+<html lang="es">
-    <%= yield %>
+<head>
-  </body>
+  <title>Gobierno abierto</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=10.0"/>
+</head>
+<body style="background: #fff; font-family:font-family: 'Open Sans','Helvetica Neue',arial,sans-serif !important; margin: 0 10px; padding: 0; text-align: left;">
+
+  <table cellpadding="0" cellspacing="0" border="0" style="background: #fff; margin: 0 auto; max-width: 700px; width:100%;">
+    <tr>
+      <td>
+        <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
+          <tr>
+            <td style="border-bottom: 1px solid #dadfe1; padding: 20px 0;">
+              <a href="#" target="_blank">
+                <%= image_tag('logo_email_gobierno_abierto.png',  style: "border: 0; display: block; width: 100%;max-width: 370px") %>
+              </a>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+    <tr>
+      <%= yield %>
+    </tr>
+  </table>
+
+  <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto; max-width: 700px; width:100%; margin-bottom: 40px; padding: 0 20px;">
+    <tbody>
+    <tr>
+      <td style="text-align: center; border-top: 1px solid #dadfe1; padding-top: 20px;">
+        <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif; margin: 0;padding: 0;line-height: 1.5em;color: #797f7f; font-size: 12px;">
+          <a href="#" style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;margin: 0;padding: 0;color: #398fd1;text-decoration: none;">Preguntas frecuentes</a>&nbsp;<span style="color:#398fd1;">&bullet;</span>&nbsp;<a href="mailto:#" style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;margin: 0;padding: 0;color: #398fd1;text-decoration: none;">tec.gobiernoabierto@madrid.es</a></p>
+        <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif; margin: 0;padding: 0;line-height: 1.5em;color: #797f7f; font-size: 12px;">
+        &copy; 2015 Ayuntamiento de Madrid</p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</body>
 </html>

app/views/mailer/comment.html.erb

@@ -1,6 +1,18 @@
-<%= t('mailers.comment.hi', recipient: @debate.author.name) %>
+<td style="padding-bottom: 20px; padding-left: 10px;">
 
-<div><%= link_to @debate.title, debate_url(@debate) %></div>
+  <h1 style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;">
-<div><%= t('mailers.comment.new_comment_by', commenter: @comment.author.name) %></div>
+    <%= t("mailers.comment.title") %>
+  </h1>
 
-<div><%= @comment.body %></div>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("mailers.comment.hi") %> <strong><%= @debate.author.name %></strong>,
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("mailers.comment.new_comment_by_html", commenter: @comment.author.name) %> <%= link_to @debate.title, debate_url(@debate), style: "color: #2895F1; text-decoration:none;" %>
+  </p>
+
+  <p style="border-left: 2px solid #DEE0E3;font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-style: italic;font-weight: normal;line-height: 24px;margin-left: 20px;padding: 10px;">
+    <%= @comment.body %>
+  </p>
+</td>

app/views/mailer/reply.html.erb

@@ -1,6 +1,18 @@
-<%= t('mailers.reply.hi', recipient: @recipient.name) %>
+<td style="padding-bottom: 20px; padding-left: 10px;">
 
-<div><%= link_to @debate.title, debate_url(@debate) %></div>
+  <h1 style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;">
-<div><%= t('mailers.reply.new_reply_by', commenter: @reply.author.name) %></div>
+    <%= t("mailers.reply.title") %>
+  </h1>
 
-<div><%= @reply.body %></div>
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("mailers.reply.hi") %> <strong><%= @recipient.name %></strong>,
+  </p>
+
+  <p style="font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-weight: normal;line-height: 24px;">
+    <%= t("mailers.reply.new_reply_by_html", commenter: @reply.author.name) %> <%= link_to @debate.title, debate_url(@debate), style: "color: #2895F1; text-decoration:none;" %>
+  </p>
+
+  <p style="border-left: 2px solid #DEE0E3;font-family: 'Open Sans','Helvetica Neue',arial,sans-serif;font-size: 14px;font-style: italic;font-weight: normal;line-height: 24px;margin-left: 20px;padding: 10px;">
+    <%= @reply.body %>
+  </p>
+</td>

config/environments/development.rb

@@ -16,6 +16,7 @@ Rails.application.configure do
   # Don't care if the mailer can't send.
   config.action_mailer.raise_delivery_errors = false
   config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
+  config.action_mailer.asset_host = "http://localhost:3000"
 
   # Deliver emails to a development mailbox at /letter_opener
   config.action_mailer.delivery_method = :letter_opener

config/initializers/devise.rb

@@ -266,3 +266,7 @@ Devise.setup do |config|
   # so you need to do it manually. For the users scope, it would be:
   # config.omniauth_path_prefix = '/my_engine/users/auth'
 end
+
+Rails.application.config.to_prepare do
+  Devise::Mailer.layout "mailer" # email.haml or email.erb
+end

config/locales/devise_views.en.yml

@@ -6,17 +6,20 @@ en:
       submit: "Resend confirmation instructions"
     mailer:
       confirmation_instructions:
+        title: "Welcome to open government"
         welcome: "Welcome"
         text: "You can confirm your account email through the link below:"
         confirm_link: "Confirm my account"
       reset_password_instructions:
         hello: "Hello"
-        text: "Someone has requested a link to change your password. You can do this through the link below."
+        title: Change your password
+        text: "Someone has requested to change your password. You can do this through the link below:"
         change_link: "Change my password"
         ignore_text: "If you didn't request this, please ignore this email."
         info_text: "Your password won't change until you access the link above and create a new one."
       unlock_instructions:
         hello: "Hello"
+        title: Your account has been locked
         info_text: "Your account has been locked due to an excessive number of unsuccessful sign in attempts."
         instructions_text: "Click the link below to unlock your account:"
         unlock_link: "Unlock my account"

config/locales/devise_views.es.yml

@@ -6,17 +6,20 @@ es:
       submit: "Reenviar instrucciones de confirmación"
     mailer:
       confirmation_instructions:
-        welcome: "Bienvenido"
+        title: "Bienvenido/a a gobierno abierto"
+        welcome: "Bienvenido/a"
         text: "Puedes confirmar tu cuenta de correo electrónico en el siguiente enlace:"
         confirm_link: "Confirmar mi cuenta"
       reset_password_instructions:
         hello: "Hola"
-        text: "Se ha solicitado un enlace para cambiar tu contraseña, puedes hacerlo en el siguiente enlace:"
+        title: "Cambiar tu contraseña"
-        change_link: "cambiar mi contraseña"
+        text: "Se ha solicitado cambiar tu contraseña, puedes hacerlo en el siguiente enlace:"
-        ignore_text: "Si tu no lo has solicitado, puedes ignorar este email"
+        change_link: "Cambiar mi contraseña"
+        ignore_text: "Si tu no lo has solicitado, puedes ignorar este email."
         info_text: "Tu contraseña no cambiará hasta que no accedas al enlace y la modifiques."
       unlock_instructions:
         hello: "Hola"
+        title: Tu cuenta ha sido bloqueada
         info_text: "Tu cuenta ha sido bloqueada debido a un excesivo número de intentos fallidos de alta."
         instructions_text: "Sigue el siguiente enlace para desbloquear tu cuenta:"
         unlock_link: "Desbloquear mi cuenta"

config/locales/mailers.en.yml

@@ -1,8 +1,10 @@
 en:
   mailers:
     comment:
-      hi: "Hello, %{recipient}"
+      hi: Hello
-      new_comment_by: "There'is a new comment by %{commenter}"
+      title: New comment on your debate
+      new_comment_by_html: "There'is a new comment by <b<%{commenter}</b> on"
     reply:
-      hi: "Hello, %{recipient}"
+      hi: Hello
-      new_reply_by: "There'is a new reply by %{commenter} to your comment"
+      title: New reply on your comment
+      new_reply_by_html: "There'is a new reply by <b>%{commenter}</b> to your comment on"

config/locales/mailers.es.yml

@@ -1,8 +1,10 @@
 es:
   mailers:
     comment:
-      hi: "Hola, %{recipient}"
+      hi: Hola
-      new_comment_by: "Hay un nuevo comentario de %{commenter}"
+      title: Nuevo comentario en tu debate
+      new_comment_by_html: "Hay un nuevo comentario de <b>%{commenter}</b> en"
     reply:
-      hi: "Hola, %{recipient}"
+      hi: Hola
-      new_reply_by: "Hay una nueva respuesta de %{commenter} a tu comentario"
+      title: Nueva respuesta a tu comentario
+      new_reply_by_html: "Hay una nueva respuesta de <b>%{commenter}</b> a tu comentario en"