3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-07 13:11:49 +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

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

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