diff --git a/apps/webapp/public/emails/logo-triangle.png b/apps/webapp/public/emails/logo-triangle.png
new file mode 100644
index 0000000000..59ae39f5d8
Binary files /dev/null and b/apps/webapp/public/emails/logo-triangle.png differ
diff --git a/internal-packages/emails/emails/components/Footer.tsx b/internal-packages/emails/emails/components/Footer.tsx
index 00f128c8be..36ca0b03d8 100644
--- a/internal-packages/emails/emails/components/Footer.tsx
+++ b/internal-packages/emails/emails/components/Footer.tsx
@@ -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";
export function Footer() {
return (
<>
-
+
©Trigger.dev, 1111B S Governors Ave STE 6433, Dover, DE 19904 |{" "}
-
+
Trigger.dev
diff --git a/internal-packages/emails/emails/components/styles.ts b/internal-packages/emails/emails/components/styles.ts
index 7e7db86621..1c9947de9d 100644
--- a/internal-packages/emails/emails/components/styles.ts
+++ b/internal-packages/emails/emails/components/styles.ts
@@ -26,7 +26,6 @@ export const box = {
export const hr = {
borderColor: "#272A2E",
- margin: "20px 0",
};
export const sans = {
diff --git a/internal-packages/emails/emails/invite.tsx b/internal-packages/emails/emails/invite.tsx
index 56ff815bff..e67ae0dddc 100644
--- a/internal-packages/emails/emails/invite.tsx
+++ b/internal-packages/emails/emails/invite.tsx
@@ -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"),
@@ -20,30 +30,46 @@ export default function Email({
}: z.infer) {
return (
-
{`You've been invited to ${orgName}`}
-
-
- {`You've been invited to ${orgName}`}
-
- {inviterName ?? inviterEmail} has invited you to join their organization on Trigger.dev.
-
-
- Click here to view the invitation
-
-
-
-
-
-
+
+
+
+
+
+ {`You've been invited to ${orgName}`}
+
+ {inviterName ?? inviterEmail} has invited you to join their organization on
+ Trigger.dev.
+
+
+
+
+
+ Can't see the button? Copy and paste this link into your browser:
+
+
+ {inviteLink}
+
+
+
+
+
+
);
}
diff --git a/internal-packages/emails/emails/magic-link.tsx b/internal-packages/emails/emails/magic-link.tsx
index 21ec1575d0..4a552f4ba0 100644
--- a/internal-packages/emails/emails/magic-link.tsx
+++ b/internal-packages/emails/emails/magic-link.tsx
@@ -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 (
-
- Log in with this magic link 🪄
-
-
- Log in to Trigger.dev
-
- Click here to log in with this magic link
-
-
- If you didn't try to log in, you can safely ignore this email.
-
-
-
-
-
+ Log in with this magic link
+
+
+
+
+
+
+ Log in to Trigger.dev
+
+
+
+
+
+ Can't see the button? Copy and paste this link into your browser:{" "}
+
+
+ {magicLink}
+
+
+
+
+
+ This link expires in 30 minutes and can only be used once. If you didn't try to
+ log in, you can safely ignore this email.
+
+
+
+
+
+
);
}
diff --git a/internal-packages/emails/emails/welcome.tsx b/internal-packages/emails/emails/welcome.tsx
index 8b5dbb63ea..cdbdb83a1b 100644
--- a/internal-packages/emails/emails/welcome.tsx
+++ b/internal-packages/emails/emails/welcome.tsx
@@ -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 (
-