92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
import { Body, Button, Container, Head, Heading, Hr, Html, Preview, Text } from "@react-email/components"
|
|
|
|
export type PasswordResetEmailProps = {
|
|
resetLink: string
|
|
}
|
|
|
|
export function PasswordResetEmail({ resetLink }: PasswordResetEmailProps) {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>Reset your OpenWork password</Preview>
|
|
<Body style={styles.body}>
|
|
<Container style={styles.container}>
|
|
<Text style={styles.eyebrow}>OpenWork account</Text>
|
|
<Heading style={styles.heading}>Reset your password</Heading>
|
|
<Text style={styles.text}>Use this secure link to choose a new password for your OpenWork account.</Text>
|
|
<Button href={resetLink} style={styles.button}>Reset password</Button>
|
|
<Text style={styles.footer}>This link expires in 1 hour. If you did not request a password reset, you can ignore this email.</Text>
|
|
<Hr style={styles.hr} />
|
|
<Text style={styles.footer}>If the button does not work, paste this link into your browser:</Text>
|
|
<Text style={styles.link}>{resetLink}</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
)
|
|
}
|
|
|
|
const styles = {
|
|
body: {
|
|
backgroundColor: "#f6f4ef",
|
|
color: "#171412",
|
|
fontFamily: "Arial, sans-serif",
|
|
margin: 0,
|
|
},
|
|
container: {
|
|
backgroundColor: "#fffdf8",
|
|
border: "1px solid #e8dfd0",
|
|
borderRadius: "20px",
|
|
margin: "40px auto",
|
|
maxWidth: "560px",
|
|
padding: "32px",
|
|
},
|
|
eyebrow: {
|
|
color: "#8a5a28",
|
|
fontSize: "13px",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.08em",
|
|
margin: "0 0 12px",
|
|
textTransform: "uppercase" as const,
|
|
},
|
|
heading: {
|
|
color: "#171412",
|
|
fontSize: "28px",
|
|
lineHeight: "34px",
|
|
margin: "0 0 16px",
|
|
},
|
|
text: {
|
|
color: "#4d4640",
|
|
fontSize: "16px",
|
|
lineHeight: "24px",
|
|
margin: "0 0 24px",
|
|
},
|
|
button: {
|
|
backgroundColor: "#171412",
|
|
borderRadius: "999px",
|
|
color: "#fff8eb",
|
|
display: "inline-block",
|
|
fontSize: "15px",
|
|
fontWeight: 700,
|
|
marginBottom: "24px",
|
|
padding: "13px 22px",
|
|
textDecoration: "none",
|
|
},
|
|
hr: {
|
|
borderColor: "#e8dfd0",
|
|
margin: "28px 0 18px",
|
|
},
|
|
footer: {
|
|
color: "#756c62",
|
|
fontSize: "14px",
|
|
lineHeight: "21px",
|
|
margin: "0 0 8px",
|
|
},
|
|
link: {
|
|
color: "#5b3a18",
|
|
fontSize: "13px",
|
|
lineHeight: "19px",
|
|
margin: 0,
|
|
wordBreak: "break-all" as const,
|
|
},
|
|
}
|