reza changed home theme

src/components/GradeFilter/index.scss

@@ -8,6 +8,15 @@
   &__box{
     display: none !important;
   }
+  &__light{
+    color: black;
+    background-color: white;
+    border: 1px solid black;
+    .grade-filter__list{
+      background-color: white;
+      border: 1px solid black;
+    }
+  }
   h1{
     margin: 0px;
     padding: 0px 15px;

src/components/GradeFilter/index.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { book } from "../../redux/actions";
-
+import _ from 'lodash';
 import dropdown from "../../assets/icons/dropdown.png";
 
 
-function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown}: any) {
+function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown, theme}: any) {
   const [arrowTop, setArrowTop] = useState(false);
 
   useEffect(() => {
@@ -20,13 +20,13 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
   }
 
   return (
-    <section className="grade-filter d-flex align-items-center">
+    <section className={_.join(["grade-filter d-flex align-items-center", theme === 'light' ? 'grade-filter__light' : 'grade-filter__dark']," ")}>
       <h1 className="d-flex align-items-center">
         پایه تحصیلی
         <span className="desktop"></span>
       </h1>
       <div
-        className="grade-filter__box d-flex"
+        className="grade-filter__box mobile"
         onClick={(e : any) => setDropdown(e)}
       >
         {selectedGrade ? (
@@ -75,6 +75,7 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
 export default connect(
   (state: any) => ({
     selectedGrade: state.book.selectedGrade,
+    theme : state.publicApi.theme,
   }),
   { gradeFilter: book.gradeFilter }
 )(GradeFilter);

src/components/HomeSearchBox/index.scss

@@ -5,24 +5,56 @@
   * {
     transition: all 0.5s;
   }
+  &__dark{
+    form {
+      button {
+        background-color: $gray1;
+        
+      }
+      input {
+        background-color: $gray5;
+        border: 0px;
+        color: $gray6;
+        &::placeholder {
+          color: $gray6;
+        }
+        &:focus {
+          outline: 2px solid $green !important;
+        }
+      }
+    }
+  }
+  &__light{
+    form {
+      button {
+        background-color: $gray1;
+        border: none;
+      }
+      input {
+        border: 1px solid $gray5 !important;
+        color: black;
+        background-color: white !important;
+        &::placeholder {
+          color: black !important;
+        }
+        &:focus {
+          outline: 2px solid $green !important;
+        }
+      }
+    }
+  }
   form {
     button {
-      background-color: $gray1;
       margin-right: 3px;
       border-top-left-radius: 9px;
       border-bottom-left-radius: 9px;
-      border: 0px;
     }
     input {
       width: 100%;
-      background-color: $gray5;
-      border: 0px;
       border-top-right-radius: 9px;
       border-bottom-right-radius: 9px;
-      color: $gray6;
       &::placeholder {
         padding-right: 0px;
-        color: $gray6;
         opacity: 0.4;
       }
       &:focus {
@@ -195,7 +227,7 @@
         background: $gray1;
         &::placeholder {
           font-size: calc(100vw / 34);
-          color: white !important;
+          color: white;
         }
       }
       button {

src/components/HomeSearchBox/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import _ from "lodash";
 import { book } from "../../redux/actions";
 import search from "../../assets/icons/search.png";
 import voice from "../../assets/icons/voice.png";
@@ -11,6 +12,7 @@ function HomeSearchBox({
   setInputValue,
   sortFilter,
   selectedSort,
+  theme,
 }: any) {
   const submitInput = (value: any) => {
     setInputValue(value);
@@ -21,7 +23,17 @@ function HomeSearchBox({
     sortFilter({ search: inputValue, sort: value });
   };
   return (
-    <section className="home-search-box d-flex flex-column align-items-center">
+    <section
+      className={_.join(
+        [
+          "home-search-box d-flex flex-column align-items-center",
+          theme === "light"
+            ? "home-search-box__light"
+            : "home-search-box__dark",
+        ],
+        " "
+      )}
+    >
       <form className="d-flex" onSubmit={(e) => e.preventDefault()}>
         <input
           type="search"
@@ -73,6 +85,7 @@ function HomeSearchBox({
 export default connect(
   (state: any) => ({
     selectedSort: state.book.selectedSort,
+    theme: state.publicApi.theme,
   }),
   { sortFilter: book.sortFilter }
 )(HomeSearchBox);

src/components/Navbar/index.scss

@@ -1,13 +1,21 @@
 .nav{
   width: 100%;
-  background-color: black;
   height: 60px;
   padding: 0px 10px;
   position: fixed !important;
   top: 0px !important;
   left: 0px;
   z-index: 150;
-  
+  &__light{
+    background-color: white;
+    .nav___share{
+      background-color: $gray1 !important;
+      border: none !important;
+    }
+  }
+  &__dark{
+    background-color: black;
+  }
   &__container{
     width: 100%;
     font-family: numeralLight;
@@ -115,7 +123,6 @@
 
 @media screen and (min-width: 641px) and (max-width: 1007px){
   .nav{
-    background-color: black;
     &__container{
       max-width: 900px;
       &--buttons{
@@ -137,7 +144,6 @@
 
 @media screen and (max-width: 640px){
   .nav{
-    background-color: black;
     &__container{
       max-width: 500px;
       &--buttons{

src/components/Navbar/index.tsx

@@ -6,8 +6,10 @@ import NavbarDrawer from "../NavbarDrawer/NavbarDrawer";
 import clsx from "clsx";
 import proxy from "../../redux/proxy";
 import { makeStyles } from "@mui/styles";
-import Menu from '../Menu/index';
+import Menu from "../Menu/index";
-import logoIcon from '../../assets/icons/logo.png';
+import logoIcon from "../../assets/icons/logo.png";
+import { connect } from "react-redux";
+import _ from "lodash";
 
 const useStyles = makeStyles({
   list: {
@@ -20,7 +22,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function Navbar(props: any) {
+function Navbar(props: any) {
   const status = proxy.status();
   const classes = useStyles();
   const [state, setState] = useState({
@@ -30,7 +32,7 @@ export default function Navbar(props: any) {
     right: false,
     searchFlag: false,
   });
-  const { page } = props;
+  const { page, theme } = props;
 
   const toggleDrawer = (anchor: any, open: any) => (event: any) => {
     console.log("on");
@@ -63,11 +65,18 @@ export default function Navbar(props: any) {
 
   const userStatus = proxy.status();
   return (
-    <nav className="nav align-items-center justify-content-center">
+    <nav
+      className={_.join([
+        "nav align-items-center justify-content-center",
+        theme === "light" ? "nav__light" : "nav__dark",
+      ], " ")}
+    >
       <div className="nav__container d-flex align-items-center justify-content-between">
         <ul className="nav__container--links desktop align-items-center">
           <li className="nav___logo d-flex align-items-center">
-            <Link to="/"><img src={logoIcon} alt="" /></Link>
+            <Link to="/">
+              <img src={logoIcon} alt="" />
+            </Link>
             <span></span>
           </li>
           <li>
@@ -76,7 +85,7 @@ export default function Navbar(props: any) {
         </ul>
         <MenuRoundedIcon
           className="mobile"
-          style={{ color: "white", fontSize: 40 }}
+          style={{ color: theme === "dark" ? "white" : "black", fontSize: 40 }}
           onClick={toggleDrawer("right", true)}
         />
         <ul className="nav__container--buttons d-flex align-items-center">
@@ -102,6 +111,10 @@ export default function Navbar(props: any) {
   );
 }
 
+export default connect((state: any) => ({
+  theme: state.publicApi.theme,
+}))(Navbar);
+
 Navbar.defaultProps = {
   grades: [
     {
@@ -153,4 +166,4 @@ Navbar.defaultProps = {
       value: 12,
     },
   ],
-}
+};

src/views/About/index.tsx

@@ -16,7 +16,6 @@ function About({ fury, advantages, keywords, keywords2, first, theme, setTheme }
         "about main d-flex flex-column",
         theme === "dark" ? "main__light" : "main__dark",
       ], " ")}
-      onClick={() => setTheme('dark')}
     >
       <Navbar />
       <main className="d-flex flex-column align-items-center">

src/views/Home/Books/Book/index.scss

@@ -4,6 +4,12 @@
   border: 1px solid black;
   padding: 10px;
   border-radius: 10px;
+  &__light{
+    border: none;
+    h2{
+      color: black !important;
+    }
+  }
   img{
     border-radius: 8px;
   }

src/views/Home/Books/Book/index.tsx

@@ -1,18 +1,36 @@
 import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import _ from "lodash";
 
-export default function Book(props: any) {
+function Book(props: any) {
-  const { data } = props;
+  const { data, theme } = props;
   const desc: any = {
-    "ریاضی": 'ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده',
+    ریاضی: "ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده",
-    'علوم تجربی': "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه",
+    "علوم تجربی": "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه",
-    'زیست شناسی': "زیست را در دانوین باید زیست",
+    "زیست شناسی": "زیست را در دانوین باید زیست",
-    'شیمی': 'شیمی اینجا می فهمه کیمیا یعنی چی',
+    شیمی: "شیمی اینجا می فهمه کیمیا یعنی چی",
-    'فیزیک': "با دانوین فیزیکو با یه لنز جدید ببنید"
+    فیزیک: "با دانوین فیزیکو با یه لنز جدید ببنید",
-  }
+  };
   return (
-    <Link to={`/courses/${data.id}`} className="home-books-book d-flex flex-column" draggable={'false'}>
+    <Link
-      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} />
+      to={`/courses/${data.id}`}
+      className={_.join(
+        [
+          "home-books-book d-flex flex-column",
+          theme === "light"
+            ? "home-books-book__light"
+            : "home-books-book__dark",
+        ],
+        " "
+      )}
+      draggable={"false"}
+    >
+      <img
+        src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+        alt={data.name}
+        draggable={"false"}
+      />
       <footer className="d-flex">
         <div className="home-books-book__info d-flex flex-column">
           <h2>{data.name}</h2>
@@ -22,3 +40,7 @@ export default function Book(props: any) {
     </Link>
   );
 }
+
+export default connect((state: any) => ({
+  theme: state.publicApi.theme,
+}))(Book);

src/views/Home/Books/index.tsx

@@ -30,13 +30,13 @@ function Books({list, number}: any) {
           showArrows={true}
           pagination={false}
         >
-          {list?.map((item: Object, i: Number) => (
+          {list?.map((item: Object, i: any) => (
             <Book data={item} key={i} />
           ))}
         </Carousel>
       ) : (
         <div className="home-books__list d-flex">
-          {list?.map((item: Object, i: Number) => (
+          {list?.map((item: Object, i: any) => (
             <Book data={item} key={i} />
           ))}
         </div>

src/views/Home/Courses/Course/index.scss

@@ -4,6 +4,12 @@
   transition: all 0.5s;
   border: 1px solid black;
   border-radius: 10px;
+  &__light{
+    border: none;
+    h2{
+      color: black !important;
+    }
+  }
   img{
     border-radius: 8px;
     margin: 0px auto;

src/views/Home/Courses/Course/index.tsx

@@ -1,15 +1,35 @@
 import React from "react";
 import Avatar from "@mui/material/Avatar";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import _ from "lodash";
 
-
+function Course(props: any) {
-export default function Course(props: any) {
+  const { data, theme } = props;
-  const { data } = props;
   return (
-    <Link to={`/courses/${data.id}`} className="home-courses-course d-flex flex-column" draggable={'false'}>
+    <Link
-      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} />
+      to={`/courses/${data.id}`}
+      className={_.join(
+        [
+          "home-courses-course d-flex flex-column",
+          theme === "light"
+            ? "home-courses-course__light"
+            : "home-courses-course__dark",
+        ],
+        " "
+      )}
+      draggable={"false"}
+    >
+      <img
+        src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+        alt={data.name}
+        draggable={"false"}
+      />
       <footer className="d-flex">
-        <Avatar src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} style={{ width: 40, height: 40 }} />
+        <Avatar
+          src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+          style={{ width: 40, height: 40 }}
+        />
         <div className="home-courses-course__info d-flex flex-column">
           <h2>{data.name}</h2>
           {/* {window.innerWidth > 1007 ? (
@@ -35,3 +55,7 @@ export default function Course(props: any) {
     </Link>
   );
 }
+
+export default connect((state: any) => ({
+  theme: state.publicApi.theme,
+}))(Course);

src/views/Home/Courses/index.tsx

@@ -36,13 +36,13 @@ function Courses({ number, courses, selectedSort }: any) {
           showArrows={true}
           pagination={false}
         >
-          {courses?.map((item: Object, i: Number) => (
+          {courses?.map((item: Object, i:any) => (
             <Course data={item} key={i} />
           ))}
         </Carousel>
       ) : (
         <div className="home-courses__list d-flex">
-          {courses?.map((item: Object, i: Number) => (
+          {courses?.map((item: Object, i: any) => (
             <Course data={item} key={i} />
           ))}
         </div>

src/views/Home/Footer/index.scss

@@ -2,6 +2,12 @@
   width: 100%;
   font-family: numeralLight;
   background-color: #1a1a1a;
+  &__light{
+    background-color: white;
+    p,a{
+      color: black !important;
+    }
+  }
   &__container{
     width: 100%;
     margin : 0px auto;

src/views/Home/Footer/index.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 import scroll from "../../../util/scroll";
-
+import _ from 'lodash';
 
 export default function Footer(props: any) {
-  const { links } = props;
+  const { links, theme } = props;
   useEffect(() => {
     scroll.goToTop()
   }, []);
   return (
-    <footer className="footer desktop">
+    <footer className={_.join(["footer desktop", theme === 'light' ? 'footer__light' : 'footer__dark'], " ")}>
       <div className="footer__container d-flex justify-content-between align-items-center">
         <ul className="d-flex">
           {links.map((item: any, i: any) =>

src/views/Home/index.tsx

@@ -13,6 +13,7 @@ import scroll from "../../util/scroll";
 import Loader from "../../components/Loader";
 import { connect } from "react-redux";
 import { book, publicApi } from "../../redux/actions";
+import _ from 'lodash';
 
 function Home({
   courseList,
@@ -27,6 +28,7 @@ function Home({
   getHeader,
   bookLoading,
   publicLoading,
+  theme
 }: any) {
   const [grade, setGrade] = useState(null);
   const [vocal, setVocal] = useState(false);
@@ -47,7 +49,7 @@ function Home({
   return (
     <>
       <div
-        className="home main d-flex flex-column"
+        className={_.join(["home main d-flex flex-column", theme === 'dark' ? 'main__dark' : 'main__light'], " ")}
         style={{
           filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "",
         }}
@@ -61,6 +63,7 @@ function Home({
           setVocal={setVocal}
           inputValue={inputValue}
           setInputValue={setInputValue}
+          theme={theme}
         />
         <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} />
         <GradeFilter
@@ -69,11 +72,12 @@ function Home({
           setGrade={setGrade}
           gradeDropdown={gradeDropdown}
           setGradeDropdown={setGradeDropdown}
+          theme={theme}
         />
-        <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} />
+        <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} theme={theme} />
-        <Blogs />
+        <Blogs theme={theme} />
         <AppDownload />
-        <Footer />
+        <Footer theme={theme} />
       </div>
       {vocal ? (
         <Vocal setVocal={setVocal} setInputValue={setInputValue} />
@@ -96,6 +100,7 @@ export default connect(
     headerData: state.publicApi.header,
     bookLoading: state.book.loading,
     publicLoading: state.publicApi.loading,
+    theme : state.publicApi.theme,
   }),
   {
     getCourseList: book.list,