setting colors

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 (
     <>
       <label class="switch">
-        <input type="checkbox" onChange={() => setIsChecked(!isChecked)} />
+        <input type="checkbox" onChange={colorMoodHandler} />
         <span class="slider round"></span>
       </label>
       <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
         <DropdownToggle>
-          <div onClick={() => changeIcone()}>
-            <img src={Icon} set="curved" className="palette-icon" alt="icon" />
+          <div>
+            <img
+              src={dropdownOpen ? PalletColorbold : PalletColorOutline}
+              className="palette-icon"
+              alt="icon"
+            />
           </div>
         </DropdownToggle>
         <DropdownMenu>
           {isChecked ? (
             <>
+              {darkMood.map((item) => (
                 <DropdownItem>
                   <button
-                  onClick={() => changeColorHandler("dark-white")}
+                    onClick={() => changeColorHandler(item.id)}
                     id="red-btn-d"
-                  className="btn-color"
-                >
-                  الف
-                </button>
-              </DropdownItem>
-              <DropdownItem>
-                <button
-                  onClick={() => changeColorHandler("dark-brown")}
-                  id="green-btn-d"
-                  className="btn-color"
-                >
-                  الف
-                </button>
-              </DropdownItem>
-              <DropdownItem>
-                <button
-                  onClick={() => changeColorHandler("dark-blue")}
-                  id="blue-btn-d"
-                  className="btn-color"
+                    style={{ backgroundColor: item.bgColor, color: item.color }}
+                    className={"btn-color"}
                   >
                     الف
                   </button>
                 </DropdownItem>
+              ))}
             </>
           ) : (
             <>
+              {lightMood.map((item) => (
                 <DropdownItem>
                   <button
-                  onClick={() => changeColorHandler("light-white")}
-                  id="red-btn-w"
-                  className="btn-color"
-                >
-                  الف
-                </button>
-              </DropdownItem>
-              <DropdownItem>
-                <button
-                  onClick={() => changeColorHandler("light-brown")}
-                  id="green-btn-w"
-                  className="btn-color"
-                >
-                  الف
-                </button>
-              </DropdownItem>
-              <DropdownItem>
-                <button
-                  onClick={() => changeColorHandler("light-blue")}
-                  id="blue-btn-w"
-                  className="btn-color"
+                    onClick={() => changeColorHandler(item.id)}
+                    id="red-btn-d"
+                    style={{ backgroundColor: item.bgColor, color: item.color }}
+                    className={"btn-color"}
                   >
                     الف
                   </button>
                 </DropdownItem>
+              ))}
             </>
           )}
         </DropdownMenu>

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) {

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 (
     <>
       <nav className="nav-btn">
-        <button
-          onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Sans" })}
-          className="btn-font"
-        >
-          سانس
-        </button>
-        <button
-          onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Nazanin" })}
-          className="btn-font"
-        >
-          نازنین
-        </button>
+        <DropdownItem onClick={() => changeFontStyle(1)}>
+          <button className="btn-font">سانس</button>
+        </DropdownItem>
+        <DropdownItem onClick={() => changeFontStyle(2)}>
+          <button className="btn-font">نازنین</button>
+        </DropdownItem>
       </nav>
     </>
   );

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 (
     <div>
@@ -18,7 +22,7 @@ const Fontstyle = (props) => {
           </button>
         </DropdownToggle>
         <DropdownMenu className="nav-menu-font">
-          <Fonts bookStyle={bookStyle} setBookStyle={setBookStyle} />
+          <Fonts setDropdownOpen={setDropdownOpen} dropdownOpen={dropdownOpen} bookStyle={bookStyle} setBookStyle={setBookStyle} />
         </DropdownMenu>
       </Dropdown>
     </div>

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";

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}
               />
             </nav>
             <nav className="nav-items">

src/components/contextMenu/ColorItem.tsx

@@ -55,12 +55,12 @@ const Color = styled.div<{ color: string }>`
   opacity: 0.4;
 `;
 
-const Message = styled.span`
-  width: 48px;
-  font-size: 14px;
-  color: #ddd;
-  line-height: 20px;
-`;
+// const Message = styled.span`
+//   width: 48px;
+//   font-size: 14px;
+//   color: #ddd;
+//   line-height: 20px;
+// `;
 
 interface Props {
   color: string;

src/components/nav/BookInfo.tsx

@@ -18,13 +18,13 @@ const Container = styled.div`
   padding: 24px;
 `;
 
-const BookImg = styled.img`
-  margin-right: 12px;
-  width: 44%;
-  min-width: 120px;
-  border-radius: 4px;
-  background: #eee;
-`;
+// const BookImg = styled.img`
+//   margin-right: 12px;
+//   width: 44%;
+//   min-width: 120px;
+//   border-radius: 4px;
+//   background: #eee;
+// `;
 
 const BookContent = styled.div`
   flex-grow: 1;

src/components/style/fontStyle.scss

@@ -1,6 +1,7 @@
 @import "./colors";
 
 .nav-menu-font {
+  padding: 0 !important;
   min-width: 3.5rem !important;
   transform: translate3d(-5px, 24px, 0px) !important;
 }

src/components/style/setting.scss

@@ -3,7 +3,6 @@
     align-items: center;
     padding: 0.25rem 1rem;
     justify-content: space-between;
-    z-index: 1000;
 
     .nav-items{
         display: flex;

src/containers/Footer.tsx

@@ -21,7 +21,7 @@ const Footer = ({
   // totalPage,
   //viewType,
   // // onPageMove,
-  // CountPage,
+  CountPage,
   // onClickDirection,
   // onClickViewType,
   onBookOptionChange,
@@ -86,10 +86,10 @@ const Footer = ({
       <nav className="footer-item">
         <>
           <nav className="nav-footer-item" id="toggler">
-            <Item text={`${nowPage} / ${101}`} />
+            <Item text={`${CountPage} / ${101}`} />
           </nav>
           <nav style={{ direction: "rtl", flex: 1 }}>
-            <ProgressBar value={nowPage} max={100} />
+            <ProgressBar value={CountPage} max={100} />
           </nav>
           {isMobile ? (
             // --------- Mobile

src/containers/Header.tsx

@@ -1,11 +1,11 @@
 // components
-import { useState } from "react";
+// import { useState } from "react";
 import styled from "styled-components";
 import Wrapper from "components/header/Wrapper";
 import Layout, { AutoLayout } from "components/header/Layout";
 import Logo from "components/header/Logo";
 import Item from "components/footer/Item";
-import BookInfo from "components/nav/BookInfo";
+// import BookInfo from "components/nav/BookInfo";
 // import { Collapse, Button, CardBody, Card } from "reactstrap";
 
 const Header = ({
@@ -83,20 +83,20 @@ const Header = ({
   );
 };
 
-const ButtonB = styled.button`
-  display: flex;
-  margin-top: 15px;
-  border-radius: 5px;
-  border: solid 2px #fff;
-  padding: 2px 2rem;
-  color: #fff;
-  font-family: inherit;
+// const ButtonB = styled.button`
+//   display: flex;
+//   margin-top: 15px;
+//   border-radius: 5px;
+//   border: solid 2px #fff;
+//   padding: 2px 2rem;
+//   color: #fff;
+//   font-family: inherit;
 
-  &:hover {
-    background-color: #fff;
-    color: rgb(0, 154, 168);
-  }
-`;
+//   &:hover {
+//     background-color: #fff;
+//     color: rgb(0, 154, 168);
+//   }
+// `;
 
 const Img = styled.img`
   width: 25px;

src/containers/Reader.tsx

@@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
     resizeOnOrientationChange: true,
     spread: "auto",
   });
-  const [pPage, setpPage] = useState(0);
+  // const [pPage, setpPage] = useState(0);
   const [navControl, onNavToggle] = useMenu(navRef, 300);
   const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
   const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
@@ -93,7 +93,7 @@ const Reader = ({ url, loadingView }: Props) => {
     }`;
     const node =
       iframe && iframe.contentWindow && iframe.contentWindow.document;
-    //   node && node.head && node.head.appendChild(new_style_element);
+    node && node.head && node.head.appendChild(new_style_element);
   };
   const onBookInfoChange = (book: Book) => {
     loadFont();
@@ -177,7 +177,7 @@ const Reader = ({ url, loadingView }: Props) => {
   //   setsettingicon(!settingicon);
   // };
 
-  const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
+  // const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
   const onClickDirection = (type: "Horizontal" | "Vertical") => {
     if (type === "Horizontal") {
       onBookOptionChange({
@@ -216,20 +216,20 @@ const Reader = ({ url, loadingView }: Props) => {
   const [CountPage, setCountPage] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
 
-  const [color, setcolor] = useState("light-white");
+  const [color, setcolor] = useState(1);
   const readyColors = [
-    { name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
-    { name: "light-white", bgColor: "#fff", color: "#292929" },
-    { name: "dark-blue", bgColor: "#5858d3", color: "#fff" },
-    { name: "dark-brown", bgColor: "#af622e", color: "#fff4e1" },
-    { name: "light-brown", bgColor: "#fff4e1", color: "#af622e" },
-    { name: "light-blue", bgColor: "#C3DDFF", color: "#5858df" },
+    { id: 4, name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
+    { id: 5, name: "dark-brown", bgColor: "#af622e", color: "#fff4e1" },
+    { id: 6, name: "dark-blue", bgColor: "#5858d3", color: "#fff" },
+    { id: 1, name: "light-white", bgColor: "#fff", color: "#4e4e4e" },
+    { id: 2, name: "light-brown", bgColor: "#fff4e1", color: "#af622e" },
+    { id: 3, name: "light-blue", bgColor: "#C3DDFF", color: "#5858df" },
   ];
 
-  const colorHandler = (color: any) => {
-    let myColor = readyColors.filter((item) => item.name === color);
-    return myColor[0].bgColor;
-  };
+  // const colorHandler = (color: any) => {
+  //   let myColor = readyColors.filter((item) => item.id === color);
+  //   return myColor[0].bgColor;
+  // };
 
   return (
     <>
@@ -250,11 +250,12 @@ const Reader = ({ url, loadingView }: Props) => {
           bookOption={bookOption}
           setBookOption={setBookOption}
           isOpen={isOpen}
+          readyColors={readyColors}
         />
 
         <nav
           style={{
-            backgroundColor: colorHandler(color),
+            backgroundColor: readyColors.filter((item) => item.id === color)[0].bgColor,
             color: "green",
             display: "flex",
             justifyContent: "center",

src/containers/commons/ContextMenu.tsx

@@ -175,7 +175,8 @@ const ContextMenu = ({
     setY(y_);
   }, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]);
 
-  const [discription, setDiscription] = useState('')
+  const [discription, setDiscription] = useState("");
+  localStorage.setItem("highlight", discription);
 
   return (
     <>
@@ -194,6 +195,8 @@ const ContextMenu = ({
               justifyContent: "flex-end",
               margin: "1px 5px",
               color: "#fff",
+              fontSize: "12px",
+              fontWeight: "lighter",
             }}
           >
             نام
@@ -209,10 +212,9 @@ const ContextMenu = ({
               color: "#fff",
               resize: "none",
             }}
-
             placeholder="توضیحات"
             value={discription}
-            onChange={(e)=>setDiscription(e.target.value)}
+            onChange={(e) => setDiscription(e.target.value)}
           />
           <div>
             {ColorList}

src/containers/menu/commons/Highlight.tsx

@@ -1,7 +1,7 @@
 import { useDispatch } from 'react-redux'
 // components
 import Wrapper from 'components/note/highlight/Wrapper'
-import Title from 'components/note/highlight/Title'
+// import Title from 'components/note/highlight/Title'
 import Post from 'components/note/highlight/Post'
 // slices
 import { updateHighlight } from 'slices/book'

src/slices/book.ts

@@ -65,7 +65,7 @@ const bookSlice = createSlice({
     /** CurrentPage 갱신 @dispatch */
     updateCurrentPage(state, action: PayloadAction<Page>) {
       if (
-        state.currentLocation.currentPage == action.payload.currentPage &&
+        state.currentLocation.currentPage === action.payload.currentPage &&
         action.payload.chapterName
       ) {
         console.log(JSON.parse(JSON.stringify(state)));