Improve UX: Add Progress bar on top. Reset scroll when changing pages. Reduce padding

src/App.css

@@ -10,6 +10,7 @@
   align-items: center;
   justify-content: center;
   color: white;
+  margin-top: 0.5rem;
 }
 
 .App-link {
@@ -19,7 +20,7 @@
 .App .container {
   background-color: #4b505a6b;
   border-radius: 0.3rem;
-  padding: 4rem 2rem;
+  padding: 2rem;
 }
 
 .App section {
@@ -71,4 +72,25 @@ h1 {
   color: #282c34;
   text-transform: uppercase;
   font-size: 0.8rem;
+}
+
+#vom-progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  background-color: #6c757d;
+  position: fixed;
+  top: 0;
+  z-index: 99;
+}
+
+.vom-progress-page {
+  width: 0;
+  transition: width 500ms ease-in-out;
+}
+
+.vom-progress-page.progress-done {
+  background-color: #17a2b8;
+  width: 100%;
 }

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 } from 'reactstrap';
+import { Container, Fade, Button, Form, FormGroup, Input, Label, Progress } from 'reactstrap';
 
 import PersonalInformation, { FormData } from './PersonalInformation';
 import DrawCanvas, { CanvasData } from './DrawCanvas';
@@ -59,8 +59,9 @@ type AnswersData = {
   email: string,
 };
 
+const PAGES = [0, 1, 2, 3, 4];
 const App = () => {
-  const [ currentPage, setCurrentPage ] = useState(3);
+  const [ currentPage, setCurrentPage ] = useState(0);
   const [ exit, setExit ] = useState(false);
   const [ answers, saveAnswers ] = useState<AnswersData>({
     personalInformation: {
@@ -75,33 +76,35 @@ const App = () => {
     },
     canvas: [],
     email: ''
-  });  
+  });
+  const changePage = () => {
+    setCurrentPage(currentPage + 1);
+    window.scrollTo(0, 0);
+  }
   const sections = [
     Introduction({
-      changePage: () => {setCurrentPage(currentPage + 1)}
+      changePage: changePage
     }),
     TermsAndConditions({
-      changePage: () => {setCurrentPage(currentPage + 1)}
+      changePage: changePage
     }),
     PersonalInformation({
       closeApp: () => setExit(true),
       saveData: (data: FormData) => {
-        console.log("data", data)
         saveAnswers({
           ...answers,
           personalInformation: data
         });
-        setCurrentPage(currentPage + 1);
+        changePage()
       }
     }),
     DrawCanvas({
       saveData: (data) => {
-        console.log("data", data)
         saveAnswers({
           ...answers,
           canvas: data
         });
-        setCurrentPage(currentPage + 1);
+        changePage()
       }
     }),
     FollowUp({
@@ -110,28 +113,36 @@ const App = () => {
           ...answers,
           email,
         });
-        setCurrentPage(currentPage + 1);
-        console.log(answers)
+        changePage()
       }
     }),
     FinishSection({})
   ];
   return (
-    <div className="App">
-      <Container>
+    <>
+      <div id="vom-progress-bar">
         {
-          !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>
-            </Fade>
-          )
+          PAGES.map(page => (
+            <div key={page} className={`vom-progress-page ${page <= currentPage ? 'progress-done' : ''}`}></div>
+          ))
         }
-      </Container>
-    </div>
+      </div>
+      <div className="App">
+        <Container>
+          {
+            !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>
+              </Fade>
+            )
+          }
+        </Container>
+      </div>
+    </>
   )
 };