Improves styles for dashboard mailer forward

Uses layout with tables and inline styles to avoid display errors in mail readers

app/views/dashboard/mailer/forward.html.erb

@@ -1,19 +1,61 @@
-<header>
-  <h1><%= @proposal.title %></h1>
-  <h2><%= t("dashboard.mailer.forward.subtitle") %></h2>
-</header>
-<%= image_tag @proposal.image.attachment.url(:large), class: 'proposal-image' if @proposal.image.present? %>
-<%= image_tag 'default_mailing.jpg', class: 'proposal-image' unless @proposal.image.present? %>
-<div class="mail-body">
-  <%== t("dashboard.mailer.forward.introduction") %>
-  <%= link_to t("dashboard.mailer.forward.support_it"), proposal_url(@proposal), class: 'support-link' %>
-  <%== t("dashboard.mailer.forward.share_info") %>
+<td style="padding-bottom: 20px;padding-left: 10px;font-size: 14px;font-weight: normal;
+           font-family:'Open Sans',arial,sans-serif;line-height: 24px; text-align: justify;">
 
-  <p class="share-title"><%= t("dashboard.mailer.forward.share_in") %></p>
-  <%= render partial: 'shared/social_share', locals: {
-            title: @proposal.title,
-            url: proposal_url(@proposal),
-            description: @proposal.summary
-          } %>
+  <table cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;width: 100%;">
+    <tbody>
+      <tr>
+        <td style="background: #3700fd; padding: 20px; text-align: center;">
+          <h1 style="color: #fff;"><%= @proposal.title %></h1>
+          <h2 style="color: #fff;"><%= t("dashboard.mailer.forward.subtitle") %></h2>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
-</div>
+  <% if @proposal.image.present? %>
+    <%= image_tag @proposal.image.attachment.url(:large), style: "max-width: 100%;" %>
+  <% else %>
+    <%= image_tag "default_mailing.jpg", style: "max-width: 100%;" %>
+  <% end %>
+
+  <p><%= t("dashboard.mailer.forward.hi")%></p>
+  <p><%= t("dashboard.mailer.forward.introduction", org: setting['org_name']) %></p>
+  <p><%= t("dashboard.mailer.forward.support") %></p>
+
+  <table style="width: 100%;">
+    <tbody>
+      <tr>
+        <td style="padding-bottom: 12px; padding-top: 24px; text-align: center;">
+          <%= link_to proposal_url(@proposal),
+                      style: "font-family: 'Open Sans',arial,sans-serif; background: #3700fd;
+                      border-radius: 6px; color: #fff !important; font-weight: bold;
+                      padding: 17px 20px; text-align: center; text-decoration: none;
+                      font-size: 20px; min-width: 200px; display: inline-block;",
+                      target: "_blank" do %>
+            <%= t("dashboard.mailer.forward.support_button") %>
+          <% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <p><%= t("dashboard.mailer.forward.share") %></p>
+
+  <table style="width: 100%; margin-top: 24px;">
+    <tbody>
+      <tr>
+        <td style="text-align: center;">
+          <h3><%= t("dashboard.mailer.forward.share_in") %></h3>
+        </td>
+      </tr>
+      <tr>
+        <td style="text-align: center;">
+          <%= link_to proposal_url(@proposal, anchor: "social-share") do %>
+            <%= image_tag("social_buttons_mailer.png", alt: t("dashboard.mailer.forward.share_in"),
+                           style: "max-width: 100%;") %>
+          <% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</td>