diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index a76b824..935bfe8 100644 --- a/src/components/Navbar/index.scss +++ b/src/components/Navbar/index.scss @@ -12,6 +12,9 @@ background-color: $gray1 !important; border: none !important; } + .MuiButton-root{ + color: black !important; + } } &__dark{ background-color: black; diff --git a/src/views/About/index.tsx b/src/views/About/index.tsx index 3407a02..008c7f4 100644 --- a/src/views/About/index.tsx +++ b/src/views/About/index.tsx @@ -14,7 +14,7 @@ function About({ fury, advantages, keywords, keywords2, first, theme, setTheme }
diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss index 2f7f875..7bb985e 100644 --- a/src/views/Auth/Login/index.scss +++ b/src/views/Auth/Login/index.scss @@ -3,6 +3,30 @@ height: 100vh; position: relative; font-family: numeralLight; + &__light { + .MuiFormControl-root label{ + background-color: white !important; + } + b{ + color: black !important; + } + .login { + &__back { + a { + color: black !important; + } + } + &__options { + color: black; + a { + color: $green4; + } + } + } + } + &__dark { + background-color: black; + } &__options { color: #b5b5b5; a { @@ -23,7 +47,6 @@ .MuiButtonBase-root { padding: 0px !important; } - background: black; .footer { position: fixed; bottom: 0px; @@ -129,7 +152,6 @@ @media screen and (min-width: 641px) and (max-width: 1007px) { .login { - background: black; .footer { display: none !important; } @@ -190,7 +212,6 @@ @media screen and (max-width: 640px) { .login { - background: black; section { // background-color: red; width: 90%; diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx index 7d7f8ff..80f193d 100644 --- a/src/views/Auth/Login/index.tsx +++ b/src/views/Auth/Login/index.tsx @@ -12,14 +12,14 @@ import arrow from "../../../assets/icons/dropdown.png"; import onInput from "../../../util/onInput"; import { connect } from "react-redux"; import { user } from "../../../redux/actions"; - +import _ from "lodash"; interface LoginFields { username?: string; password?: string; } -function Login({login, ...props}: any) { +function Login({ login, theme, ...props }: any) { const [loginFields, setSignUpFiels] = useState( undefined ); @@ -29,11 +29,17 @@ function Login({login, ...props}: any) { // const usernameInput = useRef(); // const passwordInput = useRef(); - useEffect(() => { - - }, []); + useEffect(() => {}, []); return ( -
+
diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss index 738c46d..86d2984 100644 --- a/src/views/Auth/SignUp/index.scss +++ b/src/views/Auth/SignUp/index.scss @@ -3,10 +3,18 @@ height: 100vh; position: relative; font-family: numeralLight; + &__light{ + background-color: white; + b{ + color: black !important; + } + input{ + background-color: white !important; + } + } img { // transform: rotate(-90deg); } - background: black; .footer { position: fixed; bottom: 0px; diff --git a/src/views/Auth/SignUp/index.tsx b/src/views/Auth/SignUp/index.tsx index 5285bb0..48d5f77 100644 --- a/src/views/Auth/SignUp/index.tsx +++ b/src/views/Auth/SignUp/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import {useHistory} from 'react-router-dom'; +import { useHistory } from "react-router-dom"; import Navbar from "../../../components/Navbar"; import Footer from "../../Home/Footer"; import Timer from "../../../components/Timer"; @@ -8,16 +8,16 @@ import { Link } from "react-router-dom"; import arrow from "../../../assets/icons/dropdown.png"; import arrowLeft from "../../../assets/icons/arrow-left.png"; - import { connect } from "react-redux"; import { user } from "../../../redux/actions"; +import _ from "lodash"; interface SignUpFields { cellphone?: String; otp?: String; } -function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { +function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }: any) { const [level, setLevel] = useState("phonenumber"); const [signUpFields, setSignUpFiels] = useState( undefined @@ -66,7 +66,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { }, []); useEffect(() => { - if(signUpFields?.otp?.length === 4){ + if (signUpFields?.otp?.length === 4) { sendOtp({ cellphone: signUpFields?.cellphone, otp: signUpFields?.otp, @@ -74,7 +74,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { applicationToken: "22", }); } - },[signUpFields]); + }, [signUpFields]); useEffect(() => { if (level === "phonenumber") { @@ -85,13 +85,21 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { }, [level]); useEffect(() => { - if(loginFlag){ - history.push('/'); + if (loginFlag) { + history.push("/"); } - },[loginFlag]); - + }, [loginFlag]); + const light = theme === "light"; return ( -
+
{level === "phonenumber" && (
@@ -167,7 +175,10 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { ارسال مجدد کد در دیگر

) : ( -

checkPhoneNumber()}> +

checkPhoneNumber()} + > دوباره ارسال کنید

)} @@ -178,9 +189,12 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { ); } -export default connect((state : any) => ({ - loginFlag : state.user.setLogin, -}), { - sendOtp: user.otp_login, - sendPhoneNumber: user.otp, -})(SignUp); +export default connect( + (state: any) => ({ + loginFlag: state.user.setLogin, + }), + { + sendOtp: user.otp_login, + sendPhoneNumber: user.otp, + } +)(SignUp); diff --git a/src/views/Auth/index.tsx b/src/views/Auth/index.tsx index 9846fd0..ddaa387 100644 --- a/src/views/Auth/index.tsx +++ b/src/views/Auth/index.tsx @@ -2,17 +2,23 @@ import React, {useState, useEffect} from 'react'; import SignUp from './SignUp/index'; import Profile from './Profile/index'; import Login from './Login/index'; +import {connect} from 'react-redux'; -export default function Auth(props : any) { + +function Auth(props : any) { const [page, setPage] = useState(props.page); useEffect(() => { setPage(() => props.page); },[props.page]); return ( <> - { page === 'signup' && } - { page === 'login' && } - { page === 'profile' && } + { page === 'signup' && } + { page === 'login' && } + { page === 'profile' && } ) } + +export default connect((state : any) => ({ + theme : state.publicApi.theme, +}))(Auth); \ No newline at end of file diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss index be5f299..e68554d 100644 --- a/src/views/Course/Lesson/index.scss +++ b/src/views/Course/Lesson/index.scss @@ -2,6 +2,16 @@ transition: all 0.3s; overflow : hidden; border-bottom: 1px solid $gray9; + &__light{ + header{ + background-color : white !important; + border: 1px solid $gray9; + + } + .lesson__files *{ + color: black !important; + } + } &__active{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx index 14c19dc..c70af6e 100644 --- a/src/views/Course/Lesson/index.tsx +++ b/src/views/Course/Lesson/index.tsx @@ -6,6 +6,7 @@ import document from "../../../assets/icons/document.png"; import { connect } from "react-redux"; import { book, publicApi } from "../../../redux/actions"; import location from "../../../util/location"; +import _ from "lodash"; function Lesson({ toggle, @@ -13,6 +14,7 @@ function Lesson({ activeCategory, realCategories, vodDuration, + theme, }: any) { const [selectedLesson, setSelectedLesson] = useState(null); const duration = (value: number) => { @@ -22,10 +24,20 @@ function Lesson({ }; const setCategory = (catId: any, videoId: any) => { localStorage.removeItem("bookId"); - localStorage.setItem("category", location.getId() + "," + catId + "," + videoId); + localStorage.setItem( + "category", + location.getId() + "," + catId + "," + videoId + ); }; + + const light = theme === "light"; return ( -
+
toggle(lesson[0].categoryId)} @@ -76,9 +88,9 @@ function Lesson({ height: lesson[0].categoryId === activeCategory ? lesson.length * - (window.innerWidth > 1007 - ? window.innerWidth / 33 + 20 - : window.innerWidth / 33 + 45) + (window.innerWidth > 1007 + ? window.innerWidth / 33 + 20 + : window.innerWidth / 33 + 45) : "0px", }} > @@ -110,13 +122,20 @@ function Lesson({
  • {data.type !== "pdf" && duration(data.duration)}
    • - setCategory(lesson[0].categoryId, data.name)}> + setCategory(lesson[0].categoryId, data.name)} + >
  • {"مشاهده"}
    • {/*
  • {data.download ? "دانلود" : }
    • */}
- {selectedLesson === data.id &&

توضیحات مرتبط با این درس

} + {selectedLesson === data.id && ( +

+ توضیحات مرتبط با این درس +

+ )}
))} diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss index 87be266..b3a523c 100644 --- a/src/views/Course/index.scss +++ b/src/views/Course/index.scss @@ -1,170 +1,177 @@ -@import './Lesson/index.scss'; +@import "./Lesson/index.scss"; -.course{ - &__header{ +.course { + &__light { + .course__options--rate { + color: black; + } + .course__options--button { + background-color: white !important; + color: black; + } + } + &__header { padding: 30px 0px 45px; - border-bottom:2px solid $gray5; + border-bottom: 2px solid $gray5; } - &__info{ - &--image{ + &__info { + &--image { margin-left: 20px; - img{ + img { border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; border-bottom-left-radius: 24px; } } - &--description{ + &--description { padding-top: 5px; - a{ + a { color: $gray5; } - li{ + li { color: $gray5; } - h1{ + h1 { color: white; margin-top: 12px; } - p{ + p { color: $gray6; margin-top: 25px; } - .course-info-items{ + .course-info-items { padding: 10px; background-color: #08793d23; border-radius: 10px; - i{ + i { color: $green; } } } } - &__options{ - &--rate{ + &__options { + &--rate { border: 2px solid $gray7; box-shadow: 0px 0px 20px #f7ff0179; border-radius: 15px; padding-top: 20px; color: white; } - &--button{ + &--button { background-color: #313131; border: 1px solid $gray7; color: white; padding: 8px; text-align: center; margin-top: 15px; - &:hover{ + &:hover { color: white; } } } - &__list{ + &__list { margin-bottom: 30px; border-radius: 10px; - - &--header{ + + &--header { padding: 20px 0px 20px !important; border: 0px !important; - h2{ + h2 { color: $green; } - p{ + p { color: $gray7; } } } } - @media screen and (min-width: 1441px) { - .course{ + .course { main { max-width: 1350px; } - &__info{ + &__info { flex: 4; - &--image{ - img{ + &--image { + img { // width: 320px; height: 420px; } } - &--description{ - a{ + &--description { + a { font-size: 17px; } - li{ + li { font-size: 17px; } - h1{ + h1 { font-size: 50px; } - p{ + p { font-size: 16px; } - .course-info-items{ + .course-info-items { width: 220px; margin-top: 20px; - & img{ + & img { margin-left: 5px; - width : 50px; + width: 50px; } - i{ + i { font-size: 18px; font-family: numeralLight; } - p{ + p { font-size: 14px; margin: 0px; } } } } - &__options{ + &__options { flex: 2; - &--rate{ + &--rate { width: 315px; height: 200px; margin-bottom: 30px; - &__number{ - div{ + &__number { + div { font-size: 20px; } - i{ + i { font-size: 15px; } - b{ + b { font-size: 50px; } - span{ + span { font-size: 18px; transform: translateY(4px); margin-right: 10px; } } - h2{ + h2 { margin-top: 15px; font-size: 20px; } - } - &--button{ - width: 315px; - height: 66px; - padding: 0px 30px; - font-size: 18px; - border-radius: 40px; - } + &--button { + width: 315px; + height: 66px; + padding: 0px 30px; + font-size: 18px; + border-radius: 40px; + } } - &__list{ - &--header{ - h2{ + &__list { + &--header { + h2 { font-size: 25px; } - p{ + p { font-size: 13px; } } @@ -173,84 +180,83 @@ } @media screen and (min-width: 1008px) and (max-width: 1440px) { - .course{ + .course { main { max-width: 1250px; padding: 0px 10px; } - &__info{ + &__info { flex: 3; - &--image{ - img{ + &--image { + img { // width: 250px; height: 350px; } } - &--description{ - h1{ + &--description { + h1 { font-size: calc(100vw / 50); } - p{ - font-size: calc(100vw / 100);; + p { + font-size: calc(100vw / 100); } - .course-info-items{ + .course-info-items { width: 45%; margin-top: 20px; - & img{ + & img { margin-left: 10px; - width : 40px; + width: 40px; } - i{ + i { font-size: calc(100vw / 120); font-family: numeralLight; } - p{ + p { font-size: calc(100vw / 130); margin: 0px; } } } } - &__options{ + &__options { flex: 2; - &--rate{ + &--rate { width: 70%; height: 160px; margin-bottom: 30px; - &__number{ + &__number { margin-bottom: 15px; - i{ + i { font-size: calc(100vw / 100); } - b{ + b { font-size: calc(100vw / 50); } - span{ + span { font-size: 18px; transform: translateY(4px); margin-right: 10px; } } - h2{ + h2 { margin-top: 5px; font-size: calc(100vw / 80); } - } - &--button{ - width: 70%; - height: 59px; - padding: 0px 30px; - font-size: calc(100vw / 100); - border-radius: 40px; - } + &--button { + width: 70%; + height: 59px; + padding: 0px 30px; + font-size: calc(100vw / 100); + border-radius: 40px; + } } - &__list{ - &--header{ - h2{ + &__list { + &--header { + h2 { font-size: calc(100vw / 65); } - p{ + p { font-size: calc(100vw / 100); } } @@ -259,95 +265,94 @@ } @media screen and (min-width: 641px) and (max-width: 1007px) { - .course{ - background : black; + .course { + background: black; main { max-width: 900px; padding: 0px 20px; - p{ + p { margin-top: 20px; color: $gray6; font-size: calc(100vw / 45); } } - &__header{ + &__header { padding: 0px; padding-bottom: 20px; padding-top: 20px; } - &__info{ + &__info { flex: 3; - &--image{ - img{ + &--image { + img { // width: 200px; height: 280px; } } - &--description{ - a{ + &--description { + a { font-size: calc(100vw / 50); } // li{ // font-size: calc(100vw / 90); // } - h1{ + h1 { font-size: calc(100vw / 25); margin-top: 0px; } - i{ + i { color: $green; font-size: calc(100vw / 40); } } } - &__options{ + &__options { // display : none !important; flex: 2; - &--rate{ + &--rate { // width: 70%; // height: 160px; // margin-bottom: 30px; border: none; box-shadow: 0px 0px 0px #f7ff01b3; - &__number{ - i{ + &__number { + i { font-size: calc(100vw / 40); color: white; } - b{ + b { font-size: calc(100vw / 40); } - span{ + span { font-size: calc(100vw / 28); transform: translateY(4px); } } - h2{ + h2 { margin-top: 5px; font-size: calc(100vw / 40); } - } - &--button{ - width: 48%; - // height: 59px; - padding: 10px 5px; - font-size: calc(100vw / 45); - border-radius: 30px; - color: $gray6; - margin-top: 30px; - img{ - width: 30px; - } - } + &--button { + width: 48%; + // height: 59px; + padding: 10px 5px; + font-size: calc(100vw / 45); + border-radius: 30px; + color: $gray6; + margin-top: 30px; + img { + width: 30px; + } + } } - &__list{ - &--header{ - h2{ + &__list { + &--header { + h2 { font-size: calc(100vw / 35); margin-top: 20px; } - p{ + p { margin-top: 0px; font-size: calc(100vw / 50); color: $gray7; @@ -358,95 +363,94 @@ } @media screen and (max-width: 640px) { - .course{ - background : black; + .course { + background: black; margin-top: 20px; - &__header{ + &__header { padding: 0px; padding-bottom: 20px; } main { max-width: 500px; padding: 0px 10px; - - p{ + + p { margin-top: 20px; color: $gray7; font-size: calc(100vw / 30); } } - &__info{ + &__info { flex: 3; - &--image{ - img{ + &--image { + img { width: 150px; height: 220px; } } - &--description{ - a{ + &--description { + a { font-size: calc(100vw / 30); } - li{ + li { font-size: calc(100vw / 90); } - h1{ + h1 { font-size: calc(100vw / 18); margin-top: 0px; } - i{ + i { color: $green; font-size: calc(100vw / 30); } } } - &__options{ + &__options { // display : none !important; flex: 2; - &--rate{ + &--rate { // width: 70%; // height: 160px; // margin-bottom: 30px; border: none; box-shadow: 0px 0px 0px #f7ff01b3; - &__number{ - i{ + &__number { + i { font-size: calc(100vw / 40); color: white; } - b{ + b { font-size: calc(100vw / 30); } - span{ + span { font-size: calc(100vw / 28); transform: translateY(4px); } } - h2{ + h2 { margin-top: 5px; font-size: calc(100vw / 40); } - } - &--button{ - width: 48%; - // height: 59px; - padding: 5px 5px; - font-size: calc(100vw / 35); - border-radius: 40px; - color: $gray6; - img{ - width: 25px; - } - } + &--button { + width: 48%; + // height: 59px; + padding: 5px 5px; + font-size: calc(100vw / 35); + border-radius: 40px; + color: $gray6; + img { + width: 25px; + } + } } - &__list{ - &--header{ - h2{ + &__list { + &--header { + h2 { font-size: calc(100vw / 25); margin-top: 20px; } - p{ + p { margin-top: 0px; font-size: calc(100vw / 35); color: $gray6; @@ -454,4 +458,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/views/Course/index.tsx b/src/views/Course/index.tsx index 0b7d991..1cd93dc 100644 --- a/src/views/Course/index.tsx +++ b/src/views/Course/index.tsx @@ -14,8 +14,9 @@ import { connect } from "react-redux"; import { publicApi } from "../../redux/actions"; import scroll from "../../util/scroll"; import Loader from "../../components/Loader"; +import _ from "lodash"; -function Course({ getInfo, info, categories, loading }: any) { +function Course({ getInfo, info, categories, loading, theme }: any) { const [links, setLinks] = useState([ { link: "/", name: "صفحه اصلی" }, { link: "/courses", name: "دوره‌ها" }, @@ -25,7 +26,7 @@ function Course({ getInfo, info, categories, loading }: any) { useEffect(() => { scroll.goToTop(); getInfo({ - bookId: location.getId() + bookId: location.getId(), }); }, []); @@ -36,9 +37,16 @@ function Course({ getInfo, info, categories, loading }: any) { localStorage.setItem("bookId", location.getId()); localStorage.removeItem("category"); }; + const light = theme === "light"; return (
@@ -59,7 +67,10 @@ function Course({ getInfo, info, categories, loading }: any) { {info?.vodTeacher}
-
+
{info?.vodDuration} ساعت درس @@ -156,7 +167,7 @@ function Course({ getInfo, info, categories, loading }: any) { {/*

در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد

*/} {categories?.map((lesson: any, i: any) => ( - + ))}
@@ -175,6 +186,7 @@ export default connect( info: state.publicApi.bookInfo, categories: state.publicApi.categories, loading: state.publicApi.loading, + theme: state.publicApi.theme, }), { getInfo: publicApi.bookInfo } )(Course); diff --git a/src/views/Faq/index.scss b/src/views/Faq/index.scss index 1aece6b..20319b0 100644 --- a/src/views/Faq/index.scss +++ b/src/views/Faq/index.scss @@ -1,4 +1,17 @@ .faq { + &__light{ + .faq{ + &__list{ + li{ + background-color: white !important; + border: 1px solid black !important; + p{ + color: black !important; + } + } + } + } + } header { width: 100%; margin: 0px auto; diff --git a/src/views/Faq/index.tsx b/src/views/Faq/index.tsx index 6b7214e..ce205e4 100644 --- a/src/views/Faq/index.tsx +++ b/src/views/Faq/index.tsx @@ -7,6 +7,7 @@ import whiteDropdown from "../../assets/icons/white-dropdown.png"; import { connect } from "react-redux"; import { faq } from "../../redux/actions"; import scroll from "../../util/scroll.js"; +import _ from "lodash"; function Faq({ list, @@ -15,13 +16,21 @@ function Faq({ searchFaq, searchResult, search, + theme, }: any) { useEffect(() => { getList(); scroll.goToTop(); }, []); + + const light = theme === "light"; return ( -
+
@@ -97,6 +106,7 @@ export default connect( list: state.faq.list, searchResult: state.faq.searchResult, search: state.faq.search, + theme: state.publicApi.theme, }), { getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq } )(Faq); diff --git a/src/views/Home/AppDownload/index.scss b/src/views/Home/AppDownload/index.scss index 8173263..62da0b3 100644 --- a/src/views/Home/AppDownload/index.scss +++ b/src/views/Home/AppDownload/index.scss @@ -1,16 +1,22 @@ -.app-download{ +.app-download { width: 100%; margin: 0px auto; padding: 30px 0px; color: white; - background : url(../../../assets/images/object__footer.svg) no-repeat; - background-size : 100% 100%; - background-position : 0px 0px; - h1{ + background: url(../../../assets/images/object__footer.svg) no-repeat; + background-size: 100% 100%; + background-position: 0px 0px; + h1 { font-family: numeralBold; } - &__figure{ - &--screen{ + &__light { + h1 { + color: black !important; + } + + } + &__figure { + &--screen { width: 220px; height: 185px; border-top: 12px solid black; @@ -20,21 +26,22 @@ border-top-right-radius: 30px; background-color: $gray12; } - &--details{ + &--details { width: 320px; padding: 10px; background-color: black; border-radius: 10px; - h2,p{ + h2, + p { margin: 0px; margin-right: 5px; } - h2{ + h2 { color: white; font-family: numeralBold; margin-bottom: 5px; } - p{ + p { color: $yellow; font-family: numeralLight; } @@ -43,20 +50,20 @@ } @media screen and (min-width: 1441px) { - .app-download{ + .app-download { max-width: 1350px; - h1{ + h1 { font-size: 40px; line-height: 2em; } - &__figure{ - h2{ + &__figure { + h2 { font-size: 16px; } - p{ + p { font-size: 13px; } - &--screen{ + &--screen { width: 300px; height: 255px; border-top: 12px solid black; @@ -66,22 +73,23 @@ border-top-right-radius: 30px; background-color: $gray12; } - &--details{ + &--details { width: 440px; padding: 10px; background-color: black; border-radius: 10px; - h2,p{ + h2, + p { margin: 0px; margin-right: 5px; } - h2{ + h2 { color: white; font-family: numeralBold; margin-bottom: 5px; font-size: 17px; } - p{ + p { color: $yellow; font-family: numeralLight; font-size: 13px; @@ -92,23 +100,22 @@ } @media screen and (min-width: 1008px) and (max-width: 1440px) { - .app-download{ + .app-download { max-width: 1250px; - h1{ + h1 { font-size: calc(100vw / 40); line-height: 2em; } - &__figure{ - h2{ + &__figure { + h2 { font-size: calc(100vw / 120); } - p{ + p { font-size: calc(100vw / 150); } - img{ + img { width: 40px; } } } - -} \ No newline at end of file +} diff --git a/src/views/Home/AppDownload/index.tsx b/src/views/Home/AppDownload/index.tsx index d9c02c9..58e3c33 100644 --- a/src/views/Home/AppDownload/index.tsx +++ b/src/views/Home/AppDownload/index.tsx @@ -1,13 +1,21 @@ import React from "react"; import ar from "../../../assets/icons/ar.png"; import download from "../../../assets/icons/download.png"; +import _ from "lodash"; -export default function AppDownload() { +export default function AppDownload(props: any) { + const { theme } = props; return ( -
-

- دریافت اپلیکیشن دانوین -

+
+

دریافت اپلیکیشن دانوین

diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss index 5383a71..6557130 100644 --- a/src/views/Home/Footer/index.scss +++ b/src/views/Home/Footer/index.scss @@ -11,6 +11,7 @@ &__container{ width: 100%; margin : 0px auto; + padding: 0px 10px; p{ margin: 0px; color: $gray; diff --git a/src/views/Home/Footer/index.tsx b/src/views/Home/Footer/index.tsx index e4f22f4..d6899ff 100644 --- a/src/views/Home/Footer/index.tsx +++ b/src/views/Home/Footer/index.tsx @@ -1,9 +1,10 @@ import React, { useEffect } from "react"; import { Link } from "react-router-dom"; import scroll from "../../../util/scroll"; +import {connect} from 'react-redux'; import _ from 'lodash'; -export default function Footer(props: any) { +function Footer(props: any) { const { links, theme } = props; useEffect(() => { scroll.goToTop() @@ -30,6 +31,10 @@ export default function Footer(props: any) { ); } +export default connect((state : any) => ({ + theme : state.publicApi.theme, +}))(Footer) + Footer.defaultProps = { links: [ { name: "تعرفه‌ها", link: "/subscribe" }, diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index 7fd46f9..e2c5d9f 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -76,8 +76,8 @@ function Home({ /> - -
+ +
{vocal ? ( diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss index 4ee29e8..f649354 100644 --- a/src/views/Subscription/SubscribeRadio/index.scss +++ b/src/views/Subscription/SubscribeRadio/index.scss @@ -5,13 +5,15 @@ border-radius: 10px; cursor: pointer; transition: all 0.5s; + &__name{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; h2{ - color: white !important; + color: white; margin-bottom: 0px; } + } &__factor{ border-top-left-radius: 10px; @@ -62,6 +64,18 @@ background-color: rgba(255, 255, 255, 0.18); } } + &__light{ + h2{ + color: black !important; + } + .subscribe-radio{ + &-active{ + h2{ + color: white !important; + } + } + } + } } @media screen and (min-width: 1441px) { diff --git a/src/views/Subscription/SubscribeRadio/index.tsx b/src/views/Subscription/SubscribeRadio/index.tsx index 5f05227..70cd279 100644 --- a/src/views/Subscription/SubscribeRadio/index.tsx +++ b/src/views/Subscription/SubscribeRadio/index.tsx @@ -4,25 +4,28 @@ import CircleRoundedIcon from "@mui/icons-material/CircleRounded"; import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded"; import { connect } from "react-redux"; import { product, userProduct } from "../../../redux/actions"; +import _ from "lodash"; -function SubscribeRadio({ data, selectedVOD, selectVOD }: any) { - const submitVOD = (value : any) => { - if(selectedVOD?.id === data.id){ +function SubscribeRadio({ data, selectedVOD, selectVOD, theme }: any) { + const submitVOD = (value: any) => { + if (selectedVOD?.id === data.id) { selectVOD(null); - }else{ - selectVOD(data) + } else { + selectVOD(data); } - } + }; + const light = theme === "light"; return (
- submitVOD(data) - } + className={_.join( + [ + "subscribe-radio d-flex", + selectedVOD?.id === data.id ? "subscribe-radio-active" : "", + light ? "subscribe-radio__light" : "subscribe-radio__dark", + ], + " " + )} + onClick={() => submitVOD(data)} >
{ getList(); scroll.goToTop(); }, []); + const light = theme === "light"; return ( -
+

خرید اشتراک دانوین

- اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون صرفه جویی کنید. + اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های + مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون + صرفه جویی کنید.

{listVOD?.map((subscribe: any, i: any) => ( - + ))}
- +
@@ -43,7 +67,8 @@ export default connect( (state: any) => ({ listVOD: state.product.listVOD, loading: state.product.loading, - selectedVOD: state.product.selectedVOD + selectedVOD: state.product.selectedVOD, + theme: state.publicApi.theme, }), { getList: product.listVOD, diff --git a/src/views/VideoTube/AddComment/index.tsx b/src/views/VideoTube/AddComment/index.tsx index e0b0cc0..2fffe3c 100644 --- a/src/views/VideoTube/AddComment/index.tsx +++ b/src/views/VideoTube/AddComment/index.tsx @@ -2,7 +2,8 @@ import React from "react"; import Avatar from "@mui/material/Avatar"; import user3 from "../../../assets/images/user3.png"; -export default function AddComment() { +export default function AddComment(props : any) { + const { theme } = props; return ( <> diff --git a/src/views/VideoTube/LessonPlayList/index.scss b/src/views/VideoTube/LessonPlayList/index.scss index 367ad37..3dcac33 100644 --- a/src/views/VideoTube/LessonPlayList/index.scss +++ b/src/views/VideoTube/LessonPlayList/index.scss @@ -1,6 +1,20 @@ .lesson-playlist{ width: 100%; padding-bottom : 10px; + &__light{ + .lesson-playlist{ + h3{ + background-color : inherit !important; + border: 1px solid $gray9 !important; + } + &__item{ + *{ + color: black !important; + } + } + } + + } header{ background-color: inherit !important; margin-bottom: 5px; diff --git a/src/views/VideoTube/LessonPlayList/index.tsx b/src/views/VideoTube/LessonPlayList/index.tsx index 01ebdb9..4b32221 100644 --- a/src/views/VideoTube/LessonPlayList/index.tsx +++ b/src/views/VideoTube/LessonPlayList/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from "react"; import { connect } from "react-redux"; import { publicApi } from "../../../redux/actions"; import { Link } from "react-router-dom"; +import _ from "lodash"; function LessonPlayList({ category, @@ -10,6 +11,7 @@ function LessonPlayList({ catergories, realCategories, vods, + theme, }: any) { const bookId = localStorage.getItem("bookId"); useEffect(() => { @@ -20,23 +22,32 @@ function LessonPlayList({ ) as HTMLElement; const elementHeight: any = (listItem as any)?.offsetHeight; const listHeight: any = (list as any).offsetHeight; - const index = vods?.findIndex(( + const index = vods?.findIndex( (item: any) => item?.name === selectedVideo?.name - )); + ); console.log(index); - console.log(listHeight,elementHeight * (Number(index) + 1)); + console.log(listHeight, elementHeight * (Number(index) + 1)); - if( elementHeight * (Number(index) + 1) > listHeight){ - list.scrollTo(0, (elementHeight * (Number(index) + 1)) + elementHeight); + if (elementHeight * (Number(index) + 1) > listHeight) { + list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight); } localStorage.removeItem("scroll-list"); } }, [vods]); + const light = theme === "light"; return ( <> { -
+
{bookId && (

diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss index e02a644..d64d4f0 100644 --- a/src/views/VideoTube/index.scss +++ b/src/views/VideoTube/index.scss @@ -1,59 +1,86 @@ -@import './Attachments/index.scss'; -@import './Book/index.scss'; -@import './Comment/index.scss'; -@import './LessonPlayList/index.scss'; +@import "./Attachments/index.scss"; +@import "./Book/index.scss"; +@import "./Comment/index.scss"; +@import "./LessonPlayList/index.scss"; .video-tube { + &__light { + h1, + p { + color: black !important; + } + .video-tube { + &__content { + &--comments { + color: black !important; + } + &--addComment { + textarea { + background-color: white !important; + color: black !important; + } + } + } + &__sidebar{ + header{ + background-color: white !important; + *{ + color: black !important; + } + } + } + } + } &__content { margin-left: 15px; - + &--display { border-bottom: 1px solid $gray8; padding-bottom: 30px; - video{ + video { border: 1px solid $gray8; } - span{ + span { color: $green4; padding: 15px 0px; } - h1{ + h1 { color: white; margin-bottom: 20px; } - p{ + p { color: white; } } - &--comments{ + &--comments { color: white; border-bottom: 1px solid $gray8; padding-bottom: 30px; - header{ + header { padding: 20px 0px; - h2{ + h2 { margin: 0px; } } - button{ + button { background-color: inherit; border: none; color: $green; } } - &--addComment{ + &--addComment { padding: 15px 0px; - textarea{ + textarea { width: 100%; border-radius: 12px; background-color: $gray8; padding: 10px; color: white; - &:focus{ + &:focus { outline: none; } - &::placeholder{ + &::placeholder { color: $gray4; } } @@ -142,10 +169,10 @@ header { width: 100%; color: white; - h2{ + h2 { margin: 0px; } - span{ + span { background-color: #00fff74f; color: $blue2; padding: 5px 8px; @@ -164,31 +191,31 @@ &__content { flex: 8; &--display { - span{ + span { font-size: 16px; } - h1{ + h1 { font-size: 24px; } - p{ + p { font-size: 16px; } } - &--comments{ - header{ - h2{ + &--comments { + header { + h2 { font-size: 20px; } } - button{ + button { font-size: 14px; } } - &--addComment{ + &--addComment { width: 60%; - textarea{ + textarea { font-size: 14px; - &::placeholder{ + &::placeholder { font-size: 14px; } } @@ -233,11 +260,11 @@ h2 { font-size: 16px; } - span{ + span { font-size: 11px; } } - &___list{ + &___list { padding: 15px 12px; // background-color: #08793d58; } @@ -256,37 +283,37 @@ &__content { flex: 8; &--display { - video{ + video { width: 100%; } - span{ + span { font-size: calc(100vw / 100); } - h1{ + h1 { font-size: calc(100vw / 60); } - p{ + p { font-size: calc(100vw / 100); } } - &--comments{ - header{ - h2{ + &--comments { + header { + h2 { font-size: calc(100vw / 80); } } - button{ + button { font-size: calc(100vw / 90); } } - &--addComment{ + &--addComment { width: 60%; - button{ + button { font-size: calc(100vw / 110); } - textarea{ + textarea { font-size: calc(100vw / 90); - &::placeholder{ + &::placeholder { font-size: calc(100vw / 90); } } @@ -331,11 +358,11 @@ h2 { font-size: calc(100vw / 85); } - span{ + span { font-size: calc(100vw / 120); } } - &___list{ + &___list { padding: 15px 12px; background-color: #ffffff00; } @@ -346,7 +373,7 @@ @media screen and (min-width: 641px) and (max-width: 1007px) { .video-tube { - background : black; + background: black; main { max-width: 900px; margin-top: 10px; @@ -358,38 +385,38 @@ margin: 0px; &--display { padding: 0px; - video{ + video { width: 100%; margin-bottom: 10px; } - span{ + span { font-size: calc(100vw / 40); } - h1{ + h1 { font-size: calc(100vw / 30); } - p{ + p { font-size: calc(100vw / 40); } } - &--comments{ - header{ - h2{ + &--comments { + header { + h2 { font-size: calc(100vw / 40); } } - button{ + button { font-size: calc(100vw / 50); } } - &--addComment{ + &--addComment { width: 100%; - button{ + button { font-size: calc(100vw / 45); } - textarea{ + textarea { font-size: calc(100vw / 45); - &::placeholder{ + &::placeholder { font-size: calc(100vw / 45); } } @@ -404,7 +431,7 @@ background-color: #2c2c2c; img { transform: translateY(-5px); - width : 40px; + width: 40px; } h2 { font-size: calc(100vw / 40); @@ -434,11 +461,11 @@ h2 { font-size: calc(100vw / 40); } - span{ + span { font-size: calc(100vw / 55); } } - &___list{ + &___list { padding: 15px 12px; background-color: #ffffff00; } @@ -449,7 +476,7 @@ @media screen and (max-width: 640px) { .video-tube { - background : black; + background: black; margin-top: 20px; main { max-width: 500px; @@ -462,38 +489,38 @@ margin: 0px; &--display { padding: 0px; - video{ + video { width: 100%; margin-bottom: 10px; } - span{ + span { font-size: calc(100vw / 40); } - h1{ + h1 { font-size: calc(100vw / 30); } - p{ + p { font-size: calc(100vw / 40); } } - &--comments{ - header{ - h2{ + &--comments { + header { + h2 { font-size: calc(100vw / 30); } } - button{ + button { font-size: calc(100vw / 37); } } - &--addComment{ + &--addComment { width: 100%; - button{ + button { font-size: calc(100vw / 40); } - textarea{ + textarea { font-size: calc(100vw / 35); - &::placeholder{ + &::placeholder { font-size: calc(100vw / 35); } } @@ -508,7 +535,7 @@ background-color: #2c2c2c; img { transform: translateY(-5px); - width : 30px; + width: 30px; } h2 { font-size: calc(100vw / 30); @@ -538,11 +565,11 @@ h2 { font-size: calc(100vw / 30); } - span{ + span { font-size: calc(100vw / 45); } } - &___list{ + &___list { padding: 15px 12px; background-color: #08793d58; } @@ -550,4 +577,3 @@ } } } - diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx index 461ea97..9984008 100644 --- a/src/views/VideoTube/index.tsx +++ b/src/views/VideoTube/index.tsx @@ -10,6 +10,7 @@ import Video from "../../components/JolPlayer"; import listIcon from "../../assets/icons/list.png"; import { connect } from "react-redux"; +import _ from "lodash"; import scroll from "../../util/scroll.js"; import location from "../../util/location.js"; import { book, publicApi } from "../../redux/actions"; @@ -24,6 +25,7 @@ function VodTube({ categories, setVideoActive, allBooks, + theme, }: any) { const videoListTag = useRef(null); useEffect(() => { @@ -43,10 +45,17 @@ function VodTube({ } }, [allBooks]); + const light = theme === "light"; return ( <>
@@ -76,7 +85,7 @@ function VodTube({

- +
@@ -98,11 +107,11 @@ function VodTube({ > {localStorage.getItem("bookId") ? categories?.map((video: any, i: any) => ( - - )) + + )) : info?.vods.map((video: any, i: any) => ( - - ))} + + ))}
{info?.attachments.length > 0 && ( @@ -165,6 +174,7 @@ export default connect( loading: state.publicApi.loading, categories: state.publicApi.categories, allBooks: state.publicApi.bookInfo?.vods, + theme: state.publicApi.theme, }), { getInfo: publicApi.bookInfo,