reza added subject filter to products and set some design bugs

src/views/About/index.scss

@@ -5,6 +5,7 @@
   padding: 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
+  padding-top: 100px;
   &__fury {
     margin-top: 30px;
     width: 100%;

src/views/Cart/DeliveryMethod/index.js

@@ -0,0 +1,79 @@
+
+import './index.scss';
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
+    th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
+    h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
+    h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
+  },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
+    h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+    strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+    span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
+    p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
+    input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
+  },
+};
+const DeliveryMethod = (props) => {
+  return (
+    <>
+      {window.innerWidth > 1000 ? (
+        <div
+          className="delivery-methods d-flex justify-content-between align-items-center"
+          style={{
+            background:
+              props.parent.state.selectedDelivery === props.data
+                ? "#ccffcc"
+                : "white",
+          }}
+          onClick={() =>
+            props.parent.setState({ selectedDelivery: props.data })
+          }
+        >
+          <strong style={{ fontSize: fontSize.desktop.strong }}>
+            {props.data.name}
+          </strong>
+          <div className="d-flex flex-column align-items-center">
+            <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+              {props.data.price}
+            </h3>
+            <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
+          </div>
+        </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <div
+          className="mobile-delivery-methods d-flex justify-content-between align-items-center"
+          style={{
+            background:
+              props.parent.state.selectedDelivery === props.data
+                ? "#ccffcc"
+                : "white",
+          }}
+          onClick={() =>
+            props.parent.setState({ selectedDelivery: props.data })
+          }
+        >
+          <strong style={{ fontSize: fontSize.mobile.strong }}>
+            {props.data.name}
+          </strong>
+          <div className="d-flex flex-column align-items-center">
+            <h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3>
+            <span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default DeliveryMethod;

src/views/Cart/DeliveryMethod/index.scss

@@ -0,0 +1,48 @@
+.mobile-delivery-methods {
+  padding: 6px;
+  border-radius: 10px;
+  border: 1px solid #88a9ff;
+  margin-top: 10px;
+  width: 48%;
+  h3,
+  strong,
+  span {
+    font-family: numeralLight;
+    font-weight: 100;
+    margin: 0px;
+  }
+  strong {
+    // width: 50%;
+    color: #678ef8;
+    letter-spacing: -1px;
+  }
+  h3,
+  span {
+    color: #02a255;
+    font-family: numeralMedium;
+  }
+}
+
+.delivery-methods {
+  padding: 6px;
+  border-radius: 10px;
+  border: 1px solid #88a9ff;
+  margin-top: 10px;
+  h3,
+  strong,
+  span {
+    font-family: numeralLight;
+    font-weight: 100;
+    margin: 0px;
+  }
+  strong {
+    width: 50%;
+    color: #678ef8;
+    letter-spacing: -1px;
+  }
+  h3,
+  span {
+    color: #02a255;
+    font-family: numeralMedium;
+  }
+}

src/views/Cart/Discount/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import './index.scss';
+
+const maxDesktopSize = 1250;
+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,
+    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,
+
+  },
+};
+
+
+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>
+        </div>
+      </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-discount-code d-flex flex-column">
+          <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
+          <p style={{ fontSize: fontSize.mobile.p }}>
+            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
+            بزنید
+          </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>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default DiscoutCode;

src/views/Cart/Discount/index.scss

@@ -0,0 +1,83 @@
+.discount-code {
+  border-bottom: 1px dotted #A5A5A5;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  h2 {
+    font-family: numeralBold;
+    color: #2580ec;
+  }
+  p {
+    font-family: numeralLight;
+    color: #a5a5a5;
+    letter-spacing: -1px;
+  }
+  &__box{
+    border: 1px solid #2b95ff;
+    padding: 5px;
+    border-radius: 10px;
+    input {
+      color: #2b95ff;
+      font-family: numeralLight;
+      text-align: center;
+      padding: 0px;
+      border-radius: 10px;
+      border: 0px;
+      flex: 1;
+      direction: ltr;
+      &:focus{
+        outline : none;
+      }
+    }
+    button {
+      border-radius: 10px;
+      background-color: #2b95ff;
+      font-family: numeralLight;
+      color: white;
+      padding: 5px 10px;
+      border: 0px;
+      width: 80px;
+    }
+  }
+}
+
+.mobile-discount-code {
+  border-bottom: 1px dotted #A5A5A5;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  h2 {
+    font-family: numeralBold;
+    color: #2580ec;
+  }
+  p {
+    font-family: numeralLight;
+    color: #a5a5a5;
+    letter-spacing: -1px;
+  }
+  &__box{
+    border: 1px solid #2b95ff;
+    padding: 5px;
+    border-radius: 10px;
+    input {
+      color: #2b95ff;
+      font-family: numeralLight;
+      text-align: center;
+      padding: 5px;
+      border-radius: 10px;
+      border: 0px;
+      flex: 1;
+      direction: ltr;
+      &:focus{
+        outline : none;
+      }
+    }
+    button {
+      border-radius: 10px;
+      background-color: #2b95ff;
+      font-family: numeralLight;
+      color: white;
+      padding: 10px 20px;
+      border: 0px;
+    }
+  }
+  
+}

