From c33d9fa97bf63bafccc72506dcace1f0698ad8eb Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Sat, 13 Oct 2018 13:03:02 +0200
Subject: [PATCH] Improves styles for dashboard mailer forward

Uses layout with tables and inline styles to avoid display errors in mail readers
---
 app/assets/images/social_buttons_mailer.png | Bin 0 -> 2768 bytes
 app/views/dashboard/mailer/forward.html.erb |  76 +++++++++++++++-----
 2 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/images/social_buttons_mailer.png

diff --git a/app/assets/images/social_buttons_mailer.png b/app/assets/images/social_buttons_mailer.png
new file mode 100644
index 0000000000000000000000000000000000000000..522f575cb83bff9ebb4e1e21bf35b62de576a2c3
GIT binary patch
literal 2768
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
B#CZS!

literal 0
HcmV?d00001

diff --git a/app/views/dashboard/mailer/forward.html.erb b/app/views/dashboard/mailer/forward.html.erb
index b3f5ee999..3788c94aa 100644
--- a/app/views/dashboard/mailer/forward.html.erb
+++ b/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>