chore: fixing frontend chromatic tests and image padding alignment

opengovsg · Feb 19, 2024 · 589c53e · 589c53e
1 parent 9bd7e61
commit 589c53e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 16 deletions.
diff --git a/frontend/src/features/admin-form/create/end-page/EndPageContent.tsx b/frontend/src/features/admin-form/create/end-page/EndPageContent.tsx
@@ -63,7 +63,7 @@ export const EndPageContent = (): JSX.Element => {
 
   const thankYouSvg = isPaymentEnabled ? (
     <Flex backgroundColor="primary.100" justifyContent="center" py="1rem">
-      <PaymentsThankYouSvgr h="100%" pt="2.5rem" />
+      <PaymentsThankYouSvgr h="100%" />
     </Flex>
   ) : (
     <Flex backgroundColor="primary.100" justifyContent="center">
@@ -95,16 +95,22 @@ export const EndPageContent = (): JSX.Element => {
         />
         {thankYouSvg}
         <Stack>
-          <Box px={{ base: '1.5rem', md: '4rem' }} bg={backgroundColor}>
-            {isPaymentEnabled ? (
+          {isPaymentEnabled ? (
+            <Box px={{ base: '1.5rem', md: '4rem' }} bg={backgroundColor}>
               <PaymentEndPageBlock
                 submissionData={{
                   id: form?._id ?? 'Submission ID',
                   timestamp: Date.now(),
                 }}
                 endPage={endPageContent}
               />
-            ) : (
+            </Box>
+          ) : (
+            <Box
+              px={{ base: '1.5rem', md: '4rem' }}
+              py={{ base: '1.5rem', md: '3rem' }}
+              bg={backgroundColor}
+            >
               <EndPageBlock
                 formTitle={form?.title}
                 endPage={endPageContent}
@@ -114,8 +120,8 @@ export const EndPageContent = (): JSX.Element => {
                 }}
                 colorTheme={colorTheme ?? FormColorTheme.Blue}
               />
-            )}
-          </Box>
+            </Box>
+          )}
         </Stack>
       </Stack>
     </Flex>

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
@@ -2,10 +2,7 @@ import { Container, Flex, Stack, StackDivider } from '@chakra-ui/react'
 
 import { FormColorTheme, FormDto } from '~shared/types/form'
 
-import {
-  SubmissionData,
-  usePublicFormContext,
-} from '~features/public-form/PublicFormContext'
+import { SubmissionData } from '~features/public-form/PublicFormContext'
 
 import { EndPageBlock } from './components/EndPageBlock'
 import { FeedbackBlock, FeedbackFormInput } from './components/FeedbackBlock'
@@ -26,7 +23,6 @@ export const FormEndPage = ({
   colorTheme,
   ...endPageProps
 }: FormEndPageProps): JSX.Element => {
-  const { isPaymentEnabled } = usePublicFormContext()
   return (
     <Container w="42.5rem" maxW="100%" p={0}>
       <Flex flexDir="column" align="center">
@@ -43,7 +39,6 @@ export const FormEndPage = ({
             focusOnMount
             {...endPageProps}
             colorTheme={colorTheme}
-            isPaymentEnabled={isPaymentEnabled}
           />
           {isFeedbackSubmitted ? null : (
             <FeedbackBlock

diff --git a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx
@@ -54,7 +54,7 @@ export const EndPageBlock = ({
   }, [formTitle])
 
   return (
-    <Container py={{ base: '1.5rem', md: '3rem' }}>
+    <>
       <Box ref={focusRef}>
         <VisuallyHidden aria-live="assertive">
           {submittedAriaText}
@@ -90,6 +90,6 @@ export const EndPageBlock = ({
           </Button>
         </Box>
       </Box>
-    </Container>
+    </>
   )
 }
diff --git a/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx b/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx
@@ -27,7 +27,7 @@ export const PaymentEndPagePreview = ({
     <>
       <Flex flexDir="column" align="center">
         <Box mt={{ base: '2.5rem', md: 0 }} mb={{ base: '0.5rem', md: 0 }}>
-          <PaymentsThankYouSvgr h="100%" pt="2.5rem" />
+          <PaymentsThankYouSvgr h="100%" />
         </Box>
         <Stack
           pt={{ base: '1rem', md: '1.5rem' }}

diff --git a/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx b/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
@@ -31,7 +31,7 @@ import { getPaymentViewStates, PaymentViewStates } from './utils'
 const PaymentFormWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <PublicFormWrapper>
-      <Box py="1rem" w="100%">
+      <Box pt={{ base: '2.5rem', md: '0' }} w="100%">
         <Container w="100%" maxW="57rem" p={0}>
           {children}
         </Container>