diff --git a/src/assets/icons/document-green.png b/src/assets/icons/document-green.png new file mode 100644 index 0000000..29a6e31 Binary files /dev/null and b/src/assets/icons/document-green.png differ diff --git a/src/assets/icons/play-green.png b/src/assets/icons/play-green.png new file mode 100644 index 0000000..8569165 Binary files /dev/null and b/src/assets/icons/play-green.png differ diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index b2c042d..654a8c8 100644 --- a/src/components/Navbar/index.scss +++ b/src/components/Navbar/index.scss @@ -7,7 +7,6 @@ left: 0px; z-index: 150; &-light{ - background-color: white; .nav___share{ background-color: inherit !important; border: 1px solid $green1 !important; @@ -20,9 +19,6 @@ color: $gray5 !important; } } - &-dark{ - background-color: black; - } &__container{ width: 100%; font-family: numeralLight; diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index a6dafc8..4c57099 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -70,7 +70,7 @@ function Navbar(props: any) { className={_.join( [ "nav align-items-center justify-content-center", - theme === "light" ? "nav-light" : "nav-dark", + theme === "light" ? "nav-light bg-white" : "nav-dark bg-black", ], " " )} diff --git a/src/components/StyledRating/index.tsx b/src/components/StyledRating/index.tsx index c9fcd0f..a22a0a4 100644 --- a/src/components/StyledRating/index.tsx +++ b/src/components/StyledRating/index.tsx @@ -1,19 +1,24 @@ -import React from 'react' -import StarIcon from '@mui/icons-material/Star'; -import Rating from '@mui/material/Rating'; +import React from "react"; +import StarIcon from "@mui/icons-material/Star"; +import Rating from "@mui/material/Rating"; - - -export default function StyledRating({rate} : any) { +export default function StyledRating({ rate, theme }: any) { return ( <> - } - emptyIcon={} + icon={} + emptyIcon={ + + } /> - ) + ); } diff --git a/src/constants/colors.scss b/src/constants/colors.scss index a1ff03e..a1637fd 100644 --- a/src/constants/colors.scss +++ b/src/constants/colors.scss @@ -20,7 +20,7 @@ $green2 : #6cbe44; $green3 : #00cc69; $green4 : #84de56; $green5 : #9cdf52; - +$green6 : #08793d; // blue $blue : #a2b4cb; $blue1 : #505a82; diff --git a/src/custom.scss b/src/custom.scss index 90b9615..dc1e318 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -31,6 +31,14 @@ display: flex; } +.bg-black{ + background-color: black !important; +} + +.bg-white{ + background-color: white !important; +} + p { line-height: 1.5; } diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss index e68554d..4dbe3e6 100644 --- a/src/views/Course/Lesson/index.scss +++ b/src/views/Course/Lesson/index.scss @@ -2,32 +2,87 @@ transition: all 0.3s; overflow : hidden; border-bottom: 1px solid $gray9; - &__light{ - header{ - background-color : white !important; + &-light { + header { + background-color : $gray13; border: 1px solid $gray9; - + h4 { + color: $green6; + } + div { + color: $gray5; + } + } + .lesson{ + &__files{ + border-left: 1px solid $gray9; + border-right: 1px solid $gray9; + p{ + color: $gray5; + background-color: $gray12; + } + &--sample{ + &:hover{ + background-color: $gray12; + } + color: $gray5; + a{ + color: $gray5; + } + } + &--active{ + // border-bottom: 1px solid $gray11; + } + } + } + } + &-dark{ + header { + background-color: #414141; + h4 { + color: $green; + } + div { + color: $gray10; + } } - .lesson__files *{ - color: black !important; + .lesson{ + + &__files{ + border-left: 1px solid $gray9; + border-right: 1px solid $gray9; + p{ + color: white; + background-color: $gray1; + } + &--sample{ + &:hover{ + background-color: rgb(58, 58, 58); + } + color: white; + a{ + color: white; + } + } + &--active{ + // border-bottom: 1px solid $gray9; + } + } + } } &__active{ - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; + // border-bottom-left-radius: 10px; + // border-bottom-right-radius: 10px; } header { - background-color: #414141; // border: 1px solid $gray9 !important; + border-top-right-radius: 5px !important; + border-top-left-radius: 5px; padding: 5px 15px !important; cursor: pointer; h4 { - color: $green; margin: 0px; - - } - div { - color: $gray10; } img{ width: 40px; @@ -35,14 +90,10 @@ } &__files{ padding : 0px !important; - border-left: 1px solid $gray9; - border-right: 1px solid $gray9; - transition: all 0.4s ease-in; + transition: all 0.15s ease-in; overflow: hidden; p{ - color: white; padding: 10px 20px; - background-color: $gray1; margin: 0px !important; } & img{ @@ -53,17 +104,10 @@ transition: all 0.5s; cursor: pointer; padding: 5px 0px; - &:hover{ - background-color: rgb(58, 58, 58); - } &___active{ transition: all 0.5s; transform: scale(1.3); } - color: white; - a{ - color: white; - } li{ text-align: center; } @@ -72,9 +116,6 @@ margin-bottom: 0px; } } - &--active{ - border-bottom: 1px solid $gray9; - } } } @@ -196,7 +237,7 @@ @media screen and (max-width: 640px) { .lesson { - border-radius: 10px; + // border-radius: 10px; margin-bottom: 15px; header { border-top-right-radius: 10px; @@ -216,8 +257,8 @@ text-align: center; } &__files{ - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; + // border-bottom-left-radius: 10px; + // border-bottom-right-radius: 10px; padding: 0px !important; &--sample{ img{ diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx index c70af6e..f28dde2 100644 --- a/src/views/Course/Lesson/index.tsx +++ b/src/views/Course/Lesson/index.tsx @@ -1,6 +1,8 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; import whiteDropdown from "../../../assets/icons/white-dropdown.png"; +import greenPlay from "../../../assets/icons/play-green.png"; +import greenDocument from "../../../assets/icons/document-green.png"; import whitePlay from "../../../assets/icons/white-play.png"; import document from "../../../assets/icons/document.png"; import { connect } from "react-redux"; @@ -33,10 +35,10 @@ function Lesson({ const light = theme === "light"; return (
- {data.type === "video" && } - {data.type === "pdf" && } + {data.type === "video" && + (light ? ( + + ) : ( + + ))} + {data.type === "pdf" && + (light ? ( + + ) : ( + + ))} از 288 رای
- +

میانگین رای کاربران