Email templates updated to new styles

triggerdotdev · May 8, 2024 · 01ae81d · 01ae81d
1 parent a4efb23
commit 01ae81d
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 41 deletions.
diff --git a/packages/emails/emails/alert-attempt-failure.tsx b/packages/emails/emails/alert-attempt-failure.tsx
@@ -1,18 +1,18 @@
 import {
+  Body,
   CodeBlock,
   Container,
   Head,
   Html,
   Link,
   Preview,
-  Section,
   Text,
   dracula,
 } from "@react-email/components";
 import { z } from "zod";
 import { Footer } from "./components/Footer";
 import { Image } from "./components/Image";
-import { anchor, container, h1, main, paragraphLight } from "./components/styles";
+import { anchor, container, h1, main, paragraphLight, paragraphTight } from "./components/styles";
 
 export const AlertAttemptEmailSchema = z.object({
   email: z.literal("alert-attempt"),
@@ -53,11 +53,14 @@ export default function Email(props: z.infer<typeof AlertAttemptEmailSchema>) {
     <Html>
       <Head />
       <Preview>{`[${version}.${environment} ${taskIdentifier}] ${error.message}`}</Preview>
-      <Section style={main}>
+      <Body style={main}>
         <Container style={container}>
-          <Text
-            style={h1}
-          >{`There's been an error on ${taskIdentifier} (${fileName} -> ${exportName}) [${version}.${environment}]`}</Text>
+          <Text style={h1}>There's been an error on `{taskIdentifier}`</Text>
+          <Text style={paragraphTight}>Task ID: {taskIdentifier}</Text>
+          <Text style={paragraphTight}>Filename: {fileName}</Text>
+          <Text style={paragraphTight}>Function: {exportName}()</Text>
+          <Text style={paragraphTight}>Version: {version}</Text>
+          <Text style={paragraphTight}>Environment: {environment}</Text>
 
           <Text style={paragraphLight}>{error.message}</Text>
           {error.stackTrace && (
@@ -69,7 +72,7 @@ export default function Email(props: z.infer<typeof AlertAttemptEmailSchema>) {
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "16px",
+              marginBottom: "32px",
             }}
           >
             Investigate this error
@@ -78,7 +81,7 @@ export default function Email(props: z.infer<typeof AlertAttemptEmailSchema>) {
           <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
           <Footer />
         </Container>
-      </Section>
+      </Body>
     </Html>
   );
 }
diff --git a/packages/emails/emails/deployment-failure.tsx b/packages/emails/emails/deployment-failure.tsx
@@ -1,11 +1,11 @@
 import {
+  Body,
   CodeBlock,
   Container,
   Head,
   Html,
   Link,
   Preview,
-  Section,
   Text,
   dracula,
 } from "@react-email/components";
@@ -50,10 +50,9 @@ export default function Email(props: z.infer<typeof AlertDeploymentFailureEmailS
     <Html>
       <Head />
       <Preview>{`Deployment ${version} [${environment}] failed: ${error.name}`}</Preview>
-      <Section style={main}>
+      <Body style={main}>
         <Container style={container}>
-          <Text style={h1}>{`An error occurred deploying ${version} in ${environment}.`}</Text>
-
+          <Text style={h1}>{`An error occurred deploying ${version} in ${environment}`}</Text>
           <Text style={paragraphLight}>
             {error.name} {error.message}
           </Text>
@@ -66,16 +65,16 @@ export default function Email(props: z.infer<typeof AlertDeploymentFailureEmailS
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "16px",
+              marginBottom: "32px",
             }}
           >
-            Investigate
+            Investigate this error
           </Link>
 
           <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
           <Footer />
         </Container>
-      </Section>
+      </Body>
     </Html>
   );
 }
diff --git a/packages/emails/emails/deployment-success.tsx b/packages/emails/emails/deployment-success.tsx
@@ -1,4 +1,4 @@
-import { Container, Head, Html, Link, Preview, Section, Text } from "@react-email/components";
+import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
 import { z } from "zod";
 import { Footer } from "./components/Footer";
 import { Image } from "./components/Image";
@@ -33,19 +33,19 @@ export default function Email(props: z.infer<typeof AlertDeploymentSuccessEmailS
     <Html>
       <Head />
       <Preview>{`Deployment ${version} [${environment}] succeeded`}</Preview>
-      <Section style={main}>
+      <Body style={main}>
         <Container style={container}>
           <Text
             style={h1}
-          >{`Version ${version} successfully deployed ${taskCount} tasks in ${environment}.`}</Text>
+          >{`Version ${version} successfully deployed ${taskCount} tasks in ${environment}`}</Text>
 
           <Link
             href={deploymentLink}
             target="_blank"
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "16px",
+              marginBottom: "32px",
             }}
           >
             View Deployment
@@ -54,7 +54,7 @@ export default function Email(props: z.infer<typeof AlertDeploymentSuccessEmailS
           <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
           <Footer />
         </Container>
-      </Section>
+      </Body>
     </Html>
   );
 }
