Update UI

- Move Title field to the top
- Reduce the font size of Complexity header
- Add margin to the bottom of Complexity container

Author: yuxuanleong

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>

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>