feat: fix padding of email

opengovsg · Oct 15, 2024 · d5d9b80 · d5d9b80
1 parent fb4fcae
commit d5d9b80
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git 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 = ({
       <Head /> 
       <Body style={mainStyle}>
           <Container style={containerStyle}>
-            <Img style={{height: '1.5rem', marginBottom: '2.5rem'}} src={FORMSG_LOGO_URL} alt="FormSG" />
-            <Heading style={headingTextStyle}>
-              {formTitle} has been completed by all respondents.
-            </Heading>
-            <Hr style={{marginTop: '2.5rem', marginBottom: '2.5rem'}}/>
-            <Heading style={{...headingTextStyle, marginBottom: '2.5rem'}}>
-              Responses for {formTitle} 
-            </Heading>
-            <Text style={{...titleTextStyle, marginBottom: '0.25rem'}}>Response ID</Text>
-            <Text style={{...bodyTextStyle, marginTop: '0.25rem'}}>{responseId}</Text>
-            { 
-              formQuestionAnswers.map((qa) => {
-              return <>
-                <Text style={{...titleTextStyle, marginBottom: '0.25rem'}}>{qa.question}</Text>
-                <Text style={{...bodyTextStyle, marginTop: '0.25rem'}}>{qa.answer}</Text>
-              </>})
-            }
-            <Text style={{...bodyTextStyle, paddingTop: '2.5rem'}}> 
-              For more details, please contact the respondent(s) or form administrator. 
-            </Text>
+            <Section style={sectionStyle}>
+              <Img style={{height: '1.5rem', marginBottom: '2.5rem'}} src={FORMSG_LOGO_URL} alt="FormSG" />
+              <Heading style={headingTextStyle}>
+                {formTitle} has been completed by all respondents.
+              </Heading>
+              <Hr style={{marginTop: '2.5rem', marginBottom: '2.5rem'}}/>
+              <Heading style={{...headingTextStyle, marginBottom: '2.5rem'}}>
+                Responses for {formTitle} 
+              </Heading>
+              <Text style={{...titleTextStyle, marginBottom: '0.25rem'}}>Response ID</Text>
+              <Text style={{...bodyTextStyle, marginTop: '0.25rem'}}>{responseId}</Text>
+              { 
+                formQuestionAnswers.map((qa) => {
+                return <>
+                  <Text style={{...titleTextStyle, marginBottom: '0.25rem'}}>{qa.question}</Text>
+                  <Text style={{...bodyTextStyle, marginTop: '0.25rem'}}>{qa.answer}</Text>
+                </>})
+              }
+              <Text style={{...bodyTextStyle, paddingTop: '2.5rem'}}> 
+                For more details, please contact the respondent(s) or form administrator. 
+              </Text>
+            </Section> 
           </Container>
       </Body>
     </Html>

diff --git 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',
 }