💄 Refactor email templates and components for improved styling (#2451)

2026-09-21 13:28:57 +00:00 · 2026-08-21 13:09:48 +02:00
parent 2734dfd002
commit 00a6aa978e
11 changed files with 213 additions and 96 deletions
@@ -1,11 +1,13 @@
 import {
  Body,
+  Column,
+  Container,
  Head,
  Hr,
  Html,
  Preview,
+  Row,
  Section,
-  Tailwind,
  Text,
 } from "@react-email/components"

@@ -22,64 +24,88 @@ export const Layout = ({
  children,
 }: LayoutProps) => {
  return (
-    <Tailwind
-      config={{
-        theme: {
-          extend: {
-            colors: {
-              surface: "#ffffff",
-              body: "#1e293b",
-              muted: "#64748b",
-              rule: "#e2e8f0",
-              brand: {
-                DEFAULT: "#009688",
-                dark: "#00695c",
-              },
-            },
-            fontFamily: {
-              sans: [
-                "-apple-system",
-                "BlinkMacSystemFont",
-                '"Segoe UI"',
-                "Roboto",
-                "Oxygen",
-                "Ubuntu",
-                "Cantarell",
-                '"Fira Sans"',
-                '"Droid Sans"',
-                '"Helvetica Neue"',
-                "sans-serif",
-              ],
-            },
-          },
-        },
-      }}
-    >
-      <Html lang="en" dir="ltr">
-        <Head>
-          <title>{title}</title>
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
-        </Head>
-        {preview ? <Preview>{preview}</Preview> : null}
-        <Body className="bg-surface font-sans text-body max-w-[560px] w-full mx-auto my-0 py-12 px-6">
-          <Section>
-            <Hr className="border-0 border-t-2 border-solid border-brand w-8 m-0" />
-            <Text className="text-body text-[13px] font-semibold uppercase tracking-[0.1em] mt-4 mb-9">
-              {project_name}
-            </Text>
-          </Section>
-          <Section>{children}</Section>
-          <Hr className="border-0 border-t border-solid border-rule mt-10 mb-5" />
-          <Section>
-            <Text className="text-xs leading-5 text-muted m-0">
-              © {new Date().getFullYear()} {project_name}. All rights reserved.
-            </Text>
-          </Section>
-        </Body>
-      </Html>
-    </Tailwind>
+    <Html lang="en" dir="ltr">
+      <Head>
+        <title>{title}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      {preview ? <Preview>{preview}</Preview> : null}
+      <Body style={bodyStyle}>
+        <Container style={containerStyle}>
+          <Row>
+            <Column style={contentStyle}>
+              <Section>
+                <Hr style={brandRuleStyle} />
+                <Text style={brandStyle}>{project_name}</Text>
+              </Section>
+              <Section>{children}</Section>
+              <Hr style={footerRuleStyle} />
+              <Section>
+                <Text style={footerStyle}>
+                  © {new Date().getFullYear()} {project_name}. All rights
+                  reserved.
+                </Text>
+              </Section>
+            </Column>
+          </Row>
+        </Container>
+      </Body>
+    </Html>
  )
 }
+
+const fontFamily =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
+
+const bodyStyle = {
+  backgroundColor: "#f4f7f6",
+  color: "#1e293b",
+  fontFamily,
+  margin: "0",
+  padding: "32px 12px",
+}
+
+const containerStyle = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #dce7e5",
+  borderRadius: "8px",
+  boxSizing: "border-box" as const,
+  margin: "0 auto",
+  maxWidth: "560px",
+  width: "100%",
+}
+
+const contentStyle = {
+  padding: "40px 36px 32px",
+}
+
+const brandRuleStyle = {
+  border: "0",
+  borderTop: "3px solid #00897b",
+  margin: "0 0 16px",
+  width: "32px",
+}
+
+const brandStyle = {
+  color: "#334155",
+  fontSize: "13px",
+  fontWeight: "700",
+  letterSpacing: "1px",
+  lineHeight: "20px",
+  margin: "0 0 32px",
+  textTransform: "uppercase" as const,
+}
+
+const footerRuleStyle = {
+  border: "0",
+  borderTop: "1px solid #dce7e5",
+  margin: "36px 0 18px",
+  width: "100%",
+}
+
+const footerStyle = {
+  color: "#64748b",
+  fontSize: "12px",
+  lineHeight: "20px",
+  margin: "0",
+}