chore: fix alignment padding issues

opengovsg · Feb 20, 2024 · 36b89ae · 36b89ae
1 parent 69b9a8f
commit 36b89ae
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx
@@ -70,7 +70,7 @@ export const EndPageBlock = ({
           </Box>
         ) : null}
       </Box>
-      <Box mt="1.5rem">
+      <Box mt="2rem">
         <Box>
           <Text textColor="secondary.300" textStyle="caption-2">
             Response ID: {submissionData.id}

diff --git a/...res/public-form/components/FormPaymentPage/components/CreatePaymentIntentFailureBlock.tsx b/...res/public-form/components/FormPaymentPage/components/CreatePaymentIntentFailureBlock.tsx
@@ -32,9 +32,9 @@ export const CreatePaymentIntentFailureBlock = ({
   }, [formTitle, submissionId])
 
   return (
-    <Flex flexDir="column">
-      <Stack tabIndex={-1} ref={focusRef} spacing="1rem">
-        <Box>
+    <Flex flexDir="column" mb="1rem">
+      <Stack tabIndex={-1} ref={focusRef} spacing="1rem" pb="2rem">
+        <Box pt="0.5rem">
           <VisuallyHidden aria-live="assertive">
             {submittedAriaText}
           </VisuallyHidden>

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,11 @@ import { getPaymentViewStates, PaymentViewStates } from './utils'
 const PaymentFormWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <PublicFormWrapper>
-      <Box pt={{ base: '2.5rem', md: '0' }} w="100%">
+      <Box
+        pt={{ base: '2.5rem', md: '0' }}
+        mb={{ base: '1.5rem', md: '0' }}
+        w="100%"
+      >
         <Container w="100%" maxW="57rem" p={0}>
           {children}
         </Container>

diff --git a/...eatures/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx b/...eatures/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx
@@ -149,7 +149,8 @@ export const DownloadReceiptBlock = ({
         </Stack>
       </Box>
       <Box
-        my="1.5rem"
+        mt="1.5rem"
+        mb="1rem"
         py={{ base: '1.5rem', md: '2rem' }}
         px={{ base: '1rem', md: '2rem' }}
         bgColor="white"