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

…designs

Implement new emails

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/shared/button.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/shared/row.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/space.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>

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

@@ -0,0 +1,7 @@
+<% size = if assigns[:bold], do: "30px", else: "18px" %>
+<% height = if assigns[:bold], do: "40px", else: "24px" %>
+<% font = if assigns[:bold], do: ~s("Monument Trial",), else: "" %>
+
+<div style="font-family:<%= font %>Inter,Helvetica,Arial,sans-serif;font-size:<%= size %>;line-height:<%= height %>;text-align:left;color:#ffffff;<%= if IO.inspect(assigns[:bold]), do: "font-weight:500", else: "" %>">
+  <%= @inner_content %>
+</div>

apps/email/lib/email_web/views/email_view.ex

@@ -2,4 +2,21 @@ defmodule EmailWeb.EmailView do
   use EmailWeb, :view
 
   def url(path), do: "#{Email.conf(:host)}#{path}"
+
+  def row(assigns \\ %{}, do: block), do: render_template("row.html", assigns, block)
+
+  def text(assigns \\ %{}, do: block), do: render_template("text.html", assigns, block)
+
+  def btn(assigns \\ %{}, do: block), do: render_template("button.html", assigns, block)
+
+  def space(assigns \\ %{}), do: EmailWeb.SharedView.render("space.html", Map.new(assigns))
+
+  defp render_template(template, assigns, block) do
+    assigns =
+      assigns
+      |> Map.new()
+      |> Map.put(:inner_content, block)
+
+    EmailWeb.SharedView.render(template, assigns)
+  end
 end

apps/email/lib/email_web/views/shared_view.ex

@@ -0,0 +1,3 @@
+defmodule EmailWeb.SharedView do
+  use EmailWeb, :view
+end

www/public/fonts.css

@@ -0,0 +1,168 @@
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/627978260422d561ec6f3db9_ABCMonumentGrotesk-Light-Trial.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797826e66c69aa58b6075c_ABCMonumentGrotesk-HeavyItalic-Trial.otf') format('opentype'), url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797825166f25af67a380d9_ABCMonumentGrotesk-BlackItalic-Trial.otf') format('opentype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797826c925d18097430806_ABCMonumentGrotesk-LightItalic-Trial.otf') format('opentype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797826bd85bb9a6c6849aa_ABCMonumentGrotesk-Medium-Trial.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/6279782518c2dc5d2037c75e_ABCMonumentGrotesk-Black-Trial.otf') format('opentype'), url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/627978264c33093735b999cf_ABCMonumentGrotesk-Heavy-Trial.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797826d19e277289c9e904_ABCMonumentGrotesk-Bold-Trial.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797827e429dd409618c52b_ABCMonumentGrotesk-MediumItalic-Trial.otf') format('opentype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/627978263bc4bfa1581312eb_ABCMonumentGrotesk-RegularItalic-Trial.otf') format('opentype'), url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797827c8832c2ef7d9c3d6_ABCMonumentGrotesk-UltraItalic-Trial.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797826c8832c2566d9c3d5_ABCMonumentGrotesk-Regular-Trial.otf') format('opentype'), url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/6279782788bb081ae841cb7b_ABCMonumentGrotesk-Ultra-Trial.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/627978264c330966f6b999ce_ABCMonumentGrotesk-BoldItalic-Trial.otf') format('opentype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797826166f250542a380e1_ABCMonumentGrotesk-ThinItalic-Trial.otf') format('opentype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Trial';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/6279782688bb0853e141cb7a_ABCMonumentGrotesk-Thin-Trial.otf') format('opentype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893d19e273e1dc9ebdb_ABCMonumentGroteskSemi-Mono-Black-Trial.otf') format('opentype'), url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893e65e67c8ee28f0ec_ABCMonumentGroteskSemi-Mono-Heavy-Trial.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893494abe0de89f227a_ABCMonumentGroteskSemi-Mono-BlackItalic-Trial.otf') format('opentype'), url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893166f259ab0a38433_ABCMonumentGroteskSemi-Mono-HeavyItalic-Trial.otf') format('opentype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/627978938565ca0a08e60c3f_ABCMonumentGroteskSemi-Mono-LightItalic-Trial.otf') format('opentype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893e66c69cf8eb60bb1_ABCMonumentGroteskSemi-Mono-Light-Trial.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893c925d13acc430de7_ABCMonumentGroteskSemi-Mono-Medium-Trial.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893655acc0d01b2105a_ABCMonumentGroteskSemi-Mono-RegularItalic-Trial.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893bd85bb8ca4684c14_ABCMonumentGroteskSemi-Mono-Thin-Trial.otf') format('opentype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797893ea814b84fd70711f_ABCMonumentGroteskSemi-Mono-Bold-Trial.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/627978936fb12a0a6ad03070_ABCMonumentGroteskSemi-Mono-ThinItalic-Trial.otf') format('opentype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/6279789459bcaa23b6357474_ABCMonumentGroteskSemi-Mono-MediumItalic-Trial.otf') format('opentype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797894d95c6eb2b30e0f88_ABCMonumentGroteskSemi-Mono-BoldItalic-Trial.otf') format('opentype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Monument Semi-Mono';
+  src: url('https://uploads-ssl.webflow.com/627977f6bd85bbace4684726/62797894d95c6e775b0e0f89_ABCMonumentGroteskSemi-Mono-Regular-Trial.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}