From df8db1171ad4989807ae0fb485b04d94b2954130 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 26 Apr 2023 20:21:30 -0700
Subject: [PATCH] fix: style email with inline styles

---
 packages/backend/src/services/send-email.ts | 82 +++------------------
 1 file changed, 10 insertions(+), 72 deletions(-)
diff --git a/packages/backend/src/services/send-email.ts b/packages/backend/src/services/send-email.ts
index f24269d9be..7647b0db49 100644
--- a/packages/backend/src/services/send-email.ts
+++ b/packages/backend/src/services/send-email.ts
@@ -33,66 +33,6 @@ export async function sendEmail(
 	} as any);
 
 	try {
-		// TODO: htmlサニタイズ
-		const style = `
-		<style>
-			html {
-				background: #191724;
-			}
-
-			body {
-				padding: 16px;
-				margin: 0;
-				font-family: sans-serif;
-				font-size: 14px;
-			}
-
-			a {
-				text-decoration: none;
-				color: #31748f;
-			}
-			a:hover {
-				text-decoration: underline;
-			}
-
-			main {
-				max-width: 500px;
-				margin: 0 auto;
-				background: #1f1d2e;
-				color: #e0def4;
-			}
-				main > header {
-					padding: 32px;
-					background: #31748f;
-					display: flex;
-				}
-					main > header > img {
-						max-width: 128px;
-						max-height: 72px;
-						vertical-align: bottom;
-						margin-right: 16px;
-					}
-				main > article {
-					padding: 32px;
-				}
-					main > article > h1 {
-						margin: 0 0 1em 0;
-					}
-				main > footer {
-					padding: 32px;
-					border-top: solid 1px #26233a;
-				}
-
-			nav {
-				box-sizing: border-box;
-				max-width: 500px;
-				margin: 16px auto 0 auto;
-				padding: 0 32px;
-			}
-				nav > a {
-					color: #6e6a86;
-				}
-		</style>`
 		const info = await transporter.sendMail({
 			from: meta.email!,
 			to: to,
@@ -103,25 +43,23 @@ export async function sendEmail(
 	<head>
 		<meta charset="utf-8">
 		<title>${subject}</title>
-		${style}
 	</head>
-	<body>
-		${style}
-		<main>
-			<header>
-				<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" height="100"/>
-				<h1>${meta.name}</h1>
+	<body style="background: #191724; padding: 16px; margin: 0; font-family: sans-serif; font-size: 14px;">
+		<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4;">
+			<header style="padding: 32px; background: #31748f; display: flex;">
+				<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-right: 16px;"/>
+				<h1 style="margin: 0 0 1em 0;">${meta.name}</h1>
 			</header>
-			<article>
+			<article style="padding: 32px;">
 				<h1>${subject}</h1>
 				<div>${html}</div>
 			</article>
-			<footer>
-				<a href="${emailSettingUrl}">${"Email setting"}</a>
+			<footer style="padding: 32px; border-top: solid 1px #26233a;">
+				<a href="${emailSettingUrl}" style="color: #31748f !important;">${"Email setting"}</a>
 			</footer>
 		</main>
-		<nav>
-			<a href="${config.url}">${config.host}</a>
+		<nav style="box-sizing: border-box; max-width: 500px; margin: 16px auto 0 auto; padding: 0 32px;">
+			<a href="${config.url}" style="color: #6e6a86 !important;">${config.host}</a>
 		</nav>
 	</body>
 </html>`,
