From faaadba3f1fbe4bffa54386760911264541ccce4 Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Thu, 17 Feb 2022 22:47:54 -0500
Subject: [PATCH] style emails lol

---
 .../templates/email/confirm_email.html.eex    | 27 +++++++++---
 .../templates/email/reset_password.html.eex   | 21 ++++++---
 .../templates/email/update_email.html.eex     | 21 ++++++---
 .../templates/layout/email.html.heex          | 14 ++++--
 .../templates/layout/email.txt.eex            |  3 +-
 priv/gettext/emails.pot                       | 44 ++++++++++---------
 6 files changed, 85 insertions(+), 45 deletions(-)

diff --git a/lib/cannery_web/templates/email/confirm_email.html.eex b/lib/cannery_web/templates/email/confirm_email.html.eex
index 18adab58..d82978d1 100644
--- a/lib/cannery_web/templates/email/confirm_email.html.eex
+++ b/lib/cannery_web/templates/email/confirm_email.html.eex
@@ -1,12 +1,25 @@
+<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
+  <span style="margin-bottom: 0.75em; font-size: 1.5em;">
+    <%= dgettext("emails", "Hi %{email},", email: @user.email) %>
+  </span>
 
-<%= dgettext("emails", "Hi %{email},", email: @user.email) %>
+  <br/>
 
-<%= dgettext("emails", "Welcome to %{name}!", name: "Cannery") %>
+  <span style="margin-bottom: 1em; font-size: 1.25em;">
+    <%= dgettext("emails", "Welcome to %{name}!", name: "Cannery") %>
+  </span>
 
-<%= dgettext("emails", "You can confirm your account by visiting the URL below:") %>
+  <br/>
 
-<%= @url %>
+  <%= dgettext("emails", "You can confirm your account by visiting the URL below:") %>
 
-<%= dgettext("emails",
-  "If you didn't create an account at %{url}, please ignore this.",
-  url: Routes.live_url(Endpoint, HomeLive)) %>
+  <br/>
+
+  <a style="margin: 1em; color: rgb(31, 31, 31);" href="{@url}"><%= @url %></a>
+
+  <br/>
+
+  <%= dgettext("emails",
+    "If you didn't create an account at %{name}, please ignore this.",
+    name: "Cannery") %>
+</div>
diff --git a/lib/cannery_web/templates/email/reset_password.html.eex b/lib/cannery_web/templates/email/reset_password.html.eex
index cf9efb39..ff0f4f9c 100644
--- a/lib/cannery_web/templates/email/reset_password.html.eex
+++ b/lib/cannery_web/templates/email/reset_password.html.eex
@@ -1,10 +1,19 @@
+<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
+  <span style="margin-bottom: 0.5em; font-size: 1.5em;">
+    <%= dgettext("emails", "Hi %{email},", email: @user.email) %>
+  </span>
 
-<%= dgettext("emails", "Hi %{email},", email: @user.email) %>
+  <br/>
 
-<%= dgettext("emails", "You can reset your password by visiting the URL below:") %>
+  <%= dgettext("emails", "You can reset your password by visiting the URL below:") %>
 
-<%= @url %>
+  <br/>
 
-<%= dgettext("emails",
-  "If you didn't request this change from %{url}, please ignore this.",
-  url: Routes.live_url(Endpoint, HomeLive)) %>
+  <a style="margin: 1em; color: rgb(31, 31, 31);" href="{@url}"><%= @url %></a>
+
+  <br/>
+
+  <%= dgettext("emails",
+    "If you didn't request this change from %{name}, please ignore this.",
+    name: "Cannery") %>
+</div>
diff --git a/lib/cannery_web/templates/email/update_email.html.eex b/lib/cannery_web/templates/email/update_email.html.eex
index c23da11c..c2e2fd60 100644
--- a/lib/cannery_web/templates/email/update_email.html.eex
+++ b/lib/cannery_web/templates/email/update_email.html.eex
@@ -1,10 +1,19 @@
+<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
+  <span style="margin-bottom: 0.5em; font-size: 1.5em;">
+    <%= dgettext("emails", "Hi %{email},", email: @user.email) %>
+  </span>
 
-<%= dgettext("emails", "Hi %{email},", email: @user.email) %>
+  <br/>
 
-<%= dgettext("emails", "You can change your email by visiting the URL below:") %>
+  <%= dgettext("emails", "You can change your email by visiting the URL below:") %>
 
-<%= @url %>
+  <br/>
 
-<%= dgettext("emails",
-  "If you didn't request this change from %{url}, please ignore this.",
-  url: Routes.live_url(Endpoint, HomeLive)) %>
+  <a style="margin: 1em; color: rgb(31, 31, 31);" href="{@url}"><%= @url %></a>
+
+  <br/>
+
+  <%= dgettext("emails",
+    "If you didn't request this change from %{name}, please ignore this.",
+    name: "Cannery") %>
+</div>
diff --git a/lib/cannery_web/templates/layout/email.html.heex b/lib/cannery_web/templates/layout/email.html.heex
index 17e484b3..cffe8418 100644
--- a/lib/cannery_web/templates/layout/email.html.heex
+++ b/lib/cannery_web/templates/layout/email.html.heex
@@ -4,15 +4,21 @@
       <%= @email.subject %>
     </title>
   </head>
