reza added some changes

src/AppRouter.js

@@ -102,6 +102,7 @@ class AppRouter extends Component {
 export default connect(
   (state) => ({
     profile: state.user.status.profile || {},
+    // status: state.user.status,
   }),
   {}
 )(AppRouter);

src/Redux/actions/user.js

@@ -2,8 +2,16 @@ import proxy from "../proxy";
 const user = {
   otp: (data, history) => async (dispatch) =>
     await proxy.login("public/sendOTP", data, { history, dispatch }),
+  // otp:
+  //   (data = {}) =>
+  //   async (dispatch) =>
+  //     dispatch({ type: "public/sendOTP", payload: data }),
   otp_login: (data, history) => async (dispatch) =>
     await proxy.login("user/otp/login", data, { history, dispatch }),
+  // otp_login:
+  //   (data = {}) =>
+  //   async (dispatch) =>
+  //     dispatch({ type: "user/otp/login", payload: data }),
   register: (data, history) => async (dispatch) =>
     await proxy.login("user/register", data, { history, dispatch }),
   switchRole: (data, history) => async (dispatch) =>

src/Redux/proxy.js

@@ -1,15 +1,14 @@
 import { ApiConfig } from "./../constants/defaultValues";
 import axios from "axios";
 
-let { baseUrl, apiKey } = ApiConfig;
+let { baseUrl } = ApiConfig;
 let access = window.localStorage.getItem("access");
 baseUrl = baseUrl + "/";
-const baseUrl2 = "https://dnvn.ir/api/v1";
 const Axios = axios.create({
   withCredentials: true,
   validateStatus: null,
   baseURL: baseUrl,
-  headers: access ? { Authorization: `Bearer ${access}` } : {},
+  //headers: access ? { Authorization: `Bearer ${access}` } : {},
 });
 class Proxy {
   get = async (url, params, opt = {}) =>

src/Redux/reducers/qr.js

@@ -56,7 +56,22 @@ export default function qr(state = initialState, action) {
       return {
         ...state,
         loading: false,
-        list: action.payload === "Zist10-13" ? [] : null,
+        list:
+          action.payload === "Zist10-13"
+            ? [
+                {
+                  type: "pdf",
+                  title: "فایل پی دی اف ارائه درس آتشفشان",
+                  link: "",
+                },
+              ]
+            : [
+                {
+                  type: "h1",
+                  text: "صفحه‌ای یافت نشد",
+                  file: null,
+                },
+              ],
         error: null,
       };
     /////////////

src/Redux/reducers/user.js

@@ -1,4 +1,4 @@
-import proxy from '../proxy';
+import proxy from "../proxy";
 const initialState = {
   status: proxy.status(),
   loading: false,
@@ -10,27 +10,29 @@ const initialState = {
 export default function user(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
-    case 'user/login':
-    case 'user/register':
-    case 'user/otp/login':
-    case 'user/switchRole':
+    case "user/login":
+    case "user/register":
+    case "user/switchRole":
+    case "public/sendOTP":
+    case "user/otp/login":
       return { ...state, loading: false, status: data, error: null };
-    case 'user/logout':
+    case "user/logout":
       return { ...state, loading: false, status: proxy.status(), error: null };
-    case 'user/getUserRole':
+    case "user/getUserRole":
       return { ...state, loading: false, userRoles: data, error: null };
-    case 'user/list':
+    case "user/list":
       return { ...state, loading: false, list: data, error: null };
-    case 'user/domains':
+    case "user/domains":
       return { ...state, loading: false, domains: data, error: null };
-    case 'mothers/list':
+    case "mothers/list":
       return { ...state, loading: false, mothers: data, error: null };
+
     /////////////
-    case 'loading':
+    case "loading":
       return { ...state, loading: true };
-    case 'error':
+    case "error":
       return { ...state, loading: false, error: data.message };
     default:
       return state;
   }
-}
+}

src/views/AR/index.scss

@@ -4,7 +4,7 @@
   margin: 0px auto;
   padding: 0px 10px 40px;
   direction: rtl;
-  padding-top: 90px;
+  padding-top: 70px;
   overflow-x: hidden;
 }
 

src/views/About/index.scss

@@ -19,7 +19,7 @@
           display: inline;
           letter-spacing: -2px;
           font-family: numeralBold;
-          background-color: #00CC69;
+          background-color: #00cc69;
           color: white;
         }
         p {
@@ -35,7 +35,7 @@
         h2 {
           display: inline;
           font-family: numeralBold;
-          background-color: #00CC69;
+          background-color: #00cc69;
           color: white;
         }
         ul {
@@ -45,7 +45,7 @@
           margin-top: 5px;
           li {
             display: inline;
-            border-bottom: 2px solid #00CC69;
+            border-bottom: 2px solid #00cc69;
             font-family: numeralLight;
             color: #6d6d6d;
           }
@@ -56,34 +56,31 @@
       width: 60%;
       height: 100%;
       position: relative;
-      & img{
+      & img {
         position: absolute;
       }
-      &__1{
-        top:0px;
+      &__1 {
+        top: 0px;
         left: 100px;
         z-index: 100;
         height: 470px;
-        width: 470px
-        
+        width: 470px;
       }
-      &__2{
+      &__2 {
         left: 430px;
         bottom: 80px;
         z-index: 150;
         height: 235px;
         width: 235px;
-        
       }
-      &__3{
+      &__3 {
         bottom: 0px;
         left: 310px;
         z-index: 200;
         height: 200px;
         width: 200px;
-        
       }
-      &__4{
+      &__4 {
         top: 50px;
         left: 0px;
         z-index: 150;
@@ -101,7 +98,7 @@
     &--right {
       width: 48%;
       height: 100%;
-      & img{
+      & img {
         width: 100%;
       }
     }
@@ -114,7 +111,7 @@
       h1 {
         display: inline;
         font-family: numeralBold;
-        background-color: #00CC69;
+        background-color: #00cc69;
         color: white;
       }
       ul {
@@ -133,20 +130,20 @@
   }
 }
 
-.mobile-about{
+.mobile-about {
   width: 100vw;
   max-width: 650px;
   margin: 0px auto;
-  padding : 0px 10px 40px;
+  padding: 0px 10px 40px;
   direction: rtl;
-  padding-top: 90px;
+  padding-top: 70px;
   overflow-x: hidden;
-  &__fury{
+  &__fury {
     h1 {
       display: inline;
       letter-spacing: -2px;
       font-family: numeralBold;
-      background-color: #00CC69;
+      background-color: #00cc69;
       color: white;
     }
     p {
@@ -157,25 +154,23 @@
       letter-spacing: -1px;
     }
   }
-  &__images{
+  &__images {
     position: relative;
     height: 330px;
     width: 100%;
-    & img{
+    & img {
       position: absolute;
-      
     }
-    &--1{
-      top:0px;
+    &--1 {
+      top: 0px;
       left: calc(100vw / 8);
       z-index: 100;
       height: calc(100vw - 100px);
       width: calc(100vw - 100px);
       max-width: 275px;
       max-height: 275px;
-      
     }
-    &--2{
+    &--2 {
       right: -20px;
       bottom: 70px;
       z-index: 150;
@@ -183,9 +178,8 @@
       width: calc(100vw / 2.5);
       max-width: 150px;
       max-height: 150px;
-      
     }
-    &--3{
+    &--3 {
       bottom: -10px;
       right: -10px;
       z-index: 200;
@@ -193,9 +187,8 @@
       width: calc(100vw / 3);
       max-width: 125px;
       max-height: 125px;
-      
     }
-    &--4{
+    &--4 {
       top: 50px;
       left: -20px;
       z-index: 150;
@@ -205,12 +198,12 @@
       max-height: 125px;
     }
   }
-  &__keys{
-    transform : translateY(-40px);
+  &__keys {
+    transform: translateY(-40px);
     h2 {
       display: inline;
       font-family: numeralBold;
-      background-color: #00CC69;
+      background-color: #00cc69;
       color: white;
     }
     ul {
@@ -220,23 +213,23 @@
       margin-top: 5px;
       li {
         display: inline;
-        border-bottom: 2px solid #00CC69;
+        border-bottom: 2px solid #00cc69;
         font-family: numeralLight;
         color: #6d6d6d;
       }
     }
   }
-  &__video{
+  &__video {
     img {
       width: 100%;
     }
   }
-  &__advantages{
+  &__advantages {
     margin-top: 30px;
     h1 {
       display: inline;
       font-family: numeralBold;
-      background-color: #00CC69;
+      background-color: #00cc69;
       color: white;
       // margin-bottom: 20px;
     }
@@ -254,4 +247,4 @@
       }
     }
   }
-}
+}

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

@@ -89,6 +89,7 @@
   max-width: 500px;
   margin: 0px auto;
   padding: 10px;
+  position: relative;
   img {
     margin-bottom: 30px;
     position: relative;
@@ -120,7 +121,7 @@
       text-align: right;
       position: absolute;
       left: 65px;
-      top: 7px;
+      top: 8px;
       direction: ltr;
       font-family: numeralLight;
       color: #a5a5a5;
@@ -135,7 +136,7 @@
       text-align: left;
       background-color: #f2f2f2;
       border: none;
-      padding: 0px 5px 0px 83px;
+      padding: 0px 5px 0px 81px;
       border-radius: 5px;
       &:focus {
         outline: 0px;
@@ -153,7 +154,7 @@
     }
   }
   &__footer {
-    position: fixed;
+    position: absolute;
     bottom: 40px;
     div {
       font-family: numeralLight;

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

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { Link } from "react-router-dom";
 import Timer from "../Timer/index";
 
 import logo from "../../../../assets/icons/logo.png";
@@ -7,6 +8,7 @@ import pic from "../../../../assets/images/pic.png";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
+const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {
@@ -14,6 +16,13 @@ const fontSize = {
     button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
     div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
   },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 13,
+    p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 27,
+    input: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 85,
+    button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 85,
+    div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+  },
 };
 export default class Code extends Component {
   constructor(props) {
@@ -87,10 +96,10 @@ export default class Code extends Component {
             <div className="auth-code__box d-flex">
               <div
                 style={{ width: "48%", height: "100%" }}
-                className="d-flex flex-column justify-content-center align-items-center"
+                className="d-flex flex-column justify-content-center align-items-center p-5"
               >
                 <img src={logo} alt="دانوین" />
-                <div className="auth-code__box--codes d-flex">
+                <div className="auth-code__box--codes d-flex justify-content-around">
                   <label htmlFor="code1">
                     <input
                       id="code1"
@@ -168,13 +177,14 @@ export default class Code extends Component {
                   ثبت
                 </button>
                 {!this.state.resendStatus ? (
-                  <Timer seconds={10} parent={this} />
+                  <Timer seconds={60} parent={this} />
                 ) : (
                   <div
                     style={{
                       color: "#A5A5A5",
-                      fontFamily: "numeralMedium",
+                      fontFamily: "numeralLight",
                       fontSize: fontSize.desktop.div,
+                      cursor: "pointer",
                     }}
                     className="timer d-flex mt-4"
                     onClick={() => this.setState({ resendStatus: false })}
@@ -185,8 +195,9 @@ export default class Code extends Component {
                 <div
                   style={{
                     color: "#A5A5A5",
-                    fontFamily: "numeralMedium",
+                    fontFamily: "numeralLight",
                     fontSize: fontSize.desktop.div,
+                    cursor: "pointer",
                   }}
                   className="timer d-flex mt-2"
                   onClick={() =>
@@ -197,27 +208,27 @@ export default class Code extends Component {
                 </div>
               </div>
               <div style={{ width: "48%", height: "100%" }} className="d-flex">
-                <img
+                {/* <img
                   src={pic}
                   alt="عکس"
                   style={{ width: "100%", height: "100%" }}
-                />
+                /> */}
               </div>
             </div>
           </div>
         ) : null}
         {window.innerWidth < 1000 ? (
-          <div className="mobile-auth-code d-flex flex-column">
+          <div className="mobile-auth-code d-flex flex-column p-3">
             <img src={logo} alt="دانوین" />
-            <div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3">
-              <h1>دانوین</h1>
-              <p>
+            <div style={{ width: "100%" }} className="d-flex flex-column mb-1">
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>دانوین</h1>
+              <p style={{ fontSize: fontSize.mobile.p }}>
                 یک کد تائیدیه به شماره{" "}
                 <span>{this.props.parent.state.cellphone}</span> ارسال شد <br />
                 آن را در قسمت زیر وارد کنید.
               </p>
             </div>
-            <div className="mobile-auth-code__codes d-flex">
+            <div className="mobile-auth-code__codes d-flex justify-content-around">
               <label htmlFor="code1">
                 <input
                   id="code1"
@@ -290,10 +301,14 @@ export default class Code extends Component {
             </div>
             <button>ثبت</button>
             {!this.state.resendStatus ? (
-              <Timer seconds={10} parent={this} />
+              <Timer seconds={60} parent={this} />
             ) : (
               <div
-                style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
+                style={{
+                  color: "#A5A5A5",
+                  fontFamily: "numeralLight",
+                  fontSize: fontSize.mobile.div,
+                }}
                 className="timer d-flex mt-4"
                 onClick={() => this.setState({ resendStatus: false })}
               >
@@ -301,7 +316,11 @@ export default class Code extends Component {
               </div>
             )}
             <div
-              style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
+              style={{
+                color: "#A5A5A5",
+                fontFamily: "numeralLight",
+                fontSize: fontSize.mobile.div,
+              }}
               className="timer d-flex mt-2"
               onClick={() =>
                 this.props.parent.setState({ page: 0, cellphone: "" })

src/views/Auth/Login/Code/index.scss

@@ -8,8 +8,15 @@
     border-radius: 20px;
     justify-content: space-between;
     height: 80%;
+    background: url(../../../../assets/images/auth_bg.png);
+    background-position: -58px -60px;
+    background-size: calc(100% + 150px) calc(100% + 200px);
+    background-repeat: no-repeat;
+    height: 80%;
+    max-height: 600px;
     img {
       margin-bottom: 30px;
+      width: 200px;
     }
     button {
       margin-top: 20px;
@@ -24,6 +31,9 @@
     }
     &--codes {
       direction: ltr;
+      width: 100%;
+      max-width: 300px;
+      position: relative;
       input {
         max-width: 60px;
         max-height: 60px;
@@ -55,52 +65,50 @@
   align-items: center;
   direction: ltr;
   position: relative;
-  max-width: 360px;
+  // max-width: 360px;
   margin: 0px auto;
   img {
     margin-bottom: 30px;
     position: relative;
-    bottom: 40px;
   }
   h1 {
+    width: 100%;
     font-family: numeralBold;
-    font-size: calc(100vw / 15);
     color: #6f7074;
     position: relative;
-    bottom: 40px;
   }
   p {
     font-family: numeralLight;
-    font-size: calc(100vw / 25);
     color: #6f7074;
-    letter-spacing: -1px;
     position: relative;
-    bottom: 40px;
   }
   button {
     margin-top: 20px;
     width: 100%;
-    max-width: 300px;
     border: 0px;
-    font-family: numeralMedium;
+    font-family: numeralLight;
     background-color: #6cbe44;
     color: white;
     border-radius: 7px;
     padding: 8px;
-    font-size: calc(100vw / 20);
+    margin-top: 30px;
+  }
+  div {
+    letter-spacing: -1px;
+    color: #6cbe44;
   }
   &__codes {
     direction: ltr;
+    width: 100%;
     input {
       max-width: 60px;
       max-height: 60px;
       background-color: #f2f2f2;
       border: 0px;
-      margin: 0px 10px;
+      margin: 0px;
       color: #6f7074;
       text-align: center;
       direction: ltr;
-      font-size: calc(100vw / 15);
       border-radius: 5px;
       padding: 10px 15px;
       &:focus {

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

@@ -2,11 +2,15 @@ import { Component } from "react";
 import "./index.css";
 
 const maxDesktopSize = 1250;
+const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {
     div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
   },
+  mobile: {
+    div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+  },
 };
 export default class Timer extends Component {
   constructor(props) {
@@ -87,11 +91,30 @@ export default class Timer extends Component {
         ) : null}
         {window.innerWidth < 1000 ? (
           <div className="timer d-flex mt-4">
-            <div style={{ color: "#a5a5a5", marginLeft: 5 }}>
+            <div
+              style={{
+                color: "#a5a5a5",
+                marginLeft: 5,
+                fontSize: fontSize.mobile.div,
+              }}
+            >
               زمان باقیمانده تا انقضای کد
             </div>
-            <div>{this.state.time.s}</div>:
-            <div>{this.state.time.m + this.state.time.h * 60}</div>
+            <div
+              style={{
+                fontSize: fontSize.mobile.div,
+              }}
+            >
+              {this.state.time.s}
+            </div>
+            :
+            <div
+              style={{
+                fontSize: fontSize.mobile.div,
+              }}
+            >
+              {this.state.time.m + this.state.time.h * 60}
+            </div>
           </div>
         ) : null}
       </>

src/views/Auth/Login/index.js

@@ -26,6 +26,8 @@ class Login extends Component {
         userToken: "1",
         applicationToken: "11",
       });
+    localStorage.setItem("refresh", "sff234r324rf423dfsdfsaf");
+    localStorage.setItem("userData", "srrfsadf");
   }
 
   resend = () => {

src/views/Auth/Profile/index.js

@@ -37,7 +37,7 @@ class Profile extends Component {
     username: "",
     address: "",
     gender: "",
-    userRoleId: "",
+    userRoleId: "معلم",
     nationalId: "",
     provinceId: "",
     cityId: "",
@@ -66,9 +66,8 @@ class Profile extends Component {
 
   componentDidMount() {
     const { getProfile, profile } = this.props;
-    // if (!profile) {
-    // getProfile();
-    // }
+
+    getProfile();
   }
 
   onSubmit = (e) => {

src/views/Auth/index.scss

@@ -1,5 +1,7 @@
 .auth {
   width: 100%;
+  height: 100vh;
   min-height: 100vh;
   overflow-x: hidden;
+  min-height: 450px;
 }

src/views/Cart/Discount/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import './index.scss';
+import React from "react";
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 const maxMobileSize = 550;
@@ -7,35 +7,35 @@ const maxMobileSize = 550;
 const fontSize = {
   desktop: {
     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
-    input : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
-    button : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
+    input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
+    button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
     p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
   },
   mobile: {
     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
-    button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
-
+    button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
   },
 };
 
-
 const DiscoutCode = (props) => {
   return (
     <>
       {window.innerWidth > 1000 ? (
         <div className="discount-code d-flex flex-column">
-        <h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
-        <p style={{ fontSize: fontSize.desktop.p }}>
-          اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
-          بزنید
-        </p>
-        <div className="discount-code__box d-flex align-items-center">
-          <input style={{ fontSize: fontSize.desktop.input }} type="text" />
-          <button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button>
+          <h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
+          <p style={{ fontSize: fontSize.desktop.p }}>
+            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
+            بزنید
+          </p>
+          <div className="discount-code__box d-flex align-items-center">
+            <input style={{ fontSize: fontSize.desktop.input }} type="text" />
+            <button style={{ fontSize: fontSize.desktop.button }}>
+              ثبت کد
+            </button>
+          </div>
         </div>
-      </div>
       ) : null}
       {window.innerWidth < 1000 ? (
         <div className="mobile-discount-code d-flex flex-column">
@@ -46,7 +46,7 @@ const DiscoutCode = (props) => {
           </p>
           <div className="mobile-discount-code__box d-flex align-items-center">
             <input style={{ fontSize: fontSize.mobile.input }} type="text" />
-            <button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button>
+            <button style={{ fontSize: fontSize.mobile.button }}>ثبت کد</button>
           </div>
         </div>
       ) : null}
@@ -54,4 +54,4 @@ const DiscoutCode = (props) => {
   );
 };
 
-export default DiscoutCode;
+export default DiscoutCode;

src/views/Cart/index.scss

@@ -5,24 +5,24 @@
   padding: 0px;
   font-family: numeralLight;
   padding-top: 100px;
-  &__totalPrice{
+  &__totalPrice {
     padding: 20px 0px;
-    border-bottom: 1px dotted #A5A5A5;
+    border-bottom: 1px dotted #a5a5a5;
     padding-bottom: 20px;
 
-    h3{
+    h3 {
       font-family: numeralLight;
-      color: #00CC69;
+      color: #00cc69;
       margin: 0px;
     }
-    div{
+    div {
       margin-right: 20px;
-      strong{
+      strong {
         font-family: numeralBold;
-        color: #4D4D4F;
+        color: #4d4d4f;
         margin-left: 5px;
       }
-      span{
+      span {
         font-family: numeralLight;
         color: #848484;
       }
@@ -31,14 +31,13 @@
   &__right {
     flex: 4;
     padding: 10px 0px 0px;
-    
   }
   &__left {
     flex: 1.2;
     box-shadow: 0px 0px 13px #d5d5d5b0;
     border-radius: 13px;
     margin-right: 30px;
-    
+
     &--header {
       h2 {
         font-family: numeralBold;
@@ -50,7 +49,7 @@
         letter-spacing: -1px;
       }
     }
-    &--submit{
+    &--submit {
       justify-self: flex-end;
       padding: 12px;
       width: 100%;
@@ -70,10 +69,10 @@
   margin: 0px auto;
   padding: 0px 10px 40px;
   direction: rtl;
-  padding-top: 60px;
+  padding-top: 70px;
   overflow-x: hidden;
   font-family: numeralLight;
-  &__submit{
+  &__submit {
     justify-self: flex-end;
     padding: 12px;
     width: 100%;
@@ -88,9 +87,9 @@
     font-family: numeralBold;
     color: #373737;
   }
-  
+
   &__payMethods {
-    border-bottom: 1px dotted #A5A5A5;
+    border-bottom: 1px dotted #a5a5a5;
     margin-top: 20px;
     padding-bottom: 20px;
     h2 {
@@ -102,9 +101,5 @@
       color: #a5a5a5;
       letter-spacing: -1px;
     }
-    
-    
   }
-
-  
 }

src/views/Contact/Select/index.js

@@ -1,40 +1,25 @@
-import React from 'react';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import NativeSelect from '@material-ui/core/NativeSelect';
-import InputBase from '@material-ui/core/InputBase';
+import React from "react";
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+import NativeSelect from "@material-ui/core/NativeSelect";
+import InputBase from "@material-ui/core/InputBase";
 
 const BootstrapInput = withStyles((theme) => ({
   root: {
-    'label + &': {
+    "label + &": {
       marginTop: theme.spacing(3),
     },
   },
   input: {
-    width : 350,
+    width: 350,
     borderRadius: 4,
-    position: 'relative',
+    position: "relative",
     backgroundColor: theme.palette.background.paper,
-    border: '0px solid #cecece',
-    fontSize: 16,
-    padding: '10px 26px 10px 12px',
-    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    border: "0px solid #cecece",
+    fontSize: 14,
+    padding: "10px 26px 10px 12px",
+    transition: theme.transitions.create(["border-color", "box-shadow"]),
     // Use the system font instead of the default Roboto font.
-    fontFamily: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-    ].join(','),
-    '&:focus': {
-      borderRadius: 4,
-    },
   },
 }))(InputBase);
 
@@ -47,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function CustomizedSelects(props) {
   const classes = useStyles();
-  const [age, setAge] = React.useState('');
+  const [age, setAge] = React.useState("");
   const handleChange = (event) => {
     setAge(event.target.value);
   };
@@ -60,11 +45,9 @@ export default function CustomizedSelects(props) {
           onChange={handleChange}
           input={<BootstrapInput />}
         >
-          {
-            props.options.map(item => (
-              <option value={item}>{item}</option>
-            ))
-          }
+          {props.options.map((item) => (
+            <option value={item}>{item}</option>
+          ))}
         </NativeSelect>
       </FormControl>
     </div>

src/views/Contact/index.js

@@ -21,8 +21,8 @@ const fontSize = {
   },
   mobile: {
     h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
-    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
-    span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
+    span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
   },
 };
 export default class Contact extends Component {

src/views/Contact/index.scss

@@ -163,7 +163,8 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 90px;
+  padding-top: 70px;
+  padding-bottom: 50px;
   &__form {
     width: 100%;
     justify-content: space-between;
@@ -200,7 +201,9 @@
       right: -5px;
       top: -8px;
       transform: translate(0px, 0px) scale(0.75) !important;
-      padding-right: 15px !important;
+      padding-right: 0px !important;
+      width: fit-content;
+      padding: 0px 6px !important;
     }
 
     label {
@@ -209,6 +212,8 @@
       text-align: center;
       color: #797979 !important;
       letter-spacing: -1px;
+      font-family: numeralLight !important;
+      font-size: 14px;
     }
     .Mui-focused {
       color: rgba(0, 0, 0, 0.54) !important;
@@ -222,7 +227,6 @@
     p {
       font-family: numeralLight;
       color: #6f7074;
-      letter-spacing: -1px;
     }
 
     button {
@@ -249,6 +253,7 @@
       border: 1px solid #c4c4c5;
       padding: 10px 8px;
       color: #6f7074;
+      font-size: 14px;
       &::placeholder {
         color: #797979;
       }

src/views/Faq/index.scss

@@ -64,7 +64,7 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 90px;
+  padding-top: 70px;
   &__header {
     margin-top: 30px;
     width: 100%;

src/views/Home/Membership/Input/index.js

@@ -1,14 +1,16 @@
-import React from 'react';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
+import React from "react";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    '& .MuiTextField-root': {
-     
-      width: '200px',
-      position : 'relative',
-      marginRight : 10,
+    "& .MuiTextField-root": {
+      width: "200px",
+      position: "relative",
+      marginRight: 30,
+    },
+    input: {
+      border: "0px",
     },
   },
 }));
@@ -19,7 +21,12 @@ export default function FormPropsTextFields(props) {
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <div>
-        <TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" />
+        <TextField
+          id="outlined-basic"
+          name={props.name}
+          label={props.label}
+          variant="outlined"
+        />
       </div>
     </form>
   );

src/views/Home/Membership/index.scss

@@ -41,6 +41,7 @@
     right: 4px;
     top: 12px;
     transform: translate(0px, 0px) scale(1) !important;
+    border: 0px !important;
   }
   .MuiInputLabel-shrink {
     display: inline;

src/views/Home/Navbar/Mobile/index.scss

@@ -1,26 +1,26 @@
-.mobile-navbar{
+.mobile-navbar {
   width: 100%;
   position: fixed;
-  top : 0px;
-  left : 0px;
+  top: 0px;
+  left: 0px;
   justify-content: space-between;
   align-items: center;
   background-color: white;
   z-index: 400;
   padding: 15px 10px;
-  &__menu{
-    img{
-      width : calc(100vw / 12);
+  &__menu {
+    img {
+      width: 25px;
     }
   }
-  &__logo{
-    img{
-      width: calc(100vw / 4);
+  &__logo {
+    img {
+      width: 80px;
     }
   }
-  &__left{
-    img{
-      width : calc(100vw / 15);
+  &__left {
+    img {
+      width: 25px;
     }
   }
-}
+}

src/views/Home/Navbar/index.scss

@@ -1,11 +1,11 @@
-.navbar{
+.navbar {
   width: 100%;
   max-width: 1250px;
   position: fixed !important;
   top: 0px !important;
   overflow-x: hidden;
-  background-color:white !important;
-  z-index: 200;
-  
+  background-color: white !important;
+  z-index: 300;
+
   // margin: 0px auto !important;
 }

src/views/Home/index.scss

@@ -14,5 +14,5 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 90px;
+  padding-top: 70px;
 }

src/views/MyBooks/index.scss

@@ -1,14 +1,14 @@
-.mybooks{
+.mybooks {
   width: 100vw;
   max-width: 1250px;
   margin: 0px auto;
-  padding : 0px 10px;
+  padding: 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
   padding-top: 100px;
 }
 
-.mobile-mybooks{
+.mobile-mybooks {
   width: 100vw;
   max-width: 600px;
   margin: 0px auto;
@@ -16,27 +16,27 @@
   direction: rtl;
   overflow-x: hidden;
   padding-top: 70px;
-  h1{
+  h1 {
     padding: 0px 10px;
     font-family: numeralBold;
-    color: #6F7074;
+    color: #6f7074;
     margin-bottom: 10px;
   }
-  &__item{
-    background-color: #F2F2F2;
+  &__item {
+    background-color: #f2f2f2;
     width: calc(100vw / 2 - 15px);
     margin: 5px;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
     margin-bottom: 20px;
-    & img{
+    & img {
       width: 100%;
       height: calc(100vh / 3.5);
       border-radius: 30px;
       max-height: 200px;
       margin-bottom: 10px;
     }
-    &--buttons{
+    &--buttons {
       padding: 5px 9px;
       a {
         text-decoration: none;
@@ -50,7 +50,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        img{
+        img {
           position: absolute;
           top: calc(50% - 8px);
           left: 5px;
@@ -60,4 +60,4 @@
       }
     }
   }
-}
+}

src/views/Product/index.js

@@ -65,9 +65,9 @@ export default class Product extends Component {
               </header>
               <div className="product__comments d-flex flex-column">
                 <div className="d-flex justify-content-between">
-                  <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                  <h3 style={{ fontSize: fontSize.desktop.h1 }}>
                     نظرات خریداران
-                  </h1>
+                  </h3>
                   <button>
                     ارسال نظر
                     <img src={send_comment} alt="ارسال نظر" />

src/views/Product/index.scss

@@ -4,7 +4,7 @@
   margin: 0px auto;
   padding: 0px 10px 40px;
   direction: rtl;
-  padding-top: 90px;
+  padding-top: 70px;
   overflow-x: hidden;
   &__header {
     width: 100%;

src/views/Products/index.scss

@@ -1,44 +1,43 @@
-.products{
+.products {
   width: 100vw;
   max-width: 1250px;
   margin: 0px auto;
-  padding : 0px 10px;
+  padding: 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
   padding-top: 100px;
-  &__body{
+  &__body {
     margin-top: 20px;
-    &--left{
+    &--left {
       flex: 4;
       padding-right: 20px;
     }
   }
 }
 
-
-.mobile-products{
+.mobile-products {
   width: 100vw;
   max-width: 600px;
   margin: 0px auto;
   padding: 0px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 90px;
-  &__filters{
+  padding-top: 70px;
+  &__filters {
     width: 100%;
     align-items: center;
-    justify-content:  space-between;
-    padding : 0px 10px;
-    .MuiNativeSelect-icon{
+    justify-content: space-between;
+    padding: 0px 10px;
+    .MuiNativeSelect-icon {
       display: none;
     }
-    .MuiNativeSelect-select.MuiNativeSelect-select{
+    .MuiNativeSelect-select.MuiNativeSelect-select {
       padding-right: 5px !important;
       padding-left: 20px;
     }
   }
-  &__list{
-    width : 100%;
+  &__list {
+    width: 100%;
     padding: 10px 0px;
   }
-}
+}

src/views/QR/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { Link } from "react-router-dom";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import VoiceBox from "./VoiceBox/index.js";
@@ -9,6 +10,7 @@ import Links from "./Links/index";
 import SubjectsDropdown from "./SubjectsDropdown/index";
 import BookContent from "./BookContent/index";
 import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
 
 import { connect } from "react-redux";
 import { qr } from "~/Redux/actions";
@@ -24,6 +26,7 @@ class QR extends Component {
   state = {
     theme: true,
     zoom: [10, 10],
+    menu: true,
   };
 
   handleZoom = (type) => {
@@ -43,6 +46,10 @@ class QR extends Component {
       }));
     }
   };
+
+  componentDidMount() {
+    console.log(typeof this.props.qrList);
+  }
   render() {
     const { QR, qrList } = this.props;
     const fontSize = {
@@ -145,51 +152,40 @@ class QR extends Component {
           <>
             <div className="mobile-qr d-flex flex-column">
               <Navbar />
-              {qrList.length === 0 && qrList !== null ? (
-                <div className="d-flex flex-column">
-                  <div className="d-flex justify-content-end">بازگشت</div>
-                  <h1>فایلی در این صفحه موجود نیست.</h1>
-                </div>
-              ) : null}
-              {qrList !== null ? (
-                <div className="d-flex pt-3">
+              <div className="d-flex p-3">
+                {this.state.menu ? (
                   <div className="mobile-qr__buttons d-flex flex-column align-items-center">
-                    <img src={exit} alt="خروج" />
+                    <div>
+                      <img
+                        src={exit}
+                        alt="خروج"
+                        onClick={() =>
+                          this.setState({ menu: !this.state.menu })
+                        }
+                      />
+                    </div>
                     <button>نمایش تمامی محتواها</button>
-                    <a
-                      href="#voice"
-                      className="mobile-qr__buttons--voice mobile-qr__buttons--media"
-                    ></a>
-                    <a
-                      href="#video"
-                      className="mobile-qr__buttons--video mobile-qr__buttons--media"
-                    ></a>
-                    <a
-                      href="#ppt"
-                      className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
-                    ></a>
-                    <a
-                      href="#pdf"
-                      className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
-                    ></a>
-                    <a
-                      href="#links"
-                      className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
-                    ></a>
-                  </div>
-                  <div className="mobile-qr__content d-flex flex-column">
                     {qrList.map((item, i) => (
-                      <Identifier data={item} key={i} />
+                      <MenuIdentifier data={item} key={i} />
                     ))}
                   </div>
+                ) : (
+                  <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                    <MoreVertIcon
+                      style={{ fontSize: 40, color: "grey" }}
+                      onClick={() => this.setState({ menu: !this.state.menu })}
+                    />
+                  </div>
+                )}
+                <div className="mobile-qr__content d-flex flex-column">
+                  <div className="mobile-qr-scan__back d-flex mb-2">
+                    <Link to="/">بازگشت</Link>
+                  </div>
+                  {qrList.map((item, i) => (
+                    <Identifier data={item} key={i} />
+                  ))}
                 </div>
-              ) : null}
-              {qrList === null ? (
-                <div className="d-flex flex-column align-items-center">
-                  <div className="d-flex justify-content-end">بازگشت</div>
-                  <h1 className="align-center">404</h1>
-                </div>
-              ) : null}
+              </div>
             </div>
           </>
         ) : null}
@@ -254,3 +250,40 @@ const Identifier = (props) => {
     </>
   );
 };
+
+const MenuIdentifier = (props) => {
+  return (
+    <>
+      {props.data.type === "voice" ? (
+        <a
+          href="#voice"
+          className="mobile-qr__buttons--voice mobile-qr__buttons--media"
+        ></a>
+      ) : null}
+      {props.data.type === "video" ? (
+        <a
+          href="#video"
+          className="mobile-qr__buttons--video mobile-qr__buttons--media"
+        ></a>
+      ) : null}
+      {props.data.type === "pdf" ? (
+        <a
+          href="#pdf"
+          className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
+        ></a>
+      ) : null}
+      {props.data.type === "ppt" ? (
+        <a
+          href="#ppt"
+          className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
+        ></a>
+      ) : null}
+      {props.data.type === "links" ? (
+        <a
+          href="#links"
+          className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
+        ></a>
+      ) : null}
+    </>
+  );
+};

src/views/QR/index.scss

@@ -51,15 +51,19 @@
     padding-top: 10px 0px;
     text-align: center;
     overflow-x: hidden;
-    height: 100vh;
+    height: calc(100vh - 88px);
     position: fixed;
-    top: 100px;
-    right: 0px;
+    top: 85px;
+    right: 5px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0px;
+    }
     &--media {
       width: 100%;
       height: 50px;
-      border-top-left-radius: 8px;
-      border-bottom-left-radius: 8px;
+      border-radius: 8px;
       transform: translateY(120px);
       margin-top: 10px;
     }
@@ -99,11 +103,15 @@
       width: 140px;
       transform: rotate(-90deg) translateX(-65px);
     }
+    & img {
+      width: 20px;
+      height: 20px;
+    }
   }
   &__content {
     margin-right: 40px;
     width: calc(100% - 40px);
-    padding: 0px 10px;
+    padding-right: 10px;
     h1 {
       font-family: numeralBold;
       font-size: calc(100vw / 22);

src/views/QRScan/Scanner/index.js

@@ -30,7 +30,7 @@ export default class Scanner extends Component {
             delay={300}
             onError={this.handleError}
             onScan={this.handleScan}
-            style={{ width: "100%" }}
+            style={{ width: "100%", maxWidth: 300 }}
             facingMode={facingMode[this.props.parent.state.facingMode]}
           />
         ) : null}
@@ -39,7 +39,7 @@ export default class Scanner extends Component {
             delay={300}
             onError={this.handleError}
             onScan={this.handleScan}
-            style={{ width: "100%", maxWidth: 300 }}
+            style={{ width: "100%" }}
             facingMode={this.props.parent.state.facingMode}
           />
         ) : null}

src/views/QRScan/index.scss

@@ -4,7 +4,7 @@
   margin: 0px auto;
   padding: 0px 10px 40px;
   direction: rtl;
-  padding-top: 90px;
+  padding-top: 70px;
   overflow-x: hidden;
   &__back {
     justify-content: flex-end;
@@ -23,7 +23,6 @@
     }
   }
   &__header {
-    margin-top: 30px;
     width: 100%;
     h1 {
       font-family: numeralBold;