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.
This commit is contained in:
gbuomprisco
16
packages/email-templates/src/components/body-style.tsx
Normal file
16
packages/email-templates/src/components/body-style.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
17
packages/email-templates/src/components/cta-button.tsx
Normal file
17
packages/email-templates/src/components/cta-button.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
12
packages/email-templates/src/components/footer.tsx
Normal file
12
packages/email-templates/src/components/footer.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
10
packages/email-templates/src/components/heading.tsx
Normal file
10
packages/email-templates/src/components/heading.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
30
packages/email-templates/src/components/wrapper.tsx
Normal file
30
packages/email-templates/src/components/wrapper.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>,
|
||||
|
||||
@@ -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>,
|
||||
|
||||
Reference in New Issue
Block a user