fontsize style family height

src/components/Setting/FontColor/Colors/chosecolor.js

@@ -4,7 +4,7 @@ import '../../../style/chosecolor.scss';
 
 
 const Chosecolor = (props) => {
-    const {color , setcolor} = props;
+    const {setcolor} = props;
 
     const changeColorHandler = (value) => {
         setcolor(value)

src/components/Setting/FontSize/fontsize.js

@@ -7,7 +7,7 @@ function ButtonIncrement(props) {
       type="button"
       outline
       onClick={props.onClickFunc}
-      style={{ padding: "0px 5px" , color: "#009AA8"  }}
+      style={{ padding: "0px 5px", color: "#009AA8" }}
     >
       +
     </p>
@@ -20,7 +20,7 @@ function ButtonDecrement(props) {
       type="button"
       outline
       onClick={props.onClickFunc}
-      style={{ padding: "0px 5px" , color: "#009AA8"  }}
+      style={{ padding: "0px 5px", color: "#009AA8" }}
     >
       -
     </p>
@@ -28,22 +28,23 @@ function ButtonDecrement(props) {
 }
 
 function Display(props) {
-  return <label style={{color: "#009AA8"}}>{props.message}</label>;
+  return <label style={{ color: "#009AA8" }}>{props.message}</label>;
 }
 
 const Fontsize = (props) => {
-  const [countersize, setCounter ] = useState(1)
-  const incrementCounter = () => setCounter(countersize + 1);
-  let decrementCounter = () => setCounter(countersize - 1);
+  const { bookStyle, setBookStyle } = props;
+  // const [countersize, setCounter ] = useState(1)
+  const incrementCounter = () =>
+    setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 });
+  let decrementCounter = () =>
+    setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
+
 
-  if (countersize <= 1) {
-    decrementCounter = () => setCounter(1);
-  }
   return (
     <div className="nav-fontBtn">
       <nav>
         <ButtonIncrement onClickFunc={incrementCounter} />
-        <Display message={countersize} />
+        <Display message={bookStyle.fontSize} />
         <ButtonDecrement onClickFunc={decrementCounter} />
       </nav>
     </div>

src/components/Setting/FontStyle/Fonts/fonts.js

@@ -1,23 +1,30 @@
-import React from 'react';
-import '../../../style/fonts.scss';
+import React from "react";
+import "../../../style/fonts.scss";
 
 const Fonts = (props) => {
-
-    const {setname} = props;
-
-    const fontHandler = (value) =>{
-        setname(value)
-    }
-
+  const { setBookStyle, bookStyle } = props;
 
   return (
     <>
-            <nav className='nav-btn'>
-                <button onClick={() => fontHandler('Sans')} className='btn-font'>سانس</button>
-                <button onClick={() => fontHandler('Nazanin')} className='btn-font'>نازنین</button>
+      <nav className="nav-btn">
+        <button
+          onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Sans" })}
+          className="btn-font"
+        >
+          سانس
+        </button>
+        <button
+          onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Nazanin" })}
+          className="btn-font"
+        >
+          نازنین
+        </button>
       </nav>
     </>
-    )
-}
+  );
+};
+
+export default Fonts;
 
-export default Fonts
+// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Nazanin" })
+// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Sans" })

src/components/Setting/FontStyle/Fontstyle.js

@@ -1,33 +1,28 @@
-import React , { useState } from 'react';
-import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
-import '../../../components/style/fontStyle.scss'
-import Fonts from './Fonts/fonts'
+import React, { useState } from "react";
+import { Dropdown, DropdownToggle, DropdownMenu } from "reactstrap";
+import "../../../components/style/fontStyle.scss";
+import Fonts from "./Fonts/fonts";
 
 const Fontstyle = (props) => {
-    const {setname ,name} = props;
-
+  const { bookStyle, setBookStyle } = props;
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
-    const toggle = () => setDropdownOpen(prevState => !prevState)
+  const toggle = () => setDropdownOpen((prevState) => !prevState);
 
   return (
     <div>
       <Dropdown isOpen={dropdownOpen} toggle={toggle}>
-                <DropdownToggle id='dropdown-btn'>
-                    <button className='btn-font'>
-                        <p>
-                            {name === 'Sans' ? 'سانس': 'نازنین'}
-                        </p>
+        <DropdownToggle id="dropdown-btn">
+          <button className="btn-font">
+            <p>{bookStyle.fontFamily === "Sans" ? "سانس" : "نازنین"}</p>
           </button>
         </DropdownToggle>
-                <DropdownMenu className='nav-menu-font'>
-                    <Fonts 
-                        setname={setname}
-                    />
+        <DropdownMenu className="nav-menu-font">
+          <Fonts bookStyle={bookStyle} setBookStyle={setBookStyle} />
         </DropdownMenu>
       </Dropdown>
     </div>
-    )
-}
+  );
+};
 
