styled

src/components/Setting/FontSize/fontsize.js

@@ -1,47 +1,53 @@
-import React from 'react';
+import React, { useState } from "react";
-import '../../../components/style/fontsize.scss';
+import "../../../components/style/fontsize.scss";
 
 function ButtonIncrement(props) {
-    return (
+  return (
-      <p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}>
+    <p
+      type="button"
+      outline
+      onClick={props.onClickFunc}
+      style={{ padding: "0px 5px" , color: "#009AA8"  }}
+    >
       +
-      </p>
+    </p>
-    )
+  );
- }
+}
- 
- function ButtonDecrement(props) {
-   
-   return (
-     <p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}>
-     -
-     </p>
-   )
- }
- 
- function Display(props) {
-   return (
-     <label >{props.message}</label>
-   )
- }
-
-const Fontsize = (props) => {
 
-  const {countersize, setCounter} = props;
+function ButtonDecrement(props) {
-    const incrementCounter = () => setCounter(countersize + 1);
+  return (
-    let decrementCounter = () => setCounter(countersize - 1);
+    <p
+      type="button"
+      outline
+      onClick={props.onClickFunc}
+      style={{ padding: "0px 5px" , color: "#009AA8"  }}
+    >
+      -
+    </p>
+  );
+}
 
-    if(countersize <= 1) {
+function Display(props) {
-      decrementCounter = () => setCounter(1);
+  return <label style={{color: "#009AA8"}}>{props.message}</label>;
-    }
-    return (
-        <div className='nav-fontBtn'>
-            <nav>
-            <ButtonIncrement onClickFunc={incrementCounter}/>
-                <Display message={countersize}/> 
-            <ButtonDecrement onClickFunc={decrementCounter}/>
-            </nav>
-        </div>
-    )
 }
 
-export default Fontsize
+const Fontsize = (props) => {
+  const [countersize, setCounter ] = useState(1)
+  const incrementCounter = () => setCounter(countersize + 1);
+  let decrementCounter = () => setCounter(countersize - 1);
+
+  if (countersize <= 1) {
+    decrementCounter = () => setCounter(1);
+  }
+  return (
+    <div className="nav-fontBtn">
+      <nav>
+        <ButtonIncrement onClickFunc={incrementCounter} />
+        <Display message={countersize} />
+        <ButtonDecrement onClickFunc={decrementCounter} />
+      </nav>
+    </div>
+  );
+};
+
+export default Fontsize;

src/components/Setting/FontStyle/Fontstyle.js

@@ -14,7 +14,7 @@ const Fontstyle = (props) => {
         <div>
             <Dropdown isOpen={dropdownOpen} toggle={toggle}>
                 <DropdownToggle id='dropdown-btn'>
-                    <button className='btn'>
+                    <button className='btn-font'>
                         <p>
                             {name === 'Sans' ? 'سانس': 'نازنین'}
                         </p>

src/components/Setting/LineHeight/lineheight.js

@@ -1,14 +1,20 @@
-import React from 'react'
+import React, { useState } from "react";
-// import {FormatLineSpacingRoundedIcon} from '@material-ui/icons/FormatLineSpacingRounded'
+import FormatLineSpacingRoundedIcon from "@material-ui/icons/FormatLineSpacingRounded";
-import lineSpace from '../../image/lineSpace.svg'
+import lineSpace from "../../image/lineSpace.svg";
-import '../../../components/style/lineheight.scss'
+import line from "../../image/line.svg";
+import "../../../components/style/lineheight.scss";
 
 function ButtonIncrement(props) {
   return (
-    <span type="button" outline onClick={props.onClickFunc}>
+    <img
-      {/* <FormatLineSpacingRoundedIcon  className="line-space-icon" /> */}
+      type="button"
-    </span>
+      outline
-  )
+      onClick={props.onClickFunc}
+      src={line}
+      alt="Icon"
+      className="line-space-icon-"
+    />
+  );
 }
 
 function ButtonDecrement(props) {
@@ -21,34 +27,34 @@ function ButtonDecrement(props) {
       alt="Icon"
       className="line-space-icon-"
     />
-  )
+  );
 }
 
 function Display(props) {
-  return <label style={{ textAlign: 'center' }}>{props.message}</label>
+  return <label className="label">{props.message}</label>;
 }
 
