From 9272cbe67ce7fa8ed128b80809fce845795abbde Mon Sep 17 00:00:00 2001
From: Mator <why101@msn.com>
Date: Mon, 28 Nov 2016 23:30:34 -0800
Subject: [PATCH] updated reset password email template

---
 .../reset_password_instructions.html.erb      | 108 +++++++++++++++++-
 1 file changed, 103 insertions(+), 5 deletions(-)

diff --git a/mod-picker/app/views/devise/mailer/reset_password_instructions.html.erb b/mod-picker/app/views/devise/mailer/reset_password_instructions.html.erb
index f667dc12f..72c98f273 100644
--- a/mod-picker/app/views/devise/mailer/reset_password_instructions.html.erb
+++ b/mod-picker/app/views/devise/mailer/reset_password_instructions.html.erb
@@ -1,8 +1,106 @@
-<p>Hello <%= @resource.email %>!</p>
+<style>
+    * {
+        font-family: Optima,Segoe,Segoe UI,Candara,Calibri,sans-serif;
+    }
 
-<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+    body {
+        background-color: #f0f0f0;
+    }
 
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
+    .container {
+        max-width: 600px;
+        margin: auto;
+        margin-top: 60px;
+        margin-bottom: 60px;
+        background-color: #ffffff;
+        border: 2px solid #e0e0e0;
+        padding: 30px;
+    }
 
-<p>If you didn't request this, please ignore this email.</p>
-<p>Your password won't change until you access the link above and create a new one.</p>
+    p {
+        font-size: 17px;
+    }
+
+    a {
+        color: #4599d7;
+        -webkit-transition: all 0.2s ease-in-out;
+        -moz-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
+    }
+
+    a:hover {
+        color: #2e679d;
+    }
+
+    .time-helper {
+        cursor: pointer;
+        color: inherit;
+        text-decoration-line: underline;
+        text-decoration-style: dashed;
+        text-decoration-color: #888;
+    }
+
+    .greeting {
+        font-weight: 100;
+        font-size: 24px;
+        margin-bottom: 6px;
+        margin-top: 0;
+    }
+
+    .button-container {
+        text-align: center;
+    }
+
+    .button {
+        text-decoration: none;
+        padding: 14px;
+        display: inline-block;
+        margin: 22px;
+        margin-top: 12px;
+        font-size: 23px;
+        background: #4599d7;
+        background: -webkit-gradient(linear, left top, left bottom, from(#2e679d), to(#4599d7));
+        background: -webkit-linear-gradient(top, #2e679d, #4599d7);
+        background: -moz-linear-gradient(top, #2e679d, #4599d7);
+        background: -ms-linear-gradient(top, #2e679d, #4599d7);
+        background: -o-linear-gradient(top, #2e679d, #4599d7);
+        opacity: 0.8;
+        -webkit-box-shadow: rgba(0,0,0,1) 0px 1px 3px;
+        -moz-box-shadow: rgba(0,0,0,1) 0px 1px 3px;
+        box-shadow: rgba(0,0,0,1) 0px 1px 3px;
+        text-shadow: rgba(0,0,0,.4) 1px 1px 0;
+        color: white;
+        font-family: Georgia, serif;
+        vertical-align: middle;
+        -webkit-transition: all 0.4s ease-in-out;
+        -moz-transition: all 0.4s ease-in-out;
+        -o-transition: all 0.4s ease-in-out;
+        transition: all 0.4s ease-in-out;
+    }
+
+    .button:hover {
+        color: white;
+        opacity: 1.0;
+    }
+</style>
+
+<div class="container">
+    <p>Hello <%= @resource.username %>,</p>
+
+    <p>Someone has requested a link to change your password. You can do this through the link below:</p>
+
+
+    <div class="button-container">
+        <%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token), :class => "button" %>
+    </div>
+
+    <p>If you didn't request this, please ignore this email.</p>
+    <p>Your password won't change until you access the link above and create a new one.</p>
+
+    <br>
+    <p>Sincerely,<br>
+        The Mod Picker Team<br>
+        <a href="https://www.modpicker.com">www.modpicker.com</a>
+    </p>
+</div>
\ No newline at end of file