-export default Fontstyle
+export default Fontstyle;

src/components/Setting/LineHeight/lineheight.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import FormatLineSpacingRoundedIcon from "@material-ui/icons/FormatLineSpacingRounded";
 import lineSpace from "../../image/lineSpace.svg";
 import line from "../../image/line.svg";
 import "../../../components/style/lineheight.scss";
@@ -34,22 +33,31 @@ function Display(props) {
   return <label className="label">{props.message}</label>;
 }
 
-const Lineheight = () => {
-  const [counterline, setcounterline] = useState(1);
+const Lineheight = (props) => {
+  const { setBookStyle, bookStyle } = props;
+  // const [counterline, setcounterline] = useState(1);
 
-  const incrementCounter = () => setcounterline(counterline + 1);
-  let decrementCounter = () => setcounterline(counterline - 1);
+  const incrementCounter = () =>
+    setBookStyle({
+      ...bookStyle,
+      lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2,
+    });
+  let decrementCounter = () =>
+    setBookStyle({
+      ...bookStyle,
+      lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2,
+    });
 
-  if (counterline <= 1) {
-    decrementCounter = () => setcounterline(1);
-  }
+  // if (counterline <= 1) {
+  //   decrementCounter = () => setcounterline(1);
+  // }
 
   return (
     <>
       <div className="nav-fontBtn">
         <nav style={{ width: "70px" }}>
           <ButtonIncrement onClickFunc={incrementCounter} />
-          <Display message={counterline} />
+          <Display message={Math.round(bookStyle.lineHeight * 5) / 5} />
           <ButtonDecrement onClickFunc={decrementCounter} />
         </nav>
       </div>

src/components/Setting/setting.js

@@ -1,30 +1,27 @@
-import React , {useState} from "react";
+import React from "react";
 import { Collapse, Card } from "reactstrap";
 import Fontstyle from "./FontStyle/Fontstyle";
 import Colors from "./FontColor/colors";
 import FontSize from "./FontSize/fontsize";
 import LineHeight from "./LineHeight/lineheight";
 import "../style/setting.scss";
-import OptionDropdown from "../option/Dropdown";
+// import OptionDropdown from "../option/Dropdown";
 
 const Setting = (props) => {
   const {
-    BookStyle,
-    onSelect,
+    // BookStyle,
+    // onSelect,
     isOpen,
-    valueList,
-    defaultValue,
-    title,
+    // valueList,
+    // defaultValue,
+    // title,
     setIsChecked,
     isChecked,
-    countersize,
-    setCounter,
-    counterline,
-    setcounterline,
-    setname,
-    name,
     setcolor,
     color,
+    bookStyle,
+    setBookStyle,
+    bookOption,
   } = props;
   return (
     <>
@@ -40,12 +37,12 @@ const Setting = (props) => {
               />
             </nav>
             <nav className="nav-items">
-              <LineHeight
-                counterline={counterline}
-                setcounterline={setcounterline}
+              <LineHeight setBookStyle={setBookStyle} bookStyle={bookStyle} />
+              <FontSize setBookStyle={setBookStyle} bookStyle={bookStyle} />
+              <Fontstyle
+                setBookStyle={setBookStyle}
+                bookStyle={bookStyle}
               />
-              <FontSize countersize={countersize} setCounter={setCounter} />
-              <Fontstyle name={name} setname={setname} />
               {/* <OptionDropdown
                 title="فونت"
                 defaultValue={fontFamily}

src/components/contextMenu/Item.tsx

@@ -13,7 +13,7 @@ const Container = styled.button`
   line-height: 32px;
   text-align: center;
   font-size: 14px;
-  color: #000;
+  color: #fff;
   transition: .1s ${styles.transition};
   background-color: rgba(0,0,0,0);
   border-radius: 6px;

src/components/header/Logo.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 // lib
 import * as styles from 'lib/styles/styles'
-import palette from 'lib/styles/palette'
+// import palette from 'lib/styles/palette'
 import { mediaQuery } from 'lib/styles/media'
 
 const Logo = () => {

src/containers/Footer.tsx

@@ -2,17 +2,17 @@
 import { useState } from "react";
 import Wrapper from "components/footer/Wrapper";
 import Item from "components/footer/Item";
-import MoveBtn from "components/footer/MoveBtn";
+// import MoveBtn from "components/footer/MoveBtn";
 import styled from "styled-components";
 import ProgressBar from "../components/footer/progressBar";
 import onePage from "../components/image/Document.svg";
 import twoPage from "../components/image/Pages.svg";
 
 const Footer = ({
-  title,
+  // title,
   nowPage,
   totalPage,
-  onPageMove,
+  // onPageMove,
   CountPage,
 }: Props) => {
   const [Icon, setIcon] = useState(false);
@@ -42,7 +42,7 @@ const Footer = ({
           >
             {window.innerWidth > 768 ? (
               <div  className="display-icon" style={{ cursor: "pointer" }}>
-                {Icon ? <img src={onePage} /> : <img src={twoPage} />}
+                {Icon ? <img src={onePage} alt='singlepage' /> : <img src={twoPage} alt='twopages' />}
               </div>
             ) : null}
           </nav>
@@ -76,13 +76,13 @@ interface Props {
 
 export default Footer;
 
-const WrapperBtn = styled.div`
-  position: fixed;
-  left: 0;
-  top: 60px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
+// const WrapperBtn = styled.div`
+//   position: fixed;
+//   left: 0;
+//   top: 60px;
+//   width: 100%;
+//   height: 100%;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+// `;

src/containers/Header.tsx

@@ -5,24 +5,25 @@ 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 Setting from "components/Setting/setting";
-import { Collapse, Button, CardBody, Card } from "reactstrap";
+// import { Collapse, Button, CardBody, Card } from "reactstrap";
 
 const Header = ({
+  isOpen,
+  setIsOpen,
   onNavToggle,
-  onOptionToggle,
+  // onOptionToggle,
   onLearningToggle,
   title,
 }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = () => setIsOpen(!isOpen);
+
+  
   return (
     <>
       <Wrapper>
         <Layout>
           <AutoLayout style={{ backgroundColor: "#009AA8" }}>
             <nav style={{ display: "flex", marginLeft: "16px" }}>
-              <nav onClick={toggle} style={{ display: "flex" }} id="toggler">
+              <nav onClick={() => setIsOpen(!isOpen)} style={{ display: "flex" }} id="toggler">
                 <Img
                   src="/react-epub-viewer/images/Setting.svg"
                   // onClick={onOptionToggle as any}
@@ -61,7 +62,6 @@ const Header = ({
           </AutoLayout>
         </Layout>
       </Wrapper>
-      <Setting isOpen={isOpen} />
     </>
   );
 };
@@ -89,6 +89,8 @@ interface Props {
   onNavToggle: (value?: boolean) => void;
   onOptionToggle: (value?: boolean) => void;
   onLearningToggle: (value?: boolean) => void;
+  isOpen: any;
+  setIsOpen:any;
   // setsettingicon: (value?: boolean) => void;
 }
 

src/containers/Reader.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Provider } from "react-redux";
 import { ReactEpubViewer } from "react-epub-viewer";
-import styled from "styled-components";
+// import styled from "styled-components";
 // containers
 import Header from "containers/Header";
 import Footer from "containers/Footer";
@@ -14,7 +14,7 @@ import Snackbar from "containers/commons/Snackbar";
 // components
 import ViewerWrapper from "components/commons/ViewerWrapper";
 import LoadingView from "LoadingView";
-import BookInfo from "components/nav/BookInfo";
+// import BookInfo from "components/nav/BookInfo";
 // slices
 import store from "slices";
 import { updateBook, updateCurrentPage, updateToc } from "slices/book";
@@ -30,10 +30,11 @@ import { ViewerRef } from "types";
 import Book, { BookStyle, BookOption } from "types/book";
 import Page from "types/page";
 import Toc from "types/toc";
-import { title } from "node:process";
+// import { title } from "node:process";
 import ArrowBackIosRoundedIcon from "@material-ui/icons/ArrowBackIosRounded";
 import ArrowForwardIosRoundedIcon from "@material-ui/icons/ArrowForwardIosRounded";
-import MoveBtn from "components/footer/MoveBtn";
+import Setting from "components/Setting/setting";
+// import MoveBtn from "components/footer/MoveBtn";
 
 const Reader = ({ url, loadingView }: Props) => {
   const dispatch = useDispatch();
@@ -92,9 +93,10 @@ const Reader = ({ url, loadingView }: Props) => {
     const node =
       iframe && iframe.contentWindow && iframe.contentWindow.document;
     //   node && node.head && node.head.appendChild(new_style_element);
+    console.log(node);
   };
   const onBookInfoChange = (book: Book) => {
-    //  loadFont();
+    loadFont();
     dispatch(updateBook(book));
   };
 
@@ -160,13 +162,14 @@ const Reader = ({ url, loadingView }: Props) => {
   /** ContextMenu off */
   const onContextmMenuRemove = () => setIsContextMenu(false);
 
-  const [settingicon, setsettingicon] = useState(false);
+  // const [settingicon, setsettingicon] = useState(false);
 
-  const changeiconsettinghandler = () => {
-    setsettingicon(!settingicon);
-  };
+  // const changeiconsettinghandler = () => {
+  //   setsettingicon(!settingicon);
+  // };
 
   const [CountPage, setCountPage] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
@@ -176,6 +179,15 @@ const Reader = ({ url, loadingView }: Props) => {
           onNavToggle={onNavToggle}
           onOptionToggle={onOptionToggle}
           onLearningToggle={onLearningToggle}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+        />
+        <Setting
+          setBookStyle={setBookStyle}
+          bookStyle={bookStyle}
+          bookOption={bookOption}
+          setBookOption={setBookOption}
+          isOpen={isOpen}
         />
 
         <nav
@@ -328,6 +340,8 @@ interface Props {
   viewerStyle?: BookStyle;
   url: string;
   loadingView?: React.ReactNode;
+  isOpen?: any;
+  setIsOpen?: any;
 }
 
 export default ReaderWrapper;

src/containers/menu/Option.tsx

@@ -11,18 +11,18 @@ import ControlIconBtn from "components/option/ControlIconBtn";
 import { BookStyle, BookFontFamily, BookFlow } from "types/book";
 import { MenuControl } from "lib/hooks/useMenu";
 import { BookOption } from "types/book";
-import * as styles from 'lib/styles/styles'
-import palette from 'lib/styles/palette'
-import styled, { css } from 'styled-components'
+import * as styles from "lib/styles/styles";
+// import palette from 'lib/styles/palette'
+import styled from "styled-components";
 
-import Setting from "components/Setting/setting";
+// import Setting from "components/Setting/setting";
 
 const Option = (
   {
     control,
     bookStyle,
     bookOption,
-    bookFlow,
+    // bookFlow,
     onToggle,
     emitEvent,
     onBookStyleChange,
@@ -249,8 +249,6 @@ interface Props {
   onBookOptionChange: (bookOption: BookOption) => void;
 }
 
-
-
 const Btn = styled.button`
   position: relative;
   height: 100%;
@@ -259,10 +257,10 @@ const Btn = styled.button`
   align-items: center;
   justify-content: center;
   z-index: 0;
-  transition: .3s ${styles.transition};
+  transition: 0.3s ${styles.transition};
   outline: none;
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     right: 0;
@@ -271,9 +269,9 @@ const Btn = styled.button`
     margin: auto;
     z-index: -1;
     border-radius: 30px;
-    transition: .1s ${styles.transition};
+    transition: 0.1s ${styles.transition};
     background-color: rgb(0, 154, 168);
-  };
+  }
 `;
 const BtnWrapper = styled.div`
   display: flex;