Refactoring the course page && Creating [rates, checkInputs, menuToggler] layouts

Author: ragab0

package-lock.json

@@ -16,6 +16,7 @@
     "react-hook-form": "^7.53.0",
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "socket.io": "^4.8.0",
     "web-vitals": "^2.1.4"
   },

package.json

@@ -7,6 +7,7 @@
   border-color: #e9eef6;
   border: 2px solid #e9eef6;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  cursor: default;
 }
 
 .customer-comments-section .customer {

src/apps/mainApp/components/CustomerComments/CustomerComments.css

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import "./CustomerComments.css";
 import customerImage from "../../../../assets/customersImgs/cust4.png";
 import { customers } from "../../../../data/dummyData";
-import { Link } from "react-router-dom";
 import QuoteIcon from "../../../../assets/svgsComps/QuoteIcon";
 
 export default function CustomerComments() {

src/apps/mainApp/components/CustomerComments/CustomerComments.jsx

@@ -0,0 +1,26 @@
+.instructor-tab {
+  cursor: default;
+}
+.instructor-tab .ins_info {
+  display: flex;
+  align-items: center;
+  margin-top: 30px;
+}
+
+.instructor-tab .ins_info img {
+  width: 120px;
+  height: 120px;
+}
+
+.instructor-tab .ins_info .ins_details .review span,
+.instructor-tab .ins_info .ins_details .student span,
+.instructor-tab .ins_info .ins_details .courses span {
+  color: #0f172a;
+  font-size: 16px;
+}
+
+.instructor-tab .ins_info .ins_details .review i,
+.instructor-tab .ins_info .ins_details .student i,
+.instructor-tab .ins_info .ins_details .courses i {
+  color: #0f172a;
+}

src/apps/mainApp/components/InstructorTab/InstructorTab.css

@@ -1,15 +1,23 @@
 import React from "react";
 import myImage from "../../../../assets/customersImgs/cust5Heigh.png";
 import "./InstructorTab.css";
+import { Link } from "react-router-dom";
 
 export default function InstructorTab() {
   return (
-    <div className="instructor-tab mt-5">
+    <div className="instructor-tab">
       <h4 className=" text-dark fw-bold">Instructor</h4>
-      <h3 className=" mt-4 fw-bolder text-primary fs-5">Ronald Richards</h3>
+      <Link
+        to="/mentor/0"
+        className="d-block mt-3 mb-1 fw-bolder text-primary fs-5"
+      >
+        Ronald Richards
+      </Link>
       <h5 className=" fs-6">UI/UX Designer</h5>
       <div className="ins_info">
-        <img src={myImage} alt="instructor" />
+        <Link to="/mentor/0">
+          <img src={myImage} alt="instructor" />
+        </Link>
         <div className="ins_details ms-4 mt-3">
           <div className="review">
             <i className=" pe-2 fa-brands fa-algolia"></i>

src/apps/mainApp/components/InstructorTab/InstructorTab.js

@@ -1,63 +1,46 @@
-.learner_reviews {
-  display: flex;
-  justify-content: space-between;
-}
-
-.learner_reviews span {
-  color: #0f172a;
-  font-size: 16px;
+.learner-reviews-body {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
 }
 
-.learner_reviews .learner_rate {
-  width: 30%;
+.learner-reviews-section .reviews,
+.learner-reviews-section .reviews > *:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.learner_reviews .theLearners {
-  width: 65%;
-  margin-left: 60px;
+.learner-reviews-section .review {
+  padding: 1.5rem;
+  border: 1px solid var(--grey-border);
+  border-radius: 1rem;
+  cursor: default;
 }
 
-.learner_reviews .learner_comments {
+.learner-reviews-section .review > div:first-of-type {
   display: flex;
-  flex-direction: column;
-}
-
-.learner_reviews .learner_comments .learner1 {
-  display: flex;
-  justify-content: space-between;
-}
-
-.learner_reviews .learner_comments .learner_img_name {
-  width: 30%;
-}
-
-.learner_reviews .learner_comments .learner1_comment {
-  width: 65%;
+  align-items: center;
+  gap: 1rem;
 }
 
-.learner_reviews .learner_comments .learner_img_name img {
+.learner-reviews-section .review img {
   width: 60px;
   height: 60px;
 }
 
-.learner_reviews .learner_comments .learner_img_name span {
-  color: #0f172a;
+.learner-reviews-section .review span {
+  color: #2a140f;
+  font-size: 14px;
 }
 
-.learner_reviews
-  .learner_comments
-  .learner1_comment
-  .learner1_rate
-  .review_date {
+.learner-reviews-section .review_date {
   color: #334155;
 }
 
-.learner_reviews.rate,
-.star {
+.learner-reviews-section .rate,
+.learner-reviews-section .star {
   color: #fec84b;
   font-size: 16px;
 }
 
-.learner_reviews .star_empty {
+.learner-reviews-section .star_empty {
   color: #cbd5e1;
 }