setting

header
footer

src/components/Setting/FontSize/fontsize.js

@@ -34,11 +34,21 @@ function Display(props) {
 const Fontsize = (props) => {
   const { bookStyle, setBookStyle } = props;
   // const [countersize, setCounter ] = useState(1)
-  const incrementCounter = () =>
+  const incrementCounter = () => {
-    setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 });
+    if (bookStyle.fontSize !== 20) {
-  let decrementCounter = () =>
+      setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 });
-    setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
+    } else {
+      return;
+    }
+  };
 
+  let decrementCounter = () => {
+    if (bookStyle.fontSize !== 10) {
+      setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
+    } else {
+      return;
+    }
+  };
 
   return (
     <div className="nav-fontBtn">

src/components/Setting/LineHeight/lineheight.js

@@ -37,16 +37,26 @@ const Lineheight = (props) => {
   const { setBookStyle, bookStyle } = props;
   // const [counterline, setcounterline] = useState(1);
 
-  const incrementCounter = () =>
+  const incrementCounter = () => {
-    setBookStyle({
+    if (bookStyle.lineHeight !== 2) {
-      ...bookStyle,
+      setBookStyle({
-      lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2,
+        ...bookStyle,
-    });
+        lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2,
-  let decrementCounter = () =>
+      });
-    setBookStyle({
+    } else {
-      ...bookStyle,
+      return;
-      lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2,
+    }
-    });
+  };
+  let decrementCounter = () => {
+    if (bookStyle.lineHeight !== 1) {
+      setBookStyle({
+        ...bookStyle,
+        lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2,
+      });
+    } else {
+      return;
+    }
+  };
 
   // if (counterline <= 1) {
   //   decrementCounter = () => setcounterline(1);

src/components/footer/progressBar.js

@@ -50,7 +50,7 @@ export default function ProgressBar(props) {
         value={CountPage}
         max={100}
         min={1}
-        marks={true}
+        // marks={true}
       />
     </div>
   );

src/components/nav/BookInfo.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-const BookInfo = ({src="", title ,publisher, author}: Props) => {
+const BookInfo = ({title ,publisher, author}: Props) => {
   return (
     <Container>
-      <BookImg src={src} alt={title} />
+      {/* <BookImg src={src} alt={title} /> */}
       <BookContent>
         <Title>{title}</Title>
         <Info>{publisher}</Info>
@@ -41,7 +41,7 @@ const Info = styled.div`
 `;
 
 interface Props {
-  src: string;
+  // src: string;
   title: string;
   publisher: string;
   author: string;

src/components/style/footerStyle.scss

@@ -21,6 +21,10 @@
   }
 }
 
+.nav-footer-item{
+  margin-right: 1.5rem;
+}
+
 .active{
   border-radius: 20%;
   width: 65px;

src/components/style/slider.scss

@@ -1,3 +1,5 @@
+@import './colors';
+
 .root {
   width: 900px;
 }
@@ -5,6 +7,7 @@
 @media screen and (max-width: 1024px) {
   .root {
     width: 800px;
+
   }
 }
 
@@ -38,11 +41,9 @@
   }
 }
 
-
-
 //1024 => 800
 //768 => 600
 //530 => 390
 //425 => 285
 //375 => 245
-//320 => 175
+//320 => 175

src/containers/Footer.tsx

@@ -38,7 +38,6 @@ const Footer = ({
     if (active === 1 || 2) {
       setActive(3);
     }
-
   };
   return (
     <>
@@ -58,10 +57,14 @@ const Footer = ({
           <nav onClick={() => changeIcone()} className="nav-icon">
             {window.innerWidth > 768 ? (
               <div className="display-icon" style={{ cursor: "pointer" }}>
-                <nav style={{ width: "65px", display: "flex" }}>
+                <nav
+                  style={{ width: "65px", marginLeft: "1rem", display: "flex" }}
+                >
                   <nav
                     className={`${active === 1 ? "active" : null} icon`}
-                    onClick={toggleIcon ? () => setActive(3): () => setActive(1)}
+                    onClick={
+                      toggleIcon ? () => setActive(3) : () => setActive(1)
+                    }
                   >
                     <BookOpenIcon
                       className={`${toggleIcon ? "icons-disable" : ""}`}
@@ -70,7 +73,9 @@ const Footer = ({
                   </nav>
                   <nav
                     className={`${active === 2 ? "active" : null} icon`}
-                    onClick={toggleIcon ? () => setActive(3): () => setActive(2)}
+                    onClick={
+                      toggleIcon ? () => setActive(3) : () => setActive(2)
+                    }
                   >
                     <BookCloseIcon
                       className={`${toggleIcon ? "icons-disable" : ""}`}
@@ -121,7 +126,10 @@ const Footer = ({
               <ProgressBar CountPage={CountPage} />
               {toggleIcon === true ? (
                 <nav
-                  style={{ width: "25px" }}
+                  style={{
+                    width: "25px",
+                    marginLeft: "1rem",
+                  }}
                   onClick={() => setToggleIcon(false)}
                 >
                   <ScrollVerticalIcon
@@ -135,7 +143,7 @@ const Footer = ({
                 </nav>
               ) : (
                 <nav
-                  style={{ width: "25px" }}
+                  style={{ width: "25px", marginLeft: "1rem" }}
                   onClick={() => setToggleIcon(true)}
                 >
                   <ScrollHorizontalIcon

src/containers/Header.tsx

@@ -35,10 +35,10 @@ const Header = ({
                 alt="Logo"
                 onClick={onLearningToggle as any}
               />
-              <nav>
+            </nav>
+            <nav>
                 {window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
               </nav>
-            </nav>
             <nav
               style={{
                 display: "flex",

src/containers/Reader.tsx

@@ -51,7 +51,8 @@ const Reader = ({ url, loadingView }: Props) => {
 
   const [bookStyle, setBookStyle] = useState<BookStyle>({
     fontFamily: "Sans",
-    fontSize: 18,
+    color: "red",
+    fontSize: 14,
     lineHeight: 1.4,
     marginHorizontal: 15,
     marginVertical: 5,
@@ -219,17 +220,17 @@ const Reader = ({ url, loadingView }: Props) => {
   // ];
 
   const readyColors = [
-    { name: "dark-white", value: "#121212" },
+    { name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
-    { name: "light-white", value: "#fff" },
+    { name: "light-white", bgColor: "#fff", color: "#292929" },
-    { name: "dark-blue", value: "#5858d3" },
+    { name: "dark-blue", bgColor: "#5858d3", color: "#fff" },
-    { name: "dark-brown", value: "#af622e" },
+    { name: "dark-brown", bgColor: "#af622e", color: "#fff4e1" },
-    { name: "light-brown", value: "#fff4e1" },
+    { name: "light-brown", bgColor: "#fff4e1", color: "#af622e" },
-    { name: "light-blue", value: "#C3DDFF" },
+    { name: "light-blue", bgColor: "#C3DDFF", color: "#5858df" },
   ];
 
   const colorHandler = (color: any) => {
     let myColor = readyColors.filter((item) => item.name === color);
-    return myColor[0].value;
+    return myColor[0].bgColor;
   };
 
   return (
@@ -256,6 +257,7 @@ const Reader = ({ url, loadingView }: Props) => {
         <nav
           style={{
             backgroundColor: colorHandler(color),
+            color: "green",
             display: "flex",
             justifyContent: "center",
             paddingTop: "1rem",
@@ -293,7 +295,7 @@ const Reader = ({ url, loadingView }: Props) => {
             </>
           )}
 
-          <nav style={{ overflow: "hidden" }}>
+          <nav className="nav-book">
             <ReactEpubViewer
               url={url}
               viewerLayout={viewerLayout}

src/containers/menu/Nav.tsx

@@ -29,7 +29,6 @@ const Nav = ({ control, onToggle, onLocation }: Props, ref: any) => {
       {control.display && (
         <Wrapper title="فهرست" show={control.open} onClose={onToggle} ref={ref}>
           <BookInfo
-            src={book.coverURL}
             title={book.title}
             publisher={book.publisher}
             author={book.author}

src/containers/menu/Option.tsx

@@ -19,6 +19,7 @@ import styled from "styled-components";
 
 const Option = (
   {
+    
     control,
     bookStyle,
     bookOption,
@@ -117,8 +118,10 @@ const Option = (
   // TODO Fix the infinite re-rendering issue, when inlcude `onBookStyleChange` to dependencies array.
   /* eslint-disable */
   useEffect(() => {
+    let color = "red";
     const timer = window.setTimeout(() => {
       onBookStyleChange({
+        color,
         fontFamily,
         fontSize,
         lineHeight,
@@ -243,6 +246,7 @@ interface Props {
   bookStyle: BookStyle;
   bookOption: BookOption;
   bookFlow: BookFlow;
+  //color: string;
   onToggle: () => void;
   emitEvent: () => void;
   onBookStyleChange: (bookStyle: BookStyle) => void;

src/lib/styles/readerStyle.css

@@ -1,3 +1,5 @@
+
+
 a {
 	text-decoration: none;
 }
@@ -21,4 +23,9 @@ input {
 
 .epub-highlight:hover {
 	fill-opacity: 0.4;
+}
+
+.nav-book{
+	overflow: hidden;
+	color: red !important;
 }

src/types/book.ts

@@ -33,6 +33,7 @@ export type BookStyle = {
   fontFamily: BookFontFamily;
   fontSize: number;
   lineHeight: number;
+  color: string;
   marginHorizontal: number;
   marginVertical: number;
 };