Improved email design

maybe-finance · Oct 31, 2024 · b46a062 · b46a062
1 parent c79857d
commit b46a062
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 6 deletions.
diff --git a/app/views/invitation_mailer/invite_email.html.erb b/app/views/invitation_mailer/invite_email.html.erb
@@ -3,9 +3,9 @@
 <p>
   <%= t(".body", 
     inviter: @invitation.inviter.display_name,
-    family: @invitation.family.name) %>
+    family: @invitation.family.name).html_safe %>
 </p>
 
 <%= link_to t(".accept_button"), @accept_url, class: "button" %>
 
-<p><%= t(".expiry_notice", days: 3) %></p>
+<p class="footer"><%= t(".expiry_notice", days: 3) %></p>
diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
@@ -2,12 +2,56 @@
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
-      /* Email styles need to be inline */
+      /* Email-safe styles that work across clients */
+      body {
+        background-color: #f8fafc;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        line-height: 1.5;
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        background-color: #ffffff;
+        border-radius: 8px;
+        margin: 20px auto;
+        max-width: 600px;
+        padding: 32px;
+        text-align: center;
+      }
+      h1 {
+        color: #1e293b;
+        font-size: 24px;
+        margin-bottom: 24px;
+      }
+      p {
+        color: #475569;
+        font-size: 16px;
+        margin-bottom: 16px;
+      }
+      .button {
+        background-color: #3b82f6;
+        border-radius: 6px;
+        color: #ffffff;
+        display: inline-block;
+        font-weight: 600;
+        margin: 16px 0;
+        padding: 12px 24px;
+        text-decoration: none;
+      }
+      .footer {
+        color: #64748b;
+        font-size: 14px;
+        margin-top: 32px;
+        text-align: center;
+      }
     </style>
   </head>
 
   <body>
-    <%= yield %>
+    <div class="container">
+      <%= yield %>
+    </div>
   </body>
 </html>
diff --git a/config/locales/mailers/invitation_mailer/en.yml b/config/locales/mailers/invitation_mailer/en.yml
@@ -1,7 +1,7 @@
 en:
   invitation_mailer:
     invite_email:
-      subject: "%{inviter} has invited you to join their household"
+      subject: "%{inviter} has invited you to join their household on Maybe!"
       greeting: "You've been invited!"
       body: "%{inviter} has invited you to join their household '%{family}' as a %{role}."
       accept_button: "Accept Invitation"

diff --git a/config/locales/views/invitation_mailer/en.yml b/config/locales/views/invitation_mailer/en.yml
@@ -1,7 +1,7 @@
 en:
   invitation_mailer:
     invite_email:
-      greeting: "Welcome!"
+      greeting: "Welcome to Maybe!"
       body: "%{inviter} has invited you to join the %{family} family on Maybe!"
       accept_button: "Accept Invitation"
       expiry_notice: "This invitation will expire in %{days} days"