From d5d9b806982e9cdebbf860ca919ac0ff2465d4fc Mon Sep 17 00:00:00 2001
From: Kevin Foong
Date: Tue, 15 Oct 2024 18:00:06 +0800
Subject: [PATCH] feat: fix padding of email
---
.../templates/MrfWorkflowCompletionEmail.tsx | 46 ++++++++++---------
src/app/views/templates/styles.ts | 8 +++-
2 files changed, 30 insertions(+), 24 deletions(-)
diff --git a/src/app/views/templates/MrfWorkflowCompletionEmail.tsx b/src/app/views/templates/MrfWorkflowCompletionEmail.tsx
index ecb0cf20ef..928f3cba48 100644
--- a/src/app/views/templates/MrfWorkflowCompletionEmail.tsx
+++ b/src/app/views/templates/MrfWorkflowCompletionEmail.tsx
@@ -1,13 +1,12 @@
import {
Body,
- Column,
Container,
Head,
Heading,
Hr,
Html,
Img,
- Row,
+ Section,
Text,
} from '@react-email/components'
import { FORMSG_LOGO_URL } from '../../constants/formsg-logo'
@@ -17,6 +16,7 @@ import {
containerStyle,
headingTextStyle,
mainStyle,
+ sectionStyle,
titleTextStyle,
} from './styles'
@@ -42,26 +42,28 @@ export const MrfWorkflowCompletionEmail = ({
-
-
- {formTitle} has been completed by all respondents.
-
-
-
- Responses for {formTitle}
-
- Response ID
- {responseId}
- {
- formQuestionAnswers.map((qa) => {
- return <>
- {qa.question}
- {qa.answer}
- >})
- }
-
- For more details, please contact the respondent(s) or form administrator.
-
+
+
+
+ {formTitle} has been completed by all respondents.
+
+
+
+ Responses for {formTitle}
+
+ Response ID
+ {responseId}
+ {
+ formQuestionAnswers.map((qa) => {
+ return <>
+ {qa.question}
+ {qa.answer}
+ >})
+ }
+
+ For more details, please contact the respondent(s) or form administrator.
+
+
diff --git a/src/app/views/templates/styles.ts b/src/app/views/templates/styles.ts
index 7b30aaf4c8..3b76032f3d 100644
--- a/src/app/views/templates/styles.ts
+++ b/src/app/views/templates/styles.ts
@@ -87,8 +87,12 @@ export const mainStyle = {
export const containerStyle = {
maxWidth: '988px',
- margin: '0 auto',
- padding: '1.5rem',
+ margin: 'auto',
+ padding: '20px',
+}
+
+export const sectionStyle = {
+ padding: '2rem',
backgroundColor: '#ffffff',
}