18-6

3 years ago · 73f4f7ad3d
parent 09bb0f0ed6
commit 73f4f7ad3d
52 changed files with 470 additions and 430 deletions
--- a/public/offline.html
+++ b/public/offline.html
@ -1,86 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>دعوت</title>
-    <style type="text/css">
-      * {
-        box-sizing: border-box !important;
-        direction: rtl;
-        font-family: numeralLight;
-        margin: 0px !important;
-      }

-      @font-face {
-        font-family: numeralMedium;
-        src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>دعوت</title>
+  <style type="text/css">
+    * {
+      box-sizing: border-box !important;
+      direction: rtl;
+      font-family: numeralLight;
+      margin: 0px !important;
+    }

-      @font-face {
-        font-family: numeralLight;
-        src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\).ttf);
-      }
+    @font-face {
+      font-family: numeralMedium;
+      src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);
+    }

-      @font-face {
-        font-family: numeralBold;
-        src: url(assets/IRANSans/IRANSans_Bold.ttf);
-      }
+    @font-face {
+      font-family: numeralLight;
+      src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\).ttf);
+    }

-      @font-face {
-        font-family: numeralUltraLight;
-        src: url(assets/IRANSans//IRANSans_UltraLight.ttf);
-      }
+    @font-face {
+      font-family: numeralMedium;
+      src: url(assets/IRANSans/IRANSans_Bold.ttf);
+    }

-      body {
-        overflow: hidden;
-        overflow-y: hidden;
-        overflow-x: hidden;
-      }
+    @font-face {
+      font-family: numeralUltraLight;
+      src: url(assets/IRANSans//IRANSans_UltraLight.ttf);
+    }

-      .splash {
-        width: 100vw;
-        height: 100vh;
-        overflow-y: hidden;
-        overflow-x: hidden;
-        padding: 0px 10px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background: linear-gradient(
-          270deg,
+    body {
+      overflow: hidden;
+      overflow-y: hidden;
+      overflow-x: hidden;
+    }
+
+    .splash {
+      width: 100vw;
+      height: 100vh;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      padding: 0px 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: linear-gradient(270deg,
          hsla(0, 0%, 100%, 1) 0%,
-          hsla(100, 100%, 60%, 1) 100%
-        );
+          hsla(100, 100%, 60%, 1) 100%);

-        background: -moz-linear-gradient(
-          270deg,
+      background: -moz-linear-gradient(270deg,
          hsla(0, 0%, 100%, 1) 0%,
-          hsla(100, 100%, 60%, 1) 100%
-        );
+          hsla(100, 100%, 60%, 1) 100%);

-        background: -webkit-linear-gradient(
-          270deg,
+      background: -webkit-linear-gradient(270deg,
          hsla(0, 0%, 100%, 1) 0%,
-          hsla(100, 100%, 60%, 1) 100%
-        );
-      }
-      .splash span {
-        font-family: numeralLight;
-        margin-top: 20px;
-        color: #02733c;
-        font-size: 20px;
-        letter-spacing: -1px;
-      }
-    </style>
-  </head>
+          hsla(100, 100%, 60%, 1) 100%);
+    }
+
+    .splash span {
+      font-family: numeralLight;
+      margin-top: 20px;
+      color: #02733c;
+      font-size: 20px;
+      letter-spacing: -1px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="splash">
+    <img src="assets/icons/logo.png" alt="لوگو" />
+    <span>دسترسی شما به اینترنت قطع می‌باشد.</span>
+  </div>
+</body>

-  <body>
-    <div class="splash">
-      <img src="assets/icons/logo.png" alt="لوگو" />
-      <span>دسترسی شما به اینترنت قطع می‌باشد.</span>
-    </div>
-  </body>
-</html>
+</html>
--- a/src/App.css
+++ b/src/App.css
@ -15,7 +15,7 @@
 }

@font-face {
-  font-family: numeralBold;
+  font-family: numeralMedium;
  src: url(assets/IRANSans/IRANSans_Bold.ttf);
 }

--- a/src/Redux/actions/userProduct.js
+++ b/src/Redux/actions/userProduct.js
@ -5,6 +5,11 @@ const userProduct = {
    async (dispatch) => {
      await proxy.get("userProduct/list", data, { dispatch });
    },
+  myList:
+    (data = {}) =>
+    async (dispatch) => {
+      await proxy.get("userProduct/myList", data, { dispatch });
+    },
  info:
    (data = {}) =>
    async (dispatch) =>
--- a/src/Redux/reducers/userProduct.js
+++ b/src/Redux/reducers/userProduct.js
@ -8,6 +8,7 @@ const initialState = {
  sum: null,
  checkEmpty: false,
  hasPhysical: false,
+  myList: [],
 };
 export default function userProduct(state = initialState, action) {
  let { type, data, message } = action;
@ -30,6 +31,8 @@ export default function userProduct(state = initialState, action) {
      };
    case "userProduct/info":
      return { ...state, loading: false, info: data, error: null };
+    case "userProduct/myList":
+      return { ...state, loading: false, myList: data, error: null };
    case "userProduct/update":
      return { ...state, loading: false, error: null };
    case "userProduct/add":
--- a/src/views/AR/Item/index.js
+++ b/src/views/AR/Item/index.js
@ -15,10 +15,25 @@ const fontSize = {
    old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
  },
 };
-
+const grades = [
+  "پیش دبستان",
+  "اول",
+  "دوم",
+  "سوم",
+  "چهارم",
+  "پنجم",
+  "ششم",
+  "هفتم",
+  "هشتم",
+  "نهم",
+  "دهم",
+  "یازدهم",
+  "دوازدهم",
+];
 export default class Item extends Component {
  render() {
    const { data } = this.props;
+    console.log({ data });
    return (
      <>
        {window.innerWidth < 1000 ? (
@ -28,11 +43,14 @@ export default class Item extends Component {
            className="mobile-products-product d-flex flex-column"
          >
            <img
-              src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+              src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`}
              alt={data.title}
            />
            <div className="mobile-products-product__info d-flex flex-column">
-              <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+                {data["product.book.name"]}{" "}
+                {grades[+data["product.book.gradeId"]]}
+              </h1>
            </div>
          </a>
        ) : null}
--- a/src/views/AR/index.js
+++ b/src/views/AR/index.js
@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { userProduct } from "~/Redux/actions";
-
+import { Link } from "react-router-dom";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import Loader from "~/components/Loader/index";
@ -11,62 +11,82 @@ import BreadCrumbs from "./BreadCrumb/index";
 import "./index.scss";

 const maxDesktopSize = 1250;
+const maxMobileSize = 550;

 const fontSize = {
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
+    a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 30,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
+  },
  desktop: {
-    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70,
-    p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90,
+    h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+    a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85,
+    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
  },
 };

 class AR extends Component {
  componentDidMount() {
    window.scrollTo(0, 0);
-    //  this.props.getArList({ type: 3 });
+    this.props.getMyList({ isActive: 1, productType: 3 });
  }

  render() {
-    const { data, arList } = this.props;
+    const { arList, loading } = this.props;
+    if (loading)
+      return (
+        <div
+          className="d-flex justify-content-center align-items-center"
+          style={{ height: "100vh", width: "100vw" }}
+        >
+          <Loader />
+        </div>
+      );
+    if (arList.length === 0)
+      return (
+        <div className="ar d-flex flex-column">
+          <Navbar />
+          <div
+            className="mybooks__list--empty d-flex flex-column justify-content-center align-items-center"
+            style={{ width: "100vw", height: "calc(100vh - 100px)" }}
+          >
+            <p
+              style={{
+                fontSize:
+                  window.innerWidth > 1000
+                    ? fontSize.desktop.p
+                    : fontSize.mobile.p,
+              }}
+            >
+              برای استفاده از این بخش باید یک کتاب را فعالسازی کرده باشید
+            </p>
+            <Link to="/activation">فعالسازی کتاب</Link>
+          </div>
+        </div>
+      );
    return (
      <>
        {window.innerWidth > 1000 ? (
-          arList.length > 0 ? (
-            <>
-              <div className="ar d-flex flex-column">
-                <Navbar />
-                <BreadCrumbs />
-                <div className="ar__box d-flex flex-column"></div>
-              </div>
-              <Footer />
-            </>
-          ) : (
-            <div
-              className="d-flex justify-content-center align-items-center"
-              style={{ height: "100vh", width: "100vw" }}
-            >
-              <Loader />
-            </div>
-          )
-        ) : null}
-        {window.innerWidth < 1000 ? (
-          arList.length ? (
-            <div className="mobile-ar d-flex flex-column">
+          <>
+            <div className="ar d-flex flex-column">
              <Navbar />
              <BreadCrumbs />
-              <div className="mobile-ar__list d-flex flex-wrap">
-                {arList.map((item, i) => (
-                  <Item data={item} key={i} />
-                ))}
-              </div>
+              <div className="ar__box d-flex flex-column"></div>
            </div>
-          ) : (
-            <div
-              className="d-flex justify-content-center align-items-center"
-              style={{ height: "100vh", width: "100vw" }}
-            >
-              <Loader />
+            <Footer />
+          </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-ar d-flex flex-column">
+            <Navbar />
+            <BreadCrumbs />
+            <div className="mobile-ar__list d-flex flex-wrap">
+              {arList.map((item, i) => (
+                <Item data={item} key={i} />
+              ))}
            </div>
-          )
+          </div>
        ) : null}
      </>
    );
@ -75,9 +95,10 @@ class AR extends Component {

 export default connect(
  (state) => ({
-    arList: state.userProduct.list,
+    arList: state.userProduct.myList || [],
+    loading: state.loading,
  }),
  {
-    getArList: userProduct.list,
+    getMyList: userProduct.myList,
  }
 )(AR);
--- a/src/views/About/index.scss
+++ b/src/views/About/index.scss
@ -18,7 +18,7 @@
        h1 {
          display: inline;
          letter-spacing: -2px;
-          font-family: numeralBold;
+          font-family: numeralMedium;
          background-color: #00cc69;
          color: white;
        }
@ -34,7 +34,7 @@
        margin-top: 20px;
        h2 {
          display: inline;
-          font-family: numeralBold;
+          font-family: numeralMedium;
          background-color: #00cc69;
          color: white;
        }
@ -110,7 +110,7 @@
      margin-top: 20px;
      h1 {
        display: inline;
-        font-family: numeralBold;
+        font-family: numeralMedium;
        background-color: #00cc69;
        color: white;
      }
@ -142,7 +142,7 @@
    h1 {
      display: inline;
      letter-spacing: -2px;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      background-color: #00cc69;
      color: white;
    }
@ -202,7 +202,7 @@
    transform: translateY(-40px);
    h2 {
      display: inline;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      background-color: #00cc69;
      color: white;
    }
@ -228,7 +228,7 @@
    margin-top: 30px;
    h1 {
      display: inline;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      background-color: #00cc69;
      color: white;
      // margin-bottom: 20px;
--- a/src/views/Activation/index.scss
+++ b/src/views/Activation/index.scss
@ -26,7 +26,7 @@
  &__header {
    margin: auto;
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      margin-top: 15px;
      color: #00cc69;
      letter-spacing: -2px;
@ -107,7 +107,7 @@
    width: 100%;
    margin: 30px 0px;
    h2 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #02a255;
      font-size: calc(100vw / 24);
      margin-bottom: 20px;
@ -131,7 +131,7 @@
      width: 200px;
    }
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      margin-top: 15px;
      color: #00cc69;
      letter-spacing: -2px;
@ -210,7 +210,7 @@
    max-width: 900px;
    margin: 50px 0px;
    h2 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #02a255;
      margin-bottom: 20px;
    }
--- a/src/views/Auth/Login/Cellphone/index.scss
+++ b/src/views/Auth/Login/Cellphone/index.scss
@ -100,7 +100,7 @@
    width: 250px;
  }
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #6f7074;
    position: relative;
    bottom: 40px;
--- a/src/views/Auth/Login/Code/index.scss
+++ b/src/views/Auth/Login/Code/index.scss
@ -74,7 +74,7 @@
  }
  h1 {
    width: 100%;
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #6f7074;
    position: relative;
  }
--- a/src/views/Auth/Profile/index.scss
+++ b/src/views/Auth/Profile/index.scss
@ -16,7 +16,7 @@
  }
  h1 {
    margin-top: 15px;
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #6f7074;
    letter-spacing: -1px;
  }
@ -165,7 +165,7 @@
    border-radius: 20px;
    h1 {
      margin-top: 15px;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #6f7074;
      letter-spacing: -1px;
    }
--- a/src/views/Cart/DeliveryMethod/index.scss
+++ b/src/views/Cart/DeliveryMethod/index.scss
@ -47,6 +47,6 @@
  h3,
  span {
    color: #02a255;
-    font-family: numeralMedium;
+    font-family: numeralLight;
  }
 }
--- a/src/views/Cart/Discount/index.scss
+++ b/src/views/Cart/Discount/index.scss
@ -1,9 +1,9 @@
 .discount-code {
-  border-bottom: 1px dotted #A5A5A5;
+  border-bottom: 1px dotted #a5a5a5;
  margin-top: 20px;
  padding-bottom: 20px;
  h2 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #2580ec;
  }
  p {
@ -11,7 +11,7 @@
    color: #a5a5a5;
    letter-spacing: -1px;
  }
-  &__box{
+  &__box {
    border: 1px solid #2b95ff;
    padding: 5px;
    border-radius: 10px;
@ -24,8 +24,8 @@
      border: 0px;
      flex: 1;
      direction: ltr;
-      &:focus{
-        outline : none;
+      &:focus {
+        outline: none;
      }
    }
    button {
@ -41,11 +41,11 @@
 }

 .mobile-discount-code {
-  border-bottom: 1px dotted #A5A5A5;
+  border-bottom: 1px dotted #a5a5a5;
  margin-top: 20px;
  padding-bottom: 20px;
  h2 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #2580ec;
  }
  p {
@ -53,7 +53,7 @@
    color: #a5a5a5;
    letter-spacing: -1px;
  }
-  &__box{
+  &__box {
    border: 1px solid #2b95ff;
    padding: 5px;
    border-radius: 10px;
@ -66,8 +66,8 @@
      border: 0px;
      flex: 1;
      direction: ltr;
-      &:focus{
-        outline : none;
+      &:focus {
+        outline: none;
      }
    }
    button {
@ -79,5 +79,4 @@
      border: 0px;
    }
  }
-  
-}
+}
--- a/src/views/Cart/Factor/index.scss
+++ b/src/views/Cart/Factor/index.scss
@ -1,9 +1,9 @@
-.mobile-factor{
-  border-bottom: 1px dotted #A5A5A5;
+.mobile-factor {
+  border-bottom: 1px dotted #a5a5a5;
  margin-top: 20px;
  padding-bottom: 20px;
  h2 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #2580ec;
  }
  p {
@ -11,26 +11,26 @@
    color: #a5a5a5;
    letter-spacing: -1px;
  }
-  div{
+  div {
    margin-bottom: 10px;
-    strong{
+    strong {
      font-family: numeralLight;
      color: #373737;
      font-weight: 300;
    }
-    span{
+    span {
      font-family: numeralLight;
      color: #373737;
    }
  }
 }

-.factor{
-  border-bottom: 1px dotted #A5A5A5;
+.factor {
+  border-bottom: 1px dotted #a5a5a5;
  margin-top: 20px;
  padding-bottom: 20px;
  h2 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #2580ec;
  }
  p {
@ -38,16 +38,16 @@
    color: #a5a5a5;
    letter-spacing: -1px;
  }
-  div{
+  div {
    margin-bottom: 10px;
-    strong{
+    strong {
      font-family: numeralLight;
      color: #373737;
      font-weight: 300;
    }
-    span{
+    span {
      font-family: numeralLight;
      color: #373737;
    }
  }
-}
+}
--- a/src/views/Cart/index.scss
+++ b/src/views/Cart/index.scss
@ -84,7 +84,7 @@
    margin-top: 30px;
  }
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #373737;
  }

@ -93,7 +93,7 @@
    margin-top: 20px;
    padding-bottom: 20px;
    h2 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #2580ec;
    }
    p {
--- a/src/views/ChatList/index.scss
+++ b/src/views/ChatList/index.scss
@ -50,8 +50,8 @@
    background-color: white;
    justify-content: center;
    align-items: center;
-    h1{
-      font-family: numeralBold;
+    h1 {
+      font-family: numeralMedium;
      font-size: 20px;
      color: #afafaf;
    }
--- a/src/views/ChatRoom/Body/Message/Inline/index.scss
+++ b/src/views/ChatRoom/Body/Message/Inline/index.scss
@ -28,7 +28,7 @@
        width: 100%;
        text-align: right;
        font-size: 16px;
-        // font-family: IRANSansNumeralBold;
+        // font-family: IRANSansnumeralMedium;
      }
    }
    &__options {
--- a/src/views/ChatRoom/Body/index.scss
+++ b/src/views/ChatRoom/Body/index.scss
@ -6,9 +6,9 @@
    height: 60px;
    // top: 20px;
    z-index: 30;
-    // font-family: 'IRANSansNumeralBold';
+    // font-family: 'IRANSansnumeralMedium';
    // & div {
-    //   font-family: 'IRANSansNumeralBold';
+    //   font-family: 'IRANSansnumeralMedium';
    // }
  }

@ -81,7 +81,7 @@
          }
        }
      }
-      &::-webkit-scrollbar{
+      &::-webkit-scrollbar {
        width: 0px;
        display: none;
      }
@ -96,16 +96,16 @@
      overflow-y: hidden;
      overflow-x: hidden;
      padding-bottom: 15px;
-      &::-webkit-scrollbar{
+      &::-webkit-scrollbar {
        width: 0px;
        display: none;
      }
-      &--emoji{
+      &--emoji {
        margin-top: 5px;
        width: 100%;
        background-color: red;
        height: 250px;
-        &::-webkit-scrollbar{
+        &::-webkit-scrollbar {
          width: 0px;
          display: none;
        }
@ -113,31 +113,31 @@
        // position: absolute;
        // bottom: 0px;
        // left: 0px;
-        .MuiBox-root{
-          max-height : 202px;
+        .MuiBox-root {
+          max-height: 202px;
          min-height: 160px;
-          overflow-y: scroll; 
+          overflow-y: scroll;
          padding: 10px 10px 0px !important;
        }
-        
-        .MuiTab-root{
+
+        .MuiTab-root {
          padding: 2px !important;
          min-height: 22px !important;
          min-width: 34px !important;
          font-size: 24px !important;
          margin-right: 10px !important;
        }
-        
-        .MuiTabs-root{
+
+        .MuiTabs-root {
          min-height: 28px !important;
        }
-        
-        .PrivateTabIndicator-colorPrimary-7{
-          width : 34px !important;
+
+        .PrivateTabIndicator-colorPrimary-7 {
+          width: 34px !important;
          background-color: green !important;
        }
-        
-        .MuiPaper-elevation4{
+
+        .MuiPaper-elevation4 {
          box-shadow: none !important;
        }
      }
@ -214,7 +214,7 @@
        }
      }
    }
-    &::-webkit-scrollbar{
+    &::-webkit-scrollbar {
      width: 0px;
      display: none;
    }
@ -229,16 +229,16 @@
    overflow-y: hidden;
    overflow-x: hidden;
    padding-bottom: 15px;
-    &::-webkit-scrollbar{
+    &::-webkit-scrollbar {
      width: 0px;
      display: none;
    }
-    &--emoji{
+    &--emoji {
      margin-top: 5px;
      width: 100%;
      background-color: red;
      height: 250px;
-      &::-webkit-scrollbar{
+      &::-webkit-scrollbar {
        width: 0px;
        display: none;
      }
@ -246,31 +246,31 @@
      // position: absolute;
      // bottom: 0px;
      // left: 0px;
-      .MuiBox-root{
-        max-height : 202px;
+      .MuiBox-root {
+        max-height: 202px;
        min-height: 160px;
-        overflow-y: scroll; 
+        overflow-y: scroll;
        padding: 10px 10px 0px !important;
      }
-      
-      .MuiTab-root{
+
+      .MuiTab-root {
        padding: 2px !important;
        min-height: 22px !important;
        min-width: 34px !important;
        font-size: 24px !important;
        margin-right: 10px !important;
      }
-      
-      .MuiTabs-root{
+
+      .MuiTabs-root {
        min-height: 28px !important;
      }
-      
-      .PrivateTabIndicator-colorPrimary-7{
-        width : 34px !important;
+
+      .PrivateTabIndicator-colorPrimary-7 {
+        width: 34px !important;
        background-color: green !important;
      }
-      
-      .MuiPaper-elevation4{
+
+      .MuiPaper-elevation4 {
        box-shadow: none !important;
      }
    }
--- a/src/views/ChatRoom/Info/index.scss
+++ b/src/views/ChatRoom/Info/index.scss
@ -22,7 +22,7 @@
        height: 65px;
        bottom: -30px;
        right: 40px;
-        background :  #128c7e;
+        background: #128c7e;
        padding: 5px;
        border-radius: 100px;
        z-index: 400;
@ -81,91 +81,90 @@
  }
 }

-
-.desktop-contact-info{
+.desktop-contact-info {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  box-shadow: 0px 0px 7px rgb(214, 214, 214);
-  background-color:white;
-  &::-webkit-scrollbar{
+  background-color: white;
+  &::-webkit-scrollbar {
    display: none;
    width: 0px;
  }
-  &__header{
+  &__header {
    min-height: 55px;
-    width : 100%;
+    width: 100%;
    border-bottom: 1px solid rgb(224, 224, 224);
    position: relative;
  }
-  &__body{
+  &__body {
    width: 100%;
    height: calc(100% - 55px);
    padding-top: 20px;
    overflow-x: hidden;
-    &--profileImage{
+    &--profileImage {
      width: 140px;
      min-height: 140px;
      border-radius: 50%;
    }
-    h1{
-      color: #6F7074;
+    h1 {
+      color: #6f7074;
      margin-top: 10px;
-      font-family: numeralBold;
+      font-family: numeralMedium;
    }
-    &--bio{
+    &--bio {
      width: 100%;
      padding: 0px 10px;
      margin-top: 10px;
-      h2{
+      h2 {
        font-family: numeralMedium;
-        color: #00CC69;
+        color: #00cc69;
        margin-top: 10px;
      }
-      p{
+      p {
        font-family: numeralLight;
-        color: #6F7074;
+        color: #6f7074;
        text-align: justify;
        letter-spacing: -1px;
      }
-      ul{
+      ul {
        padding: 0px;
        list-style: none;
-        li{
+        li {
          font-family: numeralLight;
-          color: #6F7074;
+          color: #6f7074;
          text-align: justify;
          letter-spacing: -1px;
        }
      }
    }
-    &--buttons{
+    &--buttons {
      width: 80%;
      margin-bottom: 15px;
      margin-top: 25px;
-      li{
+      li {
        list-style: none;
        padding: 10px;
        border-radius: 50%;
      }
    }
-    &--options{
+    &--options {
      width: calc(100% - 20px);
      padding: 15px 0px;
      border-bottom: 1px solid rgb(224, 224, 224);
      margin-top: 10px;
-      h3{
+      h3 {
        font-family: numeralMedium;
-        color: #6F7074;
+        color: #6f7074;
        margin: 0px;
      }
-      span{
+      span {
        font-family: numeralLight;
-        color: #6F7074;
+        color: #6f7074;
      }
-      &__click{
+      &__click {
        cursor: pointer;
      }
    }
  }
-}
+}
--- a/src/views/Contact/index.js
+++ b/src/views/Contact/index.js
@ -56,9 +56,7 @@ class Contact extends Component {
                <Navbar page={"contact"} />
                <div className="contact__forms d-flex">
                  <div className="contact__forms--right d-flex flex-column">
-                    <h1 style={{ fontSize: fontSize.desktop.h1 }}>
-                      تماس با ما
-                    </h1>
+                    <h1 style={{ fontSize: fontSize.desktop.h1 }}>پشتیبانی</h1>
                    <p style={{ fontSize: fontSize.desktop.p }}>
                      برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده
                      کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@ -62,7 +62,7 @@
      h1 {
        letter-spacing: -2px;
        color: #6cbe44;
-        font-family: numeralBold;
+        font-family: numeralMedium;
        font-size: calc(100vw / 40);
      }
      p {
@ -222,7 +222,7 @@
    h1 {
      letter-spacing: -2px;
      color: #6cbe44;
-      font-family: numeralBold;
+      font-family: numeralMedium;
    }
    p {
      font-family: numeralLight;
--- a/src/views/Faq/index.scss
+++ b/src/views/Faq/index.scss
@ -11,7 +11,7 @@
    width: 600px;
    h1 {
      letter-spacing: -2px;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      font-size: calc(100vw / 25);
      color: #424246;
    }
@ -70,7 +70,7 @@
    width: 100%;
    h1 {
      letter-spacing: -2px;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #424246;
    }

--- a/src/views/Home/Footer/index.js
+++ b/src/views/Home/Footer/index.js
@ -10,23 +10,24 @@ export default class Footer extends Component {
    const { fastAccess } = this.props;
    return (
      <>
-        {
-          window.innerWidth > 1000 ? 
+        {window.innerWidth > 1000 ? (
          <footer className="footer d-flex flex-column">
            <div className="footer-container d-flex">
              <div className="footer-container__content d-flex">
                <div className="footer-container__content--box first d-flex flex-column">
                  <h1>دانوین کجاست؟</h1>
                  <p className="mt-2">
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-                    استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
-                    در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
-                    نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-                    کتابهای زیادی در شصت و سه{" "}
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و
+                    با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
+                    و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی
+                    تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای
+                    کاربردی می باشد، کتابهای زیادی در شصت و سه{" "}
                  </p>
                  <div className="footer__location d-flex align-items-center mt-2">
                    <img src={location} alt="آدرس" className="m-1" />
-                    <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
+                    <p>
+                      تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
+                    </p>
                  </div>
                  <div
                    className="d-flex align-items-center mt-1"
@ -53,7 +54,7 @@ export default class Footer extends Component {
                  </ul>
                </div>
                <div className="footer-container__content--box second d-flex flex-column">
-                  <h1>دسترسی سریع</h1>
+                  <h1>لینک های کاربردی</h1>
                  <ul>
                    {fastAccess.map((item) => (
                      <li>
@ -68,25 +69,25 @@ export default class Footer extends Component {
              <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
            </div>
          </footer>
-          : null
-        }
-        {
-          window.innerWidth < 1000 ? 
+        ) : null}
+        {window.innerWidth < 1000 ? (
          <footer className="mobile-footer d-flex flex-column">
            <div className="mobile-footer-container d-flex">
              <div className="mobile-footer-container__content d-flex flex-column">
                <div className="mobile-footer-container__content--box first d-flex flex-column">
                  <h1>دانوین کجاست؟</h1>
                  <p className="mt-2">
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-                    استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
-                    در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
-                    نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-                    کتابهای زیادی در شصت و سه{" "}
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و
+                    با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
+                    و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی
+                    تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای
+                    کاربردی می باشد، کتابهای زیادی در شصت و سه{" "}
                  </p>
                  <div className="mobile-footer__location d-flex align-items-center mt-2">
                    <img src={location} alt="آدرس" className="m-1" />
-                    <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
+                    <p>
+                      تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
+                    </p>
                  </div>
                  <div
                    className="d-flex align-items-center mt-1"
@ -127,10 +128,9 @@ export default class Footer extends Component {
            <div className="mobile-footer__privacy d-flex align-items-center">
              <p>تمامی حقوق این وبسایت متعلق به دانوین می باشد. 1400</p>
            </div>
-          </footer> : null
-        }
+          </footer>
+        ) : null}
      </>
-      
    );
  }
 }
--- a/src/views/Home/Footer/index.scss
+++ b/src/views/Home/Footer/index.scss
@ -1,7 +1,7 @@
 .footer {
  width: 100%;
  background-color: rgb(80, 80, 80);
-  padding: 10px;
+  // padding: 10px;
  &-container {
    width: 100%;
    max-width: 1250px;
@ -17,7 +17,7 @@
          height: 17px;
        }
        h1 {
-          font-family: numeralBold;
+          font-family: numeralMedium;
          color: #c4e14c;
          font-size: calc(100vw / 80);
        }
@ -38,7 +38,7 @@
        flex: 1;
        color: white;
        h1 {
-          font-family: numeralBold;
+          font-family: numeralMedium;
          color: #c4e14c;
          font-size: calc(100vw / 80);
        }
@ -94,7 +94,7 @@
          height: 17px;
        }
        h1 {
-          font-family: numeralBold;
+          font-family: numeralMedium;
          color: #c4e14c;
          font-size: calc(100vw / 20);
        }
@ -114,7 +114,7 @@
      .second {
        color: white;
        h1 {
-          font-family: numeralBold;
+          font-family: numeralMedium;
          color: #c4e14c;
          font-size: calc(100vw / 20);
        }
--- a/src/views/Home/HomeScroll/MyProduct/index.scss
+++ b/src/views/Home/HomeScroll/MyProduct/index.scss
@ -1,64 +1,64 @@
-.scroll-my-product{
+.scroll-my-product {
  padding: 10px;
  background-color: #eee;
-  a{
-    width : 100%;
+  a {
+    width: 100%;
    text-decoration: none;
-    &:hover{
+    &:hover {
    }
-    img{
+    img {
      width: 100%;
      height: 150px;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
-    h1{
+    h1 {
      font-family: numeralLight;
      margin-top: 5px;
      font-size: calc(100vw / 34);
      color: #7dc241;
      letter-spacing: -1px;
    }
-    h2{
+    h2 {
      font-family: numeralLight;
      margin-top: 10px;
      font-size: calc(100vw / 45);
      color: #6f7074;
    }
  }
-  &__notAvailabe{
-    font-family: numeralBold;
+  &__notAvailabe {
+    font-family: numeralMedium;
    font-size: calc(100vw / 45);
-    width : 100%;
+    width: 100%;
    text-align: center;
    color: #6f7074;
    margin-top: 15px;
  }
-  &__price{
+  &__price {
    font-size: calc(100vw / 45);
-    width : 100%;
+    width: 100%;
    margin-top: 15px;
    text-align: center;
-    &--old{
-      font-family: numeralBold;
+    &--old {
+      font-family: numeralMedium;
      color: #6f7074;
      position: relative;
      margin-left: 0px;
-      align-items:center;
+      align-items: center;
      font-size: calc(100vw / 45);
-      span{
+      span {
        position: absolute;
        left: 0px;
-        width : 100%;
+        width: 100%;
        height: 2px;
        background-color: rgba(121, 121, 121, 0.534);
-        transform: rotate(-14deg);      
+        transform: rotate(-14deg);
      }
    }
-    &--price{
+    &--price {
      color: #02733c;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      font-size: calc(100vw / 45);
    }
  }
-}
+}
--- a/src/views/Home/HomeScroll/Product/index.scss
+++ b/src/views/Home/HomeScroll/Product/index.scss
@ -1,63 +1,63 @@
-.scroll-product{
+.scroll-product {
  padding: 10px;
-  a{
-    width : 100%;
+  a {
+    width: 100%;
    text-decoration: none;
-    &:hover{
+    &:hover {
    }
-    img{
+    img {
      width: 100%;
      height: 150px;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
-    h1{
+    h1 {
      font-family: numeralLight;
      margin-top: 5px;
      font-size: calc(100vw / 34);
      color: #7dc241;
      letter-spacing: -1px;
    }
-    h2{
+    h2 {
      font-family: numeralLight;
      margin-top: 10px;
      font-size: calc(100vw / 45);
      color: #6f7074;
    }
  }
-  &__notAvailabe{
-    font-family: numeralBold;
+  &__notAvailabe {
+    font-family: numeralMedium;
    font-size: calc(100vw / 45);
-    width : 100%;
+    width: 100%;
    text-align: center;
    color: #6f7074;
    margin-top: 15px;
  }
-  &__price{
+  &__price {
    font-size: calc(100vw / 45);
-    width : 100%;
+    width: 100%;
    margin-top: 15px;
    text-align: center;
-    &--old{
-      font-family: numeralBold;
+    &--old {
+      font-family: numeralMedium;
      color: #6f7074;
      position: relative;
      margin-left: 0px;
-      align-items:center;
+      align-items: center;
      font-size: calc(100vw / 45);
-      span{
+      span {
        position: absolute;
        left: 0px;
-        width : 100%;
+        width: 100%;
        height: 2px;
        background-color: rgba(121, 121, 121, 0.534);
-        transform: rotate(-14deg);      
+        transform: rotate(-14deg);
      }
    }
-    &--price{
+    &--price {
      color: #02733c;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      font-size: calc(100vw / 45);
    }
  }
-}
+}
--- a/src/views/Home/HomeScroll/index.scss
+++ b/src/views/Home/HomeScroll/index.scss
@ -10,7 +10,7 @@
    &--right {
      position: relative;
      h1 {
-        font-family: numeralBold;
+        font-family: numeralMedium;
        letter-spacing: -1px;
      }
      span {
@ -66,7 +66,7 @@
      position: relative;
      h1 {
        font-size: calc(100vw / 30);
-        font-family: numeralBold;
+        font-family: numeralMedium;
        letter-spacing: -1px;
      }
      span {
--- a/src/views/Home/HomeSearch/index.js
+++ b/src/views/Home/HomeSearch/index.js
@ -28,7 +28,7 @@ class HomeSearch extends Component {
    return (
      <div className="home-search d-flex">
        <input
-          placeholder="جستجو در دانوین ..."
+          placeholder="جستجو در عناوین کتاب ..."
          className="home-search__input d-flex"
          type="text"
          name="search"
--- a/src/views/Home/HomeSlider/Blog/index.scss
+++ b/src/views/Home/HomeSlider/Blog/index.scss
@ -18,7 +18,7 @@
    border-radius: 10px;
  }
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    margin-top: 15px;
    color: #6f7074;
  }
@ -75,7 +75,7 @@
    border-radius: 10px;
  }
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    margin-top: 15px;
    font-size: calc(100vw / 35);
    color: #6f7074;
--- a/src/views/Home/HomeSlider/Header/index.js
+++ b/src/views/Home/HomeSlider/Header/index.js
@ -30,7 +30,7 @@ export default class Header extends Component {
            >
              <h1>{data.title}</h1>
              <h2>{data.subTitle}</h2>
-              <Link to={data.link}>{data.buttonText}</Link>
+              <Link to={data.link || "/"}>{data.buttonText}</Link>
            </div>
          </div>
        ) : null}
@ -57,7 +57,7 @@ export default class Header extends Component {
            >
              <h1>{data.title}</h1>
              <h2>{data.subTitle}</h2>
-              <Link to={data.link}>{data.buttonText}</Link>
+              <Link to={data.link || "/"}>{data.buttonText}</Link>
            </div>
          </div>
        ) : null}
--- a/src/views/Home/HomeSlider/Header/index.scss
+++ b/src/views/Home/HomeSlider/Header/index.scss
@ -17,14 +17,14 @@
    h1 {
      font-size: calc(100vw / 55);
      color: white;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      letter-spacing: -1px;
    }
    h2 {
      margin-top: 5px;
      font-size: calc(100vw / 78);
      color: white;
-      font-family: numeralBold;
+      font-family: numeralMedium;
    }
    a {
      text-decoration: none;
@ -68,13 +68,13 @@
    h1 {
      font-size: calc(100vw / 37);
      color: white;
-      font-family: numeralBold;
+      font-family: numeralMedium;
    }
    h2 {
      margin-top: 5px;
      font-size: calc(100vw / 48);
      color: white;
-      font-family: numeralBold;
+      font-family: numeralMedium;
    }
    a {
      text-decoration: none;
--- a/src/views/Home/HomeSlider/Simple/index.scss
+++ b/src/views/Home/HomeSlider/Simple/index.scss
@ -1,58 +1,58 @@
-.slider-simple{
+.slider-simple {
  padding: 10px;
-  a{
-    width : 100%;
+  a {
+    width: 100%;
    text-decoration: none;
    max-width: 200px;
-    &:hover{
+    &:hover {
    }
-    img{
-      width: 100%;
+    img {
+      // width: 100%;
      height: 250px;
      border-radius: 10px;
    }
-    h1{
-      font-family: numeralBold;
+    h1 {
+      font-family: numeralMedium;
      margin-top: 15px;
      color: #7dc241;
      letter-spacing: -1px;
    }
-    h2{
+    h2 {
      font-family: numeralLight;
      margin-top: 10px;
      color: #6f7074;
    }
  }
-  &__notAvailabe{
-    font-family: numeralBold;
-    width : 100%;
+  &__notAvailabe {
+    font-family: numeralMedium;
+    width: 100%;
    text-align: center;
    color: #6f7074;
    margin-top: 15px;
  }
-  &__price{
-    width : 100%;
+  &__price {
+    width: 100%;
    margin-top: 15px;
    text-align: center;
-    &--old{
-      font-family: numeralBold;
+    &--old {
+      font-family: numeralMedium;
      color: #6f7074;
      position: relative;
      margin-left: 10px;
-      align-items:center;
-      span{
+      align-items: center;
+      span {
        position: absolute;
        left: 0px;
-        width : 100%;
+        width: 100%;
        height: 2px;
        background-color: rgba(121, 121, 121, 0.534);
-        transform: rotate(-14deg);      
+        transform: rotate(-14deg);
      }
    }
-    &--price{
+    &--price {
      color: #02733c;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      font-size: calc(100vw / 80);
    }
  }
-}
+}
--- a/src/views/Home/HomeSlider/index.scss
+++ b/src/views/Home/HomeSlider/index.scss
@ -1,7 +1,7 @@
 .mobile-home-slider {
  width: 100%;
-  padding: 2px 0px 0px;
-  margin: 0px 0px 10px;
+  padding: 2px 5px 0px;
+  margin: 0px 0px 5px;
  position: relative;
  .rec-arrow-left {
    top: calc(50% - 22px) !important;
--- a/src/views/Home/HomeStatic/index.scss
+++ b/src/views/Home/HomeStatic/index.scss
@ -6,7 +6,7 @@
    width: 100%;
    &--item {
      box-shadow: 0px 0px 5px rgb(200, 200, 200);
-      font-family: numeralBold;
+      font-family: numeralMedium;
      align-items: center;
      border-radius: 10px;
      padding: 0px 10px;
@ -20,7 +20,7 @@
      img {
        margin-right: 20px;
        border-radius: 10px;
-        width: 80px;
+        height: 70px;
      }
    }
  }
@ -41,7 +41,7 @@
    &--right {
      margin-left: 10px;
      h1 {
-        font-family: numeralBold;
+        font-family: numeralMedium;
        text-align: justify;
      }
      span {
@ -54,7 +54,7 @@
    padding: 15px 5px;
    text-decoration: none;
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      text-align: justify;
    }
    &--product {
@ -87,7 +87,7 @@
      height: 100%;
      padding: 0px 3px;
      h1 {
-        font-family: numeralBold;
+        font-family: numeralMedium;
        text-align: justify;
        margin: 0px;
      }
--- a/src/views/Home/Membership/index.js
+++ b/src/views/Home/Membership/index.js
@ -18,7 +18,7 @@ class Membership extends Component {
            <div className="d-flex">
              <Input label={"نام ‌و ‌نام خانوادگی"} name={"name"} />
              <Input label={"شماره تماس"} name={"mobile"} />
-              <button className="membership__submit">دریافت هدیه</button>
+              <button className="membership__submit">ثبت </button>
            </div>
          </div>
        ) : null}
@ -37,7 +37,7 @@ class Membership extends Component {
              <div>
                <Input label={"شماره تماس"} name={"mobile"} />
              </div>
-              <button className="mobile-membership__submit">دریافت هدیه</button>
+              <button className="mobile-membership__submit">ثبت </button>
            </div>
          </div>
        ) : null}
--- a/src/views/Home/Membership/index.scss
+++ b/src/views/Home/Membership/index.scss
@ -9,7 +9,7 @@
  margin-top: 20px;
  margin-bottom: 20px;
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    font-size: calc(100vw / 50);
    margin-bottom: 0px;
    color: #1bbc6e;
@ -88,7 +88,7 @@
  margin-top: 20px;
  margin-bottom: 20px;
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    font-size: calc(100vw / 20);
    margin-bottom: 0px;
    color: #1bbc6e;
--- a/src/views/Home/Navbar/Laptop/index.js
+++ b/src/views/Home/Navbar/Laptop/index.js
@ -106,6 +106,6 @@ LaptopNavbar.defaultProps = {
    { name: "فروشگاه", to: "/products", page: "products" },
    { name: "سوالات متداول", to: "/faq", page: "faq" },
    { name: "درباره ما", to: "/about", page: "about" },
-    { name: "تماس با ما", to: "/contact", page: "contact" },
+    { name: "پشتیبانی", to: "/contact", page: "contact" },
  ],
 };
--- a/src/views/Home/Navbar/Mobile/index.scss
+++ b/src/views/Home/Navbar/Mobile/index.scss
@ -7,7 +7,7 @@
  align-items: center;
  background-color: white;
  z-index: 400;
-  padding: 10px 10px;
+  padding: 10px 10px 0px;
  &__menu {
    justify-self: flex-start;
    img {
--- a/src/views/Home/SingleBlog/index.scss
+++ b/src/views/Home/SingleBlog/index.scss
@ -7,7 +7,7 @@
    align-items: flex-start;
    padding-left: 40px;
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #1bbc6e;
      text-align: justify;
    }
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@ -12,7 +12,7 @@
  width: 100vw;
  max-width: 600px;
  margin: 0px auto;
-  padding: 0px 10px;
+  padding: 0px 5px;
  direction: rtl;
  overflow-x: hidden;
  padding-top: 70px;
--- a/src/views/Product/AddToCart/index.scss
+++ b/src/views/Product/AddToCart/index.scss
@ -21,7 +21,7 @@
        color: #848484;
        font-family: numeralLight;
        strong {
-          font-family: numeralBold;
+          font-family: numeralLight;
          color: #4d4d4f;
        }
      }
--- a/src/views/Product/Gallery/index.scss
+++ b/src/views/Product/Gallery/index.scss
@ -1,15 +1,15 @@
 .product-gallery {
-  flex: 5;
+  // flex: 5;
  margin: 10px;
  justify-content: space-between;
  margin-right: 0px;
  &__top {
    width: 100%;
    height: 320px;
-    background-color: #eee;
+    // background-color: #eee;
    border-radius: 20px;
    & img {
-      width: 100%;
+      // width: 100%;
      height: 100%;
      border-radius: 20px;
    }
@ -19,10 +19,10 @@
    justify-content: space-between;
  }
  &-item {
-    min-width: 110px;
+    // min-width: 110px;
    height: 110px;
    max-width: 110px;
-    border-radius: 20px;
+    border-radius: 21px;
    position: relative;
    margin: 5px;
    cursor: pointer;
--- a/src/views/Product/Info/index.scss
+++ b/src/views/Product/Info/index.scss
@ -1,20 +1,21 @@
-.product-info{
+.product-info {
  flex: 6;
  margin: 10px;
  padding: 0px 10px;
-  h1{
-    font-family: numeralBold;
+  h1 {
+    font-family: numeralMedium;
    color: #373737;
    margin-bottom: 10px;
  }
-  span , p{
+  span,
+  p {
    font-family: numeralLight;
  }
-  span{
+  span {
    margin-bottom: 10px;
-    color: #00CC69;
+    color: #00cc69;
  }
-  p{
-    color: #6F7074;
+  p {
+    color: #6f7074;
  }
-}
+}
--- a/src/views/Product/index.scss
+++ b/src/views/Product/index.scss
@ -17,7 +17,7 @@
    }
    h1 {
      margin-top: 10px;
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #7dc241;
      letter-spacing: -1px;
    }
@ -74,7 +74,7 @@
    margin-top: 30px;
    width: 100%;
    h3 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #6f7074;
      letter-spacing: -1px;
    }
@ -92,7 +92,7 @@
    background-color: #baffdc2f;
    border-radius: 10px;
    h3 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #02733c;
      letter-spacing: -1px;
    }
@ -118,7 +118,7 @@
    background-size: 60px;
    background-position: 18px 50%;
    h3 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #074f8b;
      letter-spacing: -1px;
    }
@ -149,7 +149,7 @@
    max-width: 100%;
    margin-top: 30px;
    h3 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #6f7074;
      // letter-spacing: -1px;
      // margin-bottom: 30px;
@ -203,7 +203,7 @@
    width: 100%;
    margin-top: 30px;
    h3 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #6f7074;
      letter-spacing: -1px;
      margin-bottom: 30px;
--- a/src/views/Products/Filters/AppliedFilters/index.scss
+++ b/src/views/Products/Filters/AppliedFilters/index.scss
@ -3,7 +3,7 @@
  margin-bottom: 20px;
  &__header {
    h2 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      margin: 0px;
      color: #373737;
    }
@ -25,7 +25,7 @@
    padding: 10px 5px;
    button {
      background-color: white;
-      border : 1px solid #d4d4d4;
+      border: 1px solid #d4d4d4;
      border-radius: 7px;
      margin: 3px 4px;
      font-family: numeralLight;
--- a/src/views/Products/Filters/TypicalFilters/index.scss
+++ b/src/views/Products/Filters/TypicalFilters/index.scss
@ -1,14 +1,14 @@
-.products-filters-typical{
+.products-filters-typical {
  width: 100%;
  margin-bottom: 20px;
-  &__header{
-    h2{
-      font-family: numeralBold;
+  &__header {
+    h2 {
+      font-family: numeralMedium;
      margin: 0px;
      color: #373737;
    }

-    span{
+    span {
      width: 4px;
      border-radius: 4px;
      height: 100%;
@ -22,18 +22,17 @@
    border-radius: 8px;
    min-height: 30px;
    padding: 10px 5px;
-    .MuiFormControlLabel-root{
+    .MuiFormControlLabel-root {
      margin: 0px;
    }
-    .MuiCheckbox-root{
+    .MuiCheckbox-root {
      padding: 0px;
-
    }
-    strong{
+    strong {
      font-weight: 100;
-      color: #6F7074;
+      color: #6f7074;
      font-family: numeralLight;
      margin-right: 10px;
    }
  }
-}
+}
--- a/src/views/Products/Product/index.scss
+++ b/src/views/Products/Product/index.scss
@ -12,7 +12,7 @@
    border-radius: 30px;
  }
  h1 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    margin-top: 15px;
    color: #02a1a6;
    letter-spacing: -1px;
--- a/src/views/QR/BookContent/index.scss
+++ b/src/views/QR/BookContent/index.scss
@ -9,7 +9,7 @@
      flex: 1;
    }
    h2 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #6f7074;
      margin-bottom: 0px;
      padding-left: 5px;
--- a/src/views/QR/SubjectsDropdown/index.scss
+++ b/src/views/QR/SubjectsDropdown/index.scss
@ -4,33 +4,33 @@
  border: 1px solid #eee;
  border-radius: 10px;
  h3 {
-    font-family: numeralBold;
+    font-family: numeralMedium;
    color: #6f7074;
    cursor: pointer;
  }
-  &__search{
+  &__search {
    width: 100%;
    position: relative;
    margin-top: 5px;
-    img{
+    img {
      position: absolute;
      left: 7px;
      top: 7px;
      width: 20px;
    }
-    input{
+    input {
      width: 100%;
      padding: 5px 5px 5px 35px;
      font-family: numeralMedium;
      border: 1px solid #afafaf;
      border-radius: 5px;
      color: #6f7074;
-      &:focus{
-        outline: 0px
+      &:focus {
+        outline: 0px;
      }
    }
  }
-  ul{
+  ul {
    direction: rtl;
    padding-right: 15px;
    padding-top: 5px;
@ -38,7 +38,7 @@
    overflow-y: scroll;
    margin-top: 10px;
    text-align: right;
-    li{
+    li {
      font-family: numeralLight;
      color: #6f7074;
      margin-bottom: 8px;
--- a/src/views/QR/VoiceBox/index.scss
+++ b/src/views/QR/VoiceBox/index.scss
@ -1,76 +1,76 @@
-.mobile-voice-box{
+.mobile-voice-box {
  width: 100%;
  border-radius: 10px;
  background-color: #8dfac541;
  padding: 10px 10px;
  margin: 15px 0px;
-  h2{
-    font-family: numeralBold;
+  h2 {
+    font-family: numeralMedium;
    font-size: calc(100vw / 40);
-    color: #02733C;
-    span{
+    color: #02733c;
+    span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
-      background-color: #00CC69;
+      background-color: #00cc69;
      margin-left: 5px;
    }
  }
-  .MuiSvgIcon-root{
-    color: #37D386 !important;
+  .MuiSvgIcon-root {
+    color: #37d386 !important;
    font-size: 50px !important;
  }
-  .MuiSlider-root{
-    color: #37D386;
+  .MuiSlider-root {
+    color: #37d386;
  }
 }
-.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;
  }
 }
-.voice-box{
+.voice-box {
  width: 100%;
  max-width: 700px;
  border-radius: 10px;
  background-color: #8dfac541;
  padding: 10px 10px;
  margin: 15px auto;
-  .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;
    }
  }
-  div{
+  div {
    // width: 100%;
    // height: 40px;
    // background-color: #02733C;
  }
-}
+}
--- a/src/views/QR/index.scss
+++ b/src/views/QR/index.scss
@ -33,13 +33,13 @@
      justify-content: center;
      margin-right: 30px;
      h1 {
-        font-family: numeralBold;
+        font-family: numeralMedium;
        font-size: calc(100vw / 25);
        color: #7dc241;
        letter-spacing: -1px;
      }
      h2 {
-        font-family: numeralBold;
+        font-family: numeralMedium;
        font-size: calc(100vw / 32);
        color: #6f7074;
      }
@ -133,7 +133,7 @@
    width: calc(100% - 40px);
    padding-right: 10px;
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      font-size: calc(100vw / 22);
      color: #6f7074;
      letter-spacing: -1px;
@ -182,12 +182,12 @@
        justify-content: center;
        margin-right: 10px;
        h1 {
-          font-family: numeralBold;
+          font-family: numeralMedium;
          color: #7dc241;
          letter-spacing: -1px;
        }
        h2 {
-          font-family: numeralBold;
+          font-family: numeralMedium;
          color: #6f7074;
        }
        div {
@ -233,7 +233,7 @@
      }
    }
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #6f7074;
      letter-spacing: -1px;
    }
@ -257,7 +257,7 @@
  //   width: calc(100% - 35px);
  //   padding: 0px 10px;
  //   h1{
-  //     font-family: numeralBold;
+  //     font-family: numeralMedium;
  //     font-size: calc(100vw / 22);
  //     color: #6f7074;
  //     letter-spacing: -1px;
--- a/src/views/QRScan/index.scss
+++ b/src/views/QRScan/index.scss
@ -25,7 +25,7 @@
  &__header {
    width: 100%;
    h1 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #4ce1be;
      font-size: calc(100vw / 13);
    }
@ -76,7 +76,7 @@
    width: 100%;
    margin: 15px 0px;
    h2 {
-      font-family: numeralBold;
+      font-family: numeralMedium;
      color: #02a255;
      font-size: calc(100vw / 24);
      margin-bottom: 20px;
@ -115,7 +115,7 @@
    &--header {
      width: 100%;
      h1 {
-        font-family: numeralBold;
+        font-family: numeralMedium;
        color: #00cc69;
      }
      p {