Improve favicon contrast and redesign email templates with logo
favicon.svg: - Light mode: replace near-black fill (#2d3748) with indigo brand color (#6366f1 fill, #4f46e5 stroke, #a5b4fc page lines) — distinctive and high-contrast without the dark/black appearance - Dark mode unchanged email.py: - Add _EMAIL_LOGO_SVG: inline SVG with white palette for rendering on the indigo header (white book, lavender lines, gold sparkle) - Add _email_html(title, body): shared template wrapper — gray outer background, white card with border-radius, indigo header with logo + app name, content area, footer notifications.py: - Import and use _email_html for all six email functions: security alert, password reset, password reset success, invitation, task reminder, test email - Clean up all inline HTML to match the new card layout and spacing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -13,6 +13,65 @@ from fabledassistant.models.user import User
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
# Inline SVG logo for email (white palette, renders on indigo header)
|
||||
_EMAIL_LOGO_SVG = (
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"'
|
||||
' style="display:inline-block;vertical-align:middle;margin-right:8px;">'
|
||||
'<path d="M4 7 C4 7 8 5 16 6 C24 5 28 7 28 7 L28 26 C28 26 24 24 16 25 C8 24 4 26 4 26 Z"'
|
||||
' fill="#ffffff" stroke="#c4b5fd" stroke-width="0.5"/>'
|
||||
'<line x1="16" y1="6" x2="16" y2="25" stroke="#c4b5fd" stroke-width="0.8"/>'
|
||||
'<line x1="7" y1="11" x2="14" y2="10.5" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<line x1="7" y1="14" x2="14" y2="13.5" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<line x1="7" y1="17" x2="14" y2="16.5" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<line x1="7" y1="20" x2="12" y2="19.5" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<line x1="18" y1="10.5" x2="25" y2="11" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<line x1="18" y1="13.5" x2="25" y2="14" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<line x1="18" y1="16.5" x2="25" y2="17" stroke="#ddd6fe" stroke-width="0.6" stroke-linecap="round"/>'
|
||||
'<g transform="translate(24, 5)">'
|
||||
'<path d="M0 -4 L1 -1 L4 0 L1 1 L0 4 L-1 1 L-4 0 L-1 -1 Z" fill="#f6ad55"/>'
|
||||
'<path d="M0 -2.5 L0.6 -0.6 L2.5 0 L0.6 0.6 L0 2.5 L-0.6 0.6 L-2.5 0 L-0.6 -0.6 Z" fill="#fbd38d"/>'
|
||||
'</g>'
|
||||
'<circle cx="20" cy="3" r="0.7" fill="#f6ad55" opacity="0.7"/>'
|
||||
'<circle cx="27" cy="8" r="0.5" fill="#fbd38d" opacity="0.6"/>'
|
||||
'</svg>'
|
||||
)
|
||||
|
||||
|
||||
def _email_html(title: str, body: str) -> str:
|
||||
"""Wrap email body content in the standard Fabled Assistant template."""
|
||||
return f"""<!DOCTYPE html>
|
||||
<html>
|
||||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>
|
||||
<body style="margin:0;padding:0;background:#f3f4f6;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
|
||||
<div style="padding:32px 16px;">
|
||||
<div style="max-width:520px;margin:0 auto;">
|
||||
<div style="background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;">
|
||||
|
||||
<!-- Header -->
|
||||
<div style="background:#6366f1;padding:20px 24px;text-align:center;">
|
||||
<div style="margin-bottom:6px;">
|
||||
{_EMAIL_LOGO_SVG}<span style="display:inline-block;vertical-align:middle;color:#ffffff;font-size:17px;font-weight:600;letter-spacing:0.01em;">Fabled Assistant</span>
|
||||
</div>
|
||||
<p style="margin:0;color:#c7d2fe;font-size:13px;">{title}</p>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div style="padding:28px 24px;">
|
||||
{body}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="border-top:1px solid #e5e7eb;padding:14px 24px;text-align:center;background:#f9fafb;">
|
||||
<p style="margin:0;color:#9ca3af;font-size:12px;">This email was sent by your Fabled Assistant instance.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>"""
|
||||
|
||||
|
||||
SMTP_SETTING_KEYS = [
|
||||
"smtp_host",
|
||||
"smtp_port",
|
||||
@@ -109,15 +168,8 @@ async def send_email(to: str, subject: str, html_body: str) -> None:
|
||||
|
||||
async def send_test_email(to: str) -> None:
|
||||
"""Send a branded test email."""
|
||||
html = """
|
||||
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px;">
|
||||
<div style="background: #6366f1; color: #fff; padding: 16px 24px; border-radius: 8px 8px 0 0; text-align: center;">
|
||||
<h1 style="margin: 0; font-size: 20px;">Fabled Assistant</h1>
|
||||
</div>
|
||||
<div style="background: #f9fafb; padding: 24px; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px;">
|
||||
<p style="margin: 0 0 12px; color: #374151;">Your SMTP configuration is working correctly.</p>
|
||||
<p style="margin: 0; color: #6b7280; font-size: 14px;">This is a test email sent from your Fabled Assistant instance.</p>
|
||||
</div>
|
||||
</div>
|
||||
body = """
|
||||
<p style="margin:0 0 12px;color:#111827;font-size:15px;font-weight:600;">SMTP is configured correctly</p>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Your Fabled Assistant instance can send email notifications.</p>
|
||||
"""
|
||||
await send_email(to, "Fabled Assistant - Test Email", html)
|
||||
await send_email(to, "Fabled Assistant - Test Email", _email_html("Test Email", body))
|
||||
|
||||
Reference in New Issue
Block a user