From ad5487f722c038d917b963413c04316dff9429ab Mon Sep 17 00:00:00 2001 From: Reza Date: Sat, 6 Nov 2021 12:52:27 +0330 Subject: [PATCH] reza added hdesktop home light mode --- src/components/GradeFilter/index.scss | 10 +-- src/components/GradeFilter/index.tsx | 48 +++++++++---- src/components/HomeSearchBox/index.scss | 10 +-- src/components/HomeSearchBox/index.tsx | 4 +- src/components/Navbar/index.scss | 14 ++-- src/components/Navbar/index.tsx | 2 +- src/constants/colors.scss | 6 +- src/views/Home/Blogs/index.scss | 29 ++++++-- src/views/Home/Blogs/index.tsx | 14 +++- src/views/Home/Books/Book/index.scss | 7 +- src/views/Home/Books/Book/index.tsx | 4 +- src/views/Home/Courses/Course/index.scss | 4 +- src/views/Home/Courses/Course/index.tsx | 4 +- src/views/Home/Courses/index.scss | 87 ++++++++++++++---------- src/views/Home/Courses/index.tsx | 23 ++++--- src/views/Home/Footer/index.scss | 10 +-- src/views/Home/Footer/index.tsx | 2 +- src/views/Home/Header/index.scss | 16 +++++ src/views/Home/Header/index.tsx | 19 ++++-- src/views/Home/index.tsx | 4 +- 20 files changed, 213 insertions(+), 104 deletions(-) diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss index 7edc4b9..3e7375a 100644 --- a/src/components/GradeFilter/index.scss +++ b/src/components/GradeFilter/index.scss @@ -8,10 +8,10 @@ &__box{ display: none !important; } - &__light{ - color: black; - background-color: white; - border: 1px solid black; + &-light{ + color: $gray5; + background-color: $gray13; + 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; } diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx index 798ac72..889f25d 100644 --- a/src/components/GradeFilter/index.tsx +++ b/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({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown, theme}: any) { +function GradeFilter({ + 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(null); - const setDropdown = (e : any) => { + const setDropdown = (e: any) => { e.stopPropagation(); setGradeDropdown(!gradeDropdown); - } + }; return ( -
+

پایه تحصیلی

setDropdown(e)} + onClick={(e: any) => setDropdown(e)} > {selectedGrade ? (

{grades[selectedGrade - 1].name}

@@ -45,10 +59,10 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad {grades.map((item: any, i: any) => (
  • - gradeFilter(item.value) + onClick={() => gradeFilter(item.value)} + className={ + selectedGrade === item.value ? "grade-filter__list--active" : "" } - className={selectedGrade === item.value ? "grade-filter__list--active" : ""} > {item.name}
    • @@ -56,8 +70,16 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad ) : null} -
      - { selectedGrade &&
      } +
        + {selectedGrade && ( +
        + )} {grades.map((item: any, i: any) => (
      • ({ selectedGrade: state.book.selectedGrade, - theme : state.publicApi.theme, + theme: state.publicApi.theme, }), { gradeFilter: book.gradeFilter } )(GradeFilter); diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss index 5792316..6d1f554 100644 --- a/src/components/HomeSearchBox/index.scss +++ b/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: black; - background-color: white !important; + color: $gray5; + border: none !important; + background-color: $gray12 !important; &::placeholder { color: black !important; } diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx index d8db26e..8487e0a 100644 --- a/src/components/HomeSearchBox/index.tsx +++ b/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__dark", + ? "home-search-box-light" + : "home-search-box-dark", ], " " )} diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index 935bfe8..80efaf0 100644 --- a/src/components/Navbar/index.scss +++ b/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; - border: none !important; + background-color: inherit !important; + border: 1px solid $green1 !important; + a{ + color: $green1 !important; + + } } .MuiButton-root{ - color: black !important; + color: $gray5 !important; } } - &__dark{ + &-dark{ background-color: black; } &__container{ diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index c1f266e..4a854c1 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -68,7 +68,7 @@ function Navbar(props: any) {