Removes borders around form sections (#1136)

* Removes borders around form sections * Adjusts how padding is applied in contacts and trisa forms
trisacrypto · Jan 8, 2024 · a254623 · a254623
1 parent 3553cda
commit a254623
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 38 deletions.
diff --git a/web/gds-user-ui/src/components/Addresses/index.tsx b/web/gds-user-ui/src/components/Addresses/index.tsx
@@ -1,12 +1,11 @@
-import { Heading, Text } from '@chakra-ui/react';
+import { Heading, Stack, Text } from '@chakra-ui/react';
 import { Trans } from '@lingui/react';
-import FormLayout from 'layouts/FormLayout';
 import React from 'react';
 import AddressList from './AddressList';
 
 const Addresses: React.FC = () => {
   return (
-    <FormLayout>
+    <Stack pt={5}>
       <Heading size="md">
         <Trans id="Addresses">Addresses</Trans>
       </Heading>
@@ -18,7 +17,7 @@ const Addresses: React.FC = () => {
         </Trans>
       </Text>
       <AddressList />
-    </FormLayout>
+    </Stack>
   );
 };
 

diff --git a/web/gds-user-ui/src/components/Contacts/ContactForm/index.tsx b/web/gds-user-ui/src/components/Contacts/ContactForm/index.tsx
@@ -1,7 +1,6 @@
-import { Heading, Text } from '@chakra-ui/react';
+import { Heading, Stack, Text } from '@chakra-ui/react';
 import InputFormControl from 'components/ui/InputFormControl';
 import PhoneNumberInput from 'components/ui/PhoneNumberInput';
-import FormLayout from 'layouts/FormLayout';
 import { Controller, useFormContext } from 'react-hook-form';
 import get from 'lodash/get';
 import { t } from '@lingui/macro';
@@ -47,7 +46,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ title, description, name }) =
   };
 
   return (
-    <FormLayout>
+    <Stack>
       <Heading size="md" data-testid="title">
         {title}
       </Heading>
@@ -100,7 +99,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ title, description, name }) =
           );
         }}
       />
-    </FormLayout>
+    </Stack>
   );
 };
 

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';
@@ -68,7 +68,7 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
     resetForm(updatedCertificateStep?.form, {
       keepValues: false
     });
-    console.log('[] prev updatedCertificateStep', updatedCertificateStep);
+    // console.log('[] prev updatedCertificateStep', updatedCertificateStep);
     previousStepRef.current = false;
     previousStep(updatedCertificateStep);
   }
@@ -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/CountryOfRegistration/index.tsx b/web/gds-user-ui/src/components/CountryOfRegistration/index.tsx
@@ -1,9 +1,8 @@
-import { Heading } from '@chakra-ui/react';
+import { Heading, Stack } from '@chakra-ui/react';
 import { t } from '@lingui/macro';
 import { Trans } from '@lingui/react';
 import SelectFormControl from 'components/ui/SelectFormControl';
 import { getCountriesOptions } from 'constants/countries';
-import FormLayout from 'layouts/FormLayout';
 import { Controller, useFormContext } from 'react-hook-form';
 
 const CountryOfRegistration: React.FC = () => {
@@ -14,7 +13,7 @@ const CountryOfRegistration: React.FC = () => {
   const countries = getCountriesOptions();
 
   return (
-    <FormLayout data-testid="legal-country-of-registration">
+    <Stack pt={5} data-testid="legal-country-of-registration">
       <Heading size="md">
         <Trans id="Country of Registration">Country of Registration</Trans>
       </Heading>
@@ -36,7 +35,7 @@ const CountryOfRegistration: React.FC = () => {
           />
         )}
       />
-    </FormLayout>
+    </Stack>
   );
 };
 

diff --git a/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx b/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx
@@ -3,7 +3,7 @@ import { chakra, useDisclosure } from '@chakra-ui/react';
 import CountryOfRegistration from 'components/CountryOfRegistration';
 import FormLayout from 'layouts/FormLayout';
 import NameIdentifiers from '../NameIdentifiers';
-import NationalIdentification from '../NameIdentification';
+import NationalIdentification from '../NationalIdentification';
 import Address from 'components/Addresses';
 import { FormProvider, useForm } from 'react-hook-form';
 import StepButtons from 'components/StepsButtons';
