form-relative

src/AlertModal/AlertModal.jsx

@@ -15,7 +15,7 @@ import './AlertModal.css';
 import cross from "../Assets/cross-mark.svg";
 import tick from "../Assets/accept-check-good-mark-ok-tick.svg";
 
-const AlertModal = ({ isOpen, onClose, onConfirm, message, iserror, isAlert }) => {
+const AlertModal = ({ isOpen, onClose, onConfirm, message, iserror }) => {
   var image = iserror ? cross : tick;
 
   const handleClose = () => {

src/App.js

@@ -70,15 +70,14 @@ const App = () => {
           <Route path="/add-question/:paperId" element={<Question />} />
           <Route path="/edit-question/:paperId/:questionId" element={<Question/>} />
           <Route path="/questionPaperDashboard/:paperId" element={<QuestionPaperDashboard />}/>
-
-          <Route path="/error404" element={<Error404/>}/>
-
           <Route path="/ready_papers" element={<ReadyPaperDashboard />}/>
-
         </>
       )}
-
-        <Route path="/question" element={< Question />} />
+
+
+
+      {/* Error404 Route */}
+      <Route path="/*" element={<Error404/>}/> 
     </Routes>
   );
 };

src/Create_paper/Createpaper.css

@@ -1,10 +1,14 @@
+.create_paper_container_main{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
 .create_paper_container {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
-
-    background-color: #1a1a1a;
+
   }
 
   .create_paper_form {

src/Create_paper/Createpaper.jsx

@@ -76,9 +76,10 @@ const Createpaper = () => {
     }
   };
 
-  return (
-    <>
-      <Navbar />
+  return (<>
+    <Navbar />
+    <div className='create_paper_container_main'>
+
       <div className="create_paper_container">
         <form className="create_paper_form" onSubmit={handleSubmit}>
           <div className='create_paper_row'>
@@ -198,6 +199,7 @@ const Createpaper = () => {
         message={modalMessage} 
         iserror={isError}
       />
+    </div>
     </>
   );
 };

src/Forgot_Password/Forgot_Password.css

@@ -1,3 +1,10 @@
+.forgot-container-main{
+    background-color: #282828;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+min-height: 100vh;
+}
 .forgot-container
 {
     width: 100%;

src/Forgot_Password/Forgot_Password.jsx

@@ -32,6 +32,7 @@ const ForgotPassword = () => {
     };
 
     return (
+        <div className="forgot-container-main">
         <div className="forgot-container">
             <img alt="Logo" src={Logo} />
             <h2>Forgot Your Password?</h2>
@@ -56,6 +57,7 @@ const ForgotPassword = () => {
                 iserror={isError} 
             />
         </div>
+        </div>
     );
 };
 

src/Login/Login.css

@@ -1,5 +1,11 @@
 
-
+  .lpgin-container-main{
+ background-color: #282828;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+min-height: 100vh;
+  }
   .login-container {
     width: 100%;
     max-width: 400px;
@@ -11,11 +17,8 @@
     border: 1px solid #ccc;
     box-shadow: 0px 0px 10px white;
     border-radius: 8px;
-    background-color: #282828;
-    position: absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
+
+
   }
 
   .login-container img {

src/Login/Login.jsx

@@ -123,6 +123,7 @@ function Login() {
   };
 
   return (
+    <div className="lpgin-container-main">
     <div className="login-container">
       <img src={logo} alt="Logo" />
       <h2>Teacher : Login</h2>
@@ -184,6 +185,7 @@ function Login() {
         iserror={isError}
       />
     </div>
+    </div>
   );
 }
 

src/QuestionPaperDashboard/QuestionPaperDashboard.css

@@ -1,3 +1,10 @@
+.question-list-container-main{
+    background-color: #282828;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+}
 .question-list-container
 {
     width: 100%;

src/QuestionPaperDashboard/QuestionPaperDashboard.jsx

@@ -130,6 +130,7 @@ const QuestionPaperDashboard = () => {
   return (
     <>
       <Navbar />
+      <div className="question-list-container-main">
       <div className="question-list-container">
         {questions.length > 0 ? (
           <>
@@ -229,7 +230,7 @@ const QuestionPaperDashboard = () => {
           </>
         )}
       </div>
-
+      </div>
       {/* Alert Modal */}
       < AlertModal
         isOpen={modalIsOpen} 

src/Reset_Password/Reset_Password.css

@@ -1,3 +1,10 @@
+.reset-container-main{
+    background-color: #282828;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+min-height: 100vh;
+}
 .reset-container
 {
     width: 100%;

src/Reset_Password/Reset_Password.jsx

@@ -83,6 +83,7 @@ const Reset_Password = () => {
     };
 
     return (
+        <div className="reset-container-main">
         <div className="reset-container">
             <img alt="logo" src={Logo} />
             <h2>Teacher: Reset Password</h2>
@@ -124,6 +125,7 @@ const Reset_Password = () => {
                 iserror={isError} 
             />
         </div>
+        </div>
     );
 };
 

src/edit_question/edit_question.jsx

@@ -9,6 +9,7 @@ import Navbar from '../Navbar/Navbar';
 return (
     <>
       <Navbar />
+
       <div className='add_question_container_main'>
         <div className="add_question_container">
           <h2 className="add_question_heading">Add Question</h2>
@@ -101,6 +102,6 @@ return (
       />
     </>
   );
-};
+
 
 export default Question;

src/error/error.css

@@ -4,7 +4,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
   text-align: center;
   color: white;
 }
@@ -16,8 +15,9 @@
 }
 
 .panda-image {
-  width: 450px;
+  width: 500px;
   margin-bottom: 0px;
+  margin-top: -80px;
 }
 
 .error404-text {
@@ -38,3 +38,11 @@
 .go-back-button:hover {
   background-color: #e6e6e6;
 }
+@media (max-width:768px) {
+  .panda-image{
+    width: 300px;
+  }
+  .error-container{
+    height: 100vh;
+  }
+}