footer finished (responsive)

background color of the iftram finished
color of the book (not finished)

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

@@ -4,15 +4,11 @@ import '../../../style/chosecolor.scss';
 
 
 const Chosecolor = (props) => {
-    const {setcolor} = props;
+    const {setcolor , isChecked} = props;
     
     const changeColorHandler = (value) => {
         setcolor(value)
     }
-
-
-
-    const {isChecked} = props;
     return (
         <>  
         {isChecked ?

src/components/Setting/FontColor/colors.js

@@ -7,10 +7,12 @@ import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
 
 
 const Colors = (props) => {
+    const { setcolor, color} = props;
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const toggle = () => setDropdownOpen(prevState => !prevState);
     
-    const {setIsChecked, isChecked , setcolor , color } = props;
+
+    const [isChecked, setIsChecked] = useState(false)
 
     const [Icon, seticon] = useState(PalletColorOutline);
     const changeIcone = () => {

src/components/Setting/setting.js

@@ -30,9 +30,9 @@ const Setting = (props) => {
           <nav className="nav-content">
             <nav className="nav-items">
               <Colors
+                setcolor={setcolor}
                 setIsChecked={setIsChecked}
                 isChecked={isChecked}
-                setcolor={setcolor}
                 color={color}
               />
             </nav>

src/components/footer/progressBar.js

@@ -1,52 +1,50 @@
-import React from 'react'
+import React from "react";
-import { withStyles, makeStyles } from '@material-ui/core/styles'
+import { withStyles, makeStyles } from "@material-ui/core/styles";
-import Slider from '@material-ui/core/Slider'
+import Slider from "@material-ui/core/Slider";
+import "components/style/slider.scss";
 const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 900 + theme.spacing(0),
-  },
   margin: {
-    height: theme.spacing(3),
+    height: theme.spacing(0),
   },
-}))
+}));
 
 const PrettoSlider = withStyles({
   root: {
-    color: '#009AA8',
+    color: "#009AA8",
-    height: '5px',
+    height: "5px",
     padding: 0,
-    direction: 'rtl !important',
+    direction: "rtl !important",
   },
   thumb: {
-    height: '15px',
+    height: "15px",
-    width: '15px',
+    width: "15px",
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
-    border: '1.5px solid currentColor',
+    border: "1.5px solid currentColor",
-    marginTop: '-6px',
+    marginTop: "-6px",
-    marginLeft: '-11px',
+    marginLeft: "-11px",
-    direction: 'rtl !important',
+    direction: "rtl !important",
-    '&:focus, &:hover, &$active': {
+    "&:focus, &:hover, &$active": {
-      boxShadow: 'inherit',
+      boxShadow: "inherit",
-      direction: 'rtl !important',
+      direction: "rtl !important",
     },
   },
   active: {},
   track: {
-    height: '5px',
+    height: "5px",
     borderRadius: 4,
-    direction: 'rtl !important',
+    direction: "rtl !important",
   },
   rail: {
-    height: '5px',
+    height: "5px",
     borderRadius: 4,
   },
-})(Slider)
+})(Slider);
 
 export default function ProgressBar(props) {
-  const classes = useStyles()
+  const classes = useStyles();
   const { CountPage } = props;
   return (
-    <div className={classes.root}>
+    <div className={(classes.root, "root")}>
       <PrettoSlider
         track="inverted"
         value={CountPage}
@@ -55,5 +53,5 @@ export default function ProgressBar(props) {
         marks={true}
       />
     </div>
-  )
+  );
 }

src/components/style/footerStyle.scss

@@ -1,4 +1,34 @@
+@import './colors';
+
 .icons-disable {
   opacity: 0.3;
   cursor: auto;
 }