@@ -71,7 +71,7 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
     resetForm(updatedCertificateStep?.form, {
       keepValues: false
     });
-    console.log('[] prev updatedCertificateStep', updatedCertificateStep);
+    // console.log('[] prev updatedCertificateStep', updatedCertificateStep);
     previousStepRef.current = false;
     previousStep(updatedCertificateStep);
   }
@@ -109,7 +109,7 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
           state: currentState()
         } as any
       };
-      console.log('[] isDirty  payload', payload);
+      // console.log('[] isDirty  payload', payload);
 
       updateCertificateStep(payload);
       previousStepRef.current = true;

diff --git a/web/gds-user-ui/src/components/NameIdentifiers/index.tsx b/web/gds-user-ui/src/components/NameIdentifiers/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button, HStack } from '@chakra-ui/react';
-import FormLayout from 'layouts/FormLayout';
+import { Button, HStack, Stack } from '@chakra-ui/react';
 import NameIdentifier from '../NameIdentifier';
 import { t } from '@lingui/macro';
 import { Trans } from '@lingui/react';
@@ -23,7 +22,7 @@ const NameIdentifiers: React.FC = () => {
   };
 
   return (
-    <FormLayout data-testid="name-identifier">
+    <Stack data-testid="name-identifier">
       <NameIdentifier
         name="entity.name.name_identifiers"
         heading={t`Name Identifiers`}
@@ -57,7 +56,7 @@ const NameIdentifiers: React.FC = () => {
           <Trans id="Add Phonetic Names">Add Phonetic Names</Trans>
         </Button>
       </HStack>
-    </FormLayout>
+    </Stack>
   );
 };
 

diff --git a/...cation/NationalIdentification.stories.tsx → ...cation/NationalIdentification.stories.tsx b/...cation/NationalIdentification.stories.tsx → ...cation/NationalIdentification.stories.tsx
diff --git a/...c/components/NameIdentification/index.tsx → ...mponents/NationalIdentification/index.tsx b/...c/components/NameIdentification/index.tsx → ...mponents/NationalIdentification/index.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import { Heading, Link, Text } from '@chakra-ui/react';
+import { Heading, Link, Stack, Text } from '@chakra-ui/react';
 import InputFormControl from 'components/ui/InputFormControl';
 import SelectFormControl from 'components/ui/SelectFormControl';
 import { getCountriesOptions } from 'constants/countries';
 import {
   getNationalIdentificationOptions,
   disabledIdentifiers,
 } from 'constants/national-identification';
-import FormLayout from 'layouts/FormLayout';
 import { Controller, useFormContext } from 'react-hook-form';
 import {
   getRegistrationAuthorities,
@@ -110,7 +109,7 @@ useEffect(() => {
   }, [NationalIdentificationType]);
 
   return (
-    <FormLayout data-testid="legal-name-identification">
+    <Stack pt={5} data-testid="legal-name-identification">
       <Heading size="md">
         <Trans id="National Identification">National Identification</Trans>
       </Heading>
@@ -208,7 +207,7 @@ useEffect(() => {
           />
         </>
       )}
-    </FormLayout>
+    </Stack>
   );
 };
 

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
@@ -1,7 +1,6 @@
 import { WarningIcon } from '@chakra-ui/icons';
-import { Heading, Text } from '@chakra-ui/react';
+import { Heading, Stack, Text } from '@chakra-ui/react';
 import InputFormControl from 'components/ui/InputFormControl';
-import FormLayout from 'layouts/FormLayout';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { getDomain } from 'utils/utils';
@@ -61,7 +60,7 @@ const TrisaImplementationForm: React.FC<TrisaImplementationFormProps> = ({
   const domain = getValues('website') && getDomain(getValues('website'));
 
   return (
-    <FormLayout>
+    <Stack>
       <Heading size="md">{headerText}</Heading>
       <InputFormControl
         label={t`TRISA Endpoint`}
@@ -84,7 +83,7 @@ const TrisaImplementationForm: React.FC<TrisaImplementationFormProps> = ({
         controlId="certificateCommonName"
         {...register(`${name}.common_name`)}
       />
-    </FormLayout>
+    </Stack>
   );
 };