diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css index e39bd6bb..fb5c365c 100644 --- 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; - } - \ No newline at end of file + 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 index b8a92612..5c3e4370 100644 --- 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 index 17462472..8302c1b2 100644 --- 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 */} ); + case 3: + return ( +
+

Confirmation

+

Course Fee: $XXX

+

Qualification: {selectedTutor.qualification}

+ + {/* Additional details and options for confirmation */} +
+ ); default: return null; } @@ -197,10 +207,15 @@ function Tutor() { {/* Navigation Buttons */}
- - {confirmationStep < 2 && ( + + {confirmationStep < 3 && ( )} + {confirmationStep === 3 && ( + + )}