refactor: use react email for email templates (#734)

Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com> Co-authored-by: Elias Schneider <login@eliasschneider.com>
2026-02-15 04:05:14 +00:00 · 2025-08-31 11:54:13 -05:00
parent 6c843228eb
commit 802754c24c
33 changed files with 5092 additions and 336 deletions
--- a/email-templates/components/base-template.tsx
+++ b/email-templates/components/base-template.tsx
@@ -0,0 +1,87 @@
+import {
+  Body,
+  Column,
+  Container,
+  Head,
+  Html,
+  Img,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+
+interface BaseTemplateProps {
+  logoURL?: string;
+  appName: string;
+  children: React.ReactNode;
+}
+
+export const BaseTemplate = ({
+  logoURL,
+  appName,
+  children,
+}: BaseTemplateProps) => {
+  const finalLogoURL =
+    logoURL ||
+    "https://private-user-images.githubusercontent.com/58886915/359183039-4ceb2708-9f29-4694-b797-be833efce17d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTY0NTk5MzksIm5iZiI6MTc1NjQ1OTYzOSwicGF0aCI6Ii81ODg4NjkxNS8zNTkxODMwMzktNGNlYjI3MDgtOWYyOS00Njk0LWI3OTctYmU4MzNlZmNlMTdkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA4MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwODI5VDA5MjcxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM4ZWI5NzlkMDA5NDNmZGU5MjQwMGE1YjA0NWZiNzEzM2E0MzAzOTFmOWRmNDUzNmJmNjQwZTMxNGIzZmMyYmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.YdfLv1tD5KYnRZPSA3QlR1SsvScpP0rt-J3YD6ZHsCk";
+
+  return (
+    <Html>
+      <Head />
+      <Body style={mainStyle}>
+        <Container style={{ width: "500px", margin: "0 auto" }}>
+          <Section>
+            <Row
+            align="left"
+            style={{
+              width: "210px",
+              marginBottom: "16px",
+            }}
+          >
+            <Column>
+              <Img
+                src={finalLogoURL}
+                width="32"
+                height="32"
+                alt={appName}
+                style={logoStyle}
+              />
+            </Column>
+            <Column>
+              <Text style={titleStyle}>{appName}</Text>
+            </Column>
+          </Row>
+          </Section>
+          <div style={content}>{children}</div>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+const mainStyle = {
+  padding: "50px",
+  backgroundColor: "#FBFBFB",
+  fontFamily: "Arial, sans-serif",
+};
+
+const logoStyle = {
+  width: "32px",
+  height: "32px",
+  verticalAlign: "middle",
+  marginRight: "8px",
+};
+
+const titleStyle = {
+  fontSize: "23px",
+  fontWeight: "bold",
+  margin: "0",
+  padding: "0",
+};
+
+const content = {
+  backgroundColor: "white",
+  padding: "24px",
+  borderRadius: "10px",
+  boxShadow: "0 1px 4px 0px rgba(0, 0, 0, 0.1)",
+};
--- a/email-templates/components/button.tsx
+++ b/email-templates/components/button.tsx
@@ -0,0 +1,33 @@
+import { Button as EmailButton } from "@react-email/components";
+
+interface ButtonProps {
+  href: string;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export const Button = ({ href, children, style = {} }: ButtonProps) => {
+  const buttonStyle = {
+    backgroundColor: "#000000",
+    color: "#ffffff",
+    padding: "12px 24px",
+    borderRadius: "4px",
+    fontSize: "15px",
+    fontWeight: "500",
+    cursor: "pointer",
+    marginTop: "10px",
+    ...style,
+  };
+
+  return (
+    <div style={buttonContainer}>
+      <EmailButton style={buttonStyle} href={href}>
+        {children}
+      </EmailButton>
+    </div>
+  );
+};
+
+const buttonContainer = {
+  textAlign: "center" as const,
+};
--- a/email-templates/components/card-header.tsx
+++ b/email-templates/components/card-header.tsx
@@ -0,0 +1,38 @@
+import { Column, Heading, Row, Text } from "@react-email/components";
+
+export default function CardHeader({
+  title,
+  warning,
+}: {
+  title: string;
+  warning?: boolean;
+}) {
+  return (
+    <Row>
+      <Column>
+        <Heading as="h1" style={titleStyle}>
+          {title}
+        </Heading>
+      </Column>
+      <Column align="right">
+        {warning && <Text style={warningStyle}>Warning</Text>}
+      </Column>
+    </Row>
+  );
+}
+
+const titleStyle = {
+  fontSize: "20px",
+  fontWeight: "bold" as const,
+  margin: 0,
+};
+
+const warningStyle = {
+  backgroundColor: "#ffd966",
+  color: "#7f6000",
+  padding: "1px 12px",
+  borderRadius: "50px",
+  fontSize: "12px",
+  display: "inline-block",
+  margin: 0,
+};