reza added hdesktop home light mode

src/components/GradeFilter/index.scss

@@ -8,10 +8,10 @@
   &__box{
     display: none !important;
   }
-  &__light{
+  &-light{
-    color: black;
+    color: $gray5;
-    background-color: white;
+    background-color: $gray13;
-    border: 1px solid black;
+    border: none;
     .grade-filter__list{
       background-color: white;
       border: 1px solid black;
@@ -37,7 +37,7 @@
       height: 100%;
       width : calc(100% / 12);
       transition: right 0.5s;
-      background-color: $green;
+      background-color: $green5;
       box-shadow: 0px 0px 20px $green;
       z-index: 50;
     }

src/components/GradeFilter/index.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { book } from "../../redux/actions";
-import _ from 'lodash';
+import _ from "lodash";
 import dropdown from "../../assets/icons/dropdown.png";
 
-
+function GradeFilter({
-function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown, theme}: any) {
+  selectedGrade,
+  gradeFilter,
+  grades,
+  gradeDropdown,
+  setGradeDropdown,
+  theme,
+}: any) {
   const [arrowTop, setArrowTop] = useState(false);
 
   useEffect(() => {
@@ -14,20 +20,28 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
 
   const mobileList = useRef<HTMLUListElement>(null);
 
-  const setDropdown = (e : any) => {
+  const setDropdown = (e: any) => {
     e.stopPropagation();
     setGradeDropdown(!gradeDropdown);
-  }
+  };
 
   return (
-    <section className={_.join(["grade-filter d-flex align-items-center", theme === 'light' ? 'grade-filter__light' : 'grade-filter__dark']," ")}>
+    <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 mobile"
-        onClick={(e : any) => setDropdown(e)}
+        onClick={(e: any) => setDropdown(e)}
       >
         {selectedGrade ? (
           <h2>{grades[selectedGrade - 1].name}</h2>
@@ -45,10 +59,10 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
           {grades.map((item: any, i: any) => (
             <li
               key={i}
-              onClick={() =>
+              onClick={() => gradeFilter(item.value)}
-                gradeFilter(item.value)
+              className={
+                selectedGrade === item.value ? "grade-filter__list--active" : ""
               }
-              className={selectedGrade === item.value ? "grade-filter__list--active" : ""}
             >
               {item.name}
             </li>
@@ -56,8 +70,16 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
         </ul>
       ) : null}
 
-      <ul className="desktop align-items-center"  ref={mobileList}>
+      <ul className="desktop align-items-center" ref={mobileList}>
-        { selectedGrade && <figure style={{ right : (mobileList as any).current?.offsetWidth / 12 * (selectedGrade - 1)  }}></figure> }
+        {selectedGrade && (
+          <figure
+            style={{
+              right:
+                ((mobileList as any).current?.offsetWidth / 12) *
+                (selectedGrade - 1),
+            }}
+          ></figure>
+        )}
         {grades.map((item: any, i: any) => (
           <li
             key={i}
@@ -75,7 +97,7 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
 export default connect(
   (state: any) => ({
     selectedGrade: state.book.selectedGrade,
-    theme : state.publicApi.theme,
+    theme: state.publicApi.theme,
   }),
   { gradeFilter: book.gradeFilter }
 )(GradeFilter);

src/components/HomeSearchBox/index.scss

@@ -5,7 +5,7 @@
   * {
     transition: all 0.5s;
   }
-  &__dark{
+  &-dark{
     form {
       button {
         background-color: $gray1;
@@ -24,16 +24,16 @@
       }
     }
   }
-  &__light{
+  &-light{
     form {
       button {
         background-color: $gray1;
         border: none;
       }
       input {
-        border: 1px solid $gray5 !important;
+        color: $gray5;
-        color: black;
+        border: none !important;
-        background-color: white !important;
+        background-color: $gray12 !important;
         &::placeholder {
           color: black !important;
         }

src/components/HomeSearchBox/index.tsx

@@ -28,8 +28,8 @@ function HomeSearchBox({
         [
           "home-search-box d-flex flex-column align-items-center",
           theme === "light"
-            ? "home-search-box__light"
+            ? "home-search-box-light"
-            : "home-search-box__dark",
+            : "home-search-box-dark",
         ],
         " "
       )}

src/components/Navbar/index.scss

@@ -6,17 +6,21 @@
   top: 0px !important;
   left: 0px;
   z-index: 150;
-  &__light{
+  &-light{
     background-color: white;
     .nav___share{
-      background-color: $gray1 !important;
+      background-color: inherit !important;
-      border: none !important;
+      border: 1px solid $green1 !important;
+      a{
+        color: $green1 !important;
+
+      }
     }
     .MuiButton-root{
-      color: black !important;
+      color: $gray5 !important;
     }
   }
-  &__dark{
+  &-dark{
     background-color: black;
   }
   &__container{

src/components/Navbar/index.tsx

@@ -68,7 +68,7 @@ function Navbar(props: any) {
     <nav
       className={_.join([
         "nav align-items-center justify-content-center",
-        theme === "light" ? "nav__light" : "nav__dark",
+        theme === "light" ? "nav-light" : "nav-dark",
       ], " ")}
     >
       <div className="nav__container d-flex align-items-center justify-content-between">

src/constants/colors.scss

@@ -4,20 +4,22 @@ $gray1 : #383838;
 $gray2 : #6c6c6c;
 $gray3 : rgb(143, 142, 142);
 $gray4 : #666666;
-$gray5 : #46454a;
+$gray5 : #555;
 $gray6 : #ddd;
 $gray7 : #797979;
 $gray8 : #272727;
 $gray9 : #b3b3b3;
 $gray10 : #cccccc;
 $gray11 : #969696;
-$gray12 : #e3e3e3;
+$gray12 : #e9e9e9;
+$gray13 : #f6f6f6;
 // green
 $green : #4dd35b;
 $green1 : #81C342;
 $green2 : #6cbe44;
 $green3 : #00cc69;
 $green4 : #84de56;
+$green5 : #9cdf52;
 
 // blue
 $blue : #a2b4cb;

src/views/Home/Blogs/index.scss

@@ -7,6 +7,31 @@
   margin-top: 10px;
   padding: 0px 10px 50px;
   font-family: numeralLight;
+  &-dark{
+    header{
+      margin-bottom: 20px;
+      h1{
+        font-family: numeralMedium;
+        color: white;
+        margin: 0px;
+      }
+      span{
+        color: $gray;
+      }
+  
+    }
+  }
+  &-light{
+    header{
+      h1{
+        color: $green;
+      }
+      span{
+
+      }
+    }
+  }
+
   &__list{
     width: 100%;
   }
@@ -14,12 +39,8 @@
     margin-bottom: 20px;
     h1{
       font-family: numeralMedium;
-      color: white;
       margin: 0px;
     }
-    span{
-      color: $gray;
-    }
 
   }
 

src/views/Home/Blogs/index.tsx

@@ -4,7 +4,7 @@ import { Carousel } from "3d-react-carousal";
 import Blog from "./Blog/index";
 import { connect, useSelector } from "react-redux";
 import { blog } from "../../../redux/actions";
-
+import _ from "lodash";
 
 function Blogs(props: any) {
   const slideNumberHandler = () => {
@@ -22,8 +22,18 @@ function Blogs(props: any) {
   useEffect(() => {
     props.getList();
   }, []);
+
+  const light = props.theme === "light";
   return (
-    <section className="home-blogs d-flex flex-column">
+    <section
+      className={_.join(
+        [
+          "home-blogs d-flex flex-column",
+          light ? "home-blogs-light" : "home-blogs-dark",
+        ],
+        " "
+      )}
+    >
       <header className="d-flex flex-column">
         <h1>پیشنهادهای داغ برای شما</h1>
       </header>

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

@@ -2,10 +2,11 @@
   cursor: pointer;
   transition: all 0.5s;
   border: 1px solid black;
-  padding: 10px;
+  margin: 10px;
   border-radius: 10px;
-  &__light{
+  &-light{
-    border: none;
+    border : none !important;
+    border-bottom: 1px solid $gray12 !important;
     h2{
       color: black !important;
     }

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

@@ -19,8 +19,8 @@ function Book(props: any) {
         [
           "home-books-book d-flex flex-column",
           theme === "light"
-            ? "home-books-book__light"
+            ? "home-books-book-light"
-            : "home-books-book__dark",
+            : "home-books-book-dark",
         ],
         " "
       )}

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

@@ -4,10 +4,10 @@
   transition: all 0.5s;
   border: 1px solid black;
   border-radius: 10px;
-  &__light{
+  &-light{
     border: none;
     h2{
-      color: black !important;
+      color: $gray5 !important;
     }
   }
   img{

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

@@ -13,8 +13,8 @@ function Course(props: any) {
         [
           "home-courses-course d-flex flex-column",
           theme === "light"
-            ? "home-courses-course__light"
+            ? "home-courses-course-light"
-            : "home-courses-course__dark",
+            : "home-courses-course-dark",
         ],
         " "
       )}

src/views/Home/Courses/index.scss

@@ -1,29 +1,45 @@
-@import './Course/index.scss';
+@import "./Course/index.scss";
 
 .home-courses {
   width: 100%;
   margin: 0px auto;
-  border-top: 1px solid $gray8;
-  border-bottom: 1px solid $gray8;
   position: relative;
-  margin-top: 30px;
+  padding: 20px 10px 30px;
-  padding: 20px 10px 50px;
   font-family: numeralLight;
-  header{
+  &-dark {
+    border-top: 1px solid $gray8;
+    border-bottom: 1px solid $gray8;
+  }
+  &-light{
+    border-top: none !important;
+    border-bottom: 1px solid $gray12;
+    header{
+      h1{
+        color : $green4 !important;
+      }
+      a{
+        color: $green !important;
+      }
+    }
+    .home-courses__more{
+      background-color: white !important;
+    }
+  }
+  header {
     margin-bottom: 20px;
-    h1{
+    h1 {
       font-family: numeralMedium;
       color: white;
       margin-bottom: 10px;
     }
-    span{
+    span {
       color: $gray;
     }
-    a{
+    a {
       display: none;
     }
   }
-  &__more{
+  &__more {
     position: absolute;
     bottom: 0px;
     left: 50%;
@@ -31,13 +47,13 @@
     background-color: black;
     padding-right: 5px;
     color: $green;
-    &:hover{
+    &:hover {
       color: $green;
     }
   }
-  &__list{
+  &__list {
     scrollbar-width: 0px;
-    &::-webkit-scrollbar{
+    &::-webkit-scrollbar {
       display: none;
       width: 0px;
     }
@@ -47,15 +63,15 @@
 @media screen and (min-width: 1441px) {
   .home-courses {
     max-width: 1350px;
-    header{
+    header {
-      h1{
+      h1 {
         font-size: 20px;
       }
-      span{
+      span {
         font-size: 12px;
       }
     }
-    &__more{
+    &__more {
       font-size: 13px;
     }
   }
@@ -64,15 +80,15 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-courses {
     max-width: 1250px;
-    header{
+    header {
-      h1{
+      h1 {
         font-size: calc(100vw / 75);
       }
-      span{
+      span {
         font-size: calc(100vw / 120);
       }
     }
-    &__more{
+    &__more {
       font-size: calc(100vw / 100);
     }
   }
@@ -81,22 +97,21 @@
 @media screen and (min-width: 641px) and (max-width: 1007px) {
   .home-courses {
     max-width: 900px;
-    header{
+    header {
-      h1{
+      h1 {
         font-size: calc(100vw / 40);
       }
-      span{
+      span {
         font-size: calc(100vw / 90);
       }
     }
-    &__more{
+    &__more {
       font-size: calc(100vw / 90);
     }
-    &__list{
+    &__list {
       overflow-x: scroll;
     }
   }
-
 }
 
 @media screen and (max-width: 640px) {
@@ -105,29 +120,29 @@
     border: 0px !important;
     padding: 0px !important;
     margin-top: 15px;
-    header{
+    header {
-      h1{
+      h1 {
         font-size: calc(100vw / 25);
         margin-bottom: 10px;
       }
-      span{
+      span {
         font-size: calc(100vw / 34);
       }
-      a{
+      a {
         display: flex;
         color: $green;
         font-size: calc(100vw / 28);
       }
     }
-    &__more{
+    &__more {
-      display : none !important;
+      display: none !important;
     }
-    &__list{
+    &__list {
       overflow-x: scroll;
-      &::-webkit-scrollbar{
+      &::-webkit-scrollbar {
         scrollbar-width: 0px;
         display: none;
       }
     }
   }
-}
+}

src/views/Home/Courses/index.tsx

@@ -3,9 +3,10 @@ import Carousel from "react-elastic-carousel";
 import Course from "./Course/index";
 import { Link } from "react-router-dom";
 import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
+import _ from "lodash";
 
-function Courses({ number, courses, selectedSort }: any) {
+function Courses({ number, courses, selectedSort, theme }: any) {
   const slideNumberHandler = () => {
     if (window.innerWidth >= 1440) {
       return 5;
@@ -17,16 +18,20 @@ function Courses({ number, courses, selectedSort }: any) {
       return 2;
     }
   };
+  const light = theme === "light";
   return (
-    <section className="home-courses d-flex flex-column">
+    <section
+      className={_.join([
+        "home-courses d-flex flex-column",
+        light ? "home-courses-light" : "home-courses-dark",
+      ], " ")}
+    >
       <header className="d-flex justify-content-between">
         <div className="d-flex flex-column">
           <h1>{selectedSort}</h1>
           {/* <span>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد.</span> */}
         </div>
-        <Link to="/">
+        <Link to="/">بیشتر</Link>
-          بیشتر
-        </Link>
       </header>
       {window.innerWidth > 1007 ? (
         <Carousel
@@ -36,7 +41,7 @@ function Courses({ number, courses, selectedSort }: any) {
           showArrows={true}
           pagination={false}
         >
-          {courses?.map((item: Object, i:any) => (
+          {courses?.map((item: Object, i: any) => (
             <Course data={item} key={i} />
           ))}
         </Carousel>
@@ -49,7 +54,7 @@ function Courses({ number, courses, selectedSort }: any) {
       )}
 
       <Link
-        className="home-courses__more align-items-center mobile"
+        className="home-courses__more align-items-center desktop"
         to="/courses"
       >
         مشاهده بیشتر{" "}
@@ -61,4 +66,4 @@ function Courses({ number, courses, selectedSort }: any) {
 
 export default connect((state: any) => ({
   selectedSort: state.book.selectedSort,
-}))(Courses)
+}))(Courses);

src/views/Home/Footer/index.scss

@@ -1,13 +1,15 @@
 .footer{
   width: 100%;
   font-family: numeralLight;
-  background-color: #1a1a1a;
+  &-light{
-  &__light{
+    background-color: $gray13;
-    background-color: white;
     p,a{
-      color: black !important;
+      color: $gray5 !important;
     }
   }
+  &-dark{
+    background-color: #1a1a1a;
+  }
   &__container{
     width: 100%;
     margin : 0px auto;

src/views/Home/Footer/index.tsx

@@ -10,7 +10,7 @@ function Footer(props: any) {
     scroll.goToTop()
   }, []);
   return (
-    <footer className={_.join(["footer desktop", theme === 'light' ? 'footer__light' : 'footer__dark'], " ")}>
+    <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/Header/index.scss

@@ -3,6 +3,22 @@
   width: 100%;
   margin: 0px auto;
   margin-top: 10px;
+  &-dark{
+    .carousel-indicators{
+      li{
+        background-color: inherit !important;
+      }
+    }
+  }
+  &-light{
+    .carousel-indicators{
+      li{
+        padding: 5px;
+        border-radius: 5px !important;
+        background-color: rgba(255, 255, 255, 0.281) !important;
+      }
+    }
+  }
   span {
     height: 80%;
     width: 8px;

src/views/Home/Header/index.tsx

@@ -1,17 +1,28 @@
 import React from "react";
-import Avatar from '@mui/material/Avatar';
+import Avatar from "@mui/material/Avatar";
+import _ from "lodash";
 
 export default function Header(props: any) {
-  const { headerData } = props;
+  const { headerData, theme } = props;
   return (
-    <header className="home-header">
+    <header
+      className={_.join(
+        [
+          "home-header",
+          theme === "light" ? "home-header-light" : "home-header-dark",
+        ],
+        " "
+      )}
+    >
       <div id="myCarousel" className="carousel slide" data-ride="carousel">
         <div className="carousel-inner">
           {headerData.map((item: any, i: any) => (
             <div
               className={i === 0 ? "item active" : "item"}
               style={{
-                background: `url(${"https://dnvn.ir/api/v1/file/" + item.fileId})`,
+                background: `url(${
+                  "https://dnvn.ir/api/v1/file/" + item.fileId
+                })`,
               }}
               // dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
               key={i}

src/views/Home/index.tsx

@@ -57,7 +57,7 @@ function Home({
       >
         <Navbar />
         <div className="desktop">
-          <Header headerData={headerData} />
+          <Header headerData={headerData} theme={theme} />
         </div>
         <HomeSearchBox
           setVocal={setVocal}
@@ -65,7 +65,7 @@ function Home({
           setInputValue={setInputValue}
           theme={theme}
         />
-        <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} />
+        <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} theme={theme} />
         <GradeFilter
           grades={grades}
           grade={grade}