Improve UI/UX

src/App.css

@@ -1,26 +1,14 @@
-.App {
-  height: 100vh;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@300;400;700&display=swap');
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
+.App {
   background-color: #282c34;
+  font-family: 'Roboto', sans-serif;
+  height: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
   color: white;
 }
 
@@ -28,13 +16,25 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.App .container {
+  background-color: #4b505a6b;
+  border-radius: 0.3rem;
+  padding: 4rem 2rem;
+}
+
+.App section {
+  display: flex;
+  flex-direction: column;
+}
+
+button:disabled,
+button.disabled {
+  cursor: not-allowed;
+};
+
+h1 {
+  font-family: 'Open Sans' , sans-serif;
+  font-weight: 900;
 }
 
 #magic-canvas {
@@ -45,4 +45,8 @@
   background-position: center center;
   background-size: contain;
   background-repeat: no-repeat;
+}
+
+#vom-drawing-canvas button {
+  align-self: flex-end;
 }

src/App.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.css';
 
+import { Container, Fade, Button, Form, FormGroup, Input, Label } from 'reactstrap';
+
 import PersonalInformation, { FormData } from './PersonalInformation';
 import DrawCanvas, { CanvasData } from './DrawCanvas';
 import FollowUp from './FollowUp';
@@ -10,37 +12,46 @@ type SectionComponentProps = {
   changePage: () => void
 }
 const Introduction: React.FunctionComponent<SectionComponentProps> = ({ changePage }) => (
-  <section id="introduction">
-    <div className="jumbotron">
-      <h2>Accent and dialect form</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
-      <p>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>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>
-      <button type="button" onClick={() => changePage()} className="btn btn-primary">Start</button>
+  <Fade tag="section" id="vom-intro">
+    <h1 className="mb-4">Voices of Merseyside</h1>
+    <div className="mb-4">
+      <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
+      <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>
-  </section>
+    <Button type="button" outline onClick={() => changePage()} color="success">Let's start!</Button>
+  </Fade>
 );
 
 const TermsAndConditions: React.FunctionComponent<SectionComponentProps> = ({ changePage }) => {
   const [ agreement, setAgreement ] = useState(false);
   return (
-    <section id="terms-and-legals">
-      <form id="terms-and-conditions-form" className="needs-validation">
-        <h2>Terms and Conditions</h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dolore magni aspernatur error totam exercitationem sequi illum. Ex voluptas in, eius provident laudantium quidem quod esse corrupti quas vitae aliquam!</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem culpa soluta, voluptatibus quam magni sapiente corporis debitis ad illo voluptas odio! Adipisci facere ad molestiae ullam vero iure minus mollitia.</p>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum commodi consectetur aperiam. Obcaecati quisquam possimus et facilis quas, doloremque minima rerum reprehenderit fugiat ipsam dolorum placeat velit! Exercitationem, eveniet obcaecati.</p>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quidem quisquam suscipit! Excepturi deserunt quaerat, odio recusandae molestiae assumenda voluptatem possimus id alias quas voluptatibus non quis vitae incidunt veritatis!</p>
-        <div className="form-group form-check">
-          <input type="checkbox" className="form-check-input" id="agreement" checked={agreement} onChange={(e) => { setAgreement(e.target.checked)}} required />
-          <label className="form-check-label" htmlFor="agreement">I agree with the termns and conditions</label>
+    <Fade tag="section" id="vom-terms">
+      <Form>
+        <h2 className="mb-4">Terms and Conditions</h2>
+        <div className="mb-4">
+          <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dolore magni aspernatur error totam exercitationem sequi illum. Ex voluptas in, eius provident laudantium quidem quod esse corrupti quas vitae aliquam!</p>
+          <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem culpa soluta, voluptatibus quam magni sapiente corporis debitis ad illo voluptas odio! Adipisci facere ad molestiae ullam vero iure minus mollitia.</p>
+          <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum commodi consectetur aperiam. Obcaecati quisquam possimus et facilis quas, doloremque minima rerum reprehenderit fugiat ipsam dolorum placeat velit! Exercitationem, eveniet obcaecati.</p>
+          <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quidem quisquam suscipit! Excepturi deserunt quaerat, odio recusandae molestiae assumenda voluptatem possimus id alias quas voluptatibus non quis vitae incidunt veritatis!</p>
         </div>
-        <button type="button" className="btn btn-primary" onClick={() => changePage()} disabled={!agreement}>next</button>
-      </form>
-    </section>
+        <FormGroup className="mb-4" check>
+          <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>
+      </Form>
+    </Fade>
   );
 }
 
