Skip to content

chore(webapp): improvements to app emails #2482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

chore(webapp): improvements to app emails #2482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c54ad17
Updates react-email to @latest version
samejr Aug 3, 2025
793ceee
Remove unncessary styles from <hr>
samejr Aug 3, 2025
e6376f6
Email Footer component uses tailwind
samejr Aug 3, 2025
7f83b93
Adds triangle logo
samejr Aug 3, 2025
33d3ac1
Updates the magic link email
samejr Aug 3, 2025
96eaf89
Merge branch 'main' into nicer-app-emails
samejr Sep 7, 2025
bd964a4
Fixed broken links in the welcome email and improved the copy
samejr Sep 7, 2025
b6a2a66
Improve copy in magic link email
samejr Sep 7, 2025
4439bf8
Updates invite email with newer components and tailwind
samejr Sep 7, 2025
a42c799
Style improvements
samejr Sep 7, 2025
8751001
Merge branch 'main' into nicer-app-emails
samejr Sep 7, 2025
78dbf36
import tailwind from other package (coderabbit suggestion)
samejr Sep 7, 2025
d3a7fcc
Updatea email preview package version
samejr Sep 7, 2025
6677844
Fixes typescript errors
samejr Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added apps/webapp/public/emails/logo-triangle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 4 additions & 5 deletions internal-packages/emails/emails/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { Hr, Link, Text } from "@react-email/components";
import React from "react";
import { footer, footerAnchor, hr } from "./styles";
import { Hr, Link, Tailwind, Text } from "@react-email/components";
import { hr } from "./styles";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Tailwind is imported from the wrong package and unused here.

Footer doesn’t use Tailwind; drop it from the import (and if needed elsewhere, import from @react-email/tailwind, not components).

Apply:

-import { Hr, Link, Tailwind, Text } from "@react-email/components";
+import { Hr, Link, Text } from "@react-email/components";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { Hr, Link, Tailwind, Text } from "@react-email/components";
import { Hr, Link, Text } from "@react-email/components";
🤖 Prompt for AI Agents 
internal-packages/emails/emails/components/Footer.tsx lines 1-1: the import
currently brings in Tailwind from the wrong package and it is unused in this
file; remove Tailwind from the import list (keep Hr, Link, Text) so Footer only
imports what it uses, and if you need Tailwind elsewhere import it from
@react-email/tailwind rather than @react-email/components.


