style: tweaked email templates

2023-12-17 19:10:05 +01:00
parent 878e787ed0
commit a9b2c94cff
6 changed files with 148 additions and 63 deletions
--- a/components/emails/template.tsx
+++ b/components/emails/template.tsx
@@ -2,6 +2,7 @@ import { Container } from '@react-email/container';
 import { Html } from '@react-email/html';
 import { Section } from '@react-email/section';
 import { Text } from '@react-email/text';
+import { Footer } from './components/footer';

 type EmailProps = {
  title: string;
@@ -11,33 +12,31 @@ type EmailProps = {
 export default function Email({ title, body }: EmailProps) {
  return (
    <Html>
-      <Section style={main}>
+      <Section
+        className='mx-auto w-full max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'
+        style={main}
+      >
        <Container style={container}>
-          <Text style={heading}>{title}</Text>
+          <h1 className='mt-4 text-center text-3xl font-bold'>{title}</h1>
          <Text style={paragraph}>{body}</Text>
        </Container>
+        <Footer />
      </Section>
    </Html>
  );
 }

 const main = {
-  backgroundColor: '#ffffff',
+  backgroundColor: '#ffffff'
 };

 const container = {
  margin: '0 auto',
  padding: '20px 0 48px',
-  width: '580px',
-};
-
-const heading = {
-  fontSize: '24px',
-  fontWeight: 'bold',
-  marginBottom: '16px',
+  width: '580px'
 };

 const paragraph = {
  fontSize: '16px',
-  marginBottom: '16px',
+  marginBottom: '16px'
 };