-const Lineheight = (props) => {
+const Lineheight = () => {
-  const { counterline, setcounterline } = props
+  const [counterline, setcounterline] = useState(1);
 
-  const incrementCounter = () => setcounterline(counterline + 1)
+  const incrementCounter = () => setcounterline(counterline + 1);
-  let decrementCounter = () => setcounterline(counterline - 1)
+  let decrementCounter = () => setcounterline(counterline - 1);
 
   if (counterline <= 1) {
-    decrementCounter = () => setcounterline(1)
+    decrementCounter = () => setcounterline(1);
   }
 
   return (
     <>
       <div className="nav-fontBtn">
-        <nav style={{ width: '70px' }}>
+        <nav style={{ width: "70px" }}>
           <ButtonIncrement onClickFunc={incrementCounter} />
           <Display message={counterline} />
           <ButtonDecrement onClickFunc={decrementCounter} />
         </nav>
       </div>
     </>
-  )
+  );
-}
+};
 
-export default Lineheight
+export default Lineheight;

src/components/Setting/setting.js

@@ -1,13 +1,20 @@
-import React from 'react'
+import React , {useState} from "react";
-import { UncontrolledCollapse, Card } from 'reactstrap'
+import { Collapse, Card } from "reactstrap";
-import Fontstyle from './FontStyle/Fontstyle'
+import Fontstyle from "./FontStyle/Fontstyle";
-import Colors from './FontColor/colors'
+import Colors from "./FontColor/colors";
-import FontSize from './FontSize/fontsize'
+import FontSize from "./FontSize/fontsize";
-import LineHeight from './LineHeight/lineheight'
+import LineHeight from "./LineHeight/lineheight";
+import "../style/setting.scss";
+import OptionDropdown from "../option/Dropdown";
 
 const Setting = (props) => {
   const {
+    BookStyle,
+    onSelect,
     isOpen,
+    valueList,
+    defaultValue,
+    title,
     setIsChecked,
     isChecked,
     countersize,
@@ -18,11 +25,11 @@ const Setting = (props) => {
     name,
     setcolor,
     color,
-  } = props
+  } = props;
-
   return (
     <>
-        <Card isOpen={isOpen}>
+      <Collapse isOpen={isOpen}>
+        <Card>
           <nav className="nav-content">
             <nav className="nav-items">
               <Colors
@@ -39,11 +46,18 @@ const Setting = (props) => {
               />
               <FontSize countersize={countersize} setCounter={setCounter} />
               <Fontstyle name={name} setname={setname} />
+              {/* <OptionDropdown
+                title="فونت"
+                defaultValue={fontFamily}
+                valueList={["Nazanin", "Sans"]}
+                onSelect={onSelectFontFamily}
+              /> */}
             </nav>
           </nav>
         </Card>
+      </Collapse>
     </>
-  )
+  );
-}
+};
 
-export default Setting
+export default Setting;