+
+.nav-footer {
+  background-color: #fff;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+
+  .footer-item {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 0 5px;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+}
+
+.active{
+  border-radius: 20%;
+  width: 65px;
+  background-color: #009aa873;
+}
+
+.icon{
+  width: 65px;
+}
+
+

src/components/style/slider.scss

@@ -0,0 +1,48 @@
+.root {
+  width: 900px;
+}
+
+@media screen and (max-width: 1024px) {
+  .root {
+    width: 800px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .root {
+    width: 600px;
+  }
+}
+
+@media screen and (max-width: 530px) {
+  .root {
+    width: 280px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .root {
+    width: 295px;
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .root {
+    width: 230px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .root {
+    width: 175px;
+  }
+}
+
+
+
+//1024 => 800
+//768 => 600
+//530 => 390
+//425 => 285
+//375 => 245
+//320 => 175

src/containers/Footer.tsx

@@ -31,9 +31,15 @@ const Footer = ({
   const changeIcone = () => {
     setIcon(!Icon);
   };
+  const [active, setActive] = useState(1);
+  const [toggleIcon, setToggleIcon] = useState(false);
+  const onToggle = () => {
+    setToggleIcon(false);
+    if (active === 1 || 2) {
+      setActive(3);
+    }
 
-  const [toggleIcon, setToggleIcon] = useState(true);
+  };
-
   return (
     <>
       <Wrapper>
@@ -53,19 +59,26 @@ const Footer = ({
             {window.innerWidth > 768 ? (
               <div className="display-icon" style={{ cursor: "pointer" }}>
                 <nav style={{ width: "65px", display: "flex" }}>
+                  <nav
+                    className={`${active === 1 ? "active" : null} icon`}
+                    onClick={toggleIcon ? () => setActive(3): () => setActive(1)}
+                  >
                     <BookOpenIcon
                       className={`${toggleIcon ? "icons-disable" : ""}`}
-                    onClick={() => onClickViewType(true)}
+                      onClick={toggleIcon ? null : () => onClickViewType(true)}
                     />
+                  </nav>
+                  <nav
+                    className={`${active === 2 ? "active" : null} icon`}
+                    onClick={toggleIcon ? () => setActive(3): () => setActive(2)}
+                  >
                     <BookCloseIcon
                       className={`${toggleIcon ? "icons-disable" : ""}`}
-                    onClick={() => onClickViewType(false)}
+                      onClick={toggleIcon ? null : () => onClickViewType(false)}
                     />
+                  </nav>
                   {toggleIcon === true ? (
-                    <nav
+                    <nav style={{ width: "65px" }} onClick={onToggle}>
-                      style={{ width: "65px" }}
-                      onClick={() => setToggleIcon(false)}
-                    >
                       <ScrollVerticalIcon
                         onClick={() =>
                           onBookOptionChange({
@@ -92,11 +105,56 @@ const Footer = ({
                   )}
                 </nav>
               </div>
-            ) : null}
+            ) : (
+              ""
+            )}
           </nav>
         </nav>
       </Wrapper>
-      {window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
+      {window.innerWidth <= 768 ? (
+        <>
+          <nav className="nav-footer">
+            <nav className="footer-item">
+              <nav className="nav-footer-item" id="toggler">
+                <Item text={`${nowPage} / ${100}`} />
+              </nav>
+              <ProgressBar CountPage={CountPage} />
+              {toggleIcon === true ? (
+                <nav
+                  style={{ width: "25px" }}
+                  onClick={() => setToggleIcon(false)}
+                >
+                  <ScrollVerticalIcon
+                    onClick={() =>
+                      onBookOptionChange({
+                        ...bookOption,
+                        flow: "paginated",
+                      })
+                    }
+                  />
+                </nav>
+              ) : (
+                <nav
+                  style={{ width: "25px" }}
+                  onClick={() => setToggleIcon(true)}
+                >
+                  <ScrollHorizontalIcon
+                    onClick={() =>
+                      onBookOptionChange({
+                        ...bookOption,
+                        flow: "scrolled-doc",
+                      })
+                    }
+                  />
+                </nav>
+              )}
+            </nav>
+            <Button>خرید کتاب</Button>
+          </nav>
+        </>
+      ) : (
+        ""
+      )}
     </>
   );
 };
@@ -114,11 +172,10 @@ const Icon = styled.div`
 
 const Button = styled.button`
   width: 100%;
-  justify-content: center;
-  position: fixed;
-  bottom: 0;
-  display: flex;
   height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 2px 2rem;
   color: #fff;
   font-family: inherit;

src/containers/Header.tsx

@@ -5,6 +5,7 @@ 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 { Collapse, Button, CardBody, Card } from "reactstrap";
 
 const Header = ({
@@ -14,31 +15,30 @@ const Header = ({
   // onOptionToggle,
   onLearningToggle,
   title,
+  nameBook,
 }: Props) => {
-
-  
   return (
     <>
       <Wrapper>
         <Layout>
           <AutoLayout style={{ backgroundColor: "#009AA8" }}>
             <nav style={{ display: "flex", marginLeft: "16px" }}>
-              <nav onClick={() => setIsOpen(!isOpen)} style={{ display: "flex" }} id="toggler">
+              <nav
-                <Img
+                onClick={() => setIsOpen(!isOpen)}
-                  src="/react-epub-viewer/images/Setting.svg"
+                style={{ display: "flex" }}
-                  // onClick={onOptionToggle as any}
+                id="toggler"
-                  alt="Logo"
+              >
-                />
+                <Img src="/react-epub-viewer/images/Setting.svg" alt="Logo" />
               </nav>
               <Img
                 src="/react-epub-viewer/images/Edit.svg"
                 alt="Logo"
                 onClick={onLearningToggle as any}
               />
-            </nav>
               <nav>
                 {window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
               </nav>
+            </nav>
             <nav
               style={{
                 display: "flex",
@@ -48,7 +48,10 @@ const Header = ({
             >
               <Item text={title as any} />
               <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
-              <p style={{ margin: "0", color: "#fff" }}></p>
+              {/* <BookInfo/> */}
+              <div>
+                <p style={{ margin: "0", color: "#fff" , width: '85px' }}>{nameBook}</p>
+              </div>
               <Logo />
               <Img
                 src="/react-epub-viewer/images/menu.svg"
@@ -86,6 +89,7 @@ const Img = styled.img`
 `;
 interface Props {
   title: String;
+  nameBook: string;
   onNavToggle: (value?: boolean) => void;
   onOptionToggle: (value?: boolean) => void;
   onLearningToggle: (value?: boolean) => void;

src/containers/Reader.tsx

@@ -181,7 +181,7 @@ const Reader = ({ url, loadingView }: Props) => {
       });
     }
   };
-  console.log(isScrollHorizontal) 
+  console.log(isScrollHorizontal);
 
   const [viewType, setViewType] = useState({
     spread: true,
@@ -202,13 +202,41 @@ const Reader = ({ url, loadingView }: Props) => {
     }
   };
 
+  const book = useSelector<RootState, Book>((state) => state.book.book);
+
   const [CountPage, setCountPage] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
 
+  const [color, setcolor] = useState("light-white");
+
+  // const Colors = [
+  //   { name: "dark-white", value: "#fff" },
+  //   { name: "dark-blue", value: "#fff" },
+  //   { name: "dark-brown", value: "#fff4e1" },
+  //   { name: "light-white", value: "#121212" },
+  //   { name: "light-brown", value: "#af622e" },
+  //   { name: "light-blue", value: "#5858df" },
+  // ];
+
+  const readyColors = [
+    { name: "dark-white", value: "#121212" },
+    { name: "light-white", value: "#fff" },
+    { name: "dark-blue", value: "#5858d3" },
+    { name: "dark-brown", value: "#af622e" },
+    { name: "light-brown", value: "#fff4e1" },
+    { name: "light-blue", value: "#C3DDFF" },
+  ];
+
+  const colorHandler = (color: any) => {
+    let myColor = readyColors.filter((item) => item.name === color);
+    return myColor[0].value;
+  };
+
   return (
     <>
       <ViewerWrapper>
         <Header
+          nameBook={book.title}
           title={currentLocation.chapterName}
           onNavToggle={onNavToggle}
           onOptionToggle={onOptionToggle}
@@ -217,6 +245,7 @@ const Reader = ({ url, loadingView }: Props) => {
           setIsOpen={setIsOpen}
         />
         <Setting
+          setcolor={setcolor}
           setBookStyle={setBookStyle}
           bookStyle={bookStyle}
           bookOption={bookOption}
@@ -226,9 +255,10 @@ const Reader = ({ url, loadingView }: Props) => {
 
         <nav
           style={{
+            backgroundColor: colorHandler(color),
             display: "flex",
             justifyContent: "center",
-            marginTop: "1rem",
+            paddingTop: "1rem",
           }}
         >
           {window.innerWidth < 768 ? (
@@ -364,23 +394,29 @@ const Reader = ({ url, loadingView }: Props) => {
   );
 };
 
-const ReaderWrapper = ({ url, loadingView }: Props) => {
+const ReaderWrapper = ({ url, loadingView, colorHandler }: Props) => {
   return (
     <>
       <Provider store={store}>
-        <Reader url={url} loadingView={loadingView} />
+        <Reader
+          colorHandler={colorHandler}
+          url={url}
+          loadingView={loadingView}
+        />
       </Provider>
     </>
   );
 };
 
 interface Props {
+  colorHandler?: () => void;
   viewerStyle?: BookStyle;
   url: string;
   loadingView?: React.ReactNode;
   isOpen?: any;
   setIsOpen?: any;
   setIsScrollHorizontal?: any;
+  color?: any;
 }
 
 export default ReaderWrapper;