Merge branch 'main' into mm-307-question-iteration

src/Home/Home.scss

@@ -2,4 +2,23 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+label {
+    margin: 10pix
+}
+
+input {
+    margin: 10px;
+}
+
+button {
+    margin: 10px;
 }

src/Home/Home.tsx

@@ -3,14 +3,13 @@ import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
 import './Home.scss'
 
-interface getUserProp{
+interface HomeProps{
     username:string;
     setUsername:(uname:string)=>void;
 }
 
-function Home(props:getUserProp) {
+function Home(props:HomeProps) {
 
-    //const [username, setUsername] = useState("");
     const [submitStatus, setSubmitStatus] = useState(false);
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -29,24 +28,20 @@ function Home(props:getUserProp) {
     return (
         <>
             <main className="home-content" style={{ backgroundImage: `url(${homeBackgroundImage})` }}>
-
                 {/* Other components and content */}
-                <form onSubmit={handleSubmit}>
+                <form className="form" onSubmit={handleSubmit}>
                     <label>Enter name:
                         <input type="text"
                             value={props.username}
-                            //onChange={username => setUsername(username.target.value)}
                             onChange={(username) => {props.setUsername(username.target.value)}}
                         />
                     </label>
                     <button type="submit">Submit</button>
                     {submitStatus ? <p>Welcome {props.username}!</p> : null}
                 </form>
-
                 <button className="startQuizButton" onClick={routeChange}>
                      Start quiz 
                 </button>
-
             </main>
         </>
     )

src/Menu/MenuItems.tsx

@@ -2,5 +2,5 @@
 // list of the menu options that will be displayed when clicking on hamburger button
 export const menuItems = [
   { label: 'Home', link: '/' },
-  { label: 'Quiz', link: '' },
+  { label: 'Quiz', link: '/quiz' },
 ];

src/Quiz/Quiz.tsx

@@ -2,7 +2,7 @@ import { QuestionDisplay } from "../QuestionDisplay/QuestionDisplay"
 import { getQuizQuestions } from "../getQuizQuestions/getQuizQuestions"
 import { useState, useEffect } from "react";
 
-interface getUserProp{
+interface QuizProps{
     username:string;
 }
 
@@ -25,7 +25,7 @@ export function Quiz (props:getUserProp) {
             setCurrentIndex(currentIndex + 1);
         }
     }
-
+    
     return (
         <div>
             User : {props.username}