Improve email template

- remove the grey big border
- use horizontal logo
- add a shell snippet to view quickly email render

shell.py

@@ -3,6 +3,7 @@ from IPython import embed
 from sqlalchemy_utils import create_database, database_exists, drop_database
 
 from app.config import DB_URI
+from app.email_utils import _render
 from app.models import *
 from server import create_app
 from app import email_utils
@@ -33,4 +34,8 @@ def reset_db():
 app = create_app()
 
 with app.app_context():
+    # to test email template
+    # with open("/tmp/email.html", "w") as f:
+    #     f.write(_render("welcome.html", name="John Wick"))
+
     embed()

templates/emails/base.html

@@ -60,8 +60,7 @@ a, a:hover {
 
 	<tr>
 		<td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;
-			padding-top: 20px;
-			padding-bottom: 20px;">
+			padding-bottom: 10px;">
 
 			<!-- PREHEADER -->
 			<!-- Set text color to background color -->
@@ -74,8 +73,8 @@ a, a:hover {
 			<!-- Image text color should be opposite to background color. Set your url, image src, alt and title. Alt text should fit the image size. Real image size should be x2.  -->
 			<a target="_blank" style="text-decoration: none;"
 				href="https://simplelogin.io"><img border="0" vspace="0" hspace="0"
-				src="https://static.simplelogin.io/transparent.png"
-				width="100" height="100"
+				src="https://simplelogin.io/logo.png"
+				height="50"
 				alt="Logo" title="Logo" style="
 				color: #000000;
 				font-size: 10px; margin: 0; padding: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: block;" /></a>
@@ -87,11 +86,10 @@ a, a:hover {
 </table>
 
 <!-- CONTENT -->
-<!-- Set conteiner background color -->
+<!-- Set container background color -->
 <table border="0" cellpadding="0" cellspacing="0" align="center"
 	bgcolor="#FFFFFF"
-	width="560" style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit;
-	max-width: 560px;" class="container">
+	style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit;" class="container">
 
 
   {% block content %}