Update CSS in email templates

Enhanced the design of the 'invite-user' and 'confirm-email' templates by adding new CSS code. This CSS code professionaly styles the email, improving readability and user experience.
2024-06-21 16:59:02 +08:00
parent ccf3b38b06
commit e96651d19b
12 changed files with 224 additions and 87 deletions
--- a/apps/web/supabase/templates/change-email-address.html
+++ b/apps/web/supabase/templates/change-email-address.html
--- a/apps/web/supabase/templates/confirm-email.html
+++ b/apps/web/supabase/templates/confirm-email.html
--- a/apps/web/supabase/templates/invite-user.html
+++ b/apps/web/supabase/templates/invite-user.html
--- a/apps/web/supabase/templates/magic-link.html
+++ b/apps/web/supabase/templates/magic-link.html
--- a/apps/web/supabase/templates/reset-password.html
+++ b/apps/web/supabase/templates/reset-password.html
--- a/packages/email-templates/src/components/body-style.tsx
+++ b/packages/email-templates/src/components/body-style.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export function BodyStyle() {
+  return (
+    <style>
+      {`
+        body {
+          background-color: #fff;
+          margin: auto;
+          font-family: sans-serif;
+          color: #484848;
+        }
+    `}
+    </style>
+  );
+}
--- a/packages/email-templates/src/components/cta-button.tsx
+++ b/packages/email-templates/src/components/cta-button.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@react-email/components';
+import * as React from 'react';
+
+export function CtaButton(
+  props: React.PropsWithChildren<{
+    href: string;
+  }>,
+) {
+  return (
+    <Button
+      className="w-full bg-[#000000] rounded text-white text-[14px] font-semibold no-underline text-center py-3"
+      href={props.href}
+    >
+      {props.children}
+    </Button>
+  );
+}
--- a/packages/email-templates/src/components/footer.tsx
+++ b/packages/email-templates/src/components/footer.tsx
@@ -0,0 +1,12 @@
+import { Container, Text } from '@react-email/components';
+import * as React from 'react';
+
+export function EmailFooter(props: React.PropsWithChildren) {
+  return (
+    <Container>
+      <Text className="text-[12px] leading-[24px] text-gray-300 px-4">
+        {props.children}
+      </Text>
+    </Container>
+  );
+}
--- a/packages/email-templates/src/components/heading.tsx
+++ b/packages/email-templates/src/components/heading.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Heading } from '@react-email/components';
+
+export function EmailHeading(props: React.PropsWithChildren) {
+  return (
+    <Heading className="text-black font-sans tracking-tight text-[20px] font-normal p-0 mx-0">
+      {props.children}
+    </Heading>
+  );
+}
--- a/packages/email-templates/src/components/wrapper.tsx
+++ b/packages/email-templates/src/components/wrapper.tsx
@@ -0,0 +1,30 @@
+import { Container } from '@react-email/components';
+import * as React from 'react';
+
+export function EmailWrapper(
+  props: React.PropsWithChildren<{
+    className?: string;
+  }>,
+) {
+  return (
+    <Container
+      style={{
+        backgroundColor: '#fff',
+        margin: 'auto',
+        fontFamily: 'sans-serif',
+        color: '#484848',
+      }}
+    >
+      <Container
+        style={{
+          maxWidth: '535px',
+          backgroundColor: '#fff',
+          margin: 'auto',
+        }}
+        className={'my-[36px] mx-auto px-4 ' + props.className || ''}
+      >
+        {props.children}
+      </Container>
+    </Container>
+  );
+}
--- a/packages/email-templates/src/emails/account-delete.email.tsx
+++ b/packages/email-templates/src/emails/account-delete.email.tsx
@@ -1,8 +1,6 @@
 import {
  Body,
-  Container,
  Head,
-  Heading,
  Html,
  Preview,
  Tailwind,
@@ -10,6 +8,12 @@ import {
  render,
 } from '@react-email/components';

+import { BodyStyle } from '../components/body-style';
+import { EmailContent } from '../components/content';
+import { EmailFooter } from '../components/footer';
+import { EmailHeader } from '../components/header';
+import { EmailHeading } from '../components/heading';
+import { EmailWrapper } from '../components/wrapper';
 import { initializeEmailI18n } from '../lib/i18n';

 interface Props {
@@ -36,44 +40,51 @@ export async function renderAccountDeleteEmail(props: Props) {

  const html = render(
    <Html>
-      <Head />
+      <Head>
+        <BodyStyle />
+      </Head>
+
      <Preview>{previewText}</Preview>

      <Tailwind>
-        <Body className="mx-auto my-auto bg-[#ffffff] font-sans">
-          <Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]">
-            <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-bold text-black">
-              {previewText}
-            </Heading>
+        <Body>
+          <EmailWrapper>
+            <EmailHeader>
+              <EmailHeading>{previewText}</EmailHeading>
+            </EmailHeader>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {t(`${namespace}:hello`, {
-                displayName: props.userDisplayName,
-              })}
-            </Text>
+            <EmailContent>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {t(`${namespace}:hello`, {
+                  displayName: props.userDisplayName,
+                })}
+              </Text>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {t(`${namespace}:paragraph1`, {
-                productName: props.productName,
-              })}
-            </Text>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {t(`${namespace}:paragraph1`, {
+                  productName: props.productName,
+                })}
+              </Text>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {t(`${namespace}:paragraph2`)}
-            </Text>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {t(`${namespace}:paragraph2`)}
+              </Text>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {t(`${namespace}:paragraph3`, {
-                productName: props.productName,
-              })}
-            </Text>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {t(`${namespace}:paragraph3`, {
+                  productName: props.productName,
+                })}
+              </Text>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {t(`${namespace}:paragraph4`, {
-                productName: props.productName,
-              })}
-            </Text>
-          </Container>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {t(`${namespace}:paragraph4`, {
+                  productName: props.productName,
+                })}
+              </Text>
+            </EmailContent>
+
+            <EmailFooter>{props.productName}</EmailFooter>
+          </EmailWrapper>
        </Body>
      </Tailwind>
    </Html>,
--- a/packages/email-templates/src/emails/invite.email.tsx
+++ b/packages/email-templates/src/emails/invite.email.tsx
@@ -1,10 +1,7 @@
 import {
  Body,
-  Button,
  Column,
-  Container,
  Head,
-  Heading,
  Hr,
  Html,
  Img,
@@ -17,6 +14,13 @@ import {
  render,
 } from '@react-email/components';

+import { BodyStyle } from '../components/body-style';
+import { EmailContent } from '../components/content';
+import { CtaButton } from '../components/cta-button';
+import { EmailFooter } from '../components/footer';
+import { EmailHeader } from '../components/header';
+import { EmailHeading } from '../components/heading';
+import { EmailWrapper } from '../components/wrapper';
 import { initializeEmailI18n } from '../lib/i18n';

 interface Props {
@@ -61,64 +65,66 @@ export async function renderInviteEmail(props: Props) {

  const html = render(
    <Html>
-      <Head />
+      <Head>
+        <BodyStyle />
+      </Head>
+
      <Preview>{previewText}</Preview>

      <Tailwind>
-        <Body className="mx-auto my-auto bg-[#ffffff] font-sans">
-          <Container className="mx-auto my-[40px] w-[465px] rounded-lg border border-solid border-[#eaeaea] bg-white p-[20px]">
-            <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
-              {heading}
-            </Heading>
+        <Body>
+          <EmailWrapper>
+            <EmailHeader>
+              <EmailHeading>{heading}</EmailHeading>
+            </EmailHeader>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {hello}
-            </Text>
+            <EmailContent>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {hello}
+              </Text>

-            <Text
-              className="text-[14px] leading-[24px] text-black"
-              dangerouslySetInnerHTML={{ __html: mainText }}
-            />
+              <Text
+                className="text-[14px] leading-[24px] text-black"
+                dangerouslySetInnerHTML={{ __html: mainText }}
+              />

-            {props.teamLogo && (
-              <Section>
-                <Row>
-                  <Column align="center">
-                    <Img
-                      className="rounded-full"
-                      src={props.teamLogo}
-                      width="64"
-                      height="64"
-                    />
-                  </Column>
-                </Row>
+              {props.teamLogo && (
+                <Section>
+                  <Row>
+                    <Column align="center">
+                      <Img
+                        className="rounded-full"
+                        src={props.teamLogo}
+                        width="64"
+                        height="64"
+                      />
+                    </Column>
+                  </Row>
+                </Section>
+              )}
+
+              <Section className="mb-[32px] mt-[32px] text-center">
+                <CtaButton href={props.link}>{joinTeam}</CtaButton>
              </Section>
-            )}

-            <Section className="mb-[32px] mt-[32px] text-center">
-              <Button
-                className="rounded bg-[#000000] px-[20px] py-[12px] text-center text-[12px] font-semibold text-white no-underline"
-                href={props.link}
-              >
-                {joinTeam}
-              </Button>
-            </Section>
+              <Text className="text-[14px] leading-[24px] text-black">
+                {t(`${namespace}:copyPasteLink`)}{' '}
+                <Link href={props.link} className="text-blue-600 no-underline">
+                  {props.link}
+                </Link>
+              </Text>

-            <Text className="text-[14px] leading-[24px] text-black">
-              {t(`${namespace}:copyPasteLink`)}{' '}
-              <Link href={props.link} className="text-blue-600 no-underline">
-                {props.link}
-              </Link>
-            </Text>
+              <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />

-            <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
+              <Text className="text-[12px] leading-[24px] text-[#666666]">
+                {t(`${namespace}:invitationIntendedFor`, {
+                  invitedUserEmail: props.invitedUserEmail,
+                })}
+              </Text>
+            </EmailContent>

-            <Text className="text-[12px] leading-[24px] text-[#666666]">
-              {t(`${namespace}:invitationIntendedFor`, {
-                invitedUserEmail: props.invitedUserEmail,
-              })}
-            </Text>
-          </Container>
+            <EmailFooter>{props.productName}</EmailFooter>
+          </EmailWrapper>
        </Body>
      </Tailwind>
    </Html>,