Skip to content

Commit ad0a67f

Browse files
alexshapalovalexshapalov
committed
Enhance email confirmation template for improved user experience
- Updated the confirmation email layout with a new header and footer design, including branding elements for ActiveRabbit. - Improved styling for better readability and visual appeal, including adjustments to font sizes, colors, and button styles. - Revised content to provide clearer instructions for email confirmation and added a link to the ActiveRabbit website.
1 parent 9e860a0 commit ad0a67f

File tree

1 file changed

+87
-36
lines changed

1 file changed

+87
-36
lines changed

‎app/views/devise/mailer/confirmation_instructions.html.erb‎

Lines changed: 87 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,64 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Confirm Your Email - ActiveRabbit</title>
67
<style>
78
body {
8-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
910
line-height: 1.5;
10-
color: #374151;
11+
color: #333;
12+
max-width: 600px;
13+
margin: 0 auto;
14+
padding: 8px 12px;
1115
background-color: #f9fafb;
12-
margin: 0;
13-
padding: 40px 20px;
1416
}
15-
.container {
16-
max-width: 480px;
17-
margin: 0 auto;
18-
background: white;
19-
border-radius: 8px;
20-
padding: 40px;
21-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
17+
18+
.header {
19+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20+
color: white;
21+
padding: 14px 16px 12px;
22+
text-align: center;
23+
border-radius: 8px 8px 0 0;
2224
}
23-
.logo {
24-
font-size: 20px;
25-
font-weight: 700;
26-
color: #111827;
27-
margin-bottom: 32px;
25+
26+
.content {
27+
background: white;
28+
padding: 30px 20px;
29+
border: 1px solid #e5e5e5;
30+
border-top: none;
31+
border-radius: 0 0 8px 8px;
2832
}
33+
2934
h1 {
30-
font-size: 18px;
35+
font-size: 20px;
3136
font-weight: 600;
3237
color: #111827;
3338
margin: 0 0 16px 0;
3439
}
40+
3541
p {
3642
margin: 0 0 16px 0;
3743
color: #4b5563;
3844
font-size: 14px;
3945
}
46+
4047
.button {
4148
display: inline-block;
42-
background: #000;
43-
color: #fff !important;
4449
padding: 12px 24px;
50+
background: #667eea;
51+
color: white !important;
4552
text-decoration: none;
4653
border-radius: 6px;
47-
font-weight: 500;
54+
font-weight: 600;
4855
font-size: 14px;
49-
margin: 8px 0 24px 0;
56+
margin: 8px 0 16px 0;
5057
}
51-
.footer {
52-
margin-top: 32px;
53-
padding-top: 24px;
54-
border-top: 1px solid #e5e7eb;
55-
font-size: 12px;
56-
color: #9ca3af;
58+
59+
.button-wrapper {
60+
text-align: center;
61+
margin: 24px 0;
5762
}
63+
5864
.note {
5965
background: #f3f4f6;
6066
border-radius: 6px;
@@ -63,31 +69,76 @@
6369
font-size: 13px;
6470
color: #6b7280;
6571
}
72+
73+
.footer {
74+
text-align: center;
75+
margin-top: 30px;
76+
padding-top: 20px;
77+
border-top: 1px solid #e5e5e5;
78+
color: #666;
79+
font-size: 12px;
80+
}
81+
82+
.footer a {
83+
color: #667eea;
84+
text-decoration: none;
85+
}
6686
</style>
6787
</head>
6888
<body>
69-
<div class="container">
70-
<div class="logo">ActiveRabbit</div>
89+
<div class="header">
90+
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
91+
<tr>
92+
<td align="center" valign="middle">
93+
<table cellpadding="0" cellspacing="0" role="presentation" style="margin:0 auto;">
94+
<tr>
95+
<td valign="middle" style="padding-right: 10px;">
96+
<%= image_tag "faviicons/favicon-512.png",
97+
width: 50,
98+
height: 50,
99+
alt: "ActiveRabbit",
100+
title: "ActiveRabbit",
101+
style: "display:block;"
102+
%>
103+
</td>
71104

105+
<td valign="middle" style="text-align:left;">
106+
<div style="font-size:18px; font-weight:700; line-height:1.2; margin:0; color:#ffffff;">
107+
ActiveRabbit
108+
</div>
109+
<div style="font-size:13px; line-height:1.2; margin-top:4px; opacity:0.9; color:#ffffff;">
110+
AI-Powered Error Tracking
111+
</div>
112+
</td>
113+
</tr>
114+
</table>
115+
</td>
116+
</tr>
117+
</table>
118+
</div>
119+
120+
<div class="content">
72121
<h1>Confirm Your Email Address</h1>
73122

74123
<p>Hi there!</p>
75124

76-
<p>Thanks for creating an account on ActiveRabbit - AI-powered error tracking for Rails applications.</p>
77-
78-
<p>Please confirm your email address (<strong><%= @email %></strong>) to get started.</p>
125+
<p>Thanks for creating an account on <strong>ActiveRabbit</strong> - AI-powered error tracking for Rails applications.</p>
79126

80-
<p>Click the button below to verify your email:</p>
127+
<p>Please confirm your email address (<strong><%= @email %></strong>) to get started with error monitoring.</p>
81128

82-
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" class="button">Confirm Email Address</a>
129+
<div class="button-wrapper">
130+
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>" class="button">Confirm Email Address</a>
131+
</div>
83132

84133
<div class="note">
85134
If you didn't create an account with ActiveRabbit, you can safely ignore this email.
86135
</div>
87136

88137
<div class="footer">
89-
ActiveRabbit<br>
90-
AI-Powered Error Tracking for Rails
138+
<p>
139+
ActiveRabbit - AI-Powered Error Tracking for Rails<br>
140+
<a href="https://activerabbit.ai">activerabbit.ai</a>
141+
</p>
91142
</div>
92143
</div>
93144
</body>

0 commit comments

Comments
 (0)