reza added some changes

src/AppRouter.js

@@ -43,7 +43,7 @@ class AppRouter extends Component {
     const mobile = window.innerWidth < 1000 ? true : false;
     let home = mobile ? (
       <Route exact path={"/"}>
-        {proxy.status ? (
+        {proxy.status() ? (
           this.props.profile ? (
             <Home />
           ) : (
@@ -123,7 +123,15 @@ class AppRouter extends Component {
             <QR />
           </Route>
           <Route exact path={"/auth"}>
-            <Auth />
+            {proxy.status() ? (
+              <Redirect
+                to={{
+                  pathname: "/",
+                }}
+              />
+            ) : (
+              <Auth />
+            )}
           </Route>
           <Route exact path={"/profile"}>
             <Auth page={"profile"} />

src/Redux/reducers/book.js

@@ -94,8 +94,6 @@ export default function book(state = initialState, action) {
         ? bySubjectFilter.filter((item1) => item1.name.indexOf(search) !== -1)
         : bySubjectFilter;
 
-      console.log(bySearchFilter);
-
       if (sort === "گران ترین") {
         finalSort = bySearchFilter.sort((item1, item2) => {
           return item1.product[0].price - item2.product[0].price;

src/views/Auth/Login/Cellphone/index.js

@@ -78,10 +78,6 @@ export default class Cellphone extends Component {
                   </button>
                 </form>
                 <div className="auth-cellphone__box--footer d-flex flex-column justify-content-center align-items-center">
-                  <div style={{ fontSize: fontSize.desktop.div }}>
-                    {" "}
-                    حساب کاربری ندارید ؟ همین حالا<button>ثبت نام کنید</button>
-                  </div>
                   <div style={{ fontSize: fontSize.desktop.div }}>
                     شرایط استفاده و حریم خصوصی
                   </div>
@@ -147,10 +143,6 @@ export default class Cellphone extends Component {
               style={{ fontSize: fontSize.mobile.div }}
               className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center"
             >
-              <div>
-                {" "}
-                حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button>
-              </div>
               <div>شرایط استفاده و حریم خصوصی</div>
             </div>
           </div>

src/views/Contact/index.js

@@ -36,11 +36,11 @@ class Contact extends Component {
   }
 
   render() {
-    const { loading, contactData } = this.props;
+    const { contactData } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
-          !loading ? (
+          contactData ? (
             <>
               <div className="contact d-flex flex-column align-items-center">
                 <Navbar page={"contact"} />
@@ -107,7 +107,7 @@ class Contact extends Component {
           )
         ) : null}
         {window.innerWidth < 1000 ? (
-          !loading ? (
+          contactData ? (
             <div className="mobile-contact d-flex flex-column align-items-center">
               <Navbar page={"contact"} />
               <div className="mobile-contact__form d-flex flex-column">

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js

@@ -164,7 +164,7 @@ NavbarDrawer.defaultProps = {
     },
     {
       name: "بلاگ",
-      link: "/blog",
+      link: "/blogs",
       icon: <img src={mobileBlog} alt="بلاگ" />,
       toast: "",
       message: "",

src/views/MyBooks/BreadCrumb/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "react-router-dom";
+
+import "./index.scss";
+
+function handleClick(event) {
+  event.preventDefault();
+  console.info("You clicked a breadcrumb.");
+}
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+  desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+  mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+};
+
+export default function ActiveLastBreadcrumb(props) {
+  const { name } = props;
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+        }}
+        to={"/"}
+      >
+        صفحه اصلی
+      </Link>
+      <Link
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+          color: "#00CC69",
+        }}
+        to={"/mybooks"}
+      >
+        کتاب‌های من
+      </Link>
+    </Breadcrumbs>
+  );
+}

src/views/MyBooks/BreadCrumb/index.scss

@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+  a {
+    text-decoration: none;
+    font-family: numeralLight;
+    color: #6F7074;
+    letter-spacing: -1px;
+  }
+}

src/views/MyBooks/index.js

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
+import BreadCrumbs from "./BreadCrumb/index";
 
 import sciense_6 from "~/assets/images/olum6.jpg";
 import sciense_8 from "~/assets/images/olum8.jpg";
@@ -12,7 +13,7 @@ import sciense_9 from "~/assets/images/olum9.jpg";
 import sciense_7 from "~/assets/images/olum7.jpg";
 import shimi_10 from "~/assets/images/shimi10.jpg";
 import zist_10 from "~/assets/images/zist10.jpg";
-
+import "./index.scss";
 const maxDesktopSize = 1250;
 const maxMobileSize = 550;
 
@@ -21,6 +22,10 @@ const fontSize = {
     h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
     a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30,
   },
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+    a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85,
+  },
 };
 
 class MyBooks extends React.Component {
@@ -29,13 +34,19 @@ class MyBooks extends React.Component {
   }
 
   render() {
-    const { books } = this.props;
+    const { list } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
           <>
             <div className="mybooks d-flex flex-column">
               <Navbar />
+              <BreadCrumbs />
+              <div className="mybooks__list d-flex flex-wrap p-1">
+                {list.map((item, i) => (
+                  <Item data={item} key={i} id={i} />
+                ))}
+              </div>
             </div>
             <Footer />
           </>
@@ -46,7 +57,7 @@ class MyBooks extends React.Component {
               <Navbar />
               {/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1> */}
               <div className="d-flex flex-wrap p-1">
-                {books.map((item, i) => (
+                {list.map((item, i) => (
                   <Item data={item} key={i} id={i} />
                 ))}
               </div>
@@ -69,76 +80,37 @@ export default connect(
 const Item = (props) => {
   const { data, id } = props;
   return (
-    <div className="mobile-products-product d-flex flex-column">
-      <img src={data.imageUrl} alt={"عکس مجصول"} />
-      <div className="mobile-products-product__info d-flex flex-column">
-        <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
-      </div>
-    </div>
+    <>
+      {window.innerWidth < 1000 &&
+      data.condition === 2 &&
+      data.product.productType === (1 || 3) ? (
+        <div className="mobile-products-product d-flex flex-column">
+          <img
+            src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
+            alt={"عکس مجصول"}
+          />
+          <div className="mobile-products-product__info d-flex flex-column">
+            <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+              {data.product.book.name}
+            </h1>
+          </div>
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 &&
+      data.condition === 2 &&
+      data.product.productType === (1 || 3) ? (
+        <div className="products-product d-flex flex-column">
+          <img
+            src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
+            alt={"عکس مجصول"}
+          />
+          <div className="mobile-products-product__info d-flex flex-column">
+            <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+              {data.product.book.name}
+            </h1>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 };
-
-MyBooks.defaultProps = {
-  books: [
-    {
-      id: 0,
-      title: "علوم ششم",
-      link: "",
-      imageUrl: sciense_6,
-      status: {
-        digital: true,
-        ar: true,
-      },
-    },
-    {
-      id: 1,
-      link: "",
-      title: "علوم هشتم",
-      imageUrl: sciense_8,
-      status: {
-        digital: false,
-        ar: true,
-      },
-    },
-    {
-      id: 2,
-      link: "",
-      title: "علوم نهم",
-      imageUrl: sciense_9,
-      status: {
-        digital: true,
-        ar: false,
-      },
-    },
-    {
-      id: 3,
-      link: "",
-      title: "علوم هفتم",
-      imageUrl: sciense_7,
-      status: {
-        digital: true,
-        ar: true,
-      },
-    },
-    {
-      id: 6,
-      link: "",
-      title: "شیمی دهم",
-      imageUrl: shimi_10,
-      status: {
-        digital: true,
-        ar: true,
-      },
-    },
-    {
-      id: 7,
-      link: "",
-      title: "زیست دهم",
-      imageUrl: zist_10,
-      status: {
-        digital: true,
-        ar: true,
-      },
-    },
-  ],
-};

src/views/MyBooks/index.scss

@@ -0,0 +1,14 @@
+.mybooks {
+  width: 100vw;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px 40px;
+  direction: rtl;
+  overflow-x: hidden;
+  min-height: calc(100vh - 288px);
+  padding-top: 70px;
+  &__list {
+    max-width: 1000px;
+    margin: 0px auto;
+  }
+}

src/views/Product/index.scss

@@ -37,10 +37,10 @@
     &--purchase {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
-      color: #c24141 !important;
-      border: 1px solid #c24141 !important;
-      border-right: 0px solid white;
+      background-color: #efefef;
+      color: #6f7074 !important;
       flex: 1;
+      margin-right: 2px;
     }
     &--digitalButton {
       border-top-right-radius: 8px;
@@ -48,6 +48,7 @@
       background-color: #efefef;
       color: #6f7074 !important;
       flex: 1;
+      margin-left: 2px;
     }
     &--sampleButton {
       border-radius: 8px;

src/views/QR/BookContent/index.js

@@ -1,7 +1,7 @@
 import React, { Component, useState } from "react";
 
 import ppt from "../../../assets/icons/ppt.svg";
-import MaterialAudioPlayer from '../VoiceBox/Material-audio-player/index';
+import MaterialAudioPlayer from "../VoiceBox/Material-audio-player/index";
 
 import "./index.scss";
 
@@ -46,7 +46,7 @@ const Identifier = (props) => {
             className="d-flex align-items-center"
           >
             <span></span>
-            {props.data.title}
+            {props.data.name}
           </h2>
           <MaterialAudioPlayer />
         </a>
@@ -58,7 +58,7 @@ const Identifier = (props) => {
             className="d-flex align-items-center"
           >
             <span></span>
-            {props.data.title}
+            {props.data.name}
           </h2>
         </a>
       ) : null}
@@ -69,7 +69,7 @@ const Identifier = (props) => {
             className="d-flex align-items-center"
           >
             <span></span>
-            {props.data.title}
+            {props.data.name}
           </h2>
         </a>
       ) : null}
@@ -80,7 +80,7 @@ const Identifier = (props) => {
             className="d-flex align-items-center"
           >
             <span></span>
-            {props.data.title}
+            {props.data.name}
           </h2>
         </a>
       ) : null}
@@ -100,7 +100,7 @@ const Identifier = (props) => {
 const Item = (props) => {
   return (
     <li style={{ fontSize: fontSize.desktop.links.li }}>
-      <a href={props.data.link}>{props.data.title}</a>
+      <a href={props.data.link}>{props.data.name}</a>
     </li>
   );
 };

src/views/QR/BookContent/index.scss

@@ -1,112 +1,111 @@
-.book-content{
+.book-content {
   width: 100%;
-  &__header{
+  &__header {
     margin-bottom: 15px;
-    span{
+    span {
       height: 1px;
-      background-color: green;
+      background-color: rgb(165, 165, 165);
       display: flex;
       flex: 1;
     }
-    h2{
+    h2 {
       font-family: numeralBold;
-      color: #6F7074;
+      color: #6f7074;
       margin-bottom: 0px;
       padding-left: 5px;
     }
   }
-  &-ppt{
+  &-ppt {
     width: 100%;
     border-radius: 10px;
     margin: 10px 0px;
     text-decoration: none;
     padding: 10px 10px;
     background: url(../../../assets/icons/ppt.svg) no-repeat #8dfaf61f;
-    background-size: 40px;
+    background-size: 35px;
     background-position: 10px 10px;
-    h2{
+    h2 {
       font-family: numeralLight;
-      color: #0D9189;
+      color: #0d9189;
       padding: 5px;
-      span{
+      span {
         width: 7px;
         height: 7px;
         border-radius: 50%;
-        background-color: #0D9189;
+        background-color: #0d9189;
         margin-left: 5px;
       }
     }
   }
 
-  &-pdf{
+  &-pdf {
     width: 100%;
     border-radius: 10px;
     margin: 10px 0px;
     text-decoration: none;
     padding: 10px 10px;
     background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
-    background-size: 37px;
-    background-position: 10px 10px;
-    h2{
+    background-size: 35px;
+    background-position: 10px 5px;
+    h2 {
       font-family: numeralLight;
-      color: #FF0808;
+      color: #ff0808;
       padding: 5px;
-      span{
+      span {
         width: 7px;
         height: 7px;
         border-radius: 50%;
-        background-color: #FF0808;
+        background-color: #ff0808;
         margin-left: 5px;
       }
     }
   }
-  &-voice{
+  &-voice {
     width: 100%;
     border-radius: 10px;
     background-color: #8dfac541;
     padding: 10px 10px;
     margin: 10px 0px;
     text-decoration: none;
-    .MuiPaper-elevation1{
+    .MuiPaper-elevation1 {
       box-shadow: none !important;
     }
-    .MuiGrid-container{
+    .MuiGrid-container {
       flex-wrap: nowrap !important;
       flex-direction: row-reverse;
-      background-color: rgba(255,255,255,0) !important;
+      background-color: rgba(255, 255, 255, 0) !important;
       padding: 0px !important;
     }
-    
-    .MuiGrid-item{
+
+    .MuiGrid-item {
       display: flex !important;
       flex-direction: row !important;
       padding: 0px !important;
       margin-right: 5px !important;
-      p{
-        color: #02A255 !important;
+      p {
+        color: #02a255 !important;
       }
     }
-    .MuiSvgIcon-root{
-      color: #37D386 !important;
+    .MuiSvgIcon-root {
+      color: #37d386 !important;
       font-size: 50px !important;
     }
-    .MuiSlider-root{
-      color: #37D386;
+    .MuiSlider-root {
+      color: #37d386;
     }
-    h2{
+    h2 {
       font-family: numeralLight;
-      color: #02733C;
-      span{
+      color: #02733c;
+      span {
         width: 7px;
         height: 7px;
         border-radius: 50%;
-        background-color: #00CC69;
+        background-color: #00cc69;
         margin-left: 5px;
       }
     }
-
   }
-  &-video{
+  &-video {
     width: 100%;
     border-radius: 10px;
     background-color: #8ddbfa41;
@@ -116,10 +115,10 @@
     background-size: 28px;
     background-position: 18px 13px;
     text-decoration: none;
-    h2{
+    h2 {
       font-family: numeralLight;
       color: #021c73;
-      span{
+      span {
         width: 7px;
         height: 7px;
         border-radius: 50%;
@@ -128,7 +127,7 @@
       }
     }
   }
-  &-links{
+  &-links {
     width: 100%;
     border-radius: 10px;
     background-color: #fffac948;
@@ -138,11 +137,11 @@
     background: url(../../../assets/icons/attachment.svg) no-repeat #fffac948;
     background-size: 37px;
     background-position: 10px 50%;
-    h2{
+    h2 {
       font-family: numeralMedium;
       color: #72891edc;
       padding: 5px;
-      span{
+      span {
         width: 10px;
         height: 10px;
         border-radius: 50%;
@@ -150,19 +149,18 @@
         margin-left: 5px;
       }
     }
-    ul{
+    ul {
       padding: 0px;
       margin: 0px;
       padding-right: 15px;
       color: #72891e;
-      li{
+      li {
         font-family: numeralLight;
-        a{
+        a {
           text-decoration: none;
           color: #72891e;
         }
       }
     }
   }
-  
-}
+}

src/views/QR/Image/Modal/index.js

@@ -20,7 +20,7 @@ export default function Modal(props) {
     <>
       {window.innerWidth > 1000 ? null : (
         <div
-          className="qr-image-modal d-flex"
+          className="mobile-qr-image-modal d-flex"
           onTouchStart={(e) => setClientX(e.touches[0].clientX)}
           onTouchEnd={(e) => handleTouch(e.changedTouches[0].clientX)}
         >
@@ -37,14 +37,14 @@ export default function Modal(props) {
           />
 
           <div
-            className="qr-image-modal__slide d-flex justify-content-center align-items-center"
+            className="mobile-qr-image-modal__slide d-flex justify-content-center align-items-center"
             onClick={() => handleNavigation("right", selectedImage)}
           >
             <ChevronRightRoundedIcon style={{ fontSize: 35, color: "white" }} />
           </div>
           <img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
           <div
-            className="qr-image-modal__slide d-flex justify-content-center align-items-center"
+            className="mobile-qr-image-modal__slide d-flex justify-content-center align-items-center"
             onClick={() => handleNavigation("left", selectedImage)}
           >
             <ChevronLeftRoundedIcon style={{ fontSize: 35, color: "white" }} />

src/views/QR/Image/Modal/index.scss

@@ -16,7 +16,6 @@
     width: calc(100% - 70px);
     height: 100%;
     object-fit: contain;
-    margin: 20px 0px;
   }
 }
 

src/views/QR/Image/index.js

@@ -1,5 +1,6 @@
 import React, { Component, useState } from "react";
 import Modal from "./Modal/index";
+import PhotoLibraryRoundedIcon from "@material-ui/icons/PhotoLibraryRounded";
 
 import "./index.scss";
 
@@ -8,6 +9,10 @@ const maxMobileSize = 550;
 const fontSize = {
   mobile: {
     span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10,
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
+  },
+  desktop: {
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
   },
 };
 export default function QRImage(props) {
@@ -194,8 +199,23 @@ export default function QRImage(props) {
 
   return (
     <>
-      {window.innerWidth < 1000 ? mobileImages() : null}
-      {window.innerWidth > 1000 ? desktopImages() : null}
+      {window.innerWidth < 1000 ? (
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.mobile.h3 }}>
+            <PhotoLibraryRoundedIcon style={{ fontSize: 30 }} /> عکس‌ها{" "}
+          </h3>
+          {mobileImages()}
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+            <PhotoLibraryRoundedIcon style={{ fontSize: 30 }} />
+            عکس‌ها
+          </h3>
+          {desktopImages()}
+        </div>
+      ) : null}
     </>
   );
 }

src/views/QR/Image/index.scss

@@ -1,6 +1,7 @@
 .mobile-qr-image {
   width: 100%;
   justify-content: space-between;
+  margin: 0px 0px 20px;
   &__single {
     width: 100%;
     border-radius: 10px;

src/views/QR/PDF/index.js

@@ -1,12 +1,20 @@
 import React from "react";
-
+import PictureAsPdfRoundedIcon from "@material-ui/icons/PictureAsPdfRounded";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
+const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {
-    h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
+    h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
+    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
+  },
+  mobile: {
+    h2: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
+    div: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
   },
 };
 
@@ -14,32 +22,52 @@ export default function PDF(props) {
   return (
     <>
       {window.innerWidth > 1000 ? (
-        <a
-          href={props.data.file}
-          download
-          className="pdf-box d-flex flex-column"
-          id="pdf"
-        >
-          <h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center">
-            <span></span>
-            {props.data.title}
-          </h2>
-          <div></div>
-        </a>
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+            <PictureAsPdfRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
+          </h3>
+          <a
+            href={"https://dnvn.ir/api/v1/file/${props.data.fileIds}"}
+            download
+            className="pdf-box d-flex flex-column"
+            id="pdf"
+          >
+            <h2
+              style={{ fontSize: fontSize.desktop.h2 }}
+              className="d-flex align-items-center"
+            >
+              <span></span>
+              {props.data.name}
+            </h2>
+            <div style={{ fontSize: fontSize.desktop.div }}>
+              برای دانلود این فایل روی اینجا کلیک کن
+            </div>
+          </a>
+        </div>
       ) : null}
       {window.innerWidth < 1000 ? (
-        <a
-          href={props.data.file}
-          id="pdf"
-          download
-          className="mobile-pdf-box d-flex flex-column"
-        >
-          <h2 className="d-flex align-items-center">
-            <span></span>
-            {props.data.title}
-          </h2>
-          <div></div>
-        </a>
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.mobile.h3 }}>
+            <PictureAsPdfRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
+          </h3>
+          <a
+            href={"https://dnvn.ir/api/v1/file/${props.data.fileIds}"}
+            id="pdf"
+            download
+            className="mobile-pdf-box d-flex flex-column"
+          >
+            <h2
+              style={{ fontSize: fontSize.mobile.h2 }}
+              className="d-flex align-items-center"
+            >
+              <span></span>
+              {props.data.name}
+            </h2>
+            <div style={{ fontSize: fontSize.mobile.div }}>
+              برای دانلود این فایل روی اینجا کلیک کن
+            </div>
+          </a>
+        </div>
       ) : null}
     </>
   );

src/views/QR/PDF/index.scss

@@ -2,7 +2,7 @@
   width: 100%;
   border-radius: 10px;
   background-color: #ffa9a91e;
-  margin: 15px 0px;
+  margin: 0px 0px 20px;
   text-decoration: none;
   height: calc(100vh / 9);
   padding: 20px 10px;
@@ -22,6 +22,11 @@
       margin-left: 5px;
     }
   }
+  div {
+    text-decoration: none;
+    color: #ff0808;
+    font-family: numeralLight;
+  }
 }
 
 .pdf-box {
@@ -32,9 +37,9 @@
   margin: 15px auto;
   text-decoration: none;
   height: calc(100vh / 9);
-  padding: 20px 10px;
+  padding: 3px 10px;
   background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
-  background-size: 45px;
+  background-size: 40px;
   background-position: 18px 50%;
   h2 {
     font-family: numeralMedium;
@@ -48,4 +53,9 @@
       margin-left: 5px;
     }
   }
+  div {
+    text-decoration: none;
+    color: #ff0808;
+    font-family: numeralLight;
+  }
 }

src/views/QR/PowerPoint/index.js

@@ -1,32 +1,65 @@
-import React from 'react';
-
-import './index.scss';
+import SlideshowRoundedIcon from "@material-ui/icons/SlideshowRounded";
+import "./index.scss";
 
 const maxDesktopSize = 1250;
+const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {
-    h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
+    h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
+    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
+  },
+  mobile: {
+    h2: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
+    div: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
   },
 };
 
-export default function PowerPoint(props){
-    return(
-        <>
-            {
-                window.innerWidth > 1000 ? 
-                <a href={props.data.file} id="ppt" download className="ppt-box d-flex flex-column"> 
-                    <h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
-                    <div></div>
-                </a> : null
-            }
-            {
-                window.innerWidth < 1000 ? 
-                <a href={props.data.file} id="ppt" download className="mobile-ppt-box d-flex flex-column"> 
-                    <h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
-                    <div></div>
-                </a> : null
-            }   
-        </>
-    );
-}
+export default function PowerPoint(props) {
+  return (
+    <>
+      {window.innerWidth > 1000 ? (
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+            <SlideshowRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
+          </h3>
+          <a
+            href={`https://dnvn.ir/api/v1/file/${props.data.fileIds}`}
+            id="ppt"
+            download
+            className="ppt-box d-flex flex-column"
+          >
+            <h2
+              style={{ fontSize: fontSize.desktop.h2 }}
+              className="d-flex align-items-center"
+            >
+              <span></span>
+              {props.data.name}
+            </h2>
+            <div style={{ fontSize: fontSize.desktop.div }}>
+              برای دانلود این فایل روی اینجا کلیک کن
+            </div>
+          </a>
+        </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <a
+          href={`https://dnvn.ir/api/v1/file/${props.data.fileIds}`}
+          id="ppt"
+          download
+          className="mobile-ppt-box d-flex flex-column"
+        >
+          <h2 className="d-flex align-items-center">
+            <span></span>
+            {props.data.name}
+          </h2>
+          <div style={{ fontSize: fontSize.desktop.div }}>
+            برای دانلود این فایل روی اینجا کلیک کن
+          </div>
+        </a>
+      ) : null}
+    </>
+  );
+}

src/views/QR/PowerPoint/index.scss

@@ -22,6 +22,11 @@
       margin-left: 5px;
     }
   }
+  div {
+    text-decoration: none;
+    color: #ff0808;
+    font-family: numeralLight;
+  }
 }
 
 .ppt-box {
@@ -48,4 +53,9 @@
       margin-left: 5px;
     }
   }
+  div {
+    text-decoration: none;
+    color: #ff0808;
+    font-family: numeralLight;
+  }
 }

src/views/QR/VideoBox/index.js

@@ -2,31 +2,44 @@ import React from "react";
 import { VideoCard } from "material-ui-player";
 import ReactVideoJsPlayer from "./React-video-js-player/index";
 
+import PlayCircleFilledRoundedIcon from "@material-ui/icons/PlayCircleFilledRounded";
+
 import "./index.scss";
 
+const maxMobileSize = 550;
+
+const fontSize = {
+  mobile: {
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
+  },
+  desktop: {
+    h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
+  },
+};
+
 export default function VideoBox(props) {
   const { data } = props;
   return (
     <>
       {window.innerWidth > 1000 ? (
-        <div className="video-box d-flex flex-column" id="video">
-          <h2
-            style={{ fontSize: props.fontSize.desktop.content.h2 }}
-            className="d-flex align-items-center"
-          >
-            <span></span>
-            {data.title}
-          </h2>
-          <ReactVideoJsPlayer fileId={data.fileIds} />
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+            <PlayCircleFilledRoundedIcon style={{ fontSize: 35 }} />
+            فیلم‌ها
+          </h3>
+          <div className="video-box d-flex flex-column" id="video">
+            <ReactVideoJsPlayer fileId={data.fileIds} />
+          </div>
         </div>
       ) : null}
       {window.innerWidth < 1000 ? (
-        <div className="mobile-video-box d-flex flex-column" id="video">
-          <h2 className="d-flex align-items-center">
-            <span></span>
-            {data.title}
-          </h2>
-          <ReactVideoJsPlayer fileId={data.fileIds} />
+        <div className="d-flex flex-column">
+          <h3 style={{ fontSize: fontSize.mobile.h3 }}>
+            <PlayCircleFilledRoundedIcon style={{ fontSize: 35 }} /> فیلم‌ها
+          </h3>
+          <div className="mobile-video-box d-flex flex-column" id="video">
+            <ReactVideoJsPlayer fileId={data.fileIds} />
+          </div>
         </div>
       ) : null}
     </>

src/views/QR/VideoBox/index.scss

@@ -1,24 +1,24 @@
-.mobile-video-box{
+.mobile-video-box {
   width: 100%;
   border-radius: 10px;
   background-color: #eee;
-  margin: 15px 0px;
+  margin: 0px 0px 20px;
   height: calc(100vh / 4);
   position: relative;
-  h2{
+  h2 {
     font-family: numeralMedium;
     font-size: calc(100vw / 35);
-    color: #02733C;
+    color: #02733c;
     padding: 5px;
-    background-color: #FFFFFF;
-    color: #4D4D4F;
+    background-color: #ffffff;
+    color: #4d4d4f;
     position: absolute;
     right: 10px;
     top: 20px;
   }
 }
 
-.video-box{
+.video-box {
   width: 100%;
   max-width: 550px;
   border-radius: 10px;
@@ -27,14 +27,14 @@
   height: calc(100vh / 2.5);
   min-height: 300px;
   position: relative;
-  h2{
+  h2 {
     font-family: numeralMedium;
-    color: #02733C;
+    color: #02733c;
     padding: 5px;
-    background-color: #FFFFFF;
-    color: #4D4D4F;
+    background-color: #ffffff;
+    color: #4d4d4f;
     position: absolute;
     right: 10px;
     top: 20px;
   }
-}
+}

src/views/QR/VoiceBox/index.js

@@ -13,7 +13,7 @@ export default function VoiceBox(props) {
             className="d-flex align-items-center"
           >
             <span></span>
-            {data.title}
+            {data.name}
           </h2>
           <MaterialAudioPlayer data={data.fileIds} />
         </div>
@@ -22,7 +22,7 @@ export default function VoiceBox(props) {
         <div className="mobile-voice-box d-flex flex-column" id="voice">
           <h2 className="d-flex align-items-center">
             <span></span>
-            {props.data.title}
+            {data.name}
           </h2>
           <MaterialAudioPlayer data={data.fileIds} />
         </div>

src/views/QR/index.js

@@ -23,7 +23,20 @@ import sciense_7 from "../../assets/images/sciense-7.png";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
-
+const grades = [
+  "اول",
+  "دوم",
+  "سوم",
+  "چهارم",
+  "پنجم",
+  "ششم",
+  "هفتم",
+  "هشتم",
+  "نهم",
+  "دهم",
+  "یازدهم",
+  "دوازدهم",
+];
 class QR extends Component {
   state = {
     theme: true,
@@ -86,10 +99,14 @@ class QR extends Component {
       },
     };
 
+    // if (this.content.clientHeight < window.innerHeight - 60) {
+    //   this.buttons.style.display = "none";
+    // }
+
     return (
       <>
         {window.innerWidth > 1000 ? (
-          !this.props.loading ? (
+          qrList ? (
             <>
               <div className="qr d-flex flex-column">
                 <Navbar />
@@ -98,36 +115,33 @@ class QR extends Component {
                     <section className="qr__sidebar d-flex flex-column p-2">
                       <header className="qr__sidebar--header d-flex">
                         <div className="qr__sidebar--header__right d-flex">
-                          <img src={QR.image} alt={QR.title} />
+                          <img
+                            src={`https://dnvn.ir/api/v1/file/${qrList.book.fileIds}`}
+                            alt={qrList.book.name}
+                          />
                         </div>
                         <div className="qr__sidebar--header__left d-flex flex-column">
                           <h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>
-                            {QR.title}
+                            {qrList.book.name}
                           </h1>
                           <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
-                            {QR.subTitle}
+                            پایه {grades[qrList.book.gradeId]}
                           </h2>
                           <div
                             style={{ fontSize: fontSize.desktop.sidebar.div }}
                           >
                             شما در حال مطالعه{" "}
-                            <strong>صفحه {QR.sample.page}</strong> هستید.
-                          </div>
-                          <div
-                            style={{ fontSize: fontSize.desktop.sidebar.div }}
-                          >
-                            پیشرفت شما در مطالعه کتاب به{" "}
-                            <span>{QR.sample.percent} درصد</span> رسیده است.
+                            <strong>صفحه {qrList.book.pagesNum}</strong> هستید.
                           </div>
                         </div>
                       </header>
-                      <SubjectsDropdown />
-                      <BookContent data={qrList.content} />
+                      {/* <SubjectsDropdown /> */}
+                      <BookContent data={qrList.qr.content} />
                     </section>
                     <section className="qr__content d-flex flex-column">
                       <header className="qr__content--header d-flex justify-content-end">
                         <div className="qr__content--header__tools d-flex">
-                          <span
+                          {/* <span
                             className="d-flex justify-content-center align-items-center"
                             onClick={() =>
                               this.setState({ theme: !this.state.theme })
@@ -139,7 +153,7 @@ class QR extends Component {
                                 color: this.state.theme ? "#7dc241" : "white",
                               }}
                             />
-                          </span>
+                          </span> */}
                           <span
                             className="d-flex justify-content-center align-items-center"
                             onClick={() => this.handleZoom("increase")}
@@ -154,7 +168,7 @@ class QR extends Component {
                           </span>
                         </div>
                       </header>
-                      {qrList.content.map((item, i) => (
+                      {qrList.qr.content.map((item, i) => (
                         <Identifier fontSize={fontSize} data={item} key={i} />
                       ))}
                     </section>
@@ -177,14 +191,19 @@ class QR extends Component {
           )
         ) : null}
         {window.innerWidth < 1000 ? (
-          !this.props.loading ? (
+          qrList ? (
             <>
               <div className="mobile-qr d-flex flex-column">
                 <Navbar />
                 {qrList ? (
                   <div className="d-flex p-3">
                     {this.state.menu ? (
-                      <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                      <div
+                        className="mobile-qr__buttons d-flex flex-column align-items-center"
+                        ref={(div) => {
+                          this.buttons = div;
+                        }}
+                      >
                         <div>
                           <img
                             src={exit}
@@ -195,12 +214,17 @@ class QR extends Component {
                           />
                         </div>
                         <button>نمایش تمامی محتواها</button>
-                        {qrList.content.map((item, i) => (
+                        {qrList.qr.content.map((item, i) => (
                           <MenuIdentifier data={item} key={i} />
                         ))}
                       </div>
                     ) : (
-                      <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                      <div
+                        className="mobile-qr__buttons d-flex flex-column align-items-center"
+                        ref={(div) => {
+                          this.buttons = div;
+                        }}
+                      >
                         <MoreVertIcon
                           style={{ fontSize: 40, color: "grey" }}
                           onClick={() =>
@@ -209,11 +233,16 @@ class QR extends Component {
                         />
                       </div>
                     )}
-                    <div className="mobile-qr__content d-flex flex-column">
+                    <div
+                      className="mobile-qr__content d-flex flex-column"
+                      ref={(div) => {
+                        this.content = div;
+                      }}
+                    >
                       <div className="mobile-qr-scan__back d-flex mb-2">
                         <Link to="/">بازگشت</Link>
                       </div>
-                      {qrList.content.map((item, i) => (
+                      {qrList.qr.content.map((item, i) => (
                         <Identifier data={item} key={i} />
                       ))}
                     </div>

src/views/QR/index.scss

@@ -6,6 +6,10 @@
   direction: rtl;
   padding-top: 70px;
   overflow-x: hidden;
+  h3 {
+    color: rgb(85, 85, 85);
+    font-family: numeralLight;
+  }
   &__notAccess {
     justify-content: center;
     h1 {
@@ -210,7 +214,7 @@
         padding: 8px;
         background-color: #eee;
         border-radius: 10px;
-        width: 130px;
+        // width: 130px;
         justify-content: space-between;
         span {
           cursor: pointer;
@@ -219,6 +223,7 @@
           background-color: #ddd;
           color: #7dc241;
           font-size: 20px;
+          margin: 3px;
         }
       }
     }
@@ -233,6 +238,10 @@
       letter-spacing: -1px;
       text-align: justify;
     }
+    h3 {
+      font-family: numeralLight;
+      color: #4e4e4e;
+    }
   }
 
   // &__buttons{

src/views/Support/index.js

@@ -29,14 +29,10 @@ class Support extends Component {
         <div className="mobile-contact d-flex flex-column align-items-center">
           <Navbar page={"contact"} />
           <div className="mobile-contact__form d-flex flex-column">
-            <h1 style={{ fontSize: fontSize.mobile.h1 }}>تماس با ما</h1>
-            <p style={{ fontSize: fontSize.mobile.p }}>
-              برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
-              پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
-            </p>
+            <h1 style={{ fontSize: fontSize.mobile.h1 }}>پشتیبانی</h1>
             <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
             <Input label={"شماره تماس"} name={"mobile"} />
-            <Select options={["همه", "پرفروش"]} />
+            {/* <Select options={["همه", "پرفروش"]} /> */}
             <Input label={"موضوع پیام"} name={"subject"} />
             <textarea
               placeholder="متن پیام"