Merge pull request #241 from pluralsh/mjg/eng-73-implement-new-email-designs

Implement new emails

Author: michaeljguarino

apps/email/lib/email_web/templates/email/confirm_email.html.eex

@@ -1,3 +1,15 @@
-<p>
-  Click <a target="_blank" href='<%= url("/confirm-email/#{@token.external_id}") %>'>here</a> to confirm your email
-</p>
+<%= row do %>
+  <%= text bold: true do %>
+    Confirm Your Email
+  <% end %>
+<% end %>
+<%= row do %>
+  <%= text do %>
+    Click below to confirm your email
+  <% end %>
+<% end %>
+<%= row do %>
+  <%= btn url: url("/confirm-email/#{@token.external_id}") do %>
+    Confirm
+  <% end %>
+<% end %>

apps/email/lib/email_web/templates/email/locked_installation.html.eex

@@ -1,8 +1,18 @@
-<p>
-  Repository <b><%= @repo.name %></b> has unapplied breaking changes, to apply them,
-  check out your repo locally and run the folling commands:
-</p>
+<%= row do %>
+  <%= text bold: true do %>
+    Your Installation Has Been Locked
+  <% end %>
+<% end %>
+
+<%= row do %>
+  <%= text do %>
+    Repository <b><%= @repo.name %></b> has unapplied breaking changes, to apply them,
+    check out your repo locally and run the folling commands:
+  <% end %>
+<% end %>
 
+<%= row do %>
+<div>
 <code>
 <%= if @deps.instructions.script do %>
 <%= @deps.instructions.script %>
@@ -11,13 +21,16 @@ plural build --only <%= @repo.name %>
 plural deploy --commit "applying breaking changes to <%= @repo.name %>"
 plural repos unlock <%= @repo.name %>
 </code>
+</div>
+<% end %>
 
 <%= if @deps.instructions.instructions do %>
-<p>
+<%= row do %>
+<%= text do %>
 The maintainers also have provided these instructions:
-
+<% end %>
 <pre>
 <%= @deps.instructions.instructions %>
 </pre>
-</p>
+<% end %>
 <% end %>

apps/email/lib/email_web/templates/email/passwordless_login.html.eex

@@ -1,3 +1,10 @@
-<p>
-  Click <a target="_blank" href='<%= url("/passwordless-login/#{@login.token}") %>'>here</a> to log into plural.
-</p>
+<%= row do %>
+  <%= text bold: true do %>
+    Securely Log Into Plural
+  <% end %>
+<% end %>
+<%= row do %>
+  <% btn url: url("/passwordless-login/#{@login.token}") do %>
+    Login
+  <% end %>
+<% end %>

apps/email/lib/email_web/templates/email/reset_password.html.eex

@@ -1,3 +1,27 @@
-<p>
-  Click <a target="_blank" href='<%= url("/reset-password/#{@token.external_id}") %>'>here</a> to reset your password.
-</p>
+<%= row do %>
+  <%= text bold: true do %>
+    Reset Your Password
+  <% end %>
+<% end %>
+
+<%= row do %>
+  <%= text do %>
+    Hi <%= @user.name %>
+  <% end %>
+<% end %>
+
+<%= row do %>
+  Click here to reset your plural password
+<% end %>
+
+<%= row do %>
+  <% btn url: url("/reset-password/#{@token.external_id}") do %>
+    Reset Password
+  <% end %>
+<% end %>
+
+<%= row do %>
+  <%= text do %>
+    If you didn’t request a password reset, please disregard this email.
+  <% end %>
+<% end %>

apps/email/lib/email_web/templates/email/test.html.eex

@@ -1,3 +1,5 @@
-<p>
-  <div>This is just a test email for <%= @user.email %></div>
-</p>
+<%= row do %>
+  <%= text do %>
+    This is just a test email for <%= @user.email %>
+  <% end %>
+<% end %>

apps/email/lib/email_web/templates/layout/email.html.eex

@@ -0,0 +1,11 @@
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
+  <tbody>
+    <tr>
+      <td align="center" bgcolor="#293EFF" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:18px;background:#293EFF;" valign="middle">
+        <a href="<%= @url %>" style="display:inline-block;background:#293EFF;color:#E9ECF0;font-family:Inter,Helvetica,Arial,sans-serif;font-size:20px;font-weight:600;line-height:24px;margin:0;text-decoration:none;text-transform:none;padding:18px;mso-padding-alt:0px;border-radius:3px;" target="blank">
+          <%= @inner_content %>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>

apps/email/lib/email_web/templates/layout/index.html.eex

@@ -0,0 +1,5 @@
+<tr>
+  <td align="left" style="font-size:0px;padding:0;word-break:break-word;">
+    <%= @inner_content %>
+  </td>
+</tr>

apps/email/lib/email_web/templates/shared/button.html.eex

@@ -0,0 +1,5 @@
+<tr>
+  <td style="font-size:0px;padding:0;word-break:break-word;">
+    <div style="height:56px;line-height:56px;">&#8202;</div>
+  </td>
+</tr>