golnooshasefi · golnooshasefi · May 27, 2022 · May 27, 2022
diff --git a/src/components/layout/Footer.module.scss b/src/components/layout/Footer.module.scss
@@ -7,7 +7,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: 1360px;
+    // width: 1360px;
     // margin: auto;
   }
   &__logo {
@@ -50,6 +50,15 @@
     color: white;
     margin-top: 3rem;
     color: #fff;
+
+    @media (max-width: 40em) {
+      font-size: 4rem;
+    }
+
+    @media (max-width: 30em) {
+      font-size: 3rem;
+    }
+
     &--i1 {
       margin-left: 2rem;
     }
@@ -63,6 +72,7 @@
     grid-template-columns: 1fr 1fr;
     grid-gap: 6rem;
     justify-content: center;
+    justify-content: space-around;
   }
   &__column {
     // justify-content: center;

diff --git a/src/components/layout/MainNavigation.js b/src/components/layout/MainNavigation.js
@@ -14,14 +14,14 @@ function MainNavigation() {
     <header className={classes.header}>
       <div className={classes.content}>
         <div className={classes.container}>
-          <Link to="/" className={classes.header__link}>
+          <Link to="/" className={classes.link}>
             <div className={classes.logo}>سبکینو</div>
           </Link>
 
           {user.auth ? (
             <div className={classes.container__btns}>
-              <Link to="/shopping-list">
-                <Button color="white">
+              <Link to="/shopping-list" className={classes.link}>
+                <Button color="white" className={classes.header__navButton}>
                   <i
                     className={classNames(
                       classes.header__login_logo,
@@ -31,8 +31,8 @@ function MainNavigation() {
                   سبد خرید
                 </Button>
               </Link>
-              <Link to="/user-panel">
-                <Button color="white">
+              <Link to="/user-panel" className={classes.link}>
+                <Button color="white" className={classes.header__navButton}>
                   <i
                     className={classNames(
                       classes.header__login_logo,
@@ -44,7 +44,7 @@ function MainNavigation() {
               </Link>
             </div>
           ) : (
-            <Link to="/account-box">
+            <Link to="/account-box" className={classes.link}>
               {/* <i className={classes.header__login_logo}>{loginIcon}</i> */}
               <Button color="white">
                 <i className={classes.header__login_logo}>{loginIcon}</i>ورود |

diff --git a/src/components/layout/MainNavigation.module.scss b/src/components/layout/MainNavigation.module.scss
@@ -9,6 +9,20 @@
   // padding: 5% 5%;
   padding: 4rem 8rem;
   border-bottom: 2px solid #6667ab;
+
+  @media (max-width: 32.5em) {
+    padding: 2rem 4rem;
+  }
+
+  &__navButton {
+    @media (max-width: 32.5em) {
+      font-size: 0;
+      align-self: flex-start;
+      border: none;
+      padding: 0.5rem 1rem;
+    }
+  }
+
   &__icon {
     margin-right: 1rem;
   }
@@ -19,6 +33,10 @@
   &__login_logo {
     font-size: 1.5rem;
     margin-left: 1rem;
+
+    @media (max-width: 32.5em) {
+      font-size: 2rem;
+    }
   }
   &__link {
     text-decoration: none;

diff --git a/src/pages/Homepage/HeroSection/HeroSection.module.scss b/src/pages/Homepage/HeroSection/HeroSection.module.scss
@@ -1,5 +1,5 @@
 .HeroSection {
-  height: 77rem;
+  min-height: 77rem;
   // clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
   background-color: #e1e1ee;
 
@@ -10,13 +10,30 @@
     justify-content: space-around;
     align-items: center;
     margin: auto;
+
+    @media (max-width: 54em) {
+      flex-direction: column;
+    }
+
+    @media (max-width: 37.5em) {
+      padding: 15rem 9.5rem;
+    }
+
+    @media (max-width: 26em) {
+      padding: 15rem 5rem;
+    }
   }
   &__info {
     display: flex;
     flex-direction: column;
     flex: 0 0 50%;
     align-items: center;
     margin-left: 20rem;
+
+    @media (max-width: 54em) {
+      margin-left: 0;
+    }
+
     &--header {
       background-image: linear-gradient(to right, #8376b6, #262879);
       background-clip: text;
@@ -112,12 +129,20 @@
       outline-offset: 2rem;
       &--p1 {
         top: -2rem;
-        left: 4rem;
+        left: 6rem;
+
+        @media (max-width: 61em) {
+          top: 1rem;
+        }
       }
 
       &--p2 {
         top: 1.5rem;
         right: 0;
+
+        @media (max-width: 61em) {
+          top: 5rem;
+        }
       }
 
       &--p3 {

diff --git a/src/pages/Homepage/InfoSection/InfoSection.module.scss b/src/pages/Homepage/InfoSection/InfoSection.module.scss
@@ -1,19 +1,44 @@
 .InfoSection {
-  height: 130rem;
+  // height: 130rem;
   //   background-color: #f7f7f7;
   background-color: #fff;
   padding: 16rem 0 15rem 0;
   margin-top: -27rem;
   clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);
+
+  @media (max-width: 61em) {
+    clip-path: none;
+  }
+
   &__content {
     padding: 1rem 20rem;
+
+    @media (max-width: 61em) {
+      padding: 1rem 10rem;
+    }
+
+    @media (max-width: 54em) {
+      padding: 1rem 5rem;
+    }
+
+    @media (max-width: 32.625em) {
+      padding: 1rem 2rem;
+    }
+  }
+
+  @media (max-width: 61em) {
   }
 
   &__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 3rem;
+
+    @media (max-width: 61em) {
+      gap: 2rem;
+    }
+
     &__header {
       font-size: 1.6rem;
       text-align: center;
@@ -26,6 +51,14 @@
     }
     &__image {
       width: 45rem;
+
+      @media (max-width: 54em) {
+        width: 35rem;
+      }
+
+      @media (max-width: 38.5em) {
+        width: 25rem;
+      }
       // position: absolute;
       // height: 20rem;
       // margin-left: 5rem;

diff --git a/src/pages/Product/index.js b/src/pages/Product/index.js
@@ -80,7 +80,7 @@ function Product() {
   const favoriteHandler = () => {
     axiosInstance
       .post(`accounts/add_to_favorite/`, {
-        id: product.id,
+        data: product.id,
       })
       .then((res) => {
         if (res.status === 200) {

diff --git a/src/pages/SellerPanel/PersonalInfo/InfoCard/index.js b/src/pages/SellerPanel/PersonalInfo/InfoCard/index.js
@@ -6,7 +6,7 @@ import Modal from "../Modal";
 import Backdrop from "../Backdrop";
 const edit = <FontAwesomeIcon icon={faPenToSquare} />;
 
-function InfoCard({ title, value, type, name }) {
+function InfoCard({ title, value, type, name, information, setInformation }) {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   function openModalHandler() {
     setModalIsOpen(true);
@@ -36,6 +36,8 @@ function InfoCard({ title, value, type, name }) {
           name={name}
           onCancel={closeModalHandler}
           onConfirm={closeModalHandler}
+          information={information}
+          setInformation={setInformation}
         />
       )}
       {modalIsOpen && <Backdrop onCancel={closeModalHandler} />}

diff --git a/src/pages/SellerPanel/PersonalInfo/Modal/index.js b/src/pages/SellerPanel/PersonalInfo/Modal/index.js
@@ -7,6 +7,7 @@ import axiosInstance from "../../../../axios";
 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { Marginer } from "../../../../components/marginer";
+
 const eye = <FontAwesomeIcon icon={faEye} />;
 const eye_slash = <FontAwesomeIcon icon={faEyeSlash} />;
 const close = <FontAwesomeIcon icon={faXmark} />;
@@ -40,33 +41,34 @@ function Modal(props) {
       ...formData,
       [e.target.name]: e.target.value.trim(),
     });
-    console.log(formData);
   };
 
   function cancelHandler() {
     props.onCancel();
   }
-  function confirmHandler() {
-    console.log(formData);
 
+  function confirmHandler() {
     if (!formData.currentPassword && !formData.password) {
-      console.log("without pass");
       axiosInstance
         .post(`accounts/edit_shop/`, {
-          email: formData.email,
-          username: formData.fullName,
-          user_phone_number: formData.phoneNumber,
-          shop_name: formData.shopName,
-          shop_address: formData.address,
-          shop_phone_number: formData.shopNumber,
+          ...(formData.email && { email: formData.email }),
+          ...(formData.fullName && { username: formData.fullName }),
+          ...(formData.phoneNumber && {
+            user_phone_number: formData.phoneNumber,
+          }),
+          ...(formData.shopName && { shop_name: formData.shopName }),
+          ...(formData.address && { shop_address: formData.address }),
+          ...(formData.shopNumber && {
+            shop_phone_number: formData.shopNumber,
+          }),
         })
         .then((res) => {
-          console.log(res);
           if (res.status === 200) {
+            props.onConfirm();
+            props.setInformation(res.data);
           }
         });
     } else {
-      console.log("with pass");
       axiosInstance
         .post(`/accounts/change_password/`, {
           Password: formData.password,
@@ -79,10 +81,6 @@ function Modal(props) {
           }
         });
     }
-
-    if (true) {
-      props.onConfirm();
-    }
   }
 
   return (

diff --git a/src/pages/SellerPanel/PersonalInfo/index.js b/src/pages/SellerPanel/PersonalInfo/index.js
@@ -1,6 +1,6 @@
 import classes from "./PersonalInfo.module.scss";
 import InfoCard from "./InfoCard";
-import { useEffect, useState } from "react";
+import { useEffect, useState, createContext, useContext } from "react";
 import axiosInstance from "../../../axios";
 import BeatLoader from "react-spinners/BeatLoader";
 
@@ -45,42 +45,56 @@ function PersonalInfo() {
             value={information.username}
             type={"text"}
             name={"fullName"}
+            information={information}
+            setInformation={setInformation}
           />
           <InfoCard
             title={"شماره موبایل"}
             value={information.user_phone_number}
             type={"tel"}
             name={"phoneNumber"}
+            information={information}
+            setInformation={setInformation}
           />
           <InfoCard
             title={"ایمیل"}
             value={information.email}
             type={"email"}
             name={"email"}
+            information={information}
+            setInformation={setInformation}
           />
           <InfoCard
             title={"آدرس فروشگاه"}
             value={information.shop_address}
             type={"text"}
             name={"address"}
+            information={information}
+            setInformation={setInformation}
           />
           <InfoCard
             title={"نام فروشگاه"}
             value={information.shop_name}
             type={"text"}
             name={"shopName"}
+            information={information}
+            setInformation={setInformation}
           />
           <InfoCard
             title={"شماره تلفن فروشگاه"}
             value={information.shop_phone_number}
             type={"tel"}
             name={"shopNumber"}
+            information={information}
+            setInformation={setInformation}
           />
           <InfoCard
             title={"رمز عبور"}
             value={"••••••••"}
             type={"password"}
             name={"password"}
+            information={information}
+            setInformation={setInformation}
           />
         </div>
       )}

diff --git a/src/pages/UserPanel/Orders/OrderItem/OrderItem.module.scss b/src/pages/UserPanel/Orders/OrderItem/OrderItem.module.scss
@@ -6,7 +6,7 @@
   display: flex;
   gap: 3rem;
 
-  @media (max-width: 32.5em) {
+  @media (max-width: 56.5em) {
     flex-direction: column;
   }