src/views/Cart/Factor/index.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import './index.scss';
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
+    th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
+    h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
+    h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
+  },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
+    h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+    strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+    span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
+    p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
+    input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
+  },
+};
+
+const Factor = (props) => {
+  const { list, parent } = props;
+
+  const totalPrice = () => {
+    let total = 0;
+    for (let i = 0; i < parent.state.list.length; i++) {
+      total += parent.state.list[i].price * parent.state.list[i].number;
+    }
+    return total;
+  };
+  return (
+    <>
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-factor d-flex flex-column">
+          <div className="d-flex justify-content-between">
+            <strong>مبلغ سبد خرید</strong>
+            <span>{totalPrice()} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>هزینه ارسال</strong>
+            <span>{props.parent.state.selectedDelivery.price} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>میزان تخفیف</strong>
+            <span>{props.parent.state.discount} تومان</span>
+          </div>
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <div className="factor d-flex flex-column">
+          <div className="d-flex justify-content-between">
+            <strong>مبلغ سبد خرید</strong>
+            <span>{totalPrice()} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>هزینه ارسال</strong>
+            <span>{props.parent.state.selectedDelivery.price} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>میزان تخفیف</strong>
+            <span>{props.parent.state.discount} تومان</span>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default Factor;

src/views/Cart/Factor/index.scss

@@ -0,0 +1,53 @@
+.mobile-factor{
+  border-bottom: 1px dotted #A5A5A5;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  h2 {
+    font-family: numeralBold;
+    color: #2580ec;
+  }
+  p {
+    font-family: numeralLight;
+    color: #a5a5a5;
+    letter-spacing: -1px;
+  }
+  div{
+    margin-bottom: 10px;
+    strong{
+      font-family: numeralLight;
+      color: #373737;
+      font-weight: 300;
+    }
+    span{
+      font-family: numeralLight;
+      color: #373737;
+    }
+  }
+}
+
+.factor{
+  border-bottom: 1px dotted #A5A5A5;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  h2 {
+    font-family: numeralBold;
+    color: #2580ec;
+  }
+  p {
+    font-family: numeralLight;
+    color: #a5a5a5;
+    letter-spacing: -1px;
+  }
+  div{
+    margin-bottom: 10px;
+    strong{
+      font-family: numeralLight;
+      color: #373737;
+      font-weight: 300;
+    }
+    span{
+      font-family: numeralLight;
+      color: #373737;
+    }
+  }
+}

src/views/Cart/Item/index.js

@@ -1,87 +0,0 @@
-import React from "react";
-import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
-
-import "./index.scss";
-
-const maxDesktopSize = 1250;
-
-const fontSize = {
-  desktop: {
-    info: {
-      strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
-      p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
-      span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
-    },
-    price: {
-      strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
-      span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
-    },
-    counter: {
-      button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
-      span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
-    },
-    delete: {
-      span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
-    },
-  },
-};
-
-export default function Item(props) {
-  const { data, handleCounter, handleDelete } = props;
-  return (
-    <tr className="cart-item d-flex align-items-center">
-        <td className="cart-item__info d-flex">
-          <img src={data.image} alt={data.title} />
-          <div className="d-flex flex-column justify-content-center">
-            <strong style={{ fontSize: fontSize.desktop.info.strong }}>
-              {data.title}
-            </strong>
-            <p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
-            <span style={{ fontSize: fontSize.desktop.info.span }}>
-              {data.options}بسته الحاقی:
-            </span>
-          </div>
-        </td>
-        <td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
-            <strong style={{ fontSize: fontSize.desktop.price.strong }}>
-              {data.price} تومان
-            </strong>
-            <span style={{ fontSize: fontSize.desktop.price.span }}>
-              {data.slicePrice} قیمت هر واحد
-            </span>
-        </td>
-        <td className="cart-item__counter d-flex align-items-center">
-            <div className="cart-item__counter--box d-flex justify-content-around align-items-center">
-              <button
-                onClick={() => handleCounter("increase", data.id)}
-                style={{ fontSize: fontSize.desktop.counter.button }}
-              >
-                +
-              </button>
-              <span style={{ fontSize: fontSize.desktop.counter.span }}>
-                {data.number}
-              </span>
-              <button
-                onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
-                style={{ fontSize: fontSize.desktop.counter.button }}
-              >
-                -
-              </button>
-            </div>
-        </td>
-        <td className="cart-item__delete d-flex align-items-center justify-content-center">
-            <DeleteOutlineOutlinedIcon
-              style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
-              onClick={() => handleDelete(data.id)}
-            />
-            <span
-              onClick={() => handleDelete(data.id)}
-              style={{ fontSize: fontSize.desktop.delete.span }}
-            >
-              حذف
-            </span>
-        </td>
-      
-    </tr>
-  );
-}

src/views/Cart/Item/index.scss

