reza fixed some bug

src/components/Navbar/index.scss

@@ -15,9 +15,6 @@
 
       }
     }
-    .MuiButton-root{
-      color: $gray5 !important;
-    }
   }
   &__container{
     width: 100%;
@@ -152,8 +149,8 @@
       max-width: 500px;
       &--buttons{
         li{
-          padding: 6px;
+          padding: 8px 6px;
-          border-radius: 7px;
+          border-radius: 6px;
           min-width : 60px;
           text-align: center;
           font-size: calc(100vw / 32);

src/components/StyledRating/index.tsx

@@ -3,22 +3,41 @@ import StarIcon from "@mui/icons-material/Star";
 import Rating from "@mui/material/Rating";
 
 export default function StyledRating({ rate, theme }: any) {
+  const mobile = window.innerWidth < 1008;
   return (
     <>
+      {mobile && (
         <Rating
           name="customized-color"
           defaultValue={rate}
           precision={0.5}
-        icon={<StarIcon style={{ fontSize: 25, color: "#FFED00" }} />}
+          icon={<StarIcon style={{ fontSize: 20, color: "#FFED00" }} />}
           emptyIcon={
             <StarIcon
               style={{
-              fontSize: 25,
+                fontSize: 20,
-              color: theme === "dark" ? "#494949" : "#777",
+                color: theme === "dark" ? "#494949" : "#aaa",
               }}
             />
           }
         />
+      )}
+      {!mobile && (
+        <Rating
+          name="customized-color"
+          defaultValue={rate}
+          precision={0.5}
+          icon={<StarIcon style={{ fontSize: 20, color: "#FFED00" }} />}
+          emptyIcon={
+            <StarIcon
+              style={{
+                fontSize: 20,
+                color: theme === "dark" ? "#494949" : "#aaa",
+              }}
+            />
+          }
+        />
+      )}
     </>
   );
 }

src/custom.scss

@@ -311,9 +311,13 @@ p {
 }
 
 //Menu
+.bg-black{
   .MuiButton-root {
-  font-family: numeralLight !important;
     color: white !important;
+  }
+}
+.MuiButton-root {
+  font-family: numeralLight !important;
   span {
     margin-left: 0px !important;
     margin-right: 5px;

src/views/Course/Lesson/index.scss

@@ -242,7 +242,7 @@
     header {
       border-top-right-radius: 10px;
       border-top-left-radius: 10px;
-      padding: 10px 5px !important;
+      padding: 5px 5px !important;
       h4 {
         font-size: calc(100vw / 30);
       }

src/views/Course/index.scss

@@ -34,6 +34,9 @@
           background-color: $gray12;
           box-shadow: none;
           color: $gray5;
+          &__number i{
+            color : $gray5 !important;
+          }
         }
         &--button {
           background-color: $gray12;
@@ -90,6 +93,9 @@
           border: 2px solid $gray7;
           box-shadow: 0px 0px 20px #f7ff0179;
           color: white;
+          &__number i{
+            color: white !important;
+          }
         }
         &--button {
           background-color: #313131;
@@ -386,7 +392,7 @@
         // height: 160px;
         // margin-bottom: 30px;
         border: none;
-        box-shadow: 0px 0px 0px #f7ff01b3;
+        // box-shadow: 0px 0px 0px #f7ff01b3;
         &__number {
           i {
             font-size: calc(100vw / 40);
@@ -460,6 +466,7 @@
         }
       }
       &--description {
+        width: 100%;
         a {
           font-size: calc(100vw / 30);
         }
@@ -480,18 +487,15 @@
       // display : none !important;
       flex: 2;
       &--rate {
-        // width: 70%;
+        width: 100%;
         // height: 160px;
         // margin-bottom: 30px;
-        border: none;
+        border: none !important;
-        box-shadow: 0px 0px 0px #f7ff01b3;
+        background-color: transparent !important;
+        box-shadow: 0px 0px 0px #f7ff01b3 !important;
         &__number {
-          i {
-            font-size: calc(100vw / 40);
-            color: white;
-          }
           b {
-            font-size: calc(100vw / 30);
+            font-size: calc(100vw / 20);
           }
           span {
             font-size: calc(100vw / 28);
@@ -500,7 +504,9 @@
         }
         h2 {
           margin-top: 5px;
-          font-size: calc(100vw / 40);
+          font-size: calc(100vw / 38);
+          margin-bottom: 5px !important;
+          font-weight: 600;
         }
       }
       &--button {

src/views/Home/Courses/index.scss

@@ -15,7 +15,7 @@
     border-bottom: 1px solid $gray12;
     header{
       h1{
-        color : $green4 !important;
+        color : $green !important;
       }
       a{
         color: $green !important;

src/views/Home/Header/index.scss

@@ -1,197 +1,132 @@
-.home-header {
+
-  position: relative;
+.home-slider {
   width: 100%;
-  margin: 0px auto;
+  padding: 2px 0px 0px;
-  margin-top: 10px;
+  margin: 20px auto 10px;
-  &-dark{
+  position: relative;
-    .carousel-indicators{
+  .rec-arrow-left {
-      li{
+    top: calc(50% - 22px) !important;
-        background-color: inherit !important;
+    right: 5px !important;
-      }
-    }
-  }
-  &-light{
-    .carousel-indicators{
-      li{
-        padding: 5px;
-        border-radius: 5px !important;
-        background-color: rgba(255, 255, 255, 0.281) !important;
-      }
-    }
-  }
-  span {
-    height: 80%;
-    width: 8px;
-    background-color: white;
-    border-radius: 10px;
-  }
-  .item {
-    height: 460px;
-    background-size: 100% 100% !important;
-    background-repeat: no-repeat !important;
-    background-position: 0px 0px !important;
-    font-family: numeralLight;
-    color: white;
-    padding-right: 70%;
-    padding-top: 120px;
-    border-radius: 10px;
-    margin: 0px 10px;
-    h1 {
-      font-family: numeralBold;
-    }
-  }
-  strong {
-    font-weight: 300;
   }
-  &__cover {
+
-    position: absolute;
+  .rec-arrow-right {
-    left: 0px;
+    top: calc(50% - 22px) !important;
-    top: 0px;
+    left: 5px !important;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      0deg,
-      hsla(0, 0%, 0%, 1) 0%,
-      hsla(250, 14%, 61%, 0) 44%
-    );
-    border-radius: 10px;
   }
 }
 
-@media screen and (min-width: 1441px) {
+.rec-dot_active {
-  .home-header {
+  background-color: green !important;
-    max-width: 1350px;
+  color: white !important;
-    font-family: numeralLight;
+  // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
-    &__info{
-      &--author{
-        position: absolute;
-        left: 30px;
-        bottom: 100px;
-        h3{
-          margin-right: 5px;
-          font-size: 15px;
-        }
-        i{
-          margin-right: 5px;
-          font-size: 15px;
 }
+
+.Carousel-button-10 {
+  background-color: grey !important;
 }
+.rec-pagination {
+  z-index: 200;
+  // left: calc(50% - 20px) !important;
+  & button {
+    background-color: grey;
+    margin: 2px !important;
+    box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
+    &:focus {
+      box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
     }
-    .item {
-      h1 {
-        font-family: numeralMedium;
-        font-size: 24px;
   }
-      h2{
-        font-size: 17px;
-        font-family: numeralMedium;
 }
+
+.rec-slider-container {
+  margin: 0px !important;
 }
-    .carousel-indicators li {
+
-      margin-left: 20px !important;
+.rec-arrow {
-      max-width: 150px !important;
+  position: absolute !important;
-      div {
+  z-index: 100;
-        margin-right: 10px;
+  background-color: inherit !important;
+  box-shadow: none !important;
+  border: 0px !important;
+  color: grey !important;
+  &:focus {
+    color: grey !important;
   }
-      strong {
+  &:disabled {
-        font-size: 12px;
+    color: black !important;
+    display: none !important;
   }
-      b {
+  &:enabled {
-        font-size: 16px;
+    color: grey;
   }
+  &:hover {
+    color: white;
   }
 }
+
+.rec-slider-container {
+  border-radius: 10px;
 }
 
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
+.slider-header {
-  .home-header {
+  width: 100%;
-    max-width: 1250px;
+  justify-content: flex-end;
-    .item {
+  img{
+    width: 100%;
 
-       padding-top: 360px;
-      h1 {
-        font-size: calc(100vw / 65);
-      }
-      h2 {
-        font-size: calc(100vw / 80);
-      }
-    }
-    &__info{
-      &--author{
-        position: absolute;
-        left: 30px;
-        bottom: 100px;
-        h3{
-          margin-right: 5px;
-          font-size: calc(100vw / 100);
-        }
-        i{
-          margin-right: 5px;
-          font-size: calc(100vw / 100);
-        }
-      }
-    }
-    .carousel-indicators li {
-      margin-left: 10px !important;
-      max-width: 200px !important;
-      div {
-        margin-right: 10px;
-      }
-      strong {
-        font-size: calc(100vw / 100);
-      }
-      b {
-        font-size: calc(100vw / 90);
-      }
-    }
-  }
   }
+  // &__right {
+  //   width: 60%;
+  //   height: 100%;
+  //   // & img {
 
-.carousel-indicators {
+  //   //   border-radius: 10px;
-  position: absolute !important;
+  //   // }
-  left: 0px !important;
+  // }
-  right: auto !important;
+  // &__left {
-  bottom: 40px !important;
+  //   width: 40%;
-  z-index: auto !important;
+  //   height: 100%;
-  display: auto !important;
+  //   justify-content: center;
-  justify-content: auto !important;
+  //   align-items: flex-end;
-  padding: auto !important;
+  //   padding-left: 70px;
-  margin: 0px !important;
-  list-style: auto !important;
-  color: white;
-  width: 30% !important;
-  justify-content: flex-start !important;
 
-  span.active {
+  //   h1 {
-    height: 80% !important;
+  //     font-size: calc(100vw / 55);
-    width: 8px !important;
+  //     color: white;
-    background-color: yellow !important;
+  //     font-family: numeralMedium;
-  }
+  //     letter-spacing: -1px;
+  //   }
+  //   h2 {
+  //     margin-top: 5px;
+  //     font-size: calc(100vw / 78);
+  //     color: white;
+  //     font-family: numeralMedium;
+  //   }
+  //   a {
+  //     text-decoration: none;
+  //     color: white;
+  //     margin-top: 10px;
+  //     font-size: calc(100vw / 90);
+  //     padding: 6px 10px;
+  //     border: 1px solid white;
+  //     border-radius: 5px;
+  //     font-family: numeralMedium;
+  //     &:hover {
+  //       color: white;
+  //     }
+  //   }
+  // }
 }
 
-.active span {
+@media screen and (min-width: 1441px) {
-  background-color: yellow !important;
+  .home-slider {
-  height: 80% !important;
+    max-width: 1440px;
-  width: 8px !important;
+    width: 100%;
+    justify-content: flex-end;
+  }
 }
 
-.carousel-indicators li {
+@media screen and (min-width : 1008px) and (max-width: 1440px){
-  display: auto !important;
+  .home-slider{
-  width: auto !important;
+    max-width: 1250px;
-  height: auto !important;
-  margin: 0px !important;
-  text-indent: 0px !important;
-  cursor: pointer !important;
-  background-color: inherit !important;
-  border: 0px !important;
-  border-radius: 0px !important;
-  text-align: right !important;
-  justify-content: flex-start !important;
-  font-family: numeralLight !important;
-  span {
-    height: 80%;
-    width: 8px;
-    background-color: white;
-    border-radius: 10px;
   }
 }

src/views/Home/Header/index.tsx

@@ -1,65 +1,48 @@
-import React from "react";
+import React, { Component } from "react";
-import Avatar from "@mui/material/Avatar";
+import { Link } from "react-router-dom";
-import _ from "lodash";
+import Carousel from "react-elastic-carousel";
 
-export default function Header(props: any) {
+import dropdown from "../../../assets/icons/dropdown.png";
-  const { headerData, theme } = props;
+
+import "./index.scss";
+
+const HomeSlider = ({ headerData}: any) => {
   return (
-    <header
+    <div className="home-slider d-flex">
-      className={_.join(
+      <Carousel
-        [
+        itemsToShow={1}
-          "home-header",
+        isRTL={true}
-          theme === "light" ? "home-header-light" : "home-header-dark",
+        enableTilt={false}
-        ],
+        showArrows={true}
-        " "
+        pagination={true}
-      )}
+        enableAutoPlay={true}
       >
-      <div id="myCarousel" className="carousel slide" data-ride="carousel">
-        <div className="carousel-inner">
         {headerData.map((item: any, i: any) => (
-            <div
+          <div className="slider-header d-flex">
-              className={i === 0 ? "item active" : "item"}
+            {/* <
-              style={{
+              className="slider-header__right d-flex"
-                background: `url(${
+              style={{ backgroundColor: item.backgroundColor }}
-                  "https://dnvn.ir/api/v1/file/" + item.fileId
+            > */}
-                })`,
+              <img
-              }}
+                src={`https://dnvn.ir/api/v1/file/${item.fileId}`}
-              // dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
+                alt={item.title}
-              key={i}
+              />
+            
+            {/* <div
+              style={{ backgroundColor: item.backgroundColor }}
+              className="slider-header__left d-flex flex-column"
             >
-              <div className="home-header__cover"></div>
-              <div className="home-header__info d-flex flex-column">
-                <div className="home-header__info--author d-flex">
-                  {item.authorImage && <Avatar src={item.authorImage} />}
-                  <div className="d-flex flex-column">
-                    <h3>{item.extraText}</h3>
-                    {/* <i>نویسنده</i> */}
-                  </div>
-                </div>
-                {/* <h1>{(Number(i) + 1)}</h1> */}
               <h1>{item.title}</h1>
               <h2>{item.subTitle}</h2>
+              {item.buttonText && (
+                <Link to={item.link || "/"}>{item.buttonText}</Link>
+              )}
+            </div> */}
           </div>
-            </div>
-          ))}
-        </div>
-        <div className="carousel-indicators">
-          {headerData.map((item1: any, i: any) => (
-            <li
-              className="d-flex align-items-center"
-              data-target="#myCarousel"
-              data-slide-to={i}
-              key={i}
-            >
-              <span className={i === 0 ? "active" : ""}></span>
-              <div className="d-flex flex-column">
-                <b>{"."}</b>
-                <strong>{item1.title}</strong>
-              </div>
-            </li>
         ))}
+      </Carousel>
     </div>
-      </div>
-    </header>
   );
-}
+};
+
+export default HomeSlider;