feat: update email styling

opengovsg · Oct 16, 2024 · 90af0de · 90af0de
1 parent 023e34f
commit 90af0de
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/app/views/templates/MrfWorkflowCompletionEmail.tsx b/src/app/views/templates/MrfWorkflowCompletionEmail.tsx
@@ -6,6 +6,7 @@ import {
   Hr,
   Html,
   Img,
+  Preview,
   Section,
   Text,
 } from '@react-email/components'
@@ -45,9 +46,14 @@ export const MrfWorkflowCompletionEmail = ({
   formQuestionAnswers = [], 
   outcome
 }: WorkflowEmailData): JSX.Element => {
+  const previewText = outcome
+    ?  `The outcome for ${formTitle}.` 
+    : `${formTitle} has been completed by all respondents.` 
+
   return (
     <Html>
       <Head /> 
+      <Preview>{previewText}</Preview>
       <Body style={mainStyle}>
           <Container style={containerStyle}>
             <Section style={sectionStyle}>
@@ -62,7 +68,7 @@ export const MrfWorkflowCompletionEmail = ({
               {
                 outcome ? <>
                   <Text style={{...outcomeTextStyle, marginTop: '2.5rem', marginBottom: '0.25rem'}}>Outcome</Text>
-                  <Text style={{...outcomeTextStyle, fontWeight: 400, marginTop: '0.25rem', color: '#474747'}}>{outcome}</Text>
+                  <Text style={{...outcomeTextStyle, fontWeight: 400, marginTop: '0.25rem'}}>{outcome}</Text>
                 </> : null 
               }
               <Hr style={{marginTop: '2.5rem', marginBottom: '2.5rem'}}/>

diff --git a/src/app/views/templates/styles.ts b/src/app/views/templates/styles.ts
@@ -83,13 +83,13 @@ const textStyles = {
 }
 
 export const mainStyle = {
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontFamily: 'sans-serif',
   backgroundColor: '#f8f9fd',
 }
 
 export const containerStyle = {
-  maxWidth: '988px',
+  maxWidth: '100%',
+  width: '720px',
   margin: 'auto',
   padding: '20px',
 }
@@ -101,20 +101,20 @@ export const sectionStyle = {
 
 export const headingTextStyle: NonNullable<LinkProps['style']> = {
   ...textStyles['h4'],
-  color: '#1B1F2C',
+  color: '#2C2E34',
   fontWeight: 600,
   lineHeight: '2rem',
   fontSize: '1.5rem',
 }
 
 export const outcomeTextStyle: NonNullable<LinkProps['style']> = {
   ...textStyles['h5'],
-  color: '#000000',
+  color: '#2C2E34',
 }
 
 export const titleTextStyle: NonNullable<LinkProps['style']> = {
   ...textStyles['body-1'],
-  color: '#000000',
+  color: '#2C2E34',
   fontWeight: 700,
 }