forgot_password.html.erb in spina-2.4.0

- old
+ new
@@ -1,56 +1,112 @@
-You forgot your password. Here's a link to setup a new one: <%= link_to 'Reset password', spina.edit_admin_password_reset_url(@user.password_reset_token) %>. It expires in 2 hours.
\ No newline at end of file
+<span class="preheader" style="display: none !important; visibility: hidden; mso-hide: all; font-size: 1px; line-height: 1px; max-height: 0; max-width: 0; opacity: 0; overflow: hidden;"><%=t "spina.user_mailer.forgot_password.preheader" %></span>
+<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; -premailer-width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; margin: 0; padding: 0;">
+  <tr>
+    <td align="center" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
+      <table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; -premailer-width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; margin: 0; padding: 0;">
+        <!-- Email Body -->
+        <tr>
+          <td class="email-body" width="570" cellpadding="0" cellspacing="0" style="word-break: break-word; margin: 0; padding: 0; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px; width: 100%; -premailer-width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0;">
+            <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="width: 570px; -premailer-width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; margin: 0 auto; padding: 0;">
+              <!-- Body content -->
+              <tr>
+                <td class="content-cell" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px; padding: 35px;">
+                  <div class="f-fallback">
+                    <h1 style="margin-top: 0; color: #333333; font-size: 22px; font-weight: bold; text-align: left;" align="left">
+                      <%=t "spina.user_mailer.forgot_password.salutation", name: @user.name %>
+                    </h1>
+                    <p style="font-size: 16px; line-height: 1.625; color: #333; margin: .4em 0 1.1875em;">
+                      <%=t "spina.user_mailer.forgot_password.introduction_html" %>
+                    </p>
+                    <!-- Action -->
+                    <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; -premailer-width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; text-align: center; margin: 30px auto; padding: 0;">
+                      <tr>
+                        <td align="center" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
+                          <!-- Border based button
+       https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
+                          <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
+                            <tr>
+                              <td align="center" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
+                                <a href="<%= spina.edit_admin_password_reset_url(@user.password_reset_token) %>" class="f-fallback button button--green" target="_blank" style="color: #FFF; border-color: #6865b4; border-style: solid; border-width: 10px 18px; background-color: #6865b4; display: inline-block; text-decoration: none; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); -webkit-text-size-adjust: none; box-sizing: border-box;"><%=t "spina.user_mailer.forgot_password.button" %></a>
+                              </td>
+                            </tr>
+                          </table>
+                        </td>
+                      </tr>
+                    </table>
+                    <p style="font-size: 16px; line-height: 1.625; color: #333; margin: .4em 0 1.1875em;">
+                      <%=t "spina.user_mailer.forgot_password.request_origin", platform: @browser.platform.name, browser: @browser.name %>
+                    </p>
+                    <!-- Sub copy -->
+                    <table class="body-sub" role="presentation" style="margin-top: 25px; padding-top: 25px; border-top-width: 1px; border-top-color: #EAEAEC; border-top-style: solid;">
+                      <tr>
+                        <td style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
+                          <p class="f-fallback sub" style="font-size: 13px; line-height: 1.625; color: #333; margin: .4em 0 1.1875em;"><%=t "spina.user_mailer.forgot_password.trouble" %></p>
+                          <p class="f-fallback sub" style="font-size: 13px; line-height: 1.625; color: #333; margin: .4em 0 1.1875em;"><%= spina.edit_admin_password_reset_url(@user.password_reset_token) %></p>
+                        </td>
+                      </tr>
+                    </table>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>