From f4c3d552f5e6c298d1a73664096eb5b328cef91b Mon Sep 17 00:00:00 2001 From: Reza Date: Tue, 2 Nov 2021 17:03:56 +0330 Subject: [PATCH] reza added theme --- package.json | 1 + .../Farsi_numerals/webFonts/css/style.css | 2 +- .../Non_English/WebFonts/css/style.css | 2 +- src/assets/IRANSans/WebFonts/css/style.css | 2 +- src/components/BreadCrumbs/index.scss | 4 +- src/components/BreadCrumbs/index.tsx | 2 - src/components/GradeFilter/index.scss | 46 ++++++++--------- src/components/GradeFilter/index.tsx | 1 - src/components/HomeSearchBox/index.scss | 20 ++++---- src/components/HomeSearchBox/index.tsx | 1 - src/components/Location/index.tsx | 1 - src/components/Navbar/index.scss | 8 +-- src/components/Navbar/index.tsx | 1 - src/components/NavbarDrawer/NavbarDrawer.scss | 6 +-- src/components/NavbarDrawer/NavbarDrawer.tsx | 7 ++- src/components/Textarea/index.scss | 6 +-- src/components/Textarea/index.tsx | 1 - src/components/Timer/index.js | 1 - .../Timer/{index.css => index.scss} | 2 +- src/components/Vocal/Vocal.scss | 2 +- src/components/Vocal/Vocal.tsx | 1 - src/constants/colors.scss | 34 +++++++++++++ src/custom.scss | 45 +++++++++++++---- src/redux/actions-type/public.tsx | 6 +++ src/redux/actions/public.tsx | 2 + src/redux/reducers/public.tsx | 4 ++ src/types/comp.d.ts | 3 +- src/views/About/index.scss | 12 ++--- src/views/About/index.tsx | 49 +++++++++++-------- src/views/Auth/Login/index.scss | 12 ++--- src/views/Auth/Login/index.tsx | 5 +- src/views/Auth/Profile/Birthdate/index.js | 2 +- src/views/Auth/Profile/Birthdate/index.scss | 6 +-- src/views/Auth/Profile/Document/index.js | 1 - src/views/Auth/Profile/Document/index.scss | 2 +- src/views/Auth/Profile/GenderSwitch/index.js | 1 - .../Auth/Profile/GenderSwitch/index.scss | 4 +- .../Auth/Profile/MultipleSelector/index.scss | 2 +- .../Auth/Profile/MultipleSelector/index.tsx | 2 +- src/views/Auth/Profile/Upload/index.js | 1 - src/views/Auth/Profile/Upload/index.scss | 4 +- src/views/Auth/Profile/index.scss | 12 +++-- src/views/Auth/Profile/index.tsx | 2 +- src/views/Auth/SignUp/index.scss | 40 +++++++-------- src/views/Auth/SignUp/index.tsx | 1 - src/views/Auth/index.scss | 3 ++ src/views/Contact/index.scss | 18 +++---- src/views/Contact/index.tsx | 1 - src/views/Course/Lesson/index.scss | 16 +++--- src/views/Course/Lesson/index.tsx | 1 - src/views/Course/index.scss | 36 +++++++------- src/views/Course/index.tsx | 1 - src/views/Courses/Course/index.scss | 20 ++++---- src/views/Courses/Course/index.tsx | 1 - src/views/Courses/index.scss | 2 + src/views/Courses/index.tsx | 1 - src/views/Faq/index.scss | 12 ++--- src/views/Faq/index.tsx | 1 - src/views/Home/AppDownload/index.scss | 8 +-- src/views/Home/AppDownload/index.tsx | 1 - src/views/Home/Blogs/Blog/index.tsx | 1 - src/views/Home/Blogs/index.scss | 4 +- src/views/Home/Blogs/index.tsx | 1 - src/views/Home/Books/Book/index.tsx | 1 - src/views/Home/Books/index.scss | 6 ++- src/views/Home/Books/index.tsx | 1 - src/views/Home/Courses/Course/index.scss | 6 +-- src/views/Home/Courses/Course/index.tsx | 1 - src/views/Home/Courses/index.scss | 13 +++-- src/views/Home/Courses/index.tsx | 5 +- src/views/Home/Footer/index.scss | 4 +- src/views/Home/Footer/index.tsx | 1 - src/views/Home/Header/index.tsx | 1 - src/views/Home/index.scss | 7 +++ src/views/Home/index.tsx | 1 - .../Subscription/DiscountCode/index.scss | 14 +++--- src/views/Subscription/DiscountCode/index.tsx | 1 - .../Subscription/SubscribeRadio/index.scss | 10 ++-- .../Subscription/SubscribeRadio/index.tsx | 1 - src/views/Subscription/index.scss | 7 ++- src/views/Subscription/index.tsx | 1 - src/views/VideoTube/Attachments/index.scss | 4 +- src/views/VideoTube/Attachments/index.tsx | 1 - src/views/VideoTube/Book/index.tsx | 1 - src/views/VideoTube/Comment/index.scss | 2 +- src/views/VideoTube/Comment/index.tsx | 1 - src/views/VideoTube/LessonPlayList/index.scss | 8 +-- src/views/VideoTube/LessonPlayList/index.tsx | 1 - src/views/VideoTube/index.scss | 31 +++++++----- src/views/VideoTube/index.tsx | 1 - yarn.lock | 5 ++ 91 files changed, 357 insertions(+), 276 deletions(-) rename src/components/Timer/{index.css => index.scss} (88%) create mode 100644 src/views/Auth/index.scss diff --git a/package.json b/package.json index 362b996..7190e58 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "jest-resolve": "26.6.0", "jest-watch-typeahead": "0.6.1", "jol-player": "^2.5.0", + "lodash": "^4.17.21", "mapir-react-component": "^2.0.1", "mini-css-extract-plugin": "0.11.3", "optimize-css-assets-webpack-plugin": "5.0.4", diff --git a/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css b/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css index b5457ff..63be599 100644 --- a/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css +++ b/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css @@ -71,7 +71,7 @@ h1 { blockquote { font-weight: 500; padding: 10px; - border: 1px dashed #666666; + border: 1px dashed $gray4; } .mainbox { diff --git a/src/assets/IRANSans/Non_English/WebFonts/css/style.css b/src/assets/IRANSans/Non_English/WebFonts/css/style.css index c163904..89f0b80 100644 --- a/src/assets/IRANSans/Non_English/WebFonts/css/style.css +++ b/src/assets/IRANSans/Non_English/WebFonts/css/style.css @@ -71,7 +71,7 @@ h1 { blockquote { font-weight: 500; padding: 10px; - border: 1px dashed #666666; + border: 1px dashed $gray4; } .mainbox { diff --git a/src/assets/IRANSans/WebFonts/css/style.css b/src/assets/IRANSans/WebFonts/css/style.css index b5457ff..63be599 100644 --- a/src/assets/IRANSans/WebFonts/css/style.css +++ b/src/assets/IRANSans/WebFonts/css/style.css @@ -71,7 +71,7 @@ h1 { blockquote { font-weight: 500; padding: 10px; - border: 1px dashed #666666; + border: 1px dashed $gray4; } .mainbox { diff --git a/src/components/BreadCrumbs/index.scss b/src/components/BreadCrumbs/index.scss index 79337c9..c44a144 100644 --- a/src/components/BreadCrumbs/index.scss +++ b/src/components/BreadCrumbs/index.scss @@ -2,13 +2,13 @@ a { text-decoration: none; font-family: numeralLight; - color: #aaa; + color: $gray; letter-spacing: -1px; } } .MuiBreadcrumbs-separator{ - color: #aaa; + color: $gray; } @media screen and (min-width: 1441px) { .MuiBreadcrumbs-li{ diff --git a/src/components/BreadCrumbs/index.tsx b/src/components/BreadCrumbs/index.tsx index 6b86eb9..92643f6 100644 --- a/src/components/BreadCrumbs/index.tsx +++ b/src/components/BreadCrumbs/index.tsx @@ -2,8 +2,6 @@ import React from "react"; import Breadcrumbs from "@mui/material/Breadcrumbs"; import { Link } from "react-router-dom"; -import "./index.scss"; - export default function BreadCrumbs(props: any) { const { links } = props; return ( diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss index e9ffdc5..22b16e3 100644 --- a/src/components/GradeFilter/index.scss +++ b/src/components/GradeFilter/index.scss @@ -3,7 +3,7 @@ margin: 40px auto; color: white; font-family: numeralLight; - background-color: #383838; + background-color: $gray1; border-radius: 6px; &__box{ display: none !important; @@ -11,11 +11,11 @@ h1{ margin: 0px; padding: 0px 15px; - color: #6C6C6C; + color: $gray2; span{ width: 2px; height: 20px; - background-color: rgb(143, 142, 142); + background-color: $gray3; margin-right: 15px; } } @@ -28,8 +28,8 @@ height: 100%; width : calc(100% / 12); transition: right 0.5s; - background-color: #9CDF52; - box-shadow: 0px 0px 20px #9CDF52; + background-color: $green; + box-shadow: 0px 0px 20px $green; z-index: 50; } li{ @@ -37,8 +37,8 @@ text-align: center; cursor: pointer; padding: 6px 0px; - // box-shadow: 0px 0px 20px #9CDF52; - // background-color: #9CDF52; + // box-shadow: 0px 0px 20px $green; + // background-color: $green; } } &__active{ @@ -94,7 +94,7 @@ position: absolute; left: 0px; top: 45px; - background : #383838; + background : $gray1; padding: 10px 20px; border-radius: 10px; li{ @@ -102,13 +102,13 @@ margin: 8px 5px; font-size: calc(100vw / 28); padding: 5px 0px; - border: 1px solid #666666; + border: 1px solid $gray4; border-radius: 5px; } &--active{ - border-color: #9CDF52 !important; - color: #9CDF52; + border-color: $green !important; + color: $green; } } &__box{ @@ -124,18 +124,18 @@ top: 9px; } span{ - color: #6C6C6C; + color: $gray2; font-size: calc(100vw / 60); } h2{ font-size: calc(100vw / 50); - color: #9CDF52; + color: $green; } } h1{ font-size: calc(100vw / 50); - background-color: #9CDF52; - box-shadow: 0px 0px 20px #9CDF52; + background-color: $green; + box-shadow: 0px 0px 20px $green; border-top-right-radius: 8px; border-bottom-right-radius: 8px; padding: 12px 15px; @@ -155,8 +155,8 @@ position: relative; h1{ font-size: calc(100vw / 30); - background-color: #9CDF52; - box-shadow: 0px 0px 2px #9CDF52; + background-color: $green; + box-shadow: 0px 0px 2px $green; border-top-right-radius: 8px; border-bottom-right-radius: 8px; padding: 12px 15px; @@ -175,12 +175,12 @@ top: 9px; } span{ - color: #6C6C6C; + color: $gray2; font-size: calc(100vw / 34); } h2{ font-size: calc(100vw / 27); - color: #9CDF52; + color: $green; } } &__list{ @@ -189,7 +189,7 @@ position: absolute; left: 0px; top: 45px; - background : #383838; + background : $gray1; padding: 10px 20px; border-radius: 10px; justify-content:center; @@ -198,12 +198,12 @@ margin: 8px 5px; font-size: calc(100vw / 28); padding: 5px 0px; - border: 1px solid #666666; + border: 1px solid $gray4; border-radius: 5px; } &--active{ - border-color: #9CDF52 !important; - color: #9CDF52; + border-color: $green !important; + color: $green; } } diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx index 9d0adeb..a7af492 100644 --- a/src/components/GradeFilter/index.tsx +++ b/src/components/GradeFilter/index.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import { book } from "../../redux/actions"; -import "./index.scss"; import dropdown from "../../assets/icons/dropdown.png"; diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss index e8aaa46..591eaf4 100644 --- a/src/components/HomeSearchBox/index.scss +++ b/src/components/HomeSearchBox/index.scss @@ -7,7 +7,7 @@ } form { button { - background-color: #39383d; + background-color: $gray1; margin-right: 3px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; @@ -15,18 +15,18 @@ } input { width: 100%; - background-color: #46454a; + background-color: $gray5; border: 0px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; - color: #ddd; + color: $gray6; &::placeholder { padding-right: 0px; - color: #ddd; + color: $gray6; opacity: 0.4; } &:focus { - outline: 2px solid #9cdf52 !important; + outline: 2px solid $green !important; } } } @@ -37,7 +37,7 @@ } } strong{ - color: #9cdf52; + color: $green; font-weight: 300; margin-left: 20px; } @@ -78,7 +78,7 @@ } ul{ li { - color: #a2b4cb; + color: $blue; margin-left: 25px; font-size: 14px; } @@ -115,7 +115,7 @@ width: 850px; padding: 10px 0px !important; li { - color: #a2b4cb; + color: $blue; margin-left: 25px; font-size: calc(100vw / 110); } @@ -151,7 +151,7 @@ width: 85%; padding: 10px 0px !important; li { - color: #a2b4cb; + color: $blue; margin-left: 25px; font-size: calc(100vw / 75); } @@ -192,7 +192,7 @@ font-size: calc(100vw / 30); padding-right: 20px; border-radius: 8px; - background: #383838; + background: $gray1; &::placeholder { font-size: calc(100vw / 34); color: white !important; diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx index 1e0a861..ad38f73 100644 --- a/src/components/HomeSearchBox/index.tsx +++ b/src/components/HomeSearchBox/index.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import "./index.scss"; import { connect } from "react-redux"; import { book } from "../../redux/actions"; import search from "../../assets/icons/search.png"; diff --git a/src/components/Location/index.tsx b/src/components/Location/index.tsx index d089c51..6087b74 100644 --- a/src/components/Location/index.tsx +++ b/src/components/Location/index.tsx @@ -2,7 +2,6 @@ import Mapir from "mapir-react-component"; import blueMark from '../../assets/icons/location-marker.png'; -import './index.scss'; const Map = Mapir.setToken({ transformRequest: (url : string) => { diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index 3ada980..4029df2 100644 --- a/src/components/Navbar/index.scss +++ b/src/components/Navbar/index.scss @@ -29,10 +29,10 @@ } } &___share{ - border: 2px solid #46454A; + border: 2px solid $gray5; } &___login{ - background-color: #81C342; + background-color: $green1; } &___logo{ img{ @@ -65,7 +65,7 @@ span{ width: 2px; height: 15px; - background-color: rgb(197, 197, 197); + background-color: $gray6; margin-right: 15px; transform: translateY(-1px); } @@ -102,7 +102,7 @@ span{ width: 2px; height: 15px; - background-color: #3F3F3F; + background-color: $gray1; margin-right: 15px; // transform: translateY(-1px); } diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 9b0fed9..3b630db 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import "./index.scss"; import MenuRoundedIcon from "@mui/icons-material/MenuRounded"; import { Link } from "react-router-dom"; import { SwipeableDrawer } from "@mui/material"; diff --git a/src/components/NavbarDrawer/NavbarDrawer.scss b/src/components/NavbarDrawer/NavbarDrawer.scss index fc3278f..bbbfa11 100644 --- a/src/components/NavbarDrawer/NavbarDrawer.scss +++ b/src/components/NavbarDrawer/NavbarDrawer.scss @@ -39,7 +39,7 @@ left: 0px; top: 10px; span { - background-color: #6cbe44; + background-color: $green2; color: white; padding: 2px 4px; @@ -91,7 +91,7 @@ margin-left: 20px; } & .badge { - background-color: red; + background-color: $red; margin: 5px; position: absolute; left: 5px; @@ -120,7 +120,7 @@ justify-content: center; align-items: center; & span { - color: #cfcfcf; + color: #ddd; font-size: 14px; } } diff --git a/src/components/NavbarDrawer/NavbarDrawer.tsx b/src/components/NavbarDrawer/NavbarDrawer.tsx index e076178..8dd5376 100644 --- a/src/components/NavbarDrawer/NavbarDrawer.tsx +++ b/src/components/NavbarDrawer/NavbarDrawer.tsx @@ -22,7 +22,6 @@ import mobileDanger from "../../assets/icons/mobileDanger.svg"; import mobileLogout from "../../assets/icons/mobileLogout.svg"; import proxy from "../../redux/proxy"; -import "./NavbarDrawer.scss"; const NavbarDrawer = ({ status, logout }: any) => { const [dropdown, setDropdown] = useState(false); const links = [ @@ -283,14 +282,14 @@ const User = (props: any) => {

{props.data.firstName + " " + props.data.lastName}

{props.data.title} @@ -298,7 +297,7 @@ const User = (props: any) => {
{props.data.status === 1 ? (
- +
) : null}
diff --git a/src/components/Textarea/index.scss b/src/components/Textarea/index.scss index 8fdb7fb..cfe6820 100644 --- a/src/components/Textarea/index.scss +++ b/src/components/Textarea/index.scss @@ -3,17 +3,17 @@ padding: 10px 12px; color: white; border-radius: 10px; - border: 1px solid #707070; + border: 1px solid $gray2; background-color: black; margin-top: 10px; &::placeholder{ color: #a2a2a2; } &:focus{ - border: 1px solid #84DE56; + border: 1px solid $green1; outline: none; &::placeholder{ - color: #84DE56; + color: $green1; } } } diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx index f511129..d6a1212 100644 --- a/src/components/Textarea/index.tsx +++ b/src/components/Textarea/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import './index.scss'; export default function Textarea({placeholder} : any) { return ( diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js index b480fd3..012062b 100644 --- a/src/components/Timer/index.js +++ b/src/components/Timer/index.js @@ -1,5 +1,4 @@ import { Component } from "react"; -import "./index.css"; const maxDesktopSize = 1250; const maxMobileSize = 550; diff --git a/src/components/Timer/index.css b/src/components/Timer/index.scss similarity index 88% rename from src/components/Timer/index.css rename to src/components/Timer/index.scss index b504c9d..f1724eb 100644 --- a/src/components/Timer/index.css +++ b/src/components/Timer/index.scss @@ -3,6 +3,6 @@ direction: rtl !important; margin-right: 10px; margin-left: 10px; - color: #6cbe44; + color: $green2; font-family: numeralLight; } diff --git a/src/components/Vocal/Vocal.scss b/src/components/Vocal/Vocal.scss index 259cec5..3d26415 100644 --- a/src/components/Vocal/Vocal.scss +++ b/src/components/Vocal/Vocal.scss @@ -24,7 +24,7 @@ font-size: calc(100vw / 20); } h2{ - color: rgb(196, 196, 196); + color: $gray6; font-family: numeralLight; font-size: calc(100vw / 24); position: fixed; diff --git a/src/components/Vocal/Vocal.tsx b/src/components/Vocal/Vocal.tsx index da85aa0..3b9ebe3 100644 --- a/src/components/Vocal/Vocal.tsx +++ b/src/components/Vocal/Vocal.tsx @@ -7,7 +7,6 @@ import line1 from "../../assets/icons/line1.png"; import line2 from "../../assets/icons/line2.png"; import arrowLeft from "../../assets/icons/arrow-left.png"; -import "./Vocal.scss"; import { stat } from "fs"; const Vocal = (props: any) => { diff --git a/src/constants/colors.scss b/src/constants/colors.scss index e69de29..0deba90 100644 --- a/src/constants/colors.scss +++ b/src/constants/colors.scss @@ -0,0 +1,34 @@ +// gray +$gray : #aaa; +$gray1 : #383838; +$gray2 : #6c6c6c; +$gray3 : rgb(143, 142, 142); +$gray4 : #666666; +$gray5 : #46454a; +$gray6 : #ddd; +$gray7 : #797979; +$gray8 : #272727; +$gray9 : #b3b3b3; +$gray10 : #cccccc; +$gray11 : #969696; +$gray12 : #e3e3e3; +// green +$green : #4dd35b; +$green1 : #81C342; +$green2 : #6cbe44; +$green3 : #00cc69; +$green4 : #84de56; + +// blue +$blue : #a2b4cb; +$blue1 : #505a82; +$blue2 : #00FFF8; +// red +$red : red; +$red1 : rgb(255, 115, 115); + +//yellow +$yellow : #FFD70F; + +//orange +$orange : orange; \ No newline at end of file diff --git a/src/custom.scss b/src/custom.scss index b9889c7..e1ce798 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -1,5 +1,25 @@ +@import './constants/colors.scss'; +@import './components/BreadCrumbs/index.scss'; +@import './components/GradeFilter/index.scss'; +@import './components/HomeSearchBox/index.scss'; +@import './components/Location/index.scss'; +@import './components/Navbar/index.scss'; +@import './components/NavbarDrawer/NavbarDrawer.scss'; +@import './components/Textarea/index.scss'; +@import './components/Timer/index.scss'; +@import './components/Vocal/Vocal.scss'; +@import './views/Auth/index.scss'; +@import './views/About/index.scss'; +@import './views/Contact/index.scss'; +@import './views/Course/index.scss'; +@import './views/Courses/index.scss'; +@import './views/Faq/index.scss'; +@import './views/Home/index.scss'; +@import './views/Subscription/index.scss'; +@import './views/VideoTube/index.scss'; + .submit { - background-color: #4dd35b; + background-color: $green; color: white; border-radius: 6px; border: 0px; @@ -90,7 +110,6 @@ p { } .main { - background: black; width: 100%; overflow-x: hidden; padding-top: 60px; @@ -98,6 +117,12 @@ p { position: relative; padding-bottom: 100px; font-family: numeralLight; + &__light{ + background: white; + } + &__dark{ + background : black; + } .footer { position: absolute; bottom: 0px; @@ -118,7 +143,7 @@ p { .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } - color: #797979 !important; + color: $gray7 !important; } .MuiSelect-select:focus { @@ -140,7 +165,7 @@ p { .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } - color: #797979 !important; + color: $gray7 !important; label { background: black !important; width: fit-content; @@ -152,7 +177,7 @@ p { top: 0px !important; } .MuiOutlinedInput-notchedOutline { - border-color: #666666 !important; + border-color: $gray4 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; @@ -161,9 +186,9 @@ p { .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; - color: #84de56 !important; + color: $green4 !important; &:focus { - border: 1px solid #84de56 !important; + border: 1px solid $green4 !important; border-radius: 10px; transform: translateY(0px); border-radius: 10px !important; @@ -190,13 +215,13 @@ p { padding: 0px 10px !important; z-index: 130 !important; background-color: black !important; - color: #84de56 !important; + color: $green4 !important; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; - border-color: #84de56 !important; - color: #84de56 !important; + border-color: $green4 !important; + color: $green4 !important; } .MuiInputBase-input { diff --git a/src/redux/actions-type/public.tsx b/src/redux/actions-type/public.tsx index a3a99bf..69524c9 100644 --- a/src/redux/actions-type/public.tsx +++ b/src/redux/actions-type/public.tsx @@ -3,6 +3,11 @@ interface getHomeData { data: any; } +interface setTheme { + type: "public/setTheme"; + data: any; +} + interface getBlogList { type: "public/blogList"; data: any; @@ -84,6 +89,7 @@ interface loading { type PublicAction = | activeCategory + | setTheme | setVideoActive | getBlogList | getBlogInfo diff --git a/src/redux/actions/public.tsx b/src/redux/actions/public.tsx index 4ec545a..71dd98b 100644 --- a/src/redux/actions/public.tsx +++ b/src/redux/actions/public.tsx @@ -1,6 +1,8 @@ import { Dispatch } from "redux"; import proxy from "../proxy"; const publicApi = { + setTheme: (data: {}) => async (dispatch: Dispatch) => + await dispatch({ type: "public/setTheme", data: data }), getHomeData: (data: undefined) => async (dispatch: Dispatch) => await proxy.get("public/homePage", data, { dispatch }), diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx index 636efd5..79992f9 100644 --- a/src/redux/reducers/public.tsx +++ b/src/redux/reducers/public.tsx @@ -3,6 +3,7 @@ import proxy from "../proxy"; import location from '../../util/location'; const initialState = { + theme : localStorage.getItem('theme') || 'light', homeData: [], newProducts: [], levels: [], @@ -56,6 +57,9 @@ const grades = [ export default function publicApi(state = initialState, action: PublicAction) { let { type, data } = action; switch (type) { + case "public/setTheme": + localStorage.setItem("theme", data); + return { ...state, location: false, error : null, theme: data }; case "active/video": return { ...state, diff --git a/src/types/comp.d.ts b/src/types/comp.d.ts index 40356ae..0b09d49 100644 --- a/src/types/comp.d.ts +++ b/src/types/comp.d.ts @@ -1,3 +1,4 @@ declare module '3d-react-carousal'; declare module 'react-speech-recognition'; -declare module 'mapir-react-component'; \ No newline at end of file +declare module 'mapir-react-component'; +declare module 'lodash'; \ No newline at end of file diff --git a/src/views/About/index.scss b/src/views/About/index.scss index be525f7..ca33040 100644 --- a/src/views/About/index.scss +++ b/src/views/About/index.scss @@ -1,7 +1,7 @@ .about { main { li::before { - color: #aaa; + color: $gray; content: "\2022"; font-weight: bold; display: inline-block; @@ -14,7 +14,7 @@ } p, li { - color: #aaa; + color: $gray; margin-top: 2px; line-height: 1.5; } @@ -25,7 +25,7 @@ width: 70%; h1 { display: inline; - color: #00cc69; + color: $green3; } p { margin-top: 10px; @@ -45,7 +45,7 @@ h1 { display: inline; letter-spacing: -1px; - color: #00cc69; + color: $green3; } p { margin-top: 10px; @@ -56,7 +56,7 @@ margin: 20px 30px 20px 0px; h2 { display: inline; - color: #00cc69; + color: $green3; } ul { margin: 0px; @@ -99,7 +99,7 @@ margin-top: 5px; h1 { display: inline; - color: #00cc69; + color: $green3; } ul { margin: 0px; diff --git a/src/views/About/index.tsx b/src/views/About/index.tsx index 2dcc2db..53ba08f 100644 --- a/src/views/About/index.tsx +++ b/src/views/About/index.tsx @@ -1,33 +1,35 @@ import React, { Component, Fragment } from "react"; +import _ from "lodash"; import Navbar from "../../components/Navbar/index"; import Footer from "../Home/Footer/index"; +import { connect } from "react-redux"; +import {publicApi } from '../../redux/actions'; import pic from "../../assets/images/pic.png"; import aboutLg from "../../assets/images/about-lg.png"; -import "./index.scss"; - -export default function About({ - fury, - advantages, - keywords, - keywords2, - first, -}: any) { +function About({ fury, advantages, keywords, keywords2, first, theme, setTheme }: any) { + console.log(theme); return ( -
+
setTheme('dark')} + >
-
-

{first.title}

-

- {first.text} -

-
+
+

{first.title}

+

+ {first.text} +

+
@@ -90,6 +92,13 @@ export default function About({ ); } +export default connect( + (state: any) => ({ + theme: state.publicApi.theme, + }), + {setTheme : publicApi.setTheme,} +)(About); + About.defaultProps = { first: { title: "درباره ما", diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss index 3b93937..2f7f875 100644 --- a/src/views/Auth/Login/index.scss +++ b/src/views/Auth/Login/index.scss @@ -6,12 +6,12 @@ &__options { color: #b5b5b5; a { - color: #84de56; + color: $green4; } } button[type="submit"] { margin-top: 25px; - background-color: #84de56; + background-color: $green4; color: white; padding: 10px 0px; border: 0px; @@ -56,7 +56,7 @@ color: white; font-size: 14px; a { - color: #84de56; + color: $green4; } } &__back { @@ -103,7 +103,7 @@ color: white; font-size: calc(100vw / 110); a { - color: #84de56; + color: $green4; } } &__back { @@ -160,7 +160,7 @@ color: white; font-size: calc(100vw / 40); a { - color: #84de56; + color: $green4; } } &__back { @@ -218,7 +218,7 @@ color: white; font-size: calc(100vw / 30); a { - color: #84de56; + color: $green4; } } &__back { diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx index 222995d..7d7f8ff 100644 --- a/src/views/Auth/Login/index.tsx +++ b/src/views/Auth/Login/index.tsx @@ -13,7 +13,6 @@ import onInput from "../../../util/onInput"; import { connect } from "react-redux"; import { user } from "../../../redux/actions"; -import "./index.scss"; interface LoginFields { username?: string; @@ -72,12 +71,12 @@ function Login({login, ...props}: any) { } checkedIcon={ } /> diff --git a/src/views/Auth/Profile/Birthdate/index.js b/src/views/Auth/Profile/Birthdate/index.js index a1fd287..4edbe08 100644 --- a/src/views/Auth/Profile/Birthdate/index.js +++ b/src/views/Auth/Profile/Birthdate/index.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import onInput from "~/util/onInput"; import Input from "../../../../components/Input/index"; -import "./index.scss"; + import moment from "jalali-moment"; export default function Birthdate({ defaultValue, name, ...props }) { let momentDate = moment(defaultValue[name]); diff --git a/src/views/Auth/Profile/Birthdate/index.scss b/src/views/Auth/Profile/Birthdate/index.scss index 531b6b7..65eb7f0 100644 --- a/src/views/Auth/Profile/Birthdate/index.scss +++ b/src/views/Auth/Profile/Birthdate/index.scss @@ -2,7 +2,7 @@ width: 100%; border-radius: 10px; padding: 0px 10px; - border: 1px solid #333; + border: 1px solid $gray1; margin: 10px 0px; label { width: fit-content; @@ -17,7 +17,7 @@ input { border: none !important; background-color: rgba(204, 204, 204, 0.098); - color: #84de56; + color: $green4; max-width: 40px; text-align: center !important; direction: ltr; @@ -28,7 +28,7 @@ border: 0px; } &::placeholder { - color: #383737; + color: $gray1; } } diff --git a/src/views/Auth/Profile/Document/index.js b/src/views/Auth/Profile/Document/index.js index 9556b88..e02f43c 100644 --- a/src/views/Auth/Profile/Document/index.js +++ b/src/views/Auth/Profile/Document/index.js @@ -1,5 +1,4 @@ import React from "react"; -import "./index.scss"; export default function Document({ defaultValue, name, onChange }) { return ( diff --git a/src/views/Auth/Profile/Document/index.scss b/src/views/Auth/Profile/Document/index.scss index 53624d2..9064418 100644 --- a/src/views/Auth/Profile/Document/index.scss +++ b/src/views/Auth/Profile/Document/index.scss @@ -4,7 +4,7 @@ width: 100%; height: 50px; border-radius: 10px; - border: 2px dashed #333; + border: 2px dashed $gray1; position: relative; input { width: 100%; diff --git a/src/views/Auth/Profile/GenderSwitch/index.js b/src/views/Auth/Profile/GenderSwitch/index.js index cd647d6..85f08ca 100644 --- a/src/views/Auth/Profile/GenderSwitch/index.js +++ b/src/views/Auth/Profile/GenderSwitch/index.js @@ -1,6 +1,5 @@ import React from "react"; -import "./index.scss"; export default function GenderSwitch({ onChange, diff --git a/src/views/Auth/Profile/GenderSwitch/index.scss b/src/views/Auth/Profile/GenderSwitch/index.scss index a95abd0..1adbf93 100644 --- a/src/views/Auth/Profile/GenderSwitch/index.scss +++ b/src/views/Auth/Profile/GenderSwitch/index.scss @@ -10,10 +10,10 @@ cursor: pointer; color: #ccc; background-color: black; - border: 1px solid #333; + border: 1px solid $gray1; } &__active{ - background-color: #84de56 !important; + background-color: $green4 !important; color: white !important; border: none !important; } diff --git a/src/views/Auth/Profile/MultipleSelector/index.scss b/src/views/Auth/Profile/MultipleSelector/index.scss index 5578cc0..2610c6b 100644 --- a/src/views/Auth/Profile/MultipleSelector/index.scss +++ b/src/views/Auth/Profile/MultipleSelector/index.scss @@ -2,7 +2,7 @@ width: 100%; border-radius: 10px; padding: 9px 10px; - border: 1px solid #ccc !important; + border: 1px solid $gray6 !important; margin: 0px !important; .MuiInput-formControl { margin: 9px 0px 8px !important; diff --git a/src/views/Auth/Profile/MultipleSelector/index.tsx b/src/views/Auth/Profile/MultipleSelector/index.tsx index 015eb1c..5b7d1b7 100644 --- a/src/views/Auth/Profile/MultipleSelector/index.tsx +++ b/src/views/Auth/Profile/MultipleSelector/index.tsx @@ -6,7 +6,7 @@ import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import "./index.scss"; + export default function MultipleSelector({align, onChange, selectedOptions, options, defaultValue, label, name,} : any) { return ( { diff --git a/src/views/Home/Books/Book/index.tsx b/src/views/Home/Books/Book/index.tsx index 7a47942..dfcddd8 100644 --- a/src/views/Home/Books/Book/index.tsx +++ b/src/views/Home/Books/Book/index.tsx @@ -1,6 +1,5 @@ import React from "react"; import { Link } from 'react-router-dom'; -import "./index.scss"; export default function Book(props: any) { const { data } = props; diff --git a/src/views/Home/Books/index.scss b/src/views/Home/Books/index.scss index 8bd087d..16d9026 100644 --- a/src/views/Home/Books/index.scss +++ b/src/views/Home/Books/index.scss @@ -1,3 +1,5 @@ +@import './Book/index.scss'; + .home-books { width: 100%; margin: 0px auto; @@ -12,7 +14,7 @@ margin: 0px; } span{ - color: #aaa; + color: $gray; } } @@ -21,7 +23,7 @@ bottom: 0px; left: 50%; transform: translate(-50%, +50%); - background-color: #0f0f0f; + background-color: black; padding-right: 5px; color: green; } diff --git a/src/views/Home/Books/index.tsx b/src/views/Home/Books/index.tsx index aff73c2..e4bdb6e 100644 --- a/src/views/Home/Books/index.tsx +++ b/src/views/Home/Books/index.tsx @@ -3,7 +3,6 @@ import { useSelector, connect } from "react-redux"; import Carousel from "react-elastic-carousel"; import Book from "./Book/index"; import { book } from "../../../redux/actions"; -import "./index.scss"; function Books({list, number}: any) { const slideNumberHandler = () => { diff --git a/src/views/Home/Courses/Course/index.scss b/src/views/Home/Courses/Course/index.scss index 0109720..be4a542 100644 --- a/src/views/Home/Courses/Course/index.scss +++ b/src/views/Home/Courses/Course/index.scss @@ -16,17 +16,17 @@ margin-right: 10px; p { margin: 0px; - color: #C9C9C9; + color: $gray10; } h2{ color: white; } li{ - background-color: #4F4F4F; + background-color: $gray5; border-radius: 15px; padding: 3px 6px; margin-left: 3px; - color: #C4C4C4; + color: $gray10; font-family: numeralLight; margin-top: 5px; } diff --git a/src/views/Home/Courses/Course/index.tsx b/src/views/Home/Courses/Course/index.tsx index 98d9805..68374bb 100644 --- a/src/views/Home/Courses/Course/index.tsx +++ b/src/views/Home/Courses/Course/index.tsx @@ -2,7 +2,6 @@ import React from "react"; import Avatar from "@mui/material/Avatar"; import {Link} from 'react-router-dom'; -import "./index.scss"; export default function Course(props: any) { const { data } = props; diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss index 744e73b..6322d86 100644 --- a/src/views/Home/Courses/index.scss +++ b/src/views/Home/Courses/index.scss @@ -1,7 +1,10 @@ +@import './Course/index.scss'; + .home-courses { width: 100%; margin: 0px auto; - border-top: 1px solid #333; border-bottom: 1px solid #333; + border-top: 1px solid $gray8; + border-bottom: 1px solid $gray8; position: relative; margin-top: 30px; padding: 20px 10px 50px; @@ -14,7 +17,7 @@ margin-bottom: 10px; } span{ - color: #aaa; + color: $gray; } a{ display: none; @@ -27,9 +30,9 @@ transform: translate(-50%, +50%); background-color: black; padding-right: 5px; - color: #9CDF52; + color: $green; &:hover{ - color: #9CDF52; + color: $green; } } &__list{ @@ -112,7 +115,7 @@ } a{ display: flex; - color: #9CDF52; + color: $green; font-size: calc(100vw / 28); } } diff --git a/src/views/Home/Courses/index.tsx b/src/views/Home/Courses/index.tsx index d0789b8..4eb8126 100644 --- a/src/views/Home/Courses/index.tsx +++ b/src/views/Home/Courses/index.tsx @@ -4,7 +4,6 @@ import Course from "./Course/index"; import { Link } from "react-router-dom"; import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; import { connect } from 'react-redux'; -import "./index.scss"; function Courses({ number, courses, selectedSort }: any) { const slideNumberHandler = () => { @@ -50,11 +49,11 @@ function Courses({ number, courses, selectedSort }: any) { )} مشاهده بیشتر{" "} - + ); diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss index 3850782..b09e74b 100644 --- a/src/views/Home/Footer/index.scss +++ b/src/views/Home/Footer/index.scss @@ -7,10 +7,10 @@ margin : 0px auto; p{ margin: 0px; - color: #A2A2A2; + color: $gray; } a{ - color: #A2A2A2; + color: $gray; } } } diff --git a/src/views/Home/Footer/index.tsx b/src/views/Home/Footer/index.tsx index 110c941..7768346 100644 --- a/src/views/Home/Footer/index.tsx +++ b/src/views/Home/Footer/index.tsx @@ -1,6 +1,5 @@ import React, { useEffect } from "react"; import { Link } from "react-router-dom"; -import "./index.scss"; import scroll from "../../../util/scroll"; diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx index ad5631a..8f2fc13 100644 --- a/src/views/Home/Header/index.tsx +++ b/src/views/Home/Header/index.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "./index.scss"; import Avatar from '@mui/material/Avatar'; export default function Header(props: any) { diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss index 755569d..53171d0 100644 --- a/src/views/Home/index.scss +++ b/src/views/Home/index.scss @@ -1,3 +1,10 @@ +@import './AppDownload/index.scss'; +@import './Blogs/index.scss'; +@import './Books/index.scss'; +@import './Courses/index.scss'; +@import './Footer/index.scss'; +@import './Header/index.scss'; + .home { } diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index de2eb29..418d62d 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from "react"; -import "./index.scss"; import Navbar from "../../components/Navbar"; import HomeSearchBox from "../../components/HomeSearchBox"; import Courses from "./Courses"; diff --git a/src/views/Subscription/DiscountCode/index.scss b/src/views/Subscription/DiscountCode/index.scss index 658cf0b..2633ff6 100644 --- a/src/views/Subscription/DiscountCode/index.scss +++ b/src/views/Subscription/DiscountCode/index.scss @@ -1,17 +1,17 @@ .discount-code{ width: 100%; - border: 1px solid #707070; + border: 1px solid $gray7; border-radius: 10px; padding: 10px 30px; &__cancel{ - background-color: orange; + background-color: $orange; color: white; } p{ - color: orange; + color: $orange; } h3{ - color: #aaa; + color: $gray; margin: 0px; } input{ @@ -19,13 +19,13 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; border: 0px; - color: #aaa; + color: $gray; &::placeholder{ - color: #aaa; + color: $gray; } } button{ - background-color : #81C342; + background-color : $green1; border-top-left-radius: 6px; color: white; border-bottom-left-radius: 6px; diff --git a/src/views/Subscription/DiscountCode/index.tsx b/src/views/Subscription/DiscountCode/index.tsx index 20c49aa..d192874 100644 --- a/src/views/Subscription/DiscountCode/index.tsx +++ b/src/views/Subscription/DiscountCode/index.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; import { connect } from "react-redux"; import { userFactor } from "../../../redux/actions"; -import "./index.scss"; function DiscountCode({ codeId, diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss index ef0735c..4ee29e8 100644 --- a/src/views/Subscription/SubscribeRadio/index.scss +++ b/src/views/Subscription/SubscribeRadio/index.scss @@ -1,6 +1,6 @@ .subscribe-radio{ width: 100%; - border : 1px solid #777; + border : 1px solid $gray7; margin-bottom: 15px; border-radius: 10px; cursor: pointer; @@ -22,7 +22,7 @@ color: white; } &--tag{ - background-color: yellow; + background-color: $yellow; padding: 4px 20px; border-radius: 30px; width: fit-content; @@ -56,10 +56,8 @@ } } &-active{ - box-shadow: 0px 0px 6px #4DD35B; - background-color: #4DD35B; - .subscribe-radio__name{ - } + box-shadow: 0px 0px 6px $green; + background-color: $green; .subscribe-radio__factor{ background-color: rgba(255, 255, 255, 0.18); } diff --git a/src/views/Subscription/SubscribeRadio/index.tsx b/src/views/Subscription/SubscribeRadio/index.tsx index d13ed3a..5f05227 100644 --- a/src/views/Subscription/SubscribeRadio/index.tsx +++ b/src/views/Subscription/SubscribeRadio/index.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "./index.scss"; import CustomCheckbox from "../../../components/CustomCheckbox"; import CircleRoundedIcon from "@mui/icons-material/CircleRounded"; import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded"; diff --git a/src/views/Subscription/index.scss b/src/views/Subscription/index.scss index 7bfc537..1af7046 100644 --- a/src/views/Subscription/index.scss +++ b/src/views/Subscription/index.scss @@ -1,10 +1,13 @@ +@import './DiscountCode/index.scss'; +@import './SubscribeRadio/index.scss'; + .subscription { main { h1,h2{ - color: #aaa; + color: $gray; } p{ - color : #aaa; + color : $gray; margin : 10px 0px 35px; } } diff --git a/src/views/Subscription/index.tsx b/src/views/Subscription/index.tsx index b50a96f..0a612be 100644 --- a/src/views/Subscription/index.tsx +++ b/src/views/Subscription/index.tsx @@ -7,7 +7,6 @@ import { connect } from "react-redux"; import { product, userFactor } from "../../redux/actions"; import scroll from "../../util/scroll"; import Loader from "../../components/Loader"; -import "./index.scss"; function Subscription({ listVOD, getList, loading, selectedVOD, payment, verify }: any) { useEffect(() => { diff --git a/src/views/VideoTube/Attachments/index.scss b/src/views/VideoTube/Attachments/index.scss index c611ab3..60a2bb3 100644 --- a/src/views/VideoTube/Attachments/index.scss +++ b/src/views/VideoTube/Attachments/index.scss @@ -1,7 +1,7 @@ .download-attachments{ color: white; margin: 0px auto; - border-bottom: 1px solid #2c2c2c; + border-bottom: 1px solid $gray8; span{ } @@ -10,7 +10,7 @@ } a{ padding: 5px 15px; - border: 1px solid #707070; + border: 1px solid $gray7; color: white; text-decoration: none; border-radius: 8px; diff --git a/src/views/VideoTube/Attachments/index.tsx b/src/views/VideoTube/Attachments/index.tsx index e2eeee7..1c487f0 100644 --- a/src/views/VideoTube/Attachments/index.tsx +++ b/src/views/VideoTube/Attachments/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import './index.scss'; export default function Attachments({file,num} : any) { return ( diff --git a/src/views/VideoTube/Book/index.tsx b/src/views/VideoTube/Book/index.tsx index 726cebe..d40f1e4 100644 --- a/src/views/VideoTube/Book/index.tsx +++ b/src/views/VideoTube/Book/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import './index.scss'; export default function Book({ data }: any) { const desc: any = { diff --git a/src/views/VideoTube/Comment/index.scss b/src/views/VideoTube/Comment/index.scss index fd71e44..93cb60e 100644 --- a/src/views/VideoTube/Comment/index.scss +++ b/src/views/VideoTube/Comment/index.scss @@ -5,7 +5,7 @@ } button{ background-color: inherit; - color: #4DD35B; + color: $green; border: none; margin-left: 20px; } diff --git a/src/views/VideoTube/Comment/index.tsx b/src/views/VideoTube/Comment/index.tsx index a40d31b..0000ca8 100644 --- a/src/views/VideoTube/Comment/index.tsx +++ b/src/views/VideoTube/Comment/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import Avatar from "@mui/material/Avatar"; -import "./index.scss"; export default function Comment({ comment }: any) { return ( diff --git a/src/views/VideoTube/LessonPlayList/index.scss b/src/views/VideoTube/LessonPlayList/index.scss index d76e6d7..367ad37 100644 --- a/src/views/VideoTube/LessonPlayList/index.scss +++ b/src/views/VideoTube/LessonPlayList/index.scss @@ -5,12 +5,12 @@ background-color: inherit !important; margin-bottom: 5px; h3{ - background-color : #707070; + background-color : $gray7; padding: 5px 10px; margin: 0px; } span{ - background-color : #707070; + background-color : $gray7; display: flex; flex: 1; height : 1px; @@ -21,7 +21,7 @@ color: white; } &--active{ - background: rgba(#ebebeb, 0.21); + background: rgba($gray12, 0.21); } &--text{ padding: 15px 10px; @@ -30,7 +30,7 @@ margin: 0px; } p{ - color: #767676; + color: $gray7; margin: 0px; } } diff --git a/src/views/VideoTube/LessonPlayList/index.tsx b/src/views/VideoTube/LessonPlayList/index.tsx index 3628b81..01ebdb9 100644 --- a/src/views/VideoTube/LessonPlayList/index.tsx +++ b/src/views/VideoTube/LessonPlayList/index.tsx @@ -1,5 +1,4 @@ import React, { useEffect } from "react"; -import "./index.scss"; import { connect } from "react-redux"; import { publicApi } from "../../../redux/actions"; import { Link } from "react-router-dom"; diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss index 227a7a6..e02a644 100644 --- a/src/views/VideoTube/index.scss +++ b/src/views/VideoTube/index.scss @@ -1,15 +1,20 @@ +@import './Attachments/index.scss'; +@import './Book/index.scss'; +@import './Comment/index.scss'; +@import './LessonPlayList/index.scss'; + .video-tube { &__content { margin-left: 15px; &--display { - border-bottom: 1px solid #303030; + border-bottom: 1px solid $gray8; padding-bottom: 30px; video{ - border: 1px solid #303030; + border: 1px solid $gray8; } span{ - color: #84DE56; + color: $green4; padding: 15px 0px; } h1{ @@ -22,7 +27,7 @@ } &--comments{ color: white; - border-bottom: 1px solid #303030; + border-bottom: 1px solid $gray8; padding-bottom: 30px; header{ padding: 20px 0px; @@ -33,7 +38,7 @@ button{ background-color: inherit; border: none; - color: #4DD35B; + color: $green; } } &--addComment{ @@ -42,21 +47,21 @@ textarea{ width: 100%; border-radius: 12px; - background-color: #2D2D2D; + background-color: $gray8; padding: 10px; color: white; &:focus{ outline: none; } &::placeholder{ - color: #666666; + color: $gray4; } } } } &__sidebar { &--playlist { - border: 1px solid #303030; + border: 1px solid $gray8; margin-bottom: 30px; header { width: 100%; @@ -84,7 +89,7 @@ /* Handle */ &::-webkit-scrollbar-thumb { - background: #bbbbbb; + background: $gray; border-radius: 10px; } @@ -95,7 +100,7 @@ } } &--attachments { - border: 1px solid #303030; + border: 1px solid $gray8; margin-bottom: 30px; header { width: 100%; @@ -122,7 +127,7 @@ /* Handle */ &::-webkit-scrollbar-thumb { - background: #bbbbbb; + background: $gray10; border-radius: 10px; } @@ -133,7 +138,7 @@ } } &--suggests { - border: 1px solid #303030; + border: 1px solid $gray8; header { width: 100%; color: white; @@ -142,7 +147,7 @@ } span{ background-color: #00fff74f; - color: #00FFF8; + color: $blue2; padding: 5px 8px; } } diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx index 2bbc322..461ea97 100644 --- a/src/views/VideoTube/index.tsx +++ b/src/views/VideoTube/index.tsx @@ -8,7 +8,6 @@ import Comment from "./Comment"; import AddComment from "./AddComment"; import Video from "../../components/JolPlayer"; -import "./index.scss"; import listIcon from "../../assets/icons/list.png"; import { connect } from "react-redux"; import scroll from "../../util/scroll.js"; diff --git a/yarn.lock b/yarn.lock index 8f9e1d3..bd40064 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8004,6 +8004,11 @@ lodash.uniq@^4.5.0: resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loglevel@^1.6.8: version "1.7.1" resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"