Date: Fri, 21 Jun 2024 16:59:02 +0800
Subject: [PATCH] Update CSS in email templates
Enhanced the design of the 'invite-user' and 'confirm-email' templates by adding new CSS code. This CSS code professionaly styles the email, improving readability and user experience.
---
.../templates/change-email-address.html | 9 +-
.../web/supabase/templates/confirm-email.html | 9 +-
apps/web/supabase/templates/invite-user.html | 9 +-
apps/web/supabase/templates/magic-link.html | 9 +-
.../supabase/templates/reset-password.html | 9 +-
.../src/components/body-style.tsx | 16 +++
.../src/components/cta-button.tsx | 17 +++
.../email-templates/src/components/footer.tsx | 12 ++
.../src/components/heading.tsx | 10 ++
.../src/components/wrapper.tsx | 30 +++++
.../src/emails/account-delete.email.tsx | 75 +++++++------
.../src/emails/invite.email.tsx | 106 +++++++++---------
12 files changed, 224 insertions(+), 87 deletions(-)
create mode 100644 packages/email-templates/src/components/body-style.tsx
create mode 100644 packages/email-templates/src/components/cta-button.tsx
create mode 100644 packages/email-templates/src/components/footer.tsx
create mode 100644 packages/email-templates/src/components/heading.tsx
create mode 100644 packages/email-templates/src/components/wrapper.tsx
diff --git a/apps/web/supabase/templates/change-email-address.html b/apps/web/supabase/templates/change-email-address.html
index 08b2e22eb..e47baf520 100644
--- a/apps/web/supabase/templates/change-email-address.html
+++ b/apps/web/supabase/templates/change-email-address.html
@@ -1 +1,8 @@
-Confirm Change of Email | Makerkit
Confirm Change of Email Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}
or copy and paste this URL into your browser: {{ .ConfirmationURL }}
Makerkit
\ No newline at end of file
+Confirm Change of Email | Makerkit
Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}
or copy and paste this URL into your browser: {{ .ConfirmationURL }}
\ No newline at end of file
diff --git a/apps/web/supabase/templates/confirm-email.html b/apps/web/supabase/templates/confirm-email.html
index 8d4304ccf..90feb239f 100644
--- a/apps/web/supabase/templates/confirm-email.html
+++ b/apps/web/supabase/templates/confirm-email.html
@@ -1 +1,8 @@
-Confirm your email - Makerkit
Confirm your email - Makerkit
Confirm your email to get started
\ No newline at end of file
diff --git a/apps/web/supabase/templates/invite-user.html b/apps/web/supabase/templates/invite-user.html
index ade54036b..306a8354a 100644
--- a/apps/web/supabase/templates/invite-user.html
+++ b/apps/web/supabase/templates/invite-user.html
@@ -1 +1,8 @@
-You have bee invited to join - Makerkit
You have bee invited to join - Makerkit
You have been invited to Makerkit
\ No newline at end of file
diff --git a/apps/web/supabase/templates/magic-link.html b/apps/web/supabase/templates/magic-link.html
index 111e307a3..7bdc2a48f 100644
--- a/apps/web/supabase/templates/magic-link.html
+++ b/apps/web/supabase/templates/magic-link.html
@@ -1 +1,8 @@
-Your sign in link to Makerkit
Your sign in link to Makerkit
Reset your password | Makerkit
Reset your Makerkit password Please click the button below to reset your password.
or copy and paste this URL into your browser: {{ .ConfirmationURL }}
Makerkit
\ No newline at end of file
+Reset your password | Makerkit
Reset your Makerkit password
Please click the button below to reset your password.
or copy and paste this URL into your browser: {{ .ConfirmationURL }}
\ No newline at end of file
diff --git a/packages/email-templates/src/components/body-style.tsx b/packages/email-templates/src/components/body-style.tsx
new file mode 100644
index 000000000..325cd746a
--- /dev/null
+++ b/packages/email-templates/src/components/body-style.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export function BodyStyle() {
+ return (
+
+ );
+}
diff --git a/packages/email-templates/src/components/cta-button.tsx b/packages/email-templates/src/components/cta-button.tsx
new file mode 100644
index 000000000..80c26aab9
--- /dev/null
+++ b/packages/email-templates/src/components/cta-button.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@react-email/components';
+import * as React from 'react';
+
+export function CtaButton(
+ props: React.PropsWithChildren<{
+ href: string;
+ }>,
+) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/packages/email-templates/src/components/footer.tsx b/packages/email-templates/src/components/footer.tsx
new file mode 100644
index 000000000..b8b0581ba
--- /dev/null
+++ b/packages/email-templates/src/components/footer.tsx
@@ -0,0 +1,12 @@
+import { Container, Text } from '@react-email/components';
+import * as React from 'react';
+
+export function EmailFooter(props: React.PropsWithChildren) {
+ return (
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/packages/email-templates/src/components/heading.tsx b/packages/email-templates/src/components/heading.tsx
new file mode 100644
index 000000000..71546cc9b
--- /dev/null
+++ b/packages/email-templates/src/components/heading.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Heading } from '@react-email/components';
+
+export function EmailHeading(props: React.PropsWithChildren) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/packages/email-templates/src/components/wrapper.tsx b/packages/email-templates/src/components/wrapper.tsx
new file mode 100644
index 000000000..c051cb7aa
--- /dev/null
+++ b/packages/email-templates/src/components/wrapper.tsx
@@ -0,0 +1,30 @@
+import { Container } from '@react-email/components';
+import * as React from 'react';
+
+export function EmailWrapper(
+ props: React.PropsWithChildren<{
+ className?: string;
+ }>,
+) {
+ return (
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/packages/email-templates/src/emails/account-delete.email.tsx b/packages/email-templates/src/emails/account-delete.email.tsx
index 851f427d5..b5756f97f 100644
--- a/packages/email-templates/src/emails/account-delete.email.tsx
+++ b/packages/email-templates/src/emails/account-delete.email.tsx
@@ -1,8 +1,6 @@
import {
Body,
- Container,
Head,
- Heading,
Html,
Preview,
Tailwind,
@@ -10,6 +8,12 @@ import {
render,
} from '@react-email/components';
+import { BodyStyle } from '../components/body-style';
+import { EmailContent } from '../components/content';
+import { EmailFooter } from '../components/footer';
+import { EmailHeader } from '../components/header';
+import { EmailHeading } from '../components/heading';
+import { EmailWrapper } from '../components/wrapper';
import { initializeEmailI18n } from '../lib/i18n';
interface Props {
@@ -36,44 +40,51 @@ export async function renderAccountDeleteEmail(props: Props) {
const html = render(
-
+
+