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

packages/react-email/emails/new_account.tsx

@@ -25,8 +25,8 @@ export default function NewAccount({
       project_name={project_name}
     >
       <Heading>Welcome to {project_name}!</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>Hi,</Text>
+      <Text style={bodyTextStyle}>
         Your account has been successfully created and is ready to use. These
         are your credentials:
       </Text>
@@ -34,18 +34,32 @@ export default function NewAccount({
         <Detail label="Username" value={username} />
         <Detail label="Password" value={password} />
       </Callout>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>
         Get started by signing in to your dashboard:
       </Text>
       <LinkButton href={link}>Go to Dashboard</LinkButton>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         For security reasons, change your password after your first sign in.
       </Text>
     </Layout>
   )
 }
+
+const bodyTextStyle = {
+  color: "#334155",
+  fontSize: "15px",
+  lineHeight: "26px",
+  margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+  color: "#64748b",
+  fontSize: "14px",
+  lineHeight: "23px",
+  margin: "0 0 16px",
+}

packages/react-email/emails/reset_password.tsx

@@ -24,24 +24,38 @@ export default function ResetPassword({
       project_name={project_name}
     >
       <Heading>Reset your password</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi {username},</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>Hi {username},</Text>
+      <Text style={bodyTextStyle}>
         We've received a request to reset the password for your {project_name}{" "}
         account. Choose a new one by clicking the button below:
       </Text>
       <LinkButton href={link}>Reset password</LinkButton>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         This link will expire in {valid_hours} hours.
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         If you didn't request a password recovery, you can safely ignore this
         email.
       </Text>
     </Layout>
   )
 }
+
+const bodyTextStyle = {
+  color: "#334155",
+  fontSize: "15px",
+  lineHeight: "26px",
+  margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+  color: "#64748b",
+  fontSize: "14px",
+  lineHeight: "23px",
+  margin: "0 0 16px",
+}

packages/react-email/emails/test_email.tsx

@@ -19,17 +19,31 @@ export default function TestEmail({
       project_name={project_name}
     >
       <Heading>Test email</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>Hi,</Text>
+      <Text style={bodyTextStyle}>
         This is a test email from {project_name}. If you're reading it, email
         delivery is configured correctly.
       </Text>
       <Callout>
         <Detail label="Sent to" value={email} />
       </Callout>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         If you weren't expecting this email, you can safely ignore it.
       </Text>
     </Layout>
   )
 }
+
+const bodyTextStyle = {
+  color: "#334155",
+  fontSize: "15px",
+  lineHeight: "26px",
+  margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+  color: "#64748b",
+  fontSize: "14px",
+  lineHeight: "23px",
+  margin: "0 0 16px",
+}