Improve UI/UX: Improve Buttons aligment and PersonalInformation validation flow

src/App.css

@@ -38,6 +38,15 @@ h1 {
   font-weight: 900;
 }
 
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+form button {
+  align-self: flex-end;
+}
+
 #magic-canvas {
   width: 100%;
   height: 80vh;

src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.css';
 
-import { Container, Fade, Button, Form, FormGroup, Input, Label, Progress } from 'reactstrap';
+import { Container, Fade, Button, Form, FormGroup, Input, Label } from 'reactstrap';
 
 import PersonalInformation, { FormData } from './PersonalInformation';
 import DrawCanvas, { CanvasData } from './DrawCanvas';
@@ -19,7 +19,7 @@ const Introduction: React.FunctionComponent<SectionComponentProps> = ({ changePa
       <p className="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos impedit natus dolorem ipsam rem cum mollitia, cumque sapiente omnis ea sed nobis ullam, asperiores dignissimos. Unde dolore iure quisquam aut.</p>
       <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat suscipit fugiat, iste, odio tempora dolor, voluptatum assumenda enim aspernatur rem ipsam animi corrupti sapiente labore repellat quam amet. Ipsa, aspernatur!</p>
     </div>
-    <Button type="button" outline onClick={() => changePage()} color="success">Let's start!</Button>
+    <Button type="button" outline onClick={() => changePage()} color="info">Let's start!</Button>
   </Fade>
 );
 
@@ -39,7 +39,7 @@ const TermsAndConditions: React.FunctionComponent<SectionComponentProps> = ({ ch
           <Input type="checkbox" id="vom-terms-check" checked={agreement} onChange={ e => setAgreement(e.target.checked)}/>
           <Label for="vom-terms-check" check>I agree</Label>
         </FormGroup>
-        <Button type="button" disabled={!agreement} color={agreement ? 'primary' : 'secondary'}  onClick={ () => changePage() }>Next</Button>
+        <Button type="button" disabled={!agreement} color={agreement ? 'info' : 'secondary'}  onClick={ () => changePage() }>Next</Button>
       </Form>
     </Fade>
   );

src/FollowUp.tsx

@@ -12,11 +12,13 @@ const FollowUp: React.FunctionComponent<FollowUpProps> = ({ saveData }) => {
       <h2>
         Thank you for your participation
       </h2>
-      <FormGroup>
-        <Label>Would you be willing to participate in a follow-up (online) interview? If so, please leave your email address in the box provided.</Label>
-        <Input type="text" value={email} onChange={(e) => setEmail(e.target.value)}/>
-      </FormGroup>
-      <Button color="primary" onClick={() => saveData(email)}>Finish</Button>
+      <form>
+        <FormGroup>
+          <Label>Would you be willing to participate in a follow-up (online) interview? If so, please leave your email address in the box provided.</Label>
+          <Input type="text" value={email} onChange={(e) => setEmail(e.target.value)}/>
+        </FormGroup>
+        <Button color="primary" onClick={() => saveData(email)}>Finish</Button>
+      </form>
     </Fade>
   )
 };

src/PersonalInformation.tsx

@@ -84,7 +84,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
 
   const [ submitted, submit ] = useState(false);
   const [ openModal, toggleModal ] = useState(false);
-  const [ validationResult, validate ] = useState<Validations>({..._initialValidation});
+  const [ validationResult, saveValidation ] = useState<Validations>({..._initialValidation});
   
   const setInputValidation = (field: FormDataKey): undefined | { valid: true } | { invalid: true } => {
     if (!submitted) {
@@ -104,7 +104,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
     };
     setValue(newValues);
     if (submitted) {
-      validate(validateData(newValues))
+      saveValidation(validateData(newValues))
     }
   };
 
@@ -244,10 +244,12 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
             if (!submitted) {
               submit(true);
             }
-            if (allValid(validationResult)) {
+            const _validation = validateData(values);
+            if (allValid(_validation)) {
               saveData(values);
+            } else {
+              saveValidation(_validation);
             }
-            validate(validateData(values));
           }}
         >Next</Button>
       </Form>