style: email tweaking

2023-12-19 20:04:32 +01:00
parent c0d6b73aca
commit 3af079a0f5
17 changed files with 155 additions and 110 deletions
--- a/components/emails/template.tsx
+++ b/components/emails/template.tsx
@@ -1,28 +1,34 @@
-import { Html } from '@react-email/html';
-import { Section } from '@react-email/section';
-import { getRandomColor } from '../../utils/getRandomColor';
 import { Footer } from './components/footer';

-type EmailProps = {
+type TemplateProps = {
  title: string;
  body: JSX.Element;
 };

-export default function Email({ title, body }: EmailProps) {
-  const titleBackground = getRandomColor();
-
+export default function Template({ title, body }: TemplateProps) {
  return (
-    <Html>
-      <Section className='max-w-2xl overflow-hidden rounded-lg bg-white shadow-lg'>
-        <h1
-          className='p-8 text-center text-3xl font-bold text-black'
-          style={{ backgroundColor: `${titleBackground}` }}
-        >
-          {title}
-        </h1>
-        <div className='m-8 p-8'>{body}</div>
-        <Footer />
-      </Section>
-    </Html>
+    <div
+      style={{
+        maxWidth: '720px',
+        alignContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F9FBFB',
+      }}
+    >
+      <h1
+        style={{
+          padding: '20px',
+          textAlign: 'center',
+          fontSize: '24px',
+          fontWeight: 'bold',
+          color: 'white',
+          backgroundColor: `#8230CC`,
+        }}
+      >
+        {title}
+      </h1>
+      <div style={{ margin: '20px', padding: '20px' }}>{body}</div>
+      <Footer />
+    </div>
  );
 }