Upon a user signing up, I send a confirmation email using Devise's mailer view. While everything else appears to be functioning properly, the CSS for CONFIRM ACCOUNT
doesn't seem to be applied at all. I've read that CSS classes cannot be used in mailer views, so I've styled everything with inline styles instead. When I preview the mailer view on my web app, it looks great like this:
https://i.sstatic.net/bfVdw.png
However, in the actual mailer view it appears like this:
https://i.sstatic.net/wqz4h.png
Below is the code snippet I'm working with:
<body style="background-color: #F7F7F7;">
<div class="main wrapper clearfix">
<div style="border: 1px solid #e4e4e4;
border-radius: 5px;
margin: 50px auto;
padding: 20px 50px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
background-color: white;
max-width: 700px;">
<div style="text-align:center">
<%= image_tag("logo-green.svg") %>
</div><br><br>
<div>
<p>Welcome <%= @user.first_name %>!</p>
<p style="line-height: 1.5">Let's confirm your email address. Click the button below to confirm your email.</p>
<%= link_to 'CONFIRM ACCOUNT',
confirmation_url(@resource, confirmation_token: @token),
style: "font-family: Raleway-SemiBold, sans-serif;
-webkit-font-smoothing: antialiased;
display: inline-block;
cursor: pointer;
text-decoration: none;
color: white;
letter-spacing: 1px;
padding: 13px 30px;
font-size: 0.8em;
color: #fff;
background-color: #00BA9B;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.26);
margin-top: 25px;
margin-bottom: 20px;
border-radius:" %>
<br><br>
<p style="line-height: 1.5">Thanks,<br>website <br> <a href="www.website.com" style="color: #00BA9B; text-decoration:none">www.website.com</a></p>
<br>
<p style="color:grey; font-size:11px;">P.S. If you didn't sign up for website, please ignore this email - apologies for the disturbance.<p>
</div>
</div>
</div>
</body>
The styling on
<a href="www.website.com" style="color: #00BA9B; text-decoration:none">www.website.com</a>
displays correctly in the mailer view. However, the inline styling on CONFIRM ACCOUNT
seems to not work.
I am curious as to why inline styling functions elsewhere but not specifically on link_to 'CONFIRM ACCOUNT',
.