diff --git a/src/components/Setting/FontColor/colors.js b/src/components/Setting/FontColor/colors.js index b43a286..bbcb8c3 100644 --- a/src/components/Setting/FontColor/colors.js +++ b/src/components/Setting/FontColor/colors.js @@ -1,9 +1,9 @@ -import React, { useState } from "react"; +import { useState, useEffect } from "react"; import "../../../components/style/colorsComponents.scss"; import "../../../components/style/chosecolor.scss"; import PalletColorOutline from "../../image/PalletColorOutline.svg"; import PalletColorbold from "../../image/PalletColorBold.svg"; -import Chosecolor from "./Colors/chosecolor"; +// import Chosecolor from "./Colors/chosecolor"; import { ButtonDropdown, DropdownToggle, @@ -12,92 +12,92 @@ import { } from "reactstrap"; const Colors = (props) => { - const { setcolor, color } = props; + const { setcolor, color, readyColors } = props; + const [localColorControl, localColorControlSetter] = useState(true); const [dropdownOpen, setOpen] = useState(false); const toggle = () => setOpen(!dropdownOpen); const [isChecked, setIsChecked] = useState(false); - const [Icon, seticon] = useState(PalletColorOutline); - const changeIcone = () => { - seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline); + // const idofelement = readyColors.map((item) => item.id); + const colorMoodHandler = () => { + setIsChecked(!isChecked); + if (Number(localStorage.getItem("colorId")) > 3) { + setcolor(Number(localStorage.getItem("colorId")) - 3); + localStorage.setItem( + "colorId", + Number(localStorage.getItem("colorId")) - 3 + ); + } else { + setcolor(Number(localStorage.getItem("colorId")) + 3); + localStorage.setItem( + "colorId", + Number(localStorage.getItem("colorId")) + 3 + ); + } }; - const changeColorHandler = (value) => { - setcolor(value); + const changeColorHandler = (id) => { + localStorage.setItem("colorId", id); + setcolor(id); }; + useEffect(() => { + if (localStorage.getItem("colorId") !== color && localColorControl) { + localStorage.setItem("colorId", 1); + localColorControlSetter(false); + } + }); + + const darkMood = readyColors.slice(0, 3); + + const lightMood = readyColors.slice(3); + return ( <> -
changeIcone()}> - icon +
+ icon
{isChecked ? ( <> - - - - - - - - - + {darkMood.map((item) => ( + + + + ))} ) : ( <> - - - - - - - - - + {lightMood.map((item) => ( + + + + ))} )} diff --git a/src/components/Setting/FontSize/fontsize.js b/src/components/Setting/FontSize/fontsize.js index 6386c9d..7dba8fc 100644 --- a/src/components/Setting/FontSize/fontsize.js +++ b/src/components/Setting/FontSize/fontsize.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +// import React, { useState } from "react"; import "../../../components/style/fontsize.scss"; function ButtonIncrement(props) { diff --git a/src/components/Setting/FontStyle/Fonts/fonts.js b/src/components/Setting/FontStyle/Fonts/fonts.js index 676a3b3..5c888d1 100644 --- a/src/components/Setting/FontStyle/Fonts/fonts.js +++ b/src/components/Setting/FontStyle/Fonts/fonts.js @@ -1,24 +1,31 @@ import React from "react"; import "../../../style/fonts.scss"; +import { DropdownItem } from "reactstrap"; const Fonts = (props) => { - const { setBookStyle, bookStyle } = props; + const { setBookStyle, bookStyle, dropdownOpen, setDropdownOpen } = props; + + const changeFontStyle = (id) => { + setDropdownOpen(!dropdownOpen) + console.log() + + if (id === 1) { + setBookStyle({ ...bookStyle, fontFamily: "Sans" }); + } else { + setBookStyle({ ...bookStyle, fontFamily: "Nazanin" }); + } + console.log(bookStyle) + }; return ( <> ); diff --git a/src/components/Setting/FontStyle/Fontstyle.js b/src/components/Setting/FontStyle/Fontstyle.js index a159284..58c8be0 100644 --- a/src/components/Setting/FontStyle/Fontstyle.js +++ b/src/components/Setting/FontStyle/Fontstyle.js @@ -7,7 +7,11 @@ const Fontstyle = (props) => { const { bookStyle, setBookStyle } = props; const [dropdownOpen, setDropdownOpen] = useState(false); - const toggle = () => setDropdownOpen((prevState) => !prevState); + const toggle = () => { + + setDropdownOpen(!dropdownOpen) + } + return (
@@ -18,7 +22,7 @@ const Fontstyle = (props) => { - +
diff --git a/src/components/Setting/LineHeight/lineheight.js b/src/components/Setting/LineHeight/lineheight.js index 1748070..9035c44 100644 --- a/src/components/Setting/LineHeight/lineheight.js +++ b/src/components/Setting/LineHeight/lineheight.js @@ -1,4 +1,3 @@ -import React, { useState } from "react"; import lineSpace from "../../image/lineSpace.svg"; import line from "../../image/line.svg"; import "../../../components/style/lineheight.scss"; diff --git a/src/components/Setting/setting.js b/src/components/Setting/setting.js index 2e92e4a..1891cbf 100644 --- a/src/components/Setting/setting.js +++ b/src/components/Setting/setting.js @@ -15,6 +15,7 @@ const Setting = (props) => { // valueList, // defaultValue, // title, + readyColors, setIsChecked, isChecked, setcolor, @@ -34,6 +35,7 @@ const Setting = (props) => { setIsChecked={setIsChecked} isChecked={isChecked} color={color} + readyColors={readyColors} />