export function Footer() {
return (
<>
<Hr style={hr} />
<Text style={footer}>
<Text className="text-[12px] text-[#878C99]">
©Trigger.dev, 1111B S Governors Ave STE 6433, Dover, DE 19904 |{" "}
<Link style={footerAnchor} href="https://trigger.dev/">
<Link className="text-[#878C99] text-[12px] underline" href="https://trigger.dev/">
Trigger.dev
</Link>
</Text>
Expand Down
1 change: 0 additions & 1 deletion internal-packages/emails/emails/components/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export const box = {

export const hr = {
borderColor: "#272A2E",
margin: "20px 0",
};

export const sans = {
Expand Down
76 changes: 51 additions & 25 deletions internal-packages/emails/emails/invite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
import {
Body,
Button,
Container,
Html,
Link,
Preview,
Section,
Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
import { z } from "zod";
import { Footer } from "./components/Footer";
import { Image } from "./components/Image";
import { anchor, container, h1, main, paragraphLight } from "./components/styles";
import { paragraphLight } from "./components/styles";

export const InviteEmailSchema = z.object({
email: z.literal("invite"),
Expand All @@ -20,30 +30,46 @@ export default function Email({
}: z.infer<typeof InviteEmailSchema>) {
return (
<Html>
<Head />
<Preview>{`You've been invited to ${orgName}`}</Preview>
<Body style={main}>
<Container style={container}>
<Text style={h1}>{`You've been invited to ${orgName}`}</Text>
<Text style={paragraphLight}>
{inviterName ?? inviterEmail} has invited you to join their organization on Trigger.dev.
</Text>
<Link
href={inviteLink}
target="_blank"
style={{
...anchor,
display: "block",
marginBottom: "50px",
}}
>
Click here to view the invitation
</Link>

<Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
<Footer />
</Container>
</Body>
<Tailwind>
<Body className="bg-[#121317] my-auto mx-auto font-sans">
<Container className="my-[40px] mx-auto p-[20px] max-w-[600px]">
<Section className="mt-[32px]">
<Image
path="/emails/logo.png"
width="180px"
height="32px"
alt="Trigger.dev"
className="mt-0 mb-12"
/>
<Text className="text-[24px] font-bold text-[#D7D9DD] mb-8">{`You've been invited to ${orgName}`}</Text>
<Text style={paragraphLight}>
{inviterName ?? inviterEmail} has invited you to join their organization on
Trigger.dev.
</Text>
<Button
href={inviteLink}
className="bg-[#A8FF53] rounded text-[#121317] text-[16px] no-underline text-center px-4 py-3 mb-8"
>
View the invitation
</Button>
</Section>
<Section className="mb-6">
<Text className="text-[14px] text-[#878C99]">
Can&apos;t see the button? Copy and paste this link into your browser:
</Text>
<Link
href={inviteLink}
target="_blank"
className="text-[#6366F1] text-[14px] no-underline"
>
{inviteLink}
</Link>
</Section>
<Footer />
</Container>
</Body>
</Tailwind>
</Html>
);
}
88 changes: 58 additions & 30 deletions internal-packages/emails/emails/magic-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,67 @@
import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
import {
Body,
Button,
Container,
Hr,
Html,
Link,
Preview,
Section,
Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
import { Footer } from "./components/Footer";
import { Image } from "./components/Image";
import { anchor, container, h1, main, paragraphLight } from "./components/styles";
import { hr } from "./components/styles";

export default function Email({ magicLink }: { magicLink: string }) {
return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Switch to a named export per repo guidelines; also use a clearer component name.

Avoid default exports. Rename to a named export to align with “No default exports, use function declarations”.

-export default function Email({ magicLink }: { magicLink: string }) {
+export function MagicLinkEmail({ magicLink }: { magicLink: string }) {

Run to find and update call sites that import the default:

#!/bin/bash
# Find default imports of magic-link and re-export patterns using default
rg -nP -C1 '\bimport\s+Email\s+from\s+["\'][^"\']*magic-link' --type=ts --type=tsx
rg -nP -C1 'export\s*{\s*default\s+as\s+[^}]+}\s*from\s*["\'][^"\']*magic-link' --type=ts --type=tsx
🤖 Prompt for AI Agents 
In internal-packages/emails/emails/magic-link.tsx around line 17, the component
is exported as a default and named Email; change this to a named function export
with a clearer name (e.g., MagicLinkEmail) and export it as a named export
(export function MagicLinkEmail(...)). Update the component name internally if
needed but keep the same props signature, remove the default export, and ensure
the file exports the component by name. Run the provided ripgrep commands to
find and update all call sites to import { MagicLinkEmail } from
'.../magic-link' (or adjust to the new name) and replace any re-exports of
default with corresponding named re-exports. Finally run TypeScript build/tests
to validate no remaining default-import references.

<Html>
<Head />
<Preview>Log in with this magic link 🪄</Preview>
<Body style={main}>
<Container style={container}>
<Text style={h1}>Log in to Trigger.dev</Text>
<Link
href={magicLink}
target="_blank"
style={{
...anchor,
display: "block",
}}
>
Click here to log in with this magic link
</Link>
<Text
style={{
...paragraphLight,
display: "block",
marginBottom: "50px",
}}
>
If you didn&apos;t try to log in, you can safely ignore this email.
</Text>
<Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
<Footer />
</Container>
</Body>
<Preview>Log in with this magic link</Preview>
<Tailwind>
<Body className="bg-[#121317] my-auto mx-auto font-sans">
<Container className="my-[40px] mx-auto p-[20px] max-w-[600px]">
<Section className="mt-[32px]">
<Image
path="/emails/logo.png"
width="180px"
height="32px"
alt="Trigger.dev"
className="mt-0 mb-12"
/>
<Text className="text-[24px] font-bold text-[#D7D9DD] mb-8">
Log in to Trigger.dev
</Text>
<Button
href={magicLink}
className="bg-[#A8FF53] rounded text-[#121317] text-[16px] no-underline text-center px-4 py-3 mb-8"
>
Log in with magic link
</Button>
</Section>
<Section className="mb-6">
<Text className="text-[14px] text-[#878C99]">
Can&apos;t see the button? Copy and paste this link into your browser:{" "}
</Text>
<Link
href={magicLink}
target="_blank"
className="text-[#6366F1] text-[14px] no-underline"
>
{magicLink}
</Link>
</Section>
<Section>
<Hr style={hr} />
<Text className="text-[14px] mt-2 mb-0 text-[#878C99]">
This link expires in 30 minutes and can only be used once. If you didn&apos;t try to
log in, you can safely ignore this email.
</Text>
</Section>
<Footer />
</Container>
</Body>
</Tailwind>
</Html>
);
}
91 changes: 52 additions & 39 deletions internal-packages/emails/emails/welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,64 @@
import { Body, Head, Html, Link, Preview, Section, Text } from "@react-email/components";
import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
import { Footer } from "./components/Footer";
import { anchor, bullets, footerItalic, main, paragraphLight } from "./components/styles";

export default function Email({ name }: { name?: string }) {
return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use a named export per repo guideline (no default exports).

Switch to a named function export; consider a descriptive name.

Apply:

-export default function Email({ name }: { name?: string }) {
+export function WelcomeEmail({ name }: { name?: string }) {

Update import sites accordingly.

#!/bin/bash
rg -nP --type=ts --type=tsx -C2 'export\s+default\s+function\s+Email\(|from\s+["'\'']\./emails/welcome["'\'']'
🤖 Prompt for AI Agents 
internal-packages/emails/emails/welcome.tsx around line 13: this file currently
uses a default export for the Email component; change it to a named export
(e.g., export function WelcomeEmail({ name }: { name?: string }) { ... }) and
update all import sites to use the new named import (import { WelcomeEmail }
from './emails/welcome'). Run the provided ripgrep command to find and update
usages and ensure TypeScript/ESLint passes after renaming.

<Html>
<Head />
<Preview>Power up your workflows</Preview>
<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={paragraphLight}>
We recommend{" "}
<Link style={anchor} href="https://app.trigger.dev/templates">
getting started with one of our templates
</Link>{" "}
to get familiar with how Trigger.dev works, and then moving on to create your own
workflows.
</Text>
<Preview>Welcome to Trigger.dev</Preview>
<Tailwind>
<Body className="bg-[#121317] my-auto mx-auto font-sans">
<Container className="mb-[40px] mx-auto p-[20px] max-w-[600px] text-[#D7D9DD]">
<Text className="text-[16px]">Hey {name ?? "there"},</Text>
<Text className="text-[16px]">I’m Matt, CEO of Trigger.dev.</Text>
<Text className="text-[16px]">
Our goal is to give developers like you the ability to effortlessly create powerful AI
agents and workflows in code.
</Text>
<Text className="text-[16px]">
I recommend our{" "}
<Link
className="text-[#6366F1] text-[16px] no-underline"
href="https://trigger.dev/docs/quick-start"
>
quick start guide
</Link>{" "}
to get started, or{" "}
<Link
className="text-[#6366F1] text-[16px] no-underline"
href="https://trigger.dev/docs/guides/introduction"
>
one of our examples
</Link>{" "}
to get familiar with how Trigger.dev works, and then move on to create your own
workflow.
</Text>

<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
</Link>{" "}
, or join our{" "}
<Link style={anchor} href="https://discord.gg/JtBAxBr2m3">
Discord server
</Link>{" "}
to connect with the community and our team.
</Text>
<Text className="text-[16px]">
Feel free to reply to this email if you have any questions or join our{" "}
<Link
className="text-[#6366F1] text-[16px] no-underline"
href="https://discord.gg/JtBAxBr2m3"
>
Discord
</Link>{" "}
to connect with the community and our team.
</Text>

<Text style={paragraphLight}>We hope you enjoy using Trigger.dev!</Text>
<Text className="text-[16px]">We hope you enjoy using Trigger.dev!</Text>

<Text style={bullets}>Best,</Text>
<Text style={bullets}>Matt</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 />
</Body>
<Text className="text-[16px]">Best,</Text>
<Text className="text-[16px]">Matt</Text>
<Text className="text-[16px]">CEO, Trigger.dev</Text>
<Text className="text-[16px]">
If you don’t want me to contact you again, please just let me know and I’ll update
your preferences.
</Text>
<Footer />
</Container>
</Body>
</Tailwind>
</Html>
);
}
8 changes: 5 additions & 3 deletions internal-packages/emails/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,18 @@
},
"dependencies": {
"@aws-sdk/client-ses": "^3.716.0",
"@react-email/components": "0.0.16",
"@react-email/render": "^0.0.12",
"@react-email/components": "0.4.0",
"@react-email/render": "^1.1.4",
"@react-email/tailwind": "1.2.0",
"nodemailer": "^6.9.16",
"react": "^18.2.0",
"react-email": "^2.1.1",
"react-email": "^4.2.7",
"resend": "^3.2.0",
"tiny-invariant": "^1.2.0",
"zod": "3.25.76"
},
"devDependencies": {
"@react-email/preview-server": "4.2.8",
"@types/nodemailer": "^6.4.17",
"@types/react": "18.2.69"
},
Expand Down
Loading
Loading