feat: adapt mail service & style fix

toeverything · Jan 6, 2025 · 8f1f2de · 8f1f2de
1 parent 92a6bb1
commit 8f1f2de
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 17 deletions.
diff --git a/packages/backend/server/src/base/mailer/mail.service.ts b/packages/backend/server/src/base/mailer/mail.service.ts
@@ -11,6 +11,7 @@ import {
   getRoleChangedTemplate,
   type RoleChangedMailParams,
 } from './template';
+import { renderSignUpEmail } from './templates';
 
 @Injectable()
 export class MailService {
@@ -112,16 +113,8 @@ export class MailService {
   }
 
   async sendSignUpMail(url: string, options: Options) {
-    const html = emailTemplate({
-      title: 'Create AFFiNE Account',
-      content:
-        'Click the button below to complete your account creation and sign in. This magic link will expire in 30 minutes.',
-      buttonContent: ' Create account and sign in',
-      buttonUrl: url,
-    });
-
     return this.sendMail({
-      html,
+      html: await renderSignUpEmail({ url }),
       subject: 'Your AFFiNE account is waiting for you!',
       ...options,
     });

diff --git a/packages/backend/server/src/base/mailer/templates/components/action-button.tsx b/packages/backend/server/src/base/mailer/templates/components/action-button.tsx
@@ -6,7 +6,7 @@ export const ActionButton = (props: EmailTemplateProps) => {
   const { buttonContent, buttonUrl } = props;
   if (buttonContent && buttonUrl) {
     return (
-      <Section style={{ paddingTop: '16px' }}>
+      <Section>
         <Button
           href={buttonUrl}
           style={{

diff --git a/packages/backend/server/src/base/mailer/templates/components/common.ts b/packages/backend/server/src/base/mailer/templates/components/common.ts
@@ -21,4 +21,5 @@ export const BasicTextStyle: React.CSSProperties = {
   fontWeight: '400',
   lineHeight: '20px',
   fontFamily: 'Inter, Arial, Helvetica, sans-serif',
+  margin: '24px 0 0',
 };
diff --git a/packages/backend/server/src/base/mailer/templates/components/footer.tsx b/packages/backend/server/src/base/mailer/templates/components/footer.tsx
@@ -5,6 +5,8 @@ import { BasicTextStyle } from './common';
 const TextStyles: React.CSSProperties = {
   ...BasicTextStyle,
   color: '#8e8d91',
+  margin: 1,
+  marginTop: '8px',
 };
 
 export const Footer = () => {
@@ -19,7 +21,7 @@ export const Footer = () => {
         padding: '24px',
       }}
     >
-      <Section align="center" width="auto">
+      <Section align="center" width="auto" style={{ margin: '1px auto' }}>
         <Row>
           {[
             'Github',
@@ -42,10 +44,8 @@ export const Footer = () => {
         </Row>
       </Section>
       <Section align="center" width="auto">
-        <Row>
-          <td style={TextStyles}>
-            One hyper-fused platform for wildly creative minds
-          </td>
+        <Row style={TextStyles}>
+          <td>One hyper-fused platform for wildly creative minds</td>
         </Row>
       </Section>
       <Section align="center" width="auto">

diff --git a/packages/backend/server/src/base/mailer/templates/components/sub-content.tsx b/packages/backend/server/src/base/mailer/templates/components/sub-content.tsx
@@ -6,7 +6,7 @@ export const SubContent = (props: EmailTemplateProps) => {
   const { subContent } = props;
   if (subContent) {
     return (
-      <Section style={{ paddingTop: '24px' }}>
+      <Section>
         <Text
           style={{
             ...BasicTextStyle,

diff --git a/packages/backend/server/src/base/mailer/templates/components/template.tsx b/packages/backend/server/src/base/mailer/templates/components/template.tsx
@@ -19,7 +19,7 @@ export const EmailTemplate = (props: EmailTemplateProps) => {
   return (
     <Html>
       <Head />
-      <Body style={{ backgroundColor: '#f6f7fb', padding: '0', margin: '0' }}>
+      <Body style={{ backgroundColor: '#f6f7fb', overflow: 'hidden' }}>
         <Container
           style={{
             backgroundColor: '#fff',

diff --git a/packages/backend/server/src/base/mailer/templates/index.tsx b/packages/backend/server/src/base/mailer/templates/index.tsx
@@ -0,0 +1,7 @@
+import { render } from '@react-email/render';
+
+import SignUp from './sign-up';
+
+export const renderSignUpEmail = (props: { url: string }): Promise<string> => {
+  return render(<SignUp url={props.url} />);
+};