Adjusts how padding is applied in contacts and trisa forms

trisacrypto · Jan 5, 2024 · dd267e1 · dd267e1
1 parent e50597c
commit dd267e1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/web/gds-user-ui/src/components/Contacts/ContactForm/index.tsx b/web/gds-user-ui/src/components/Contacts/ContactForm/index.tsx
@@ -46,7 +46,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ title, description, name }) =
   };
 
   return (
-    <Stack pb={5}>
+    <Stack>
       <Heading size="md" data-testid="title">
         {title}
       </Heading>

diff --git a/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx b/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, SetStateAction, Dispatch } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { t } from '@lingui/macro';
-import { chakra, useDisclosure } from '@chakra-ui/react';
+import { Box, chakra, useDisclosure } from '@chakra-ui/react';
 import StepButtons from 'components/StepsButtons';
 import ContactForm from 'components/Contacts/ContactForm';
 import useCertificateStepper from 'hooks/useCertificateStepper';
@@ -148,21 +148,27 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
             title={t`Legal/ Compliance Contact (required)`}
             description={t`Compliance officer or legal contact for requests about the compliance requirements and legal status of your organization. A business phone number is required to complete physical verification for MainNet registration. Please provide a phone number where the Legal/ Compliance contact can be contacted.`}
           />
-          <ContactForm
+          <Box pt={5}>
+            <ContactForm
             name="contacts.technical"
             title={t`Technical Contact (required)`}
             description={t`Primary contact for handling technical queries about the operation and status of your service participating in the TRISA network. Can be a group or admin email.`}
-          />
-          <ContactForm
+            />
+          </Box>
+          <Box pt={5}>
+            <ContactForm
             name="contacts.administrative"
             title={t`Administrative Contact (optional)`}
             description={t`Administrative or executive contact for your organization to field high-level requests or queries. (Strongly recommended)`}
-          />
-          <ContactForm
+            />
+          </Box>
+          <Box pt={5}>
+            <ContactForm
             name="contacts.billing"
             title={t`Billing Contact (optional)`}
             description={t`Billing contact for your organization to handle account and invoice requests or queries relating to the operation of the TRISA network.`}
-          />
+            />
+          </Box>
           <StepButtons
             handlePreviousStep={handlePreviousStepClick}
             handleNextStep={handleNextStepClick}

diff --git a/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx b/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, Dispatch, SetStateAction } from 'react';
-import { chakra, useDisclosure } from '@chakra-ui/react';
+import { Box, chakra, useDisclosure } from '@chakra-ui/react';
 import { t } from '@lingui/macro';
 import FormLayout from 'layouts/FormLayout';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -143,11 +143,13 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
             name="testnet"
             headerText={t`TRISA Endpoint: TestNet`}
           />
-          <TrisaImplementationForm
+          <Box pt={5}>
+            <TrisaImplementationForm
             type="MainNet"
             name="mainnet"
             headerText={t`TRISA Endpoint: MainNet`}
-          />
+            />
+          </Box>
           <StepButtons
             handlePreviousStep={handlePreviousStepClick}
             handleNextStep={handleNextStepClick}

diff --git a/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm/index.tsx b/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm/index.tsx
@@ -60,7 +60,7 @@ const TrisaImplementationForm: React.FC<TrisaImplementationFormProps> = ({
   const domain = getValues('website') && getDomain(getValues('website'));
 
   return (
-    <Stack pb={5}>
+    <Stack>
       <Heading size="md">{headerText}</Heading>
       <InputFormControl
         label={t`TRISA Endpoint`}