src/components/footer/Wrapper.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 // lib
-import palette from 'lib/styles/palette'
+import palette from "lib/styles/palette";
 
 const Wrapper = styled.div`
   position: fixed;
@@ -14,10 +14,8 @@ const Wrapper = styled.div`
   background-color: ${palette.white};
 
   $ < span {
-    color: #000 ;
+    color: #000;
   }
 `;
 
-export default Wrapper
+export default Wrapper;
-
-

src/components/footer/progressBar.js

@@ -3,7 +3,7 @@ import { withStyles, makeStyles } from '@material-ui/core/styles'
 import Slider from '@material-ui/core/Slider'
 const useStyles = makeStyles((theme) => ({
   root: {
-    width: 500 + theme.spacing(0),
+    width: 900 + theme.spacing(0),
   },
   margin: {
     height: theme.spacing(3),

src/components/image/Document.svg

@@ -0,0 +1,8 @@
+<svg id="Iconly_Curved_Document" data-name="Iconly/Curved/Document" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="Document" transform="translate(3.61 2.75)">
+    <path id="Stroke_1" data-name="Stroke 1" d="M7.22.5H0" transform="translate(4.766 12.446)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
+    <path id="Stroke_2" data-name="Stroke 2" d="M7.22.5H0" transform="translate(4.766 8.686)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
+    <path id="Stroke_3" data-name="Stroke 3" d="M2.755.5H0" transform="translate(4.766 4.927)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
+    <path id="Stroke_4" data-name="Stroke 4" d="M0,9.25c0,6.937,2.1,9.25,8.391,9.25s8.391-2.313,8.391-9.25S14.685,0,8.391,0,0,2.313,0,9.25Z" transform="translate(0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
+  </g>
+</svg>

src/components/image/line.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#009AA8;" d="M452.501,332.88h-299c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h299
+		c5.896,0,10.667-4.771,10.667-10.667C463.168,337.651,458.397,332.88,452.501,332.88z"/>
+	<path style="fill:#009AA8;" d="M452.501,439.547H152.949c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667
+		h299.552c5.896,0,10.667-4.771,10.667-10.667C463.168,444.318,458.397,439.547,452.501,439.547z"/>
+	<path style="fill:#009AA8;" d="M452.501,546.214h-299c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h299
+		c5.896,0,10.667-4.771,10.667-10.667C463.168,550.984,458.397,546.214,452.501,546.214z"/>
+	<path style="fill:#009AA8;" d="M153.501,247.547h299c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667h-299
+		c-5.896,0-10.667,4.771-10.667,10.667C142.835,242.776,147.605,247.547,153.501,247.547z"/>
+	<path style="fill:#009AA8;" d="M80.97,307.276c2.094,2.802,5.292,4.271,8.542,4.271c2.229,0,4.469-0.698,6.385-2.135
+		c4.719-3.531,5.677-10.219,2.135-14.927l-64-85.333c-4.021-5.375-13.042-5.375-17.063,0l-64,85.333
+		c-3.542,4.708-2.583,11.396,2.135,14.927c4.74,3.552,11.406,2.594,14.927-2.135l44.802-59.728v298.664l-44.802-59.728
+		c-3.542-4.74-10.219-5.698-14.927-2.135c-4.719,3.531-5.677,10.219-2.135,14.927l64,85.333c2.01,2.688,5.177,4.271,8.531,4.271
+		s6.521-1.583,8.531-4.271l64-85.333c3.542-4.708,2.583-11.396-2.135-14.927c-4.708-3.531-11.385-2.594-14.927,2.135l-44.802,59.728
+		V247.548L80.97,307.276z"/>
+</g>
+</svg>

src/components/style/fontStyle.scss

@@ -1,4 +1,32 @@
-.nav-menu-font{
+@import "./colors";
-    min-width: 4rem !important;
+
-    transform: translate3d(-5px, 24px, 0px) !important;
+.nav-menu-font {
+  min-width: 3.5rem !important;
+  transform: translate3d(-5px, 24px, 0px) !important;
+}
+
+.btn-font {
+  display: flex;
+  outline: none;
+  border-radius: 5px;
+  border: $green solid 1.5px;
+  color: $green;
+  background-color: white;
+
+  p {
+    padding: 0 5px !important;
+    margin: 0;
+    color: $green;
+  }
+}
+
+.btn-font:hover {
+  border: $green solid 1.5px;
+  color: white;
+  background-color: $green;
+  p {
+    padding: 0 5px !important;
+    margin: 0;
+    color: #fff;
+  }
 }

src/components/style/fontsize.scss

@@ -1,3 +1,7 @@
 @import './colors';
 @import './btnStyle';
 @import './twobtnStyle';
+
+label{
+  font-family: "SansNum" !important;
+}

src/components/style/lineheight.scss

@@ -1,14 +1,20 @@
-@import './btnStyle';
+@import "./btnStyle";
-@import './twobtnStyle';
+@import "./twobtnStyle";
 
+.line-space-icon- {
+  font-size: 1rem !important;
+  width: 1rem !important;
+  margin: 3px;
+  color: #009aa8 !important;
+}
 
-.line-space-icon-{
+.line-space-icon {
-    font-size: 1rem !important;
+  font-size: 1rem !important;
-    width: 1rem !important;
+  width: 1rem !important;
-    margin: 3px;
 }
 
-.line-space-icon{
+.label {
-    font-size: 1rem !important;
+  font-family: "SansNum" !important;
-    width: 1rem !important;
+  text-align: center;
+  color: #009aa8;
 }

src/containers/Footer.tsx

@@ -1,9 +1,12 @@
 // components
+import { useState } from "react";
 import Wrapper from "components/footer/Wrapper";
 import Item from "components/footer/Item";
 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,
@@ -12,6 +15,11 @@ const Footer = ({
   onPageMove,
   CountPage,
 }: Props) => {
+  const [Icon, setIcon] = useState(false);
+
+  const changeIcone = () => {
+    setIcon(!Icon);
+  };
   return (
     <>
       <Wrapper>
@@ -27,9 +35,20 @@ const Footer = ({
             <Item text={`${nowPage} / ${totalPage}`} />
           </nav>
           <ProgressBar CountPage={CountPage} />
+          <nav
+            // style={{pointer='cruser'}}
+            onClick={() => changeIcone()}
+            className="nav-icon  "
+          >
+            {window.innerWidth > 768 ? (
+              <div  className="display-icon" style={{ cursor: "pointer" }}>
+                {Icon ? <img src={onePage} /> : <img src={twoPage} />}
+              </div>
+            ) : null}
+          </nav>
         </nav>
-        {window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
       </Wrapper>
+      {window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
     </>
   );
 };
@@ -37,6 +56,8 @@ const Footer = ({
 const Button = styled.button`
   width: 100%;
   justify-content: center;
