From 5564c7cf70b50ec31224c15a19c8280abba48d5d Mon Sep 17 00:00:00 2001
From: elyseleong <elyse.xuan@gmail.com>
Date: Fri, 27 Sep 2024 21:10:56 +0800
Subject: [PATCH 1/5] Remove unused imports and variables

---
 Frontend/src/components/question/Question.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/Frontend/src/components/question/Question.jsx b/Frontend/src/components/question/Question.jsx
index 5327b79df7..89959bb458 100644
--- a/Frontend/src/components/question/Question.jsx
+++ b/Frontend/src/components/question/Question.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import Modal from "react-bootstrap/Modal";
 import Table from "react-bootstrap/Table";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
@@ -14,8 +13,7 @@ function Question() {
     const [questionToDelete, setQuestionToDelete] = useState(null);
     const [showEditModal, setShowEditModal] = useState(false);
     const [currentQuestion, setCurrentQuestion] = useState(null);
-    const [error, setError] = useState("")
-    
+
     const handleShow = () => setShowComponent(true);
     const handleClose = () => setShowComponent(false);
 
@@ -50,7 +48,6 @@ function Question() {
 
     const handleCloseEditModal = () => {
         setShowEditModal(false);
-        setError("");
     }
 
     // Show the delete confirmation modal

From b375ce06c52bfe4a084ac9f5539ce14aa6ed78ab Mon Sep 17 00:00:00 2001
From: elyseleong <elyse.xuan@gmail.com>
Date: Fri, 27 Sep 2024 21:13:31 +0800
Subject: [PATCH 2/5] Update UI

- Move Title field to the top
- Reduce the font size of Complexity header
- Add margin to the bottom of Complexity container
---
 Frontend/src/components/question/CreateQn.jsx | 15 ++++++++-------
 Frontend/src/components/question/EditQn.jsx   | 15 ++++++++-------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/Frontend/src/components/question/CreateQn.jsx b/Frontend/src/components/question/CreateQn.jsx
index 0e5b1547ea..3afae9e6f9 100644
--- a/Frontend/src/components/question/CreateQn.jsx
+++ b/Frontend/src/components/question/CreateQn.jsx
@@ -38,13 +38,18 @@ function CreateQn({handleClose, addQuestion}) {
         <div className="w-100 bg-white p-3">
             <form onSubmit={Submit}>
                 {error && <div className="alert alert-danger">{error}</div>}
+                <div className="mb-2">
+                    <label htmlFor="">Title</label>
+                    <input type="text" placeholder='Shortest Distance' className='form-control'
+                    onChange={(e) => setTitle(e.target.value)}/>
+                </div>
                 <div className="mb-2">
                     <label htmlFor="">Category</label>
                     <input type="text" placeholder='Data Structures' className='form-control'
                     onChange={(e) => setCategory(e.target.value.split(","))}/>
                 </div>
-                <div className="container mt-3">
-                    <h3>Complexity</h3>
+                <div className="container my-3">
+                    <h5>Complexity</h5>
                     <div className="form-check">
                         <input type="radio" id="easy" value="Easy" name={"complexity"} 
                         onChange={(e) => setComplexity(e.target.value)}/>
@@ -66,11 +71,7 @@ function CreateQn({handleClose, addQuestion}) {
                     <input type="text" placeholder='Return the largest....' className='form-control'
                     onChange={(e) => setDescription(e.target.value)}/>
                 </div>
-                <div className="mb-2">
-                    <label htmlFor="">Title</label>
-                    <input type="text" placeholder='Shortest Distance' className='form-control'
-                    onChange={(e) => setTitle(e.target.value)}/>
-                </div>
+
                 <button className="btn btn-success">Submit</button>
             </form>
         </div>
diff --git a/Frontend/src/components/question/EditQn.jsx b/Frontend/src/components/question/EditQn.jsx
index 1c3b3c054b..0dd0b477aa 100644
--- a/Frontend/src/components/question/EditQn.jsx
+++ b/Frontend/src/components/question/EditQn.jsx
@@ -49,13 +49,18 @@ function EditQn({ question, handleClose, editQuestion }) {
             <form onSubmit={Update}>
                 <h2>Update Question</h2>
                 {error && <div className="alert alert-danger">{error}</div>}
+                <div className="mb-2">
+                    <label htmlFor="">Title</label>
+                    <input type="text" placeholder='Shortest Distance' className='form-control'
+                    value={title} onChange={e => setTitle(e.target.value)}/>
+                </div>
                 <div className="mb-2">
                     <label htmlFor="">Category</label>
                     <input type="text" placeholder='Data Structures' className='form-control'
                     value={category.join(",")} onChange={(e) => setCategory(e.target.value.split(","))}/>
                 </div>
-                <div className="container mt-3">
-                    <h3>Complexity</h3>
+                <div className="container my-3">
+                    <h5>Complexity</h5>
                     <div className="form-check">
                         <input type="radio" id="easy" value="Easy" checked={complexity === "Easy"} onChange={(e) => setComplexity(e.target.value)}/>
                         <label className="form-check-label" htmlFor="easy">Easy</label>
@@ -74,11 +79,7 @@ function EditQn({ question, handleClose, editQuestion }) {
                     <input type="text" placeholder='Return the largest....' className='form-control' 
                     value={description} onChange={(e) => setDescription(e.target.value)}/>
                 </div>
-                <div className="mb-2">
-                    <label htmlFor="">Title</label>
-                    <input type="text" placeholder='Shortest Distance' className='form-control'
-                    value={title} onChange={e => setTitle(e.target.value)}/>
-                </div>
+
                 <button className="btn btn-success">Update</button>
             </form>
         </div>

From 0195363acae834537488cfbf313ef1ca712a150b Mon Sep 17 00:00:00 2001
From: elyseleong <elyse.xuan@gmail.com>
Date: Fri, 27 Sep 2024 21:14:51 +0800
Subject: [PATCH 3/5] Remove extra "Update" title for Edit modal

---
 Frontend/src/components/question/EditQn.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Frontend/src/components/question/EditQn.jsx b/Frontend/src/components/question/EditQn.jsx
index 0dd0b477aa..73b4c08ed3 100644
--- a/Frontend/src/components/question/EditQn.jsx
+++ b/Frontend/src/components/question/EditQn.jsx
@@ -47,7 +47,6 @@ function EditQn({ question, handleClose, editQuestion }) {
     <div className='d-flex bg-primary justify-content-center align-items-center'>
         <div className="w-100 bg-white p-3">
             <form onSubmit={Update}>
-                <h2>Update Question</h2>
                 {error && <div className="alert alert-danger">{error}</div>}
                 <div className="mb-2">
                     <label htmlFor="">Title</label>

From 9d41996751dac0b65107f7aff9c397210df71d77 Mon Sep 17 00:00:00 2001
From: elyseleong <elyse.xuan@gmail.com>
Date: Fri, 27 Sep 2024 21:17:28 +0800
Subject: [PATCH 4/5] Increase bottom margin for Description field

---
 Frontend/src/components/question/CreateQn.jsx | 2 +-
 Frontend/src/components/question/EditQn.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/question/CreateQn.jsx b/Frontend/src/components/question/CreateQn.jsx
index 3afae9e6f9..469b20dc30 100644
--- a/Frontend/src/components/question/CreateQn.jsx
+++ b/Frontend/src/components/question/CreateQn.jsx
@@ -66,7 +66,7 @@ function CreateQn({handleClose, addQuestion}) {
                         <label className="form-check-label" htmlFor="hard">Hard</label>
                     </div>
                 </div>
-                <div className="mb-2">
+                <div className="mb-3">
                     <label htmlFor="">Description</label>
                     <input type="text" placeholder='Return the largest....' className='form-control'
                     onChange={(e) => setDescription(e.target.value)}/>
diff --git a/Frontend/src/components/question/EditQn.jsx b/Frontend/src/components/question/EditQn.jsx
index 73b4c08ed3..d7b1c92f98 100644
--- a/Frontend/src/components/question/EditQn.jsx
+++ b/Frontend/src/components/question/EditQn.jsx
@@ -73,7 +73,7 @@ function EditQn({ question, handleClose, editQuestion }) {
                         <label className="form-check-label" htmlFor="hard">Hard</label>
                     </div>
                 </div>
-                <div className="mb-2">
+                <div className="mb-3">
                     <label htmlFor="">Description</label>
                     <input type="text" placeholder='Return the largest....' className='form-control' 
                     value={description} onChange={(e) => setDescription(e.target.value)}/>

From 9f6f182029a8aa18ef7a5132210901f8cc9e63ea Mon Sep 17 00:00:00 2001
From: elyseleong <elyse.xuan@gmail.com>
Date: Fri, 27 Sep 2024 21:22:23 +0800
Subject: [PATCH 5/5] Reduce spaces between Title field and Modal Header

---
 Frontend/src/components/question/CreateQn.jsx | 2 +-
 Frontend/src/components/question/EditQn.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/question/CreateQn.jsx b/Frontend/src/components/question/CreateQn.jsx
index 469b20dc30..bd4096caf8 100644
--- a/Frontend/src/components/question/CreateQn.jsx
+++ b/Frontend/src/components/question/CreateQn.jsx
@@ -35,7 +35,7 @@ function CreateQn({handleClose, addQuestion}) {
 
   return (
     <div className='d-flex bg-primary justify-content-center align-items-center'>
-        <div className="w-100 bg-white p-3">
+        <div className="w-100 bg-white px-3 pb-3">
             <form onSubmit={Submit}>
                 {error && <div className="alert alert-danger">{error}</div>}
                 <div className="mb-2">
diff --git a/Frontend/src/components/question/EditQn.jsx b/Frontend/src/components/question/EditQn.jsx
index d7b1c92f98..13fbb79c65 100644
--- a/Frontend/src/components/question/EditQn.jsx
+++ b/Frontend/src/components/question/EditQn.jsx
@@ -45,7 +45,7 @@ function EditQn({ question, handleClose, editQuestion }) {
 
   return (
     <div className='d-flex bg-primary justify-content-center align-items-center'>
-        <div className="w-100 bg-white p-3">
+        <div className="w-100 bg-white px-3 pb-3">
             <form onSubmit={Update}>
                 {error && <div className="alert alert-danger">{error}</div>}
                 <div className="mb-2">