Adds padding above form buttons, fixes scroll behavior (#1138)

* Adds padding above form buttons, fixes scroll behavior * Replaces app ver with rev
trisacrypto · Jan 8, 2024 · b8c9e1b · b8c9e1b
1 parent 5a5c211
commit b8c9e1b
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 14 deletions.
diff --git a/web/gds-user-ui/src/components/BasicDetailsForm/index.tsx b/web/gds-user-ui/src/components/BasicDetailsForm/index.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { VStack, chakra, useDisclosure } from '@chakra-ui/react';
+import { Box, VStack, chakra, useDisclosure } from '@chakra-ui/react';
 import InputFormControl from 'components/ui/InputFormControl';
 import SelectFormControl from 'components/ui/SelectFormControl';
 import { getBusinessCategoryOptions, vaspCategories } from 'constants/basic-details';
@@ -191,7 +191,8 @@ const BasicDetailsForm: React.FC<BasicDetailsFormProps> = ({
               )}
             />
           </VStack>
-          <StepButtons
+          <Box pt={5}>
+            <StepButtons
             handleNextStep={handleNextStepClick}
             isFirstStep={true}
             onResetModalClose={handleResetClick}
@@ -201,7 +202,8 @@ const BasicDetailsForm: React.FC<BasicDetailsFormProps> = ({
             onClosed={onCloseModalHandler}
             handleResetClick={handleResetClick}
             shouldShowResetFormModal={shouldShowResetFormModal}
-          />
+            />
+          </Box>
         </chakra.form>
         {!isProdEnv ? <DevTool control={methods.control} /> : null}
       </FormProvider>

diff --git a/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx b/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx
@@ -169,7 +169,8 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
             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
+          <Box pt={5}>
+            <StepButtons
             handlePreviousStep={handlePreviousStepClick}
             handleNextStep={handleNextStepClick}
             onResetModalClose={handleResetClick}
@@ -179,7 +180,8 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
             onClosed={onCloseModalHandler}
             handleResetClick={handleResetClick}
             shouldShowResetFormModal={shouldShowResetFormModal}
-          />
+            />
+          </Box>
         </chakra.form>
         {!isProdEnv ? <DevTool control={methods.control} /> : null}
       </FormProvider>

diff --git a/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx b/web/gds-user-ui/src/components/LegalPerson/LegalForm.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 CountryOfRegistration from 'components/CountryOfRegistration';
 import FormLayout from 'layouts/FormLayout';
 import NameIdentifiers from '../NameIdentifiers';
@@ -155,7 +155,8 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
           <Address />
           <CountryOfRegistration />
           <NationalIdentification />
-          <StepButtons
+          <Box pt={5}>
+            <StepButtons
             handlePreviousStep={handlePreviousStepClick}
             handleNextStep={handleNextStepClick}
             onResetModalClose={handleResetClick}
@@ -165,7 +166,8 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
             onClosed={onCloseModalHandler}
             handleResetClick={handleResetClick}
             shouldShowResetFormModal={shouldShowResetFormModal}
-          />
+            />
+          </Box>
         </chakra.form>
         {!isProdEnv ? <DevTool control={methods.control} /> : null}
       </FormProvider>

diff --git a/web/gds-user-ui/src/components/Sidebar/SidebarContent.tsx b/web/gds-user-ui/src/components/Sidebar/SidebarContent.tsx
@@ -147,7 +147,7 @@ const SidebarContent = ({ onClose, ...rest }: SidebarProps) => {
         textAlign={'center'}
         color="white"
         width="100%">
-        <Text>GIT: {appGitVersion || 'N/A'}</Text>
+        <Text>App: {appGitVersion || 'N/A'}</Text>
         <HDivider />
         <Text>BFF & GDS: {bffAndGdsVersion || 'N/A'}</Text>
       </HStack>

diff --git a/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx b/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx
@@ -150,7 +150,8 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
             headerText={t`TRISA Endpoint: MainNet`}
             />
           </Box>
-          <StepButtons
+          <Box pt={5}>
+            <StepButtons
             handlePreviousStep={handlePreviousStepClick}
             handleNextStep={handleNextStepClick}
             onResetModalClose={handleResetClick}
@@ -160,7 +161,8 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
             onClosed={onCloseModalHandler}
             handleResetClick={handleResetClick}
             shouldShowResetFormModal={shouldShowResetFormModal}
-          />
+            />
+          </Box>
         </chakra.form>
         {!isProdEnv ? <DevTool control={methods.control} /> : null}
       </FormProvider>

diff --git a/web/gds-user-ui/src/components/TrixoQuestionnaireForm/index.tsx b/web/gds-user-ui/src/components/TrixoQuestionnaireForm/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef, Dispatch, SetStateAction } from 'react';
-import { Grid, GridItem, Heading, Text, VStack, chakra, useDisclosure } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Heading, Text, VStack, chakra, useDisclosure } from '@chakra-ui/react';
 import OtherJuridictions from 'components/OtherJuridictions';
 import Regulations from 'components/Regulations';
 import SwitchFormControl from 'components/SwitchFormControl';
@@ -455,7 +455,8 @@ const TrixoQuestionnaireForm: React.FC<TrixoFormProps> = ({
               />
             </VStack>
           </VStack>
-          <StepButtons
+          <Box pt={5}>
+            <StepButtons
             handleNextStep={handleNextStepClick}
             handlePreviousStep={handlePreviousStepClick}
             onResetModalClose={handleResetClick}
@@ -465,7 +466,8 @@ const TrixoQuestionnaireForm: React.FC<TrixoFormProps> = ({
             onClosed={onCloseModalHandler}
             handleResetClick={handleResetClick}
             shouldShowResetFormModal={shouldShowResetFormModal}
-          />
+            />
+          </Box>
         </chakra.form>
         {!isProdEnv ? <DevTool control={methods.control} /> : null}
       </FormProvider>

diff --git a/web/gds-user-ui/src/index.css b/web/gds-user-ui/src/index.css
@@ -6,6 +6,7 @@ body {
   height: '100%';
   font-family: 'Open sans', sans-serif;
   scroll-behavior: smooth;
+  overflow-anchor: none;
 }
 body {
   background-color: '#F7F8FC' !important;