chore: update button formatting

opengovsg · Mar 28, 2024 · 22e957f · 22e957f
1 parent 2612e43
commit 22e957f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/app/views/templates/MrfWorkflowEmail.tsx b/src/app/views/templates/MrfWorkflowEmail.tsx
@@ -15,6 +15,7 @@ import { FORMSG_LOGO_URL } from '../../constants/formsg-logo'
 import {
   buttonStyle,
   headingStyle,
+  innerButtonTextStyle,
   innerContainerStyle,
   linkStyle,
   outerContainerStyle,
@@ -56,11 +57,9 @@ export const MrfWorkflowEmail = ({
               {responseId}
             </Text>
           </Container>
-          <Button href={responseUrl} style={buttonStyle}>
-            <Text style={{ ...textStyle, color: '#ffffff' }}>
-              Review and complete
-            </Text>
-          </Button>
+          <a href={responseUrl} style={buttonStyle}>
+            <div style={innerButtonTextStyle}>Review and complete</div>
+          </a>
           <Hr style={{ margin: '36px 0' }} />
           <Text style={{ ...textStyle, fontSize: '14px' }}>
             If you are having trouble with the button above, copy and paste the

diff --git a/src/app/views/templates/styles.ts b/src/app/views/templates/styles.ts
@@ -18,6 +18,7 @@ export const innerContainerStyle: ContainerProps['style'] = {
 }
 
 export const headingStyle: HeadingProps['style'] = {
+  display: 'flex',
   color: '#1b1f2c',
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
@@ -26,20 +27,30 @@ export const headingStyle: HeadingProps['style'] = {
 }
 
 export const textStyle: TextProps['style'] = {
+  display: 'flex',
   color: '#474747',
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
   fontSize: '16px',
-  lineHeight: '20px',
 }
 
+/** Button style to be attached to the outer <a> tag of a button. */
 export const buttonStyle: ButtonProps['style'] = {
   display: 'flex',
   justifyContent: 'center',
   borderRadius: '4px',
-  width: '100%',
   backgroundColor: '#445fcd',
-  padding: '8px',
+  padding: '24px',
+  textDecoration: 'none',
+}
+
+/** Inner text style to be attached to the inner <div> tag of a button. */
+export const innerButtonTextStyle: ContainerProps['style'] = {
+  ...textStyle,
+  display: 'inline-block',
+  width: '100%',
+  textAlign: 'center',
+  color: '#ffffff',
 }
 
 export const linkStyle: LinkProps['style'] = {