@@ -1,71 +0,0 @@
-.cart-item{
-  // justify-content: space-between;
-  border-top: 1px solid #eee;
-  padding: 15px 0px;
-  &__info{
-    flex: 3;
-    // flex-shrink: 1;
-    img{
-      height: 100px;
-      border-radius: 10px;
-      margin-left: 10px;
-    }
-    div{
-      strong{
-        font-family: numeralBold;
-        color: #373737;
-      }
-      p{
-        font-family: numeralLight;
-        color: #00CC69;
-        margin: 0px;
-        letter-spacing: -1px;
-      }
-      span{
-        font-family: numeralLight;
-        color: #2580EC;
-        letter-spacing: -1px;
-      }
-    }
-  }
-  &__price{
-    flex: 1.5;
-    flex-shrink: 1;
-    color: #4D4D4F;
-    strong{
-      font-family: numeralBold;
-    }
-    span{
-      font-family: numeralLight;
-    }
-  }
-  &__counter{
-    flex: 1.5;
-    flex-shrink: 1;
-    justify-content:  center;
-    &--box{
-      padding: 5px 10px;
-      border: 1px solid rgb(177, 177, 177);
-      border-radius: 8px;
-      button{
-        border: 0px;
-        background-color: white;
-        color: #4D4D4F;
-      }
-      span{
-        margin: 0px 15px;
-        color: #4D4D4F;
-
-      }
-    }
-    
-  }
-  &__delete{
-    flex: 1;
-    margin-left: 20px;
-    span{
-      font-family: numeralLight;
-      color : #FC120A;
-    }
-  }
-}

src/views/Cart/Table/index.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
 import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
 
-import './index.scss';
+import "./index.scss";
 const useStyles = makeStyles({
-  table: {
-  },
+  table: {},
 });
 
 const maxMobileSize = 550;
+const maxDesktopSize = 1250;
 
 const fontSize = {
   mobile: {
@@ -36,10 +36,26 @@ const fontSize = {
       span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28,
     },
   },
+  desktop: {
+    info: {
+      strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
+      p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
+      span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
+    },
+    price: {
+      strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
+      span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
+    },
+    counter: {
+      button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
+      span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
+    },
+    delete: {
+      span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
+    },
+  },
 };
 
-
-
 export default function BasicTable(props) {
   const classes = useStyles();
   const { list, handleCounter, handleDelete } = props;
@@ -57,12 +73,11 @@ export default function BasicTable(props) {
       total += list[i].price * list[i].number;
     }
     return total;
-  }
+  };
 
   return (
     <>
-      {
-        window.innerWidth < 1000 ?
+      {window.innerWidth < 1000 ? (
         <TableContainer component={Paper}>
           <Table className={classes.table} aria-label="simple table">
             <TableHead>
@@ -73,22 +88,64 @@ export default function BasicTable(props) {
             </TableHead>
             <TableBody>
               {list.map((row, i) => (
-                <Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} />
+                <Item
+                  data={row}
+                  key={i}
+                  handleCounter={handleCounter}
+                  handleDelete={handleDelete}
+                />
               ))}
               <TableRow>
                 <TableCell align="right" component="th" scope="row">
-                  <span style={{ color : 'grey' }}>{sum()} محصول</span>
+                  <span style={{ color: "grey" }}>{sum()} محصول</span>
                 </TableCell>
                 <TableCell align="center">
-                  <span style={{ color : 'grey' }}>مبلغ کل  {totalPrice()}</span>    
+                  <span style={{ color: "grey" }}>مبلغ کل {totalPrice()}</span>
                 </TableCell>
               </TableRow>
             </TableBody>
           </Table>
-        </TableContainer> : null 
-      }
+        </TableContainer>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <TableContainer component={Paper}>
+          <Table className={classes.table} aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell align="right">محصولات</TableCell>
+                <TableCell align="center">قیمت</TableCell>
+                <TableCell align="center">تعداد</TableCell>
+                <TableCell align="center"></TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {list.map((row, i) => (
+                <Item
+                  data={row}
+                  key={i}
+                  handleCounter={handleCounter}
+                  handleDelete={handleDelete}
+                />
+              ))}
+              <TableRow>
+                <TableCell align="right" component="th" scope="row">
+                  <span style={{ color: "grey" }}></span>
+                </TableCell>
+                <TableCell align="center">
+                  <span style={{ color: "grey" }}>مبلغ کل {totalPrice()}</span>
+                </TableCell>
+                <TableCell align="center" component="th" scope="row">
+                  <span style={{ color: "grey" }}>{sum()} محصول</span>
+                </TableCell>
+                <TableCell align="center" component="th" scope="row">
+                  <span style={{ color: "grey" }}></span>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : null}
     </>
-    
   );
 }
 
