Merge pull request #16 from CS3219-AY2425S1/reorder-form-fields

Minor updates on UI

Author: qiaoen17

Frontend/src/components/question/CreateQn.jsx

@@ -35,16 +35,21 @@ 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">
+                    <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)}/>
@@ -61,16 +66,12 @@ 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)}/>
                 </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>

Frontend/src/components/question/EditQn.jsx

@@ -45,17 +45,21 @@ 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}>
-                <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>
@@ -69,16 +73,12 @@ 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)}/>
                 </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>

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