3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-03 11:11:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Revert using tailwind for email templates (#1003)

Browse source
This commit is contained in:
Luke Vella 2024-01-28 19:54:46 +07:00 • committed by GitHub
parent 193dc30b91
commit cf9aa4408a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 67 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

120
packages/emails/src/templates/_components/email-layout.tsx
View file

@ -6,11 +6,10 @@ import {
Img,
Link,
Preview,
Tailwind,
} from "@react-email/components";
import { EmailContext } from "./email-context";
import { Section, Text } from "./styled-components";
import { fontFamily, Section, Text } from "./styled-components";
export interface EmailLayoutProps {
preview: string;
@ -19,11 +18,26 @@ export interface EmailLayoutProps {
ctx: EmailContext;
}
const containerStyles = {
maxWidth: "600px",
margin: "0 auto",
background: "white",
fontFamily,
padding: 16,
border: "1px solid #E2E8F0",
borderRadius: 5,
};
const sectionStyles = {
marginTop: "16px",
marginBottom: "16px",
};
const linkStyles = {
color: "#64748B",
marginRight: "8px",
};
export const EmailLayout = ({
preview,
recipientName = "Guest",
@ -33,58 +47,58 @@ export const EmailLayout = ({
}: React.PropsWithChildren<EmailLayoutProps>) => {
const { logoUrl, baseUrl } = ctx;
return (
<Tailwind>
<Html>
<Head />
<Preview>{preview}</Preview>
<Body className="bg-gray-50 py-5">
<Container className="w-full rounded-md border border-solid border-gray-200 bg-white p-4">
<Img src={logoUrl} alt="Rallly" width={128} />
<Section style={sectionStyles}>
<Text>Hi {recipientName},</Text>
{children}
</Section>
<Html>
<Head />
<Preview>{preview}</Preview>
<Body style={{ backgroundColor: "#F3F4F6", padding: "16px" }}>
<Container style={containerStyles}>
<Img src={logoUrl} alt="Rallly" width={128} />
<Section style={sectionStyles}>
<Text>Hi {recipientName},</Text>
{children}
{footNote ? (
<Section className="border-t border-solid border-gray-200">
<Text className="text-sm text-gray-500">{footNote}</Text>
</Section>
<Text
style={{
color: "#64748B",
fontFamily,
paddingTop: 16,
marginTop: 32,
borderTop: "1px solid #e2e8f0",
}}
>
{footNote}
</Text>
) : null}
<Section className="my-0 font-sans text-sm text-gray-500">
<Link className="text-gray-500" href={baseUrl}>
Home
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href="https://twitter.com/ralllyco"
>
Twitter
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href="https://github.com/lukevella/rallly"
>
Github
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
>
Donate
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
>
Contact
</Link>
</Section>
</Container>
</Body>
</Html>
</Tailwind>
</Section>
<Section style={{ ...sectionStyles, fontSize: 14, marginBottom: 0 }}>
<Link style={linkStyles} href={baseUrl}>
Home
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link style={linkStyles} href="https://twitter.com/ralllyco">
Twitter
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link style={linkStyles} href="https://github.com/lukevella/rallly">
Github
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
style={linkStyles}
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
>
Donate
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
style={linkStyles}
href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
>
Contact
</Link>
</Section>
</Container>
</Body>
</Html>
);
};