[password-resets/feat/passwords-account: 9/10] feat(mail): finished styling e-mail

[Claudio Wunder <cwunder src gnome org>]

commit aa72c98fd9cd48d91e07091d0f664f3d6cf9a5b8
Author: Claudio Wunder <cwunder gnome org>
Date:   Sun Nov 22 17:11:27 2020 +0100

    feat(mail): finished styling e-mail

 static/images/Mail-LockSymbol.jpg  | Bin 0 -> 46580 bytes
 templates/password_reset_mail.html |  34 ++++++++++++++++++++++++----------
 2 files changed, 24 insertions(+), 10 deletions(-)
---
diff --git a/static/images/Mail-LockSymbol.jpg b/static/images/Mail-LockSymbol.jpg
new file mode 100644
index 0000000..fdeda3b
Binary files /dev/null and b/static/images/Mail-LockSymbol.jpg differ
diff --git a/templates/password_reset_mail.html b/templates/password_reset_mail.html
index 7c2e03c..e3a5e4b 100644
--- a/templates/password_reset_mail.html
+++ b/templates/password_reset_mail.html
@@ -10,32 +10,46 @@
     <tr>
         <td>
             <table align="center" cellpadding="15px" cellspacing="0" width="600" style="border-collapse: 
collapse;">
-                <tr>
+                <tr style="border-left: 1px solid #4295DB;border-right: 1px solid #4295DB;">
                     <td bgcolor="#4295DB" style="padding: 20px;">
-                        <img src="https://static.gnome.org/img/gnome-logo.svg";
+                        <img src="/static/images/GNOME-LogoHorizontal-white.png"
                              alt="GNOME Logo"
-                             width="100px"
+                             width="110px"
                              style="display: block;"
                         />
                     </td>
                 </tr>
-                <tr>
-                    <td bgcolor="white" align="center" height="300px">
+                <tr style="border-left: 1px solid #ccc;border-right: 1px solid #ccc;">
+                    <td bgcolor="white" align="center" style="height: fit-content;padding: 60px 0 80px 0;">
                         <table align="center" cellpadding="15px" cellspacing="0" width="500"
                                style="border-collapse: collapse;">
                             <tr>
                                 <td bgcolor="white" align="center">
-                                    <p style="margin: 0;">Please click <a
-                                            href="https://password.gnome.org/reset/{{ token }}"
-                                            style="text-decoration: none; color: #4295DB">here</a> to reset 
your
-                                        password.
+                                    <img src="/static/images/Mail-LockSymbol.jpg"
+                                         alt="Locked Symbol"
+                                         width="100px"
+                                    />
+                                    <h1 style="color: #4a86cf;font-weight: 400;font-size: 28pt;margin:0">
+                                        Forgot your password?
+                                    </h1>
+                                    <h3 style="color: #58595B;font-weight: 400;font-size: 
16pt;margin-top:10px">
+                                        Let's get you a new one!
+                                    </h3>
+                                    <p style="margin: 0;">
+                                        Use the link below to change the password for your GNOME account.
+                                        If you did not request to reset your password,
+                                        ignore this request and the link will expire.
                                     </p>
+                                    <a href="https://password.gnome.org/reset/{{ token }}"
+                                       style="padding: 6px 30px;font-size: 18px;line-height: 
1.33333;border-radius: 6px;color: #fff;background-color: #4a86cf;border: 1px solid #3679ca;display: 
block;width: fit-content;margin-top: 20px;text-decoration: none;">
+                                        Reset password
+                                    </a>
                                 </td>
                             </tr>
                         </table>
                     </td>
                 </tr>
-                <tr>
+                <tr style="border-left: 1px solid black;border-right: 1px solid black;">
                     <td bgcolor="black" height="20px">
                         <p style="margin: 0; color: #CCCCCC; font-size: 10pt">©
                             <a href="https://www.gnome.org"; style="text-decoration: none; color: white;">