From fcb57a8c66c102fa4ddfb772ddaa55630441afb6 Mon Sep 17 00:00:00 2001 From: Reza Date: Sat, 6 Nov 2021 17:19:50 +0330 Subject: [PATCH] reza added some light mode --- src/assets/icons/document-green.png | Bin 0 -> 712 bytes src/assets/icons/play-green.png | Bin 0 -> 1270 bytes src/components/Navbar/index.scss | 4 - src/components/Navbar/index.tsx | 2 +- src/components/StyledRating/index.tsx | 25 +- src/constants/colors.scss | 2 +- src/custom.scss | 8 + src/views/Course/Lesson/index.scss | 105 +++++--- src/views/Course/Lesson/index.tsx | 24 +- src/views/Course/index.scss | 145 ++++++++--- src/views/Course/index.tsx | 4 +- src/views/Faq/index.scss | 70 ++++-- src/views/Faq/index.tsx | 2 +- src/views/Home/index.scss | 3 - src/views/Home/index.tsx | 24 +- .../Subscription/SubscribeRadio/index.scss | 232 +++++++++++------- .../Subscription/SubscribeRadio/index.tsx | 2 +- src/views/Subscription/index.scss | 28 ++- src/views/Subscription/index.tsx | 1 + src/views/VideoTube/LessonPlayList/index.scss | 232 ++++++++++-------- src/views/VideoTube/LessonPlayList/index.tsx | 2 +- src/views/VideoTube/index.scss | 163 +++++++++--- src/views/VideoTube/index.tsx | 2 +- 23 files changed, 721 insertions(+), 359 deletions(-) create mode 100644 src/assets/icons/document-green.png create mode 100644 src/assets/icons/play-green.png diff --git a/src/assets/icons/document-green.png b/src/assets/icons/document-green.png new file mode 100644 index 0000000000000000000000000000000000000000..29a6e3128794bfc15f2866e9953eabbb0a6973dd GIT binary patch literal 712 zcmV;(0yq7MP)?e%z%siWC31JEv7D<(63S`|7K47u}8cCFS6*9TUpmn;VLROZPO*|K%$WUG^rU>&vo>W7IEsW=lo zbF#M8?dnskP&XIYVqZ~-oydo1oq-iY!SW5W!pgv6q9iKLtduaYbhu&-lfT9@DzTIL zIGL(%_WV;htYB;^kJwb+3VZsLb{Q(uWw>EnlM?9FVHx&Y2a!Gmc)z>g_9#|jMLB$M zu;uA@aNW2n4Ayf0K>6F!*@6kvC>SPEOd+4J%Lq(Zs#C*}Vk5;o1r~2Um#bs#7JU4% z3O|p3sTbIM-E1P_m8iwtOD{BnC8>EDh%s$D8GAPLL$TAgxwt!!ToOTo z+PMBMN#F&L$SGvnyYRVFA6UNeWEO!og(42Xh=5o}Zolab71)WN+gc0gjsnX?H+7-@ zxX5;VE2`io5iCrpSTN6^(`y10`AJVyKM)5=tRx^m?Ln*=DZ}b6ra`_+=VN>w#({YE u$HvF@;vfbFCJL3rPD!yO2}ON}7VIBeU;iiK3Z6dz0000((CMHZj;r2nJQRk<@2NRhj{z3Yf&oQ$Wm_}xuOPq;Igi>cz!jz4P2H4nG3vJ)^ zJXn(zUf;X-J!T|&lN%E5`Sa_!=bm@&C9sSJSw^hz--Go=8_I~HQ~}V{6rc!0PzV$* zVI(FL5GIH~A|Yq{?^buwbYvgyZ&;a2QX+yqg@7IcB&#h7l;UDoA>_kEO8E4P&F#}> zz`0=`8WLCK#~d$Fg*FmGR`EKelwQOi*c@Mx*#G55`67=#GwimgSmdCNMzfF$q0B%t z!HOedetgm{;Z8rs6A3n1+BG^;P7%cq?56^vOL74R@JsxxiJebdTUbTlVY;DBYVhTp#M-b^zI^T4qR7?^ z`sxHqG;<~!jB8~jJX5k0Zp~W{C#Sy0c?ynQ_{I{uLTG)rE6}M6>y7w3@fYl1^;B%X z3EJ*xUL+owJ`HW>+hI6vu7AP$bui@asMCeTay5klg{-jk#ZQ1bvyHyV;|TpROe=eRg^d1>$@W|=94fbTtFpt%}WiP_rH{7YKqJjp-4nc7Ia~{)>u%*h6R(76A zD`mje_WSPv0lww2_-6TDP;-`Ls8Mb?cYsB7UPgg?gPS`}YQqlHZwDeAX14~w1FPEI zGyDb&Vm>nssyrU7l0MUftr_(17AWjzGIUjl7gqYS3)IOnFmIp7yj4H>b0aei{(;Cg z{~Lg+>Iy5}s`-j=hiEJ2-tbt8K&qu1VNX4AkpzU=8Zqj?&uGxj} z!>=K95v!xL93G+x)O$7Ps(1(gC_MVyuxaD!Gw78IxewqwnippcrpUVNj_C*m(v35; z;>MX{@;W)j18F+4*_`0BeX(6g+$Mmq5g+B(5JJx>pbX^z89L&Y#>~Ji)G-~|rEtz` g<9}G*h_TB54R0U6JFsBvcmMzZ07*qoM6N<$f>aZ3Jpcdz literal 0 HcmV?d00001 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 رای
- +

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