diff --git a/packages/emails/emails/invite.tsx b/packages/emails/emails/invite.tsx
@@ -1,4 +1,4 @@
-import { Container, Head, Html, Link, Preview, Section, Text } from "@react-email/components";
+import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
 import { z } from "zod";
 import { Footer } from "./components/Footer";
 import { Image } from "./components/Image";
@@ -22,7 +22,7 @@ export default function Email({
     <Html>
       <Head />
       <Preview>{`You've been invited to ${orgName}`}</Preview>
-      <Section style={main}>
+      <Body style={main}>
         <Container style={container}>
           <Text style={h1}>{`You've been invited to ${orgName}`}</Text>
           <Text style={paragraphLight}>
@@ -34,7 +34,7 @@ export default function Email({
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "16px",
+              marginBottom: "32px",
             }}
           >
             Click here to view the invitation
@@ -43,7 +43,7 @@ export default function Email({
           <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
           <Footer />
         </Container>
-      </Section>
+      </Body>
     </Html>
   );
 }
diff --git a/packages/emails/emails/magic-link.tsx b/packages/emails/emails/magic-link.tsx
@@ -1,14 +1,14 @@
-import { Container, Head, Html, Link, Preview, Section, Text } from "@react-email/components";
+import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
 import { Footer } from "./components/Footer";
 import { Image } from "./components/Image";
-import { anchor, container, h1, main, paragraphLight } from "./components/styles";
+import { anchor, container, h1, main, paragraph } from "./components/styles";
 
 export default function Email({ magicLink }: { magicLink: string }) {
   return (
     <Html>
       <Head />
       <Preview>Log in with this magic link 🪄</Preview>
-      <Section style={main}>
+      <Body style={main}>
         <Container style={container}>
           <Text style={h1}>Log in to Trigger.dev</Text>
           <Link
@@ -17,18 +17,18 @@ export default function Email({ magicLink }: { magicLink: string }) {
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "16px",
+              marginBottom: "32px",
             }}
           >
             Click here to log in with this magic link
           </Link>
-          <Text style={paragraphLight}>
+          <Text style={paragraph}>
             If you didn&apos;t try to log in, you can safely ignore this email.
           </Text>
           <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
           <Footer />
         </Container>
-      </Section>
+      </Body>
     </Html>
   );
 }
diff --git a/packages/emails/emails/welcome.tsx b/packages/emails/emails/welcome.tsx
@@ -1,20 +1,20 @@
-import { Head, Html, Link, Preview, Section, Text } from "@react-email/components";
+import { Body, Head, Html, Link, Preview, Section, Text } from "@react-email/components";
 import { Footer } from "./components/Footer";
-import { anchor, bullets, footerItalic, main, paragraph } from "./components/styles";
+import { anchor, bullets, footerItalic, main, paragraphLight } from "./components/styles";
 
 export default function Email({ name }: { name?: string }) {
   return (
     <Html>
       <Head />
       <Preview>Power up your workflows</Preview>
-      <Section style={main}>
-        <Text style={paragraph}>Hey {name ?? "there"},</Text>
-        <Text style={paragraph}>I’m Matt, CEO of Trigger.dev.</Text>
-        <Text style={paragraph}>
+      <Body style={main}>
+        <Text style={paragraphLight}>Hey {name ?? "there"},</Text>
+        <Text style={paragraphLight}>I’m Matt, CEO of Trigger.dev.</Text>
+        <Text style={paragraphLight}>
           Our goal is to give developers like you the ability to effortlessly create powerful
           workflows in code.
         </Text>
-        <Text style={paragraph}>
+        <Text style={paragraphLight}>
           We recommend{" "}
           <Link style={anchor} href="https://app.trigger.dev/templates">
             getting started with one of our templates
@@ -23,7 +23,7 @@ export default function Email({ name }: { name?: string }) {
           workflows.
         </Text>
 
-        <Text style={paragraph}>
+        <Text style={paragraphLight}>
           Feel free to reply to me if you have any questions. You can also{" "}
           <Link style={anchor} href="https://cal.com/team/triggerdotdev/call">
             schedule a call
@@ -35,17 +35,17 @@ export default function Email({ name }: { name?: string }) {
           to connect with the community and our team.
         </Text>
 
-        <Text style={paragraph}>We hope you enjoy using Trigger.dev!</Text>
+        <Text style={paragraphLight}>We hope you enjoy using Trigger.dev!</Text>
 
         <Text style={bullets}>Best,</Text>
         <Text style={bullets}>Matt</Text>
-        <Text style={paragraph}>CEO, Trigger.dev</Text>
+        <Text style={paragraphLight}>CEO, Trigger.dev</Text>
         <Text style={footerItalic}>
           If you don’t want me to contact you again, please just let me know and I’ll update your
           preferences.
         </Text>
         <Footer />
-      </Section>
+      </Body>
     </Html>
   );
 }