zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update CSS in email templates

Browse Source 
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
2024-06-21 16:59:02 +08:00
parent ccf3b38b06
commit e96651d19b
12 changed files with 224 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/supabase/templates/change-email-address.html
View File

File diff suppressed because one or more lines are too long

9
apps/web/supabase/templates/confirm-email.html
View File

File diff suppressed because one or more lines are too long

9
apps/web/supabase/templates/invite-user.html
View File

File diff suppressed because one or more lines are too long

9
apps/web/supabase/templates/magic-link.html
View File

File diff suppressed because one or more lines are too long

9
apps/web/supabase/templates/reset-password.html
View File

File diff suppressed because one or more lines are too long

16
packages/email-templates/src/components/body-style.tsx Normal file
View 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
View 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
View 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
View 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
View 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>
);
}

29
packages/email-templates/src/emails/account-delete.email.tsx
View File

@@ -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,16 +40,20 @@ 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>
<EmailContent>
<Text className="text-[14px] leading-[24px] text-black">
{t(`${namespace}:hello`, {
displayName: props.userDisplayName,
@@ -73,7 +81,10 @@ export async function renderAccountDeleteEmail(props: Props) {
productName: props.productName,
})}
</Text>
</Container>
</EmailContent>
<EmailFooter>{props.productName}</EmailFooter>
</EmailWrapper>
</Body>
</Tailwind>
</Html>,

38
packages/email-templates/src/emails/invite.email.tsx
View File

@@ -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,16 +65,20 @@ 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>
<EmailContent>
<Text className="text-[14px] leading-[24px] text-black">
{hello}
</Text>
@@ -96,12 +104,7 @@ export async function renderInviteEmail(props: Props) {
)}
<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>
<CtaButton href={props.link}>{joinTeam}</CtaButton>
</Section>
<Text className="text-[14px] leading-[24px] text-black">
@@ -118,7 +121,10 @@ export async function renderInviteEmail(props: Props) {
invitedUserEmail: props.invitedUserEmail,
})}
</Text>
</Container>
</EmailContent>
<EmailFooter>{props.productName}</EmailFooter>
</EmailWrapper>
</Body>
</Tailwind>
</Html>,