Updates invite email with newer components and tailwind

samejr · samejr · commit 4439bf82a962 · 2025-09-07T14:52:44.000+01:00
diff --git a/internal-packages/emails/emails/invite.tsx b/internal-packages/emails/emails/invite.tsx
@@ -1,4 +1,15 @@
-import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
 import { z } from "zod";
 import { Footer } from "./components/Footer";
 import { Image } from "./components/Image";
@@ -20,30 +31,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>
   );
 }
