icon uploded

tree icon add to footer

src/containers/Footer.tsx

@@ -7,6 +7,7 @@ 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";
+import { BookCloseIcon, BookOpenIcon, ScrollVerticalIcon } from "lib/svg";
 
 const Footer = ({
   // title,
@@ -35,14 +36,14 @@ const Footer = ({
             <Item text={`${nowPage} / ${totalPage}`} />
           </nav>
           <ProgressBar CountPage={CountPage} />
-          <nav
+          <nav onClick={() => changeIcone()} className="nav-icon  ">
-            // style={{pointer='cruser'}}
-            onClick={() => changeIcone()}
-            className="nav-icon  "
-          >
             {window.innerWidth > 768 ? (
-              <div  className="display-icon" style={{ cursor: "pointer" }}>
+              <div className="display-icon" style={{ cursor: "pointer" }}>
-                {Icon ? <img src={onePage} alt='singlepage' /> : <img src={twoPage} alt='twopages' />}
+                <nav style={{ width: "65px" , display: 'flex' }}>
+                  <BookOpenIcon />
+                  <BookCloseIcon />
+                  <ScrollVerticalIcon />
+                </nav>
               </div>
             ) : null}
           </nav>
@@ -53,6 +54,17 @@ const Footer = ({
   );
 };
 
+const Icon = styled.div`
+  width: 16px;
+  height: 16px;
+
+  & > div,
+  & > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
 const Button = styled.button`
   width: 100%;
   justify-content: center;

src/containers/menu/Option.tsx

@@ -200,7 +200,7 @@ const Option = (
               step={0.1}
               onChange={(e) => onChangeSlider("LineHeight", e)}
             />
-            <OptionTitle>رنگ ها</OptionTitle>
+            {/* <OptionTitle>رنگ ها</OptionTitle>
             <BtnWrapper>
               <Btn>الف</Btn>
               <Btn>الف</Btn>
@@ -212,7 +212,7 @@ const Option = (
               <Btn>الف</Btn>
               <Btn>الف</Btn>
               <Btn>الف</Btn>
-            </BtnWrapper>
+            </BtnWrapper> */}
             {/* <OptionSlider
               active={true}
               title="Horizontal margin"