@@ -104,16 +161,19 @@ export default function BasicTable(props) {
 const Item = (props) => {
   const { data, handleCounter, handleDelete } = props;
   return (
+    <>
+      {window.innerWidth < 1000 ? (
         <TableRow key={data.name}>
           <TableCell align="right" component="th" scope="row">
             <div className="mobile-cart-table-product d-flex align-items-center">
-          
               <img src={data.image} alt={data.title} />
               <div className="mobile-cart-table-product__info d-flex flex-column p-1">
                 <strong style={{ fontSize: fontSize.mobile.info.strong }}>
                   {data.title}
                 </strong>
-            <p style={{ fontSize: fontSize.mobile.info.p }}>{data.subTitle}</p>
+                <p style={{ fontSize: fontSize.mobile.info.p }}>
+                  {data.subTitle}
+                </p>
                 <span style={{ fontSize: fontSize.mobile.info.span }}>
                   {data.options}
                 </span>
@@ -124,7 +184,10 @@ const Item = (props) => {
                   />
                   <span
                     onClick={() => handleDelete(data.id)}
-                style={{ fontSize: fontSize.mobile.delete.span, color: "#FC120A"}}
+                    style={{
+                      fontSize: fontSize.mobile.delete.span,
+                      color: "#FC120A",
+                    }}
                   >
                     حذف
                   </span>
@@ -153,15 +216,89 @@ const Item = (props) => {
                   {data.number}
                 </span>
                 <button
-              onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
+                  onClick={() =>
+                    data.number > 1
+                      ? handleCounter("decrease", data.id)
+                      : handleDelete(data.id)
+                  }
                   style={{ fontSize: fontSize.mobile.counter.button }}
                 >
                   -
                 </button>
               </div>
             </div>
-            
           </TableCell>
         </TableRow>
-  );
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <TableRow key={data.name}>
+          <TableCell align="right" component="th" scope="row">
+            <div className="cart-item__info d-flex">
+              <img src={data.image} alt={data.title} />
+              <div className="d-flex flex-column justify-content-center">
+                <strong style={{ fontSize: fontSize.desktop.info.strong }}>
+                  {data.title}
+                </strong>
+                <p style={{ fontSize: fontSize.desktop.info.p }}>
+                  {data.subTitle}
+                </p>
+                <span style={{ fontSize: fontSize.desktop.info.span }}>
+                  {data.options}بسته الحاقی:
+                </span>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <div className="cart-item__price d-flex flex-column justify-content-center align-items-center">
+              <strong style={{ fontSize: fontSize.desktop.price.strong }}>
+                {data.price} تومان
+              </strong>
+              <span style={{ fontSize: fontSize.desktop.price.span }}>
+                {data.slicePrice} قیمت هر واحد
+              </span>
+            </div>
+          </TableCell>
+          <TableCell>
+            <div className="cart-item__counter d-flex align-items-center">
+              <div className="cart-item__counter--box d-flex justify-content-around align-items-center">
+                <button
+                  onClick={() => handleCounter("increase", data.id)}
+                  style={{ fontSize: fontSize.desktop.counter.button }}
+                >
+                  +
+                </button>
+                <span style={{ fontSize: fontSize.desktop.counter.span }}>
+                  {data.number}
+                </span>
+                <button
+                  onClick={() =>
+                    data.number > 1
+                      ? handleCounter("decrease", data.id)
+                      : handleDelete(data.id)
                   }
+                  style={{ fontSize: fontSize.desktop.counter.button }}
+                >
+                  -
+                </button>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <div className="cart-item__delete d-flex align-items-center justify-content-center">
+              <DeleteOutlineOutlinedIcon
+                style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
+                onClick={() => handleDelete(data.id)}
+              />
+              <span
+                onClick={() => handleDelete(data.id)}
+                style={{ fontSize: fontSize.desktop.delete.span }}
+              >
+                حذف
+              </span>
+            </div>
+          </TableCell>
+        </TableRow>
+      ) : null}
+    </>
+  );
+};

src/views/Cart/Table/index.scss

@@ -74,3 +74,69 @@
 .MuiTableCell-root{
   padding: 10px 0px !important;
 }
+
+.cart-item{
+  // justify-content: space-between;
+  border-top: 1px solid #eee;
+  padding: 15px 0px;
+  &__info{
+    // flex-shrink: 1;
+    img{
+      height: 100px;
+      border-radius: 10px;
+      margin-left: 10px;
+    }
+    div{
+      strong{
+        font-family: numeralBold;
+        color: #373737;
+      }
+      p{
+        font-family: numeralLight;
+        color: #00CC69;
+        margin: 0px;
+        letter-spacing: -1px;
+      }
+      span{
+        font-family: numeralLight;
+        color: #2580EC;
+        letter-spacing: -1px;
+      }
+    }
+  }
+  &__price{
+    color: #4D4D4F;
+    strong{
+      font-family: numeralBold;
+    }
+    span{
+      font-family: numeralLight;
+    }
+  }
+  &__counter{
+    justify-content:  center;
+    &--box{
+      padding: 5px 10px;
+      border: 1px solid rgb(177, 177, 177);
+      border-radius: 8px;
+      button{
+        border: 0px;
+        background-color: white;
+        color: #4D4D4F;
+      }
+      span{
+        margin: 0px 15px;
+        color: #4D4D4F;
+
+      }
+    }
+    
+  }
+  &__delete{
+    margin-left: 20px;
+    span{
+      font-family: numeralLight;
+      color : #FC120A;
+    }
+  }
+}

src/views/Cart/index.js

@@ -1,8 +1,10 @@
 import React, { Component } from "react";
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
-import Item from "./Item/index";
 import Table from "./Table/index";
+import DiscoutCode from "./Discount/index";
+import DeliveryMethod from "./DeliveryMethod/index";
+import Factor from "./Factor/index";
 
 import book1 from "../../assets/images/book1.png";
 
@@ -19,6 +21,7 @@ const fontSize = {
     h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
     strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
+    p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90,
   },
   mobile: {
     h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
@@ -32,7 +35,7 @@ const fontSize = {
 };
 export default class Cart extends Component {
   state = {
-    selectedDelivery: { name : '', price : 0},
+    selectedDelivery: { name: "", price: 0 },
     discount: 0,
     totalPrice: null,
     list: [
@@ -107,33 +110,16 @@ export default class Cart extends Component {
           <>
             <div className="cart d-flex flex-column">
               <Navbar />
-              <div className="d-flex">
+              <div className="d-flex" style={{ width: "100%", flex: 1, marginBottom : 10 }}>
                 <section className="cart__right d-flex flex-column">
                   <header>
                     <h1 style={{ fontSize: fontSize.desktop.h1 }}>سبد خرید</h1>
                   </header>
-                  <table>
-                    <thead>
-                      <tr>
-                        <div className="d-flex align-items-center">
-                          <th style={{ flex: 3, textAlign: "center" }}>1</th>
-                          <th style={{ flex: 1.5, textAlign: "center" }}>2</th>
-                          <th style={{ flex: 1.5, textAlign: "center" }}>3</th>
-                          <th style={{ flex: 1, textAlign: "center" }}>4</th>
-                        </div>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {this.state.list.map((item, i) => (
-                        <Item
-                          handleDelete={this.handleDelete}
+                  <Table
+                    list={this.state.list}
                     handleCounter={this.handleCounter}
-                          data={item}
-                          key={i}
+                    handleDelete={this.handleDelete}
                   />
-                      ))}
-                    </tbody>
-                  </table>
                   {this.state.totalPrice ? (
                     <div className="cart__right--price d-flex justify-content-end">
                       <div className="d-flex ml-2">جمع کل سبد خرید</div>
@@ -154,7 +140,37 @@ export default class Cart extends Component {
                       ))}
                     </div>
                   </header>
-                  <button>پرداخت</button>
+                  <DiscoutCode />
+                  <Factor parent={this} />
+                  <div className="cart__totalPrice d-flex align-items-center justify-content-center">
+                    <h3 style={{ fontSize: fontSize.mobile.h2 }}>
+                      جمع کل
+                      <br />
+                      سبد خرید
+                    </h3>
+                    <div className="d-flex align-items-center">
+                      <strong style={{ fontSize: fontSize.mobile.h1 }}>
+                        {this.totalPrice()}
+                      </strong>
+                      <span style={{ fontSize: fontSize.mobile.h3 }}>
+                        تومان
+                      </span>
+                    </div>
+                  </div>
+                  <div className="cart__left--header d-flex flex-column mt-3">
+                    <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                      روشهای ارسال
+                    </h2>
+                    <p style={{ fontSize: fontSize.desktop.p }}>
+                      با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+                    </p>
+                    <div className="d-flex justify-content-between">
+                      {this.props.payMethods.map((item, i) => (
+                        <DeliveryMethod data={item} key={i} parent={this} />
+                      ))}
+                    </div>
+                  </div>
+                  <button className="cart__left--submit">پرداخت</button>
                 </section>
               </div>
             </div>
@@ -184,7 +200,7 @@ export default class Cart extends Component {
                 ))}
               </div>
             </div>
-            <DiscoutCode />
+            <DiscoutCode parent={this} />
             <Factor parent={this} />
             <div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center">
               <h3 style={{ fontSize: fontSize.mobile.h2 }}>
@@ -219,140 +235,6 @@ export default class Cart extends Component {
   }
 }
 
-const DeliveryMethod = (props) => {
-  return (
-    <>
-      {window.innerWidth > 1000 ? (
-        <div
-          className="delivery-methods d-flex justify-content-between align-items-center"
-          style={{
-            background:
-              props.parent.state.selectedDelivery === props.data
-                ? "#00ff00"
-                : "white",
-          }}
-          onClick={() =>
-            props.parent.setState({ selectedDelivery: props.data })
-          }
-        >
-          <strong style={{ fontSize: fontSize.desktop.strong }}>
-            {props.data.name}
-          </strong>
-          <div className="d-flex flex-column align-items-center">
-            <h3 style={{ fontSize: fontSize.desktop.h3 }}>
-              {props.data.price}
-            </h3>
-            <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
-          </div>
-        </div>
-      ) : null}
-      {window.innerWidth < 1000 ? (
-        <div
-          className="mobile-delivery-methods d-flex justify-content-between align-items-center"
-          style={{
-            background:
-              props.parent.state.selectedDelivery === props.data
-                ? "#ccffcc"
-                : "white",
-          }}
-          onClick={() =>
-            props.parent.setState({ selectedDelivery: props.data })
-          }
-        >
-          <strong style={{ fontSize: fontSize.mobile.strong }}>
-            {props.data.name}
-          </strong>
-          <div className="d-flex flex-column align-items-center">
-            <h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3>
-            <span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
-          </div>
-        </div>
-      ) : null}
-    </>
-  );
-};
-
-const DiscoutCode = (props) => {
-  return (
-    <>
-      {window.innerWidth > 1000 ? (
-        <div
-          className="delivery-methods d-flex justify-content-between align-items-center"
-          style={{
-            background:
-              props.parent.state.selectedDelivery === props.data
-                ? "#00ff00"
-                : "white",
-          }}
-          onClick={() =>
-            props.parent.setState({ selectedDelivery: props.data })
-          }
-        >
-          <strong style={{ fontSize: fontSize.desktop.strong }}>
-            {props.data.name}
-          </strong>
-          <div className="d-flex flex-column align-items-center">
-            <h3 style={{ fontSize: fontSize.desktop.h3 }}>
-              {props.data.price}
-            </h3>
-            <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
-          </div>
-        </div>
-      ) : null}
-      {window.innerWidth < 1000 ? (
-        <div className="mobile-discount-code d-flex flex-column">
-          <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
-          <p style={{ fontSize: fontSize.mobile.p }}>
-            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
-            بزنید
-          </p>
-          <div className="mobile-discount-code__box d-flex align-items-center">
-            <input style={{ fontSize: fontSize.mobile.input }} type="text" />
-            <button>ثبت کد</button>
-          </div>
-        </div>
-      ) : null}
-    </>
-  );
-};
-
-const Factor = (props) => {
-  const { list, parent } = props;
-
-  const totalPrice = () => {
-    let total = 0;
-    for (let i = 0; i < parent.state.list.length; i++) {
-      total += parent.state.list[i].price * parent.state.list[i].number;
-    }
-    return total;
-  };
-  return (
-    <>
-      {window.innerWidth < 1000 ? (
-        <div className="mobile-factor d-flex flex-column">
-          <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
-          <p style={{ fontSize: fontSize.mobile.p }}>
-            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
-            بزنید
-          </p>
-          <div className="d-flex justify-content-between">
-            <strong>مبلغ سبد خرید</strong>
-            <span>{totalPrice()} تومان</span>
-          </div>
-          <div className="d-flex justify-content-between">
-            <strong>هزینه ارسال</strong>
-            <span>{props.parent.state.selectedDelivery.price} تومان</span>
-          </div>
-          <div className="d-flex justify-content-between">
-            <strong>میزان تخفیف</strong>
-            <span>{props.parent.state.discount} تومان</span>
-          </div>
-        </div>
-      ) : null}
-    </>
-  );
-};
-
 Cart.defaultProps = {
   payMethods: [
     {

src/views/Cart/index.scss

@@ -1,40 +1,56 @@
 .cart {
   width: 100vw;
-  height: 100vh;
   max-width: 1250px;
   margin: 0px auto;
-  padding: 0px 10px;
+  padding: 0px;
   font-family: numeralLight;
-  &__right {
-    flex: 4;
-    padding: 10px 0px 0px;
-    header {
-      h1 {
-        font-family: numeralBold;
-        color: #373737;
+  padding-top: 100px;
+  &__totalPrice{
+    padding: 20px 0px;
+    border-bottom: 1px dotted #A5A5A5;
+    padding-bottom: 20px;
+
+    h3{
+      font-family: numeralLight;
+      color: #00CC69;
+      margin: 0px;
     }
+    div{
+      margin-right: 20px;
+      strong{
+        font-family: numeralBold;
+        color: #4D4D4F;
+        margin-left: 5px;
       }
-    table {
-      tr {
-        th {
+      span{
         font-family: numeralLight;
-          color: #afafaf;
+        color: #848484;
       }
     }
   }
+  &__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;
         color: #2580ec;
       }
+      p {
+        font-family: numeralLight;
+        color: #a5a5a5;
+        letter-spacing: -1px;
       }
-    button {
+    }
+    &--submit{
       justify-self: flex-end;
       padding: 12px;
       width: 100%;
@@ -45,29 +61,6 @@
       border-radius: 10px;
       margin-top: 50px;
     }
-    .delivery-methods {
-      padding: 6px;
-      border-radius: 10px;
-      border: 1px solid #88a9ff;
-      margin-top: 10px;
-      h3,
-      strong,
-      span {
-        font-family: numeralLight;
-        font-weight: 100;
-        margin: 0px;
-      }
-      strong {
-        width: 50%;
-        color: #678ef8;
-        letter-spacing: -1px;
-      }
-      h3,
-      span {
-        color: #02a255;
-        font-family: numeralMedium;
-      }
-    }
   }
 }
 
@@ -95,29 +88,7 @@
     font-family: numeralBold;
     color: #373737;
   }
-  &__totalPrice{
-    padding: 20px 0px;
-    border-bottom: 1px dotted #A5A5A5;
-    padding-bottom: 20px;
   
-    h3{
-      font-family: numeralLight;
-      color: #00CC69;
-      margin: 0px;
-    }
-    div{
-      margin-right: 20px;
-      strong{
-        font-family: numeralBold;
-        color: #4D4D4F;
-        margin-left: 5px;
-      }
-      span{
-        font-family: numeralLight;
-        color: #848484;
-      }
-    }
-  }
   &__payMethods {
     border-bottom: 1px dotted #A5A5A5;
     margin-top: 20px;
@@ -131,98 +102,9 @@
       color: #a5a5a5;
       letter-spacing: -1px;
     }
-    .mobile-delivery-methods {
-      padding: 6px;
-      border-radius: 10px;
-      border: 1px solid #88a9ff;
-      margin-top: 10px;
-      width: 48%;
-      h3,
-      strong,
-      span {
-        font-family: numeralLight;
-        font-weight: 100;
-        margin: 0px;
-      }
-      strong {
-        // width: 50%;
-        color: #678ef8;
-        letter-spacing: -1px;
-      }
-      h3,
-      span {
-        color: #02a255;
-        font-family: numeralMedium;
-      }
-    }
     
-  }
-  .mobile-discount-code {
-    border-bottom: 1px dotted #A5A5A5;
-    margin-top: 20px;
-    padding-bottom: 20px;
-    h2 {
-      font-family: numeralBold;
-      color: #2580ec;
-    }
-    p {
-      font-family: numeralLight;
-      color: #a5a5a5;
-      letter-spacing: -1px;
-    }
-    &__box{
-      border: 1px solid #2b95ff;
-      padding: 5px;
-      border-radius: 10px;
-      input {
-        color: #2b95ff;
-        font-family: numeralLight;
-        text-align: center;
-        padding: 5px;
-        border-radius: 10px;
-        border: 0px;
-        flex: 1;
-        direction: ltr;
-        &:focus{
-          outline : none;
-        }
-      }
-      button {
-        border-radius: 10px;
-        background-color: #2b95ff;
-        font-family: numeralLight;
-        color: white;
-        padding: 10px 20px;
-        border: 0px;
-      }
-    }
     
   }
 
-  .mobile-factor{
-    border-bottom: 1px dotted #A5A5A5;
-    margin-top: 20px;
-    padding-bottom: 20px;
-    h2 {
-      font-family: numeralBold;
-      color: #2580ec;
-    }
-    p {
-      font-family: numeralLight;
-      color: #a5a5a5;
-      letter-spacing: -1px;
-    }
-    div{
-      margin-bottom: 10px;
-      strong{
-        font-family: numeralLight;
-        color: #373737;
-        font-weight: 300;
-      }
-      span{
-        font-family: numeralLight;
-        color: #373737;
-      }
-    }
-  }
+  
 }

src/views/Contact/index.scss

@@ -6,6 +6,7 @@
   direction: rtl;
   min-height: calc(100vh - 288px);
   overflow-x: hidden;
+  padding-top: 100px;
   &__forms {
     width: 100%;
     justify-content: space-between;
@@ -151,6 +152,9 @@
         width: 100%;
         height: 430px;
         border-radius: 20px;
+        img{
+          transform: scale(0.4);
+        }
       }
     }
   }

src/views/Faq/index.scss

@@ -5,6 +5,7 @@
   padding: 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
+  padding-top: 100px;
   &__header {
     margin-top: 30px;
     width: 600px;
@@ -63,7 +64,7 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 80px;
+  padding-top: 90px;
   &__header {
     margin-top: 30px;
     width: 100%;

src/views/Home/HomeSlider/Blog/index.scss

@@ -6,6 +6,7 @@
   width: 100%;
   text-decoration: none;
   position: relative;
+  max-width: 300px;
   img {
     width: 100%;
     height: 200px;

src/views/Home/HomeSlider/Simple/index.js

@@ -7,10 +7,10 @@ const maxDesktopSize = 1250;
 
 const fontSize = {
   desktop: {
-    h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 65,
-    h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
-    notAvailable: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
-    available: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+    h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
+    h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    notAvailable: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
+    available: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
   },
 };
 
@@ -27,6 +27,8 @@ export default class Simple extends Component {
           <h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
           <h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
           {
+            data.price !== undefined ? 
+            
               data.price ? 
               <div className="slider-simple__price d-flex justify-content-center">
                 {
@@ -42,7 +44,9 @@ export default class Simple extends Component {
                 <div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
               </div> : 
               <div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
+             : null
           }
+          
         </Link>
       </article>
 

src/views/Home/HomeSlider/Simple/index.scss

@@ -3,13 +3,13 @@
   a{
     width : 100%;
     text-decoration: none;
+    max-width: 200px;
     &:hover{
     }
     img{
       width: 100%;
-      height: 300px;
-      border-top-left-radius: 15px;
-      border-top-right-radius: 15px;
+      height: 250px;
+      border-radius: 10px;
     }
     h1{
       font-family: numeralBold;

src/views/Home/HomeSlider/index.scss

@@ -17,7 +17,7 @@
 .home-slider {
   width: 100%;
   padding: 2px 0px 0px;
-  margin: 10px 0px 10px;
+  margin: 20px 0px 10px;
   position: relative;
   .rec-arrow-left{
     top : calc(50% - 22px) !important;
@@ -39,17 +39,17 @@
 }
 
 .Carousel-button-10 {
-  background-color: white !important;
+  background-color: grey !important;
 }
 .rec-pagination {
-  z-index: 600;
+  z-index: 200;
   // left: calc(50% - 20px) !important;
   & button {
     background-color: grey;
     margin: 2px !important;
-    box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
+    box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
     &:focus{
-      box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
+      box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
     }
   }
 }
@@ -64,15 +64,15 @@
   background-color: inherit !important;
   box-shadow: none !important;
   border: 0px !important;
-  color: white !important;
+  color: grey !important;
   &:focus{
-    color: white !important;
+    color: grey !important;
   }
   &:disabled{
-    color: #eee !important;
+    color: black !important;
   }
   &:enabled{
-    color: white;
+    color: grey;
   }
   &:hover{
     color: white;

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

@@ -6,6 +6,8 @@
   font-family: numeralLight;
   z-index: 100;
   overflow: hidden;
+  background-color: white;
+  padding: 0px 10px 0px 20px;
   &::-webkit-scrollbar{
     display: none;
     width: 0px;
@@ -14,6 +16,8 @@
     // width: 100px;
     // height: 50px;
     // background : greenyellow;
+    position: relative;
+    left: 14px;
   }
   &__list{
     margin : 0px;

src/views/Home/Navbar/index.scss

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

src/views/Home/index.js

@@ -471,7 +471,7 @@ Home.defaultProps = {
       type: window.innerWidth > 1000 ? "slider" : "scroll",
       title: "کتاب‌های من",
       moreText: 'لیست کتاب‌ها',
-      height: window.innerWidth > 1000 ? 470 : 270,
+      height: window.innerWidth > 1000 ? 340 : 270,
       design: window.innerWidth > 1000 ? "simple" : "myProduct", 
       number: window.innerWidth > 1000 ? 4 : 2.8,
       data: [
@@ -554,7 +554,7 @@ Home.defaultProps = {
       type: window.innerWidth > 1000 ? "slider" : "scroll",
       title: "پرفروش‌ترین کتاب‌های دانوین",
       moreText: 'لیست کتاب‌ها',
-      height: window.innerWidth > 1000 ? 470 : 320,
+      height: window.innerWidth > 1000 ? 420 : 320,
       design: window.innerWidth > 1000 ? "simple" : "product", 
       number: window.innerWidth > 1000 ? 4 : 2.8,
       data: [
@@ -650,7 +650,7 @@ Home.defaultProps = {
     {
       type: window.innerWidth > 1000 ? "slider" : "scroll",
       title: "جدیدترین کتاب‌های دانوین",
-      height: window.innerWidth > 1000 ? 470 : 320,
+      height: window.innerWidth > 1000 ? 420 : 320,
       design: window.innerWidth > 1000 ? "tab" : 'product',
       number: window.innerWidth > 1000 ? 4 : 3.5,
       moreText: 'لیست کتاب‌ها',

src/views/Home/index.scss

@@ -4,6 +4,7 @@
   margin: 0px auto;
   padding : 0px 10px;
   direction: rtl;
+  padding-top: 100px;
 }
 
 

src/views/MyBooks/index.scss

@@ -5,6 +5,7 @@
   padding : 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
+  padding-top: 100px;
 }
 
 .mobile-mybooks{

src/views/Product/AddToCart/index.js

@@ -37,7 +37,7 @@ export default function AddToCart(props) {
               خرید نسخه دیجیتال
             </button>
             <button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--addButton">
-              افزپدن به سبد خریذ
+              افزودن به سبد خرید
             </button>
             <div className="product-addtocart__box--accept d-flex">
               <input type="checkbox" />

src/views/Products/List/index.js

@@ -16,9 +16,26 @@ export default class List extends React.Component {
       sortList = sortList.sort((a, b) => (a.price < b.price && ( a.price !== '' || b.price !== '' ) ? -1 : 1));
     }
     var filterList;
-    for(let j = 0; j <= parent.state.selectedFilters.subject.length; j++) {
-      filterList = sortList.filter(item => parent.state.selectedFilters.subject.indexOf(item.title) === -1);
+    if(parent.state.selectedFilters.subject.length > 0 && parent.state.selectedFilters.level.length > 0){
+      console.log(parent.state.selectedFilters.subject.length, parent.state.selectedFilters.level.length);
+      for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
+        filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1);
       };
+      for(let j = 0; j < parent.state.selectedFilters.level.length; j++) {
+        filterList = filterList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1);
+      };
+    }else if(parent.state.selectedFilters.level.length > 0){
+      for(let j = 0; j < parent.state.selectedFilters.level.length; j++) {
+        filterList = sortList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1);
+      };
+    }else if(parent.state.selectedFilters.subject.length > 0){
+      for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
+        filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1);
+      };
+    }else{
+      filterList = sortList;
+    }
+    
     
     return (
       <div className="products-list d-flex flex-wrap">

src/views/Products/index.js

@@ -111,13 +111,13 @@ Products.defaultProps = {
     'اول',
     'دوم',
     'سوم',
-    'چهارم',
+    'دهم',
   ],
   products: [
     {
       id: 0,
       image: book1,
-      title: "کتاب علوم تجربی",
+      title: "کتاب شیمی آلی",
       subTitle: "پایه دهم ابتدایی",
       price: "78.000",
       oldPrice: "",

src/views/Products/index.scss

@@ -5,6 +5,7 @@
   padding : 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
+  padding-top: 100px;
   &__body{
     margin-top: 20px;
     &--left{

src/views/QR/index.scss

@@ -128,6 +128,7 @@
   direction: rtl;
   overflow-x: hidden;
   min-height: calc(100vh - 288px);
+  padding-top: 100px;
   .qr__sidebar {
     flex: 1;
     &--header {

src/views/QRScan/index.scss

@@ -111,4 +111,5 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
+  padding-top: 100px;
 }