menu updated

awaismohammad23 · Dec 9, 2023 · 1d6c159 · 1d6c159
1 parent 13ad938
commit 1d6c159
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 21 deletions.
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css
@@ -1,22 +1,21 @@
 /* Modal.css */
 
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .modal-content {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    z-index: 1;
-  }
-
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
@@ -112,3 +112,60 @@ h3 {
   text-align: center;
 }
 
+/* Tutor.css */
+
+/* ... (previous styles) */
+
+.confirm-tutor-button button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px; /* Add margin-right for space between buttons */
+}
+
+.confirm-tutor-button button:hover {
+  background-color: #45a049;
+}
+
+.become-tutor-form {
+  text-align: center;
+  margin: 20px;
+}
+
+.become-tutor-form form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.become-tutor-form label {
+  margin-top: 10px;
+}
+
+.become-tutor-form input {
+  padding: 8px;
+  margin-top: 5px;
+  width: 200px;
+}
+
+.become-tutor-form button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.become-tutor-form button:hover {
+  background-color: #45a049;
+}
+
+.tutor-container {
+  text-align: center;
+}
+
+/* ... (remaining styles) */
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
@@ -93,6 +93,16 @@ function Tutor() {
             {/* Add payment options here */}
           </div>
         );
+      case 3:
+        return (
+          <div>
+            <h3>Confirmation</h3>
+            <p>Course Fee: $XXX</p>
+            <p>Qualification: {selectedTutor.qualification}</p>
+
+            {/* Additional details and options for confirmation */}
+          </div>
+        );
       default:
         return null;
     }
@@ -197,10 +207,15 @@ function Tutor() {
 
                     {/* Navigation Buttons */}
                     <div className="confirm-tutor-button">
-                      <button onClick={handleCloseModal}>Close</button>
-                      {confirmationStep < 2 && (
+                      <button onClick={handleCloseModal}>
+                        {confirmationStep === 1 ? "Close" : "Back"}
+                      </button>
+                      {confirmationStep < 3 && (
                         <button onClick={handleNextStep}>Next</button>
                       )}
+                      {confirmationStep === 3 && (
+                        <button onClick={handleConfirmTutor}>Confirm</button>
+                      )}
                     </div>
                   </div>
                 </Modal>