+  position: fixed;
+  bottom: 0;
   display: flex;
   height: 35px;
   padding: 2px 2rem;

src/containers/Header.tsx

@@ -6,6 +6,7 @@ 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";
 
 const Header = ({
   onNavToggle,
@@ -14,7 +15,6 @@ const Header = ({
   title,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
-
   const toggle = () => setIsOpen(!isOpen);
   return (
     <>
@@ -25,7 +25,7 @@ const Header = ({
               <nav onClick={toggle} style={{ display: "flex" }} id="toggler">
                 <Img
                   src="/react-epub-viewer/images/Setting.svg"
-                  onClick={onOptionToggle as any}
+                  // onClick={onOptionToggle as any}
                   alt="Logo"
                 />
               </nav>
@@ -36,7 +36,7 @@ const Header = ({
               />
             </nav>
             <nav>
-              {window.innerWidth > 768 ? <Button>خرید کتاب</Button> : null}
+              {window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
             </nav>
             <nav
               style={{
@@ -61,12 +61,12 @@ const Header = ({
           </AutoLayout>
         </Layout>
       </Wrapper>
-      <Setting isOpen={isOpen}/>
+      <Setting isOpen={isOpen} />
     </>
   );
 };
 
-const Button = styled.button`
+const ButtonB = styled.button`
   display: flex;
   margin-top: 15px;
   border-radius: 5px;

src/containers/Reader.tsx

@@ -173,7 +173,6 @@ const Reader = ({ url, loadingView }: Props) => {
       <ViewerWrapper>
         <Header
           title={currentLocation.chapterName}
-
           onNavToggle={onNavToggle}
           onOptionToggle={onOptionToggle}
           onLearningToggle={onLearningToggle}
@@ -196,7 +195,7 @@ const Reader = ({ url, loadingView }: Props) => {
                     left: "0",
                     width: "20%",
                     height: "85%",
-                    top: "4rem",
+                    top: "6rem",
                     zIndex: 10,
                   }}
                   onClick={() => onPageMove("NEXT")}
@@ -242,7 +241,7 @@ const Reader = ({ url, loadingView }: Props) => {
                     right: "0",
                     width: "20%",
                     height: "85%",
-                    top: "4rem",
+                    top: "6rem",
                   }}
                   onClick={() => onPageMove("PREV")}
                 >
@@ -326,6 +325,7 @@ const ReaderWrapper = ({ url, loadingView }: Props) => {
 };
 
 interface Props {
+  viewerStyle?: BookStyle;
   url: string;
   loadingView?: React.ReactNode;
 }

src/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom";
 import Reader from "containers/Reader";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const EPUB_URL = "/react-epub-viewer/files/book2.epub";