💬 Update email templates (#562)

apps/web/src/server/routers/auth.ts

@@ -73,7 +73,7 @@ export const auth = router({
 
         await sendEmail("RegisterEmail", {
           to: input.email,
-          subject: "Complete your registration",
+          subject: "Please verify your email address",
           props: {
             code,
             name: input.name,

packages/emails/src/templates/components/email-layout.tsx

@@ -138,7 +138,7 @@ export const EmailLayout = ({
               {footNote ? (
                 <>
                   <Hr />
-                  <SmallText>{footNote}</SmallText>
+                  <Text light={true}>{footNote}</Text>
                 </>
               ) : null}
             </Section>

packages/emails/src/templates/login.tsx

@@ -1,15 +1,6 @@
-import { absoluteUrl } from "@rallly/utils";
-import { Hr } from "@react-email/components";
-
 import { EmailLayout } from "./components/email-layout";
-import {
-  Button,
-  Heading,
-  Link,
-  Section,
-  Text,
-} from "./components/styled-components";
-import { getDomain, removeProtocalFromUrl } from "./components/utils";
+import { Button, Domain, Heading, Text } from "./components/styled-components";
+import { getDomain } from "./components/utils";
 
 interface LoginEmailProps {
   name: string;
@@ -27,11 +18,8 @@ export const LoginEmail = ({
       footNote={
         <>
           You&apos;re receiving this email because a request was made to login
-          to{" "}
-          <Link href={absoluteUrl()}>
-            {removeProtocalFromUrl(absoluteUrl())}
-          </Link>
-          . If this wasn&apos;t you, let us know by replying to this email.
+          to <Domain />. If this wasn&apos;t you, let us know by replying to
+          this email.
         </>
       }
       recipientName={name}
@@ -42,14 +30,12 @@ export const LoginEmail = ({
         Log in to {getDomain()}
       </Button>
       <Text light={true}>This link is valid for 15 minutes</Text>
-      <Section>
       <Text>
         Alternatively, you can enter this 6-digit verification code directly.
       </Text>
       <Heading as="h1" className="tracking-widest" id="code">
         {code}
       </Heading>
-      </Section>
     </EmailLayout>
   );
 };

packages/emails/src/templates/register.tsx

@@ -1,8 +1,5 @@
-import { absoluteUrl } from "@rallly/utils";
-
 import { EmailLayout } from "./components/email-layout";
-import { Domain, Heading, Link, Text } from "./components/styled-components";
-import { getDomain } from "./components/utils";
+import { Domain, Heading, Text } from "./components/styled-components";
 
 interface RegisterEmailProps {
   name: string;
@@ -18,20 +15,15 @@ export const RegisterEmail = ({
       footNote={
         <>
           You&apos;re receiving this email because a request was made to
-          register an account on{" "}
-          <Link className="text-primary-500" href={absoluteUrl()}>
-            {getDomain()}
-          </Link>
-          . If this wasn&apos;t you, please ignore this email.
+          register an account on <Domain />.
         </>
       }
       recipientName={name}
       preview={`Your 6-digit code is: ${code}`}
     >
       <Text>
-        Use this code to complete the verification process on <Domain />
+        Please use the following 6-digit verification code to verify your email:
       </Text>
-      <Heading>Your 6-digit code is:</Heading>
       <Heading as="h1" className="font-sans tracking-widest" id="code">
         {code}
       </Heading>

packages/emails/src/templates/turn-on-notifications.tsx

@@ -1,13 +1,5 @@
 import { EmailLayout } from "./components/email-layout";
-import {
-  Button,
-  Card,
-  Heading,
-  Link,
-  Section,
-  SmallText,
-  Text,
-} from "./components/styled-components";
+import { Button, Link, Section, Text } from "./components/styled-components";
 
 type EnableNotificationsEmailProps = {
   title: string;
@@ -37,16 +29,12 @@ export const EnableNotificationsEmail = ({
         Would you like to get notified when participants respond to{" "}
         <strong>{title}</strong>?
       </Text>
-      <Card>
-        <Heading>Enable notifications</Heading>
-        <Text>You will get an email when someone responds to the poll.</Text>
       <Section>
         <Button href={verificationLink} id="verifyEmailUrl">
           Yes, enable notifications
         </Button>
       </Section>
-        <SmallText>The link will expire in 15 minutes.</SmallText>
-      </Card>
+      <Text light={true}>The link will expire in 15 minutes.</Text>
     </EmailLayout>
   );
 };