-<p><%= t 'notifier.changeset_comment_notification.greeting' %></p>
-
-<p>
- <% if @owner %>
- <%= t "notifier.changeset_comment_notification.commented.your_changeset", :commenter => @commenter, :time => @time %>
- <% else %>
- <%= t "notifier.changeset_comment_notification.commented.commented_changeset", :commenter => @commenter, :time => @time, :changeset_author => @changeset_author %>
- <% end %>
- <% if @changeset_comment %>
- <%= t "notifier.changeset_comment_notification.commented.partial_changeset_with_comment", :changeset_comment => @changeset_comment %>
- <% else %>
- <%= t "notifier.changeset_comment_notification.commented.partial_changeset_without_comment" %>
- <% end %>
-</p>
-
-==
-<%= @comment.to_html %>
-==
-
-<p><%= raw t 'notifier.changeset_comment_notification.details', :url => link_to(@changeset_url, @changeset_url) %></p>
+<html>
+ <head>
+ <title></title>
+ <meta charset="UTF-8"></meta>
+ </head>
+ <body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222">
+ <table style="background-color: #eee; width: 100%">
+ <tr>
+ <td style="text-align: center">
+ <table style="width: 600px; color: #222; margin-left: auto; margin-right: auto">
+ <tr>
+ <td style="width: 30px; padding: 10px">
+ <a href="<%= @root_url %>" target="_blank">
+ <%= image_tag attachments["logo.png"].url, alt: "OpenStreetMap logo", title: "OpenStreetMap", height: "30", width: "30", border: "0" %>
+ </a>
+ </td>
+ <td style="padding: 10px 0px">
+ <a href="<%= @root_url %>" target="_blank" style="text-decoration: none; color: #000">
+ <h1 style="font-size: 18px; font-weight: 600; margin: 0; text-align: left">OpenStreetMap</h1>
+ </a>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <table style="background-color: #fff; color: #222; border: solid 1px #ccc; border-collapse: separate">
+ <tr>
+ <td style="text-align: left; padding: 15px 15px 5px 15px">
+ <p style="margin: 0">
+ <% if @owner %>
+ <%= t "notifier.changeset_comment_notification.commented.your_changeset_html", :commenter => @commenter, :commenter_url => @commenter_url, :time => @time %>
+ <% else %>
+ <%= t "notifier.changeset_comment_notification.commented.commented_changeset_html", :commenter => @commenter, :commenter_url => @commenter_url, :time => @time, :changeset_author => @changeset_author %>
+ <% end %>
+ <% if @changeset_comment %>
+ <%= t "notifier.changeset_comment_notification.commented.partial_changeset_with_comment_html", :changeset_comment => @changeset_comment %>
+ <% else %>
+ <%= t "notifier.changeset_comment_notification.commented.partial_changeset_without_comment" %>
+ <% end %>
+ </p>
+ <table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
+ <tr>
+ <td style="width: 50px; vertical-align: top; padding: 15px">
+ <a href="<%= @commenter_url %>" target="_blank"><%= image_tag attachments["avatar.png"].url, alt: @commenter %></a>
+ </td>
+ <td style="text-align: left; vertical-align: top; padding-right: 10px">
+ <%= @comment.to_html %>
+ </td>
+ </tr>
+ </table>
+ <p>
+ <%= raw t 'notifier.changeset_comment_notification.details_html', :url => link_to(@changeset_url, @changeset_url) %>
+ </p>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td style="text-align: center; font-size: 11px">
+ <p>
+ <%= t 'notifier.changeset_comment_notification.unsubscribe_html', :url => @changeset_url %>
+ </p>
+ <p style="margin-bottom: 10px">
+ <a href="https://www.openstreetmap.org/" target="_blank" style="color: #222">OpenStreetMap.org</a>
+ </p>
+ </td>
+ </tr>
+ </table>
+ </body>
+</html>