diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss index 22b16e3..7edc4b9 100644 --- a/src/components/GradeFilter/index.scss +++ b/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; diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx index a7af492..798ac72 100644 --- a/src/components/GradeFilter/index.tsx +++ b/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 ( -
+

پایه تحصیلی

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); diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss index 591eaf4..5792316 100644 --- a/src/components/HomeSearchBox/index.scss +++ b/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 { diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx index ad38f73..d8db26e 100644 --- a/src/components/HomeSearchBox/index.tsx +++ b/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 ( -
+
e.preventDefault()}> ({ selectedSort: state.book.selectedSort, + theme: state.publicApi.theme, }), { sortFilter: book.sortFilter } )(HomeSearchBox); diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index 4029df2..a76b824 100644 --- a/src/components/Navbar/index.scss +++ b/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{ diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 3b630db..c1f266e 100644 --- a/src/components/Navbar/index.tsx +++ b/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 logoIcon from '../../assets/icons/logo.png'; +import Menu from "../Menu/index"; +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 ( -