-  <body>
+  <body
+    style="padding: 2em; color: rgb(31, 31, 31); background-color: rgb(220, 220, 228); font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; text-align: center;"
+  >
     <%= @inner_content %>
 
     <hr
-      style="border-width: 1px; border-color: rgb(212, 212, 216); width: 100%; max-width: 42rem;"
+      style="margin: 2em auto; border-width: 1px; border-color: rgb(212, 212, 216); width: 100%; max-width: 42rem;"
     />
 
-    <a href={Routes.live_url(Endpoint, HomeLive)}>
-      <%= dgettext("emails", "This email was sent from %{name}", name: "Cannery") %>
+    <a style="color: rgb(31, 31, 31);" href={Routes.live_url(Endpoint, HomeLive)}>
+      <%= dgettext(
+        "emails",
+        "This email was sent from %{name}, the self-hosted firearm tracker website.",
+        name: "Cannery"
+      ) %>
     </a>
   </body>
 </html>
diff --git a/lib/cannery_web/templates/layout/email.txt.eex b/lib/cannery_web/templates/layout/email.txt.eex
index b1d02a11..201cd661 100644
--- a/lib/cannery_web/templates/layout/email.txt.eex
+++ b/lib/cannery_web/templates/layout/email.txt.eex
@@ -1,6 +1,5 @@
 <%= @email.subject %>
 
-
 ====================
 
 <%= @inner_content %>
@@ -8,6 +7,6 @@
 =====================
 
 <%= dgettext("emails",
-  "This email was sent from %{name} at %{url}",
+  "This email was sent from %{name} at %{url}, the self-hosted firearm tracker website.",
   name: "Cannery",
   url: Routes.live_url(Endpoint, HomeLive)) %>
diff --git a/priv/gettext/emails.pot b/priv/gettext/emails.pot
index 14f33527..bce83334 100644
--- a/priv/gettext/emails.pot
+++ b/priv/gettext/emails.pot
@@ -16,9 +16,9 @@ msgid "Confirm your %{name} account"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/confirm_email.html.eex:2
+#: lib/cannery_web/templates/email/confirm_email.html.eex:3
 #: lib/cannery_web/templates/email/confirm_email.txt.eex:2
-#: lib/cannery_web/templates/email/reset_password.html.eex:2
+#: lib/cannery_web/templates/email/reset_password.html.eex:3
 #: lib/cannery_web/templates/email/reset_password.txt.eex:2
 #: lib/cannery_web/templates/email/update_email.html.eex:3
 #: lib/cannery_web/templates/email/update_email.txt.eex:2
@@ -26,13 +26,11 @@ msgid "Hi %{email},"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/confirm_email.html.eex:10
 #: lib/cannery_web/templates/email/confirm_email.txt.eex:10
 msgid "If you didn't create an account at %{url}, please ignore this."
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/reset_password.html.eex:8
 #: lib/cannery_web/templates/email/reset_password.txt.eex:8
 #: lib/cannery_web/templates/email/update_email.txt.eex:8
 msgid "If you didn't request this change from %{url}, please ignore this."
@@ -43,23 +41,13 @@ msgstr ""
 msgid "Reset your %{name} password"
 msgstr ""
 
-#, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/layout/email.html.heex:17
-msgid "This email was sent from %{name}"
-msgstr ""
-
-#, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/layout/email.txt.eex:10
-msgid "This email was sent from %{name} at %{url}"
-msgstr ""
-
 #, elixir-autogen, elixir-format
 #: lib/cannery/accounts/email.ex:44
 msgid "Update your %{name} email"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/confirm_email.html.eex:4
+#: lib/cannery_web/templates/email/confirm_email.html.eex:9
 msgid "Welcome to %{name}!"
 msgstr ""
 
@@ -69,24 +57,40 @@ msgid "Welcome to %{name}%!"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/update_email.html.eex:6
+#: lib/cannery_web/templates/email/update_email.html.eex:8
 #: lib/cannery_web/templates/email/update_email.txt.eex:4
 msgid "You can change your email by visiting the URL below:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/confirm_email.html.eex:6
+#: lib/cannery_web/templates/email/confirm_email.html.eex:14
 #: lib/cannery_web/templates/email/confirm_email.txt.eex:6
 msgid "You can confirm your account by visiting the URL below:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/reset_password.html.eex:4
+#: lib/cannery_web/templates/email/reset_password.html.eex:8
 #: lib/cannery_web/templates/email/reset_password.txt.eex:4
 msgid "You can reset your password by visiting the URL below:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/templates/email/update_email.html.eex:10
-msgid "If you didn't request this change from Cannery, please ignore this."
+#: lib/cannery_web/templates/email/confirm_email.html.eex:22
+msgid "If you didn't create an account at %{name}, please ignore this."
+msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/email/reset_password.html.eex:16
+#: lib/cannery_web/templates/email/update_email.html.eex:16
+msgid "If you didn't request this change from %{name}, please ignore this."
+msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/layout/email.txt.eex:9
+msgid "This email was sent from %{name} at %{url}, the self-hosted firearm tracker website."
+msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/layout/email.html.heex:17
+msgid "This email was sent from %{name}, the self-hosted firearm tracker website."
 msgstr ""