+const FinishSection: React.FunctionComponent = () => {
+  return (
+    <Fade tag="section" id="vom-finish">
+      <h2>Thank you!</h2>
+    </Fade>
+  )
+};
 
 type AnswersData = {
   personalInformation: FormData,
@@ -49,7 +60,7 @@ type AnswersData = {
 };
 
 const App = () => {
-  const [ currentPage, setCurrentPage ] = useState(0);
+  const [ currentPage, setCurrentPage ] = useState(3);
   const [ exit, setExit ] = useState(false);
   const [ answers, saveAnswers ] = useState<AnswersData>({
     personalInformation: {
@@ -98,26 +109,27 @@ const App = () => {
         saveAnswers({
           ...answers,
           email,
-        })
+        });
+        setCurrentPage(currentPage + 1)
       }
     }),
+    FinishSection({})
   ];
   return (
-    <div className="App bg-light">
-      <div className="container">
+    <div className="App">
+      <Container>
         {
-          !exit && sections[currentPage]
-        }
-        { 
-          exit && (
-            <section>
+          !exit ? (
+            sections[currentPage]
+          ) : (
+            <Fade in={exit} tag="section">
               <h4>
                 Thank you for your interest, but permission from your parent/guardian is required before you are able to participate.
               </h4>
-            </section>
+            </Fade>
           )
         }
-      </div>
+      </Container>
     </div>
   )
 };

src/DrawCanvas.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState } from 'react';
 import Paper, { Path } from 'paper';
-import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, Fade, ModalHeader } from 'reactstrap';
 
 const COLORS = [
   '#FFC6BC',
@@ -199,13 +199,13 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
   render = () => {
     return (
       <>
-        <Button onClick={() => this.clearCanvas()}>Clear</Button>
-        <canvas id="magic-canvas" />
+        <Button className="mb-3" onClick={() => this.clearCanvas()}>Clear</Button>
+        <canvas id="magic-canvas" className="mb-4"/>
         <Button
           color="primary"
           onClick={() => this.props.saveData(this.state.data)}
           disabled={this.state.current === 0}
-        >Next</Button>
+        >Finish</Button>
         <Modal isOpen={this.state.openModal} onClosed={() => {
           console.log("close", this.state);
         }}>
@@ -215,7 +215,7 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
           />
         </Modal>
         <Modal isOpen={this.state.current === 7}>
-          <ModalBody>Maximun reached!</ModalBody>
+          <ModalBody>Maximun drawings reached!</ModalBody>
           <ModalFooter>
             <Button onClick={() => {}}>Edit drawings</Button>
             <Button onClick={() => this.props.saveData(this.state.data)}>Next step</Button>
@@ -231,13 +231,29 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
 export const DrawCanvas: React.FunctionComponent<{
   saveData: (data: CanvasData) => void
 }> = ({ saveData }) => {
+  const [showInstructions, setShowInstructions] = useState(true)
   return (
-    <section id="draw-canvas">
-      <h2>Draw time</h2>
+    <Fade tag="section" id="vom-drawing-canvas">
+      <Modal isOpen={showInstructions}>
+        <ModalHeader>
+          Instructions
+        </ModalHeader>
+        <ModalBody>
+          <ol>
+            <li>Please draw a shape around an area where you think a certain accent or dialect is spoken in Merseyside.</li>
+            <li>Please name the accent, give an example of how it sounds, write down any associations (ideas, judgements, opinions etc.) that come to mind when you encounter this accent/a speaker with this accent.</li>
+            <li>You are free to edit your map using the edit function.</li>
+            <li>Repeat stages 1 and 2 until you have finished your map. Once you have finished, click ‘finished’. It will not possible to make changes after your map has been submitted.</li>
+          </ol>
+        </ModalBody>
+        <ModalFooter>
+          <Button outline color="primary" onClick={() => setShowInstructions(false)}>Start</Button>
+        </ModalFooter>
+      </Modal>
       <Canvas
         saveData={saveData}
       />
-    </section>
+    </Fade>
   )
 };
 

src/FollowUp.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormGroup, Label, Input, Button } from 'reactstrap';
+import { FormGroup, Label, Input, Button, Fade } from 'reactstrap';
 
 type FollowUpProps = {
   saveData: (data: string) => void
@@ -8,7 +8,7 @@ type FollowUpProps = {
 const FollowUp: React.FunctionComponent<FollowUpProps> = ({ saveData }) => {
   const [ email, setEmail ] = useState('');
   return (
-    <section id="follow-up">
+    <Fade tag="section" id="vom-follow-up">
       <h2>
         Thank you for your participation
       </h2>
@@ -17,7 +17,7 @@ const FollowUp: React.FunctionComponent<FollowUpProps> = ({ saveData }) => {
         <Input type="text" value={email} onChange={(e) => setEmail(e.target.value)}/>
       </FormGroup>
       <Button color="primary" onClick={() => saveData(email)}>Finish</Button>
-    </section>
+    </Fade>
   )
 };
 

src/PersonalInformation.tsx

@@ -10,6 +10,7 @@ import {
   Input,
   FormText,
   FormFeedback,
+  Fade
 } from 'reactstrap';
 
 export type FormData = {
@@ -108,7 +109,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
   };
 
   return (
-    <section id="personal-information">
+    <Fade tag="section" id="vom-personal-information">
       <h2>Personal Information</h2>
       <p>All fields are required</p>
 
@@ -250,7 +251,7 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
           }}
         >Next</Button>
       </Form>
-    </section>
+    </Fade>
   );
 };