From 15c534c00d1df2af8d2f4c236ec2d39fb713fb4d Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Wed, 16 Mar 2022 16:44:50 +0330
Subject: [PATCH] Mobile Register Made

---
 src/App.js                                    |   2 +-
 src/components/header/Header.js               |   5 +-
 src/components/header/MobileSideMenu/index.js |   9 +-
 src/components/nav/Nav.js                     |   2 +-
 src/view/LoginSignUp/index.css                |  42 ++++
 src/view/LoginSignUp/mobile/index.js          | 122 +++++++++--
 src/view/register/mobile/index.js             | 196 +++++++-----------
 7 files changed, 233 insertions(+), 145 deletions(-)

diff --git a/src/App.js b/src/App.js
index 53d200a..8430e0c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -666,7 +666,7 @@ function App() {
     
     <Router>
       <div className="App">
-        {LOGIN &&  <Header />}
+        {LOGIN &&  <Header logOut={logOut} />}
         {LOGIN && <Nav logOut={logOut} />}
         <Routes>
           <Route path="/" element={LOGIN ? 
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 937e7b4..db31ade 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -13,7 +13,8 @@ import arrowIcon from './MobileSideMenu/arrow-down.svg'
 import exitIcon from '../../assets/img/group-9.svg'
 import backIcon from './arrow-left-1.svg';
 const Header = ({
-  isMobile, cart
+  isMobile, cart,
+  logOut
 }) => {
   let today = moment().locale("fa").format("YYYY/M/D");
   console.log("today:");
@@ -138,7 +139,7 @@ const Header = ({
         <>
           <div className='h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed'></div>
           <div className='w-full flex'>
-            <MobileSideMenu profilePic={avatar1} users={[
+            <MobileSideMenu logOut={logOut} profilePic={avatar1} users={[
               {
                 name: 'کوروش زراندوز',
                 title: 'پایه ششم'
diff --git a/src/components/header/MobileSideMenu/index.js b/src/components/header/MobileSideMenu/index.js
index ffa2d6b..8c34b4c 100644
--- a/src/components/header/MobileSideMenu/index.js
+++ b/src/components/header/MobileSideMenu/index.js
@@ -24,7 +24,8 @@ import radarIconActive from './radar-1-active.svg';
 const MobileSideMenu = ({
     profilePic,
     users,
-    close
+    close,
+    logOut
 }) => {
     const location = useLocation();
     const [showUsers, setShowUsers] = useState(false);
@@ -83,7 +84,8 @@ const MobileSideMenu = ({
             icon: exitIcon,
             activeIcon: exitIcon,
             title: 'خروج',
-            link: ''
+            link: '',
+            onClick: () => logOut() 
         },
     ]
     return (
@@ -114,7 +116,8 @@ const MobileSideMenu = ({
             {
                 options.map((item) => (
                     <Link to={item.link}
-                    onClick={() => close()}
+                    
+                    onClick={() => {close(); item?.onClick()}}
                     className={`w-full py-1 flex items-center  ${location.pathname == item.link ? 'border-r-4 border-red52 text-red52 font-bold' : 'text-grayAB '}`}
                     style={{background: location.pathname == item.link && 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,20,82,0.2) 100%)', borderRight: location.pathname == item.link && '8px solid #df1452'}}
                     >
diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js
index 03fe118..f5e9b22 100644
--- a/src/components/nav/Nav.js
+++ b/src/components/nav/Nav.js
@@ -105,7 +105,7 @@ useEffect(() => {
   if (isMobile) {
 
     return (
-      location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') ? null :
+      location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') || location2.pathname.includes('register') ? null :
       <div className="w-full flex fixed  bg-white justify-center z-20 py-4 bottom-0">
         <div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl">
           {
diff --git a/src/view/LoginSignUp/index.css b/src/view/LoginSignUp/index.css
index ffcf52b..e4f3455 100644
--- a/src/view/LoginSignUp/index.css
+++ b/src/view/LoginSignUp/index.css
@@ -39,4 +39,46 @@
   
   .slideshowDot.active {
     background-color: #521326;
+  }
+  @media only screen and (max-width: 800px) {
+    .slideshow {
+      margin: 0 auto;
+      overflow: hidden;
+      width:100%;
+    }
+    
+    .slideshowSlider {
+      white-space: nowrap;
+      transition: ease 1000ms;
+    }
+    
+    .slide {
+      display: inline-block;
+  
+      height: 300px;
+      width: 100%;
+      border-radius: 40px;
+    }
+    
+    /* Buttons */
+    
+    .slideshowDots {
+      text-align: center;
+    }
+    
+    .slideshowDot {
+      display: inline-block;
+      height: 6px;
+      width: 6px;
+      border-radius: 50%;
+    
+      cursor: pointer;
+      margin: 15px 7px 0px;
+    
+      background-color: #c4c4c4;
+    }
+    
+    .slideshowDot.active {
+      background-color: #521326;
+    }
   }
\ No newline at end of file
diff --git a/src/view/LoginSignUp/mobile/index.js b/src/view/LoginSignUp/mobile/index.js
index 813938d..5ffc78f 100644
--- a/src/view/LoginSignUp/mobile/index.js
+++ b/src/view/LoginSignUp/mobile/index.js
@@ -5,7 +5,9 @@ import { useNavigate } from "react-router-dom";
 import Input from "../../../components/input/signUpInput";
 import onInput from "../../../utils/onInput";
 import Timer from "../../../components/Timer";
-
+import firstPic from '../../../assets/img/undraw_professor_-8-lrt.svg';
+import secondPic from '../../../assets/img/undraw_quiz_nlyh.svg';
+import thirdPic from '../../../assets/img/undraw_certificate_re_yadi.svg';
 
 import { connect } from "react-redux";
 import { user, publicApi } from "../../../redux/actions";
@@ -48,6 +50,31 @@ const LoginSignUpMobile = ({
             line[id].style.backgroundColor = "#EBEBEB";
         }
     };
+
+    function resetTimeout() {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    }
+
+    useEffect(() => {
+        resetTimeout();
+        timeoutRef.current = setTimeout(
+            () => {
+                setIndex((prevIndex) => prevIndex + 1
+                    //  prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
+                )
+                if (index === slideContents.length)
+                    setTimeout(setIndex(1), 1000)
+            },
+
+            delay
+        );
+
+        return () => {
+            resetTimeout();
+        };
+    }, [index]);
     
    
 
@@ -170,13 +197,36 @@ const LoginSignUpMobile = ({
         }
     }, [loginFlag]);
     const light = theme === "light";
+
+    const slideContents = [
+        {
+            id: 0,
+            image: firstPic,
+            title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید',
+            description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
+        },
+        {
+            id: 1,
+            image: secondPic,
+            title: 'یک آزمون سخت و افتضاح در راه هست!',
+            description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
+        },
+        {
+            id: 2,
+            image: thirdPic,
+            title: 'یک اسلاید عجیب غریب دیگر در راه هست',
+            description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
+        },
+        
+    ];
+    const delay = 2500;
     return (
         
-        <div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
-            <div className="w-fullflex rounded-xl">
+        <div className="w-full flex flex-col items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
+            <div className="w-full flex flex-col  justify-between rounded-xl">
                 {/* form */}
 
-                <div className="flex w-full border-0 border-l border-solid border flex-col items-center p-6">
+                <div className="flex w-full border-0 border-l border-solid border flex-col items-center justify-between  p-6">
                     <div className="h-12 w-full  flex justify-end">
                         {steps != 0 &&
                             <div className="w-12 h-full bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 m-0 text-2xl font-light cursor-pointer" onClick={() => setSteps(steps - 1)}>
@@ -185,18 +235,54 @@ const LoginSignUpMobile = ({
                         }
                     </div>
                     <img src={logo} className="w-1/3 m-6" />
-                    <div className="flex flex-col  items-start justify-start leading-normal">
+                    <div className="flex flex-col w-full items-start justify-start leading-normal">
                         {
-                            steps == 2 ? <h1 className="text-red26 text-lg font-bold">تاییدیه ثبت نام</h1> : <>
-                                <h1 className="text-red26 text-lg font-bold">ورود یا ثبت نام</h1>
-                                <h1 className="text-red26 text-lg font-bold">سامانه ثبت نام مدارس موسسه علمی اندیشمند</h1>
+                            steps == 2 ? <h1 className="text-red26 text-lg font-bold">تاییدیه ثبت نام</h1> :
+                            <>
+                              <div className=" w-full  flex flex-col items-center justify-center" >
+                    <div className="slideshow" style={{ direction: 'ltr' }}>
+                        <div
+                            className="slideshowSlider"
+                            style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
+                        >
+                            {[slideContents[slideContents.length - 1],
+                            ...slideContents, slideContents[0]
+                            ].map((item, index) => (
+                                <div
+                                    className="slide"
+                                    key={`sildeNo${index}`}
+
+                                >
+                                    <div className="w-full flex flex-col justify-center items-center">
+                                        <img src={item.image} style={{ height: '200px' }} />
+                                        <h1 className="w-4/5 text-sm my-2 text-red26 font-bold whitespace-normal">{item.title}</h1>
+                                        <p className=" px-12 text-right text-xs whitespace-normal">{item.description}</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="slideshowDots">
+                            {slideContents.map((_, idx) => (
+                                <div
+                                    key={idx}
+                                    className={`slideshowDot${index === idx + 1 ? " active" : ""}`}
+                                    onClick={() => {
+                                        setIndex(idx + 1);
+                                    }}
+                                ></div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
                             </>
+                            
                         }
 
                         <p className="text-gray-500 text-sm mt-2">
 
                             {
-                                steps == 2 ? <div>
+                                steps == 2 && <div>
                                     یک کد چهار رقمی تا &nbsp;{" "}
                                     <Timer seconds={120} refresh={setResend} /> &nbsp; دیگر برای شماره
                                     &nbsp;{" "}
@@ -204,21 +290,17 @@ const LoginSignUpMobile = ({
                                         {signUpFields?.cellphone}
                                     </span>{" "}
                                     &nbsp; ارسال خواهد شد.
-                                </div> : <div>
-                                    کاربر گرامی لطفا یکی از دو گزینه زیر را انتخاب نمایید.
-                                    <br />
-                                    در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
-                                </div>
+                                </div> 
                             }
 
                         </p>
 
                         {
                             steps == 0 &&
-                            <>
+                            <div className="flex w-full items-center mt-4">
                                 <Link
                                     to=""
-                                    className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
+                                    className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center ml-1"
                                     onClick={() => {
                                         setSteps(1);
 
@@ -228,7 +310,7 @@ const LoginSignUpMobile = ({
                                 </Link>
                                 <Link
                                     to=""
-                                    className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mt-4"
+                                    className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mr-1"
                                     onClick={() => {
                                         setSteps(1);
                                         setRegister(true);
@@ -237,7 +319,7 @@ const LoginSignUpMobile = ({
                                 >
                                     ثبت نام
                                 </Link>
-                            </>
+                            </div>
                         }
                         {
                             steps == 1 &&
@@ -364,14 +446,14 @@ const LoginSignUpMobile = ({
                         }
 
 
-                        <div className="w-full flex flex-col items-center justify-center">
+                        {/* <div className="w-full flex flex-col items-center justify-center">
                             <p className="w-3/5 text-xs  my-20 text-center text-red26">
                                 ثبت نام شما در سامانه به منزله قبول
                                 <Link to="" className="font-bold"> شرایط و قوانین استفاده </Link>
                                 میباشد
                             </p>
                             <p className="text-gray-300 text-xs">1401 - 1400</p>
-                        </div>
+                        </div> */}
 
                     </div>
                 </div>
diff --git a/src/view/register/mobile/index.js b/src/view/register/mobile/index.js
index 7f5f920..a94d6e8 100644
--- a/src/view/register/mobile/index.js
+++ b/src/view/register/mobile/index.js
@@ -9,6 +9,8 @@ import Button from "../../../components/Button";
 import Stepper from "../../../components/Stepper";
 
 import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import Checkbox from "../../../components/Checkbox";
 
 
 const MobileRegister = ({ activeLogin, isMobile }) => {
@@ -19,7 +21,9 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
     const [activeStep, setActiveStep] = useState([true, false, false, false]);
     const [error, setError] = useState('');
     
-    
+    useEffect(() => {
+        window.scrollTo(0,0)
+    }, [steps])
 
     const [userInfo, setUserInfo] = useState({
         name: null,
@@ -266,108 +270,64 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
 
     return (
         
-        <div className="flex justify-center mb-4" style={{ direction: 'rtl', marginTop: '8.5%', marginRight: '6.5%', width: '93.5%', marginRight: '6.5%' }}>
+        <div className="flex w-full px-4 justify-center py-20" style={{ direction: 'rtl'}}>
 
-            <div className="w-11/12 flex flex-col ">
+            <div className="w-full flex flex-col ">
 
                 {/* form */}
                 {console.log(userInfo)}
-                <div className="flex w-full border-0 border-l border-solid border flex-col items-center p-6">
-
-                    {/* <img src={logo} className="w-1/2 m-4 mt-0" /> */}
-                    <div className="flex flex-col  items-center justify-start leading-normal">
-                        <p className="w-full text-xl text-red52 font-bold">
-                            {/* سامانه ثبت نام مدارس موسسه علمی اندیشمند */}
-                            تکمیل اطلاعات پروفایل
-                        </p>
-
-                        <div className="flex flex-col mt-6">
-                            {/* {
-                                stepCont.map((item) => (
-
-                                    <div key={`step__${item.step}`} className="flex my-2 items-center ">
-                                        <div className="ml-2">
-                                            <div className={`w-6 h-6 rounded-full border border-solid border-gray-200 ${steps == item.step ? 'bg-red52' : ''}`}>
-
-                                            </div>
-                                            <span
-                                                className=" w-2  mt-2 border-r-4 border-solid border-red46OP"
-                                                style={{
-
-                                                    // transform: "translateX(-1px)",
-                                                }}
-                                            ></span>
-                                        </div>
-                                        <h1 className="text-gray-400 font-bold">{item.title}</h1>
-                                    </div>
-
-                                )
-                                )
-
-                            } */}
-                            <Stepper count={4} currentStep={steps} steps={stepCont} direction="horizontal"/>
-                        </div>
-
-
-
-
-                    </div>
-                </div>
+               
 
                 {/* Content */}
 
-                <div className="w-4/5  mx-10 flex flex-col items-start text-right b">
+                <div className="w-full  flex flex-col items-start text-right b">
                     {
                         steps == 0 &&
-                        <form>
-                            <div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
-                                <div className="mb-4">
-                                    <h1 className="font-black">مشخصات هویتی دانش آموز</h1>
-                                    <p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p>
+                        <form className="w-full">
+                            <div className="w-full  border-b border-solid border-gray-200">
+                                <div className="mb-4 flex w-full justify-between font-black text-red52">
+                                    <h1 className="">مشخصات هویتی دانش آموز</h1>
+                                   <p>مرحله ۱ از ۴</p>
                                 </div>
-                                <div className="flex">
-                                    <div className="flex w-2/5 ">
-                                        <div className="ml-2">
+                                <div className="flex w-full flex-col">
+                                    
+                                        
                                             <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} />
                                             <Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' />
                                             <Input title="جنسیت" borderType="rounded" gapSize="16" id={2}  />
-                                        </div>
-                                        <div className="mr-2">
+                                        
                                             <Input title="نام خانوادگی" borderType="rounded" id={3} direction='rtl' />
                                             <Input title="تاریخ تولد" borderType="rounded" gapSize="16" id={4} type='number' />
                                            
 
-                                        </div>
-                                    </div>
-                                    <div className="w-3/5 flex justify-center">
-                                        <div className="w-2/5 mx-4">
+                                    
+                                       <br></br>
                                             <FileInput title="بارگزاری صفحه اول شناسنامه" id={1} />
-                                        </div>
-                                        <div className="w-2/5 mx-4">
+                                        <br></br>
                                             <FileInput title="بارگزاری عکس پرسنلی" id={2} />
-                                        </div>
-                                    </div>
+                                        
+                                   
 
 
                                 </div>
                             </div>
-                            <div className="w-full px-10 py-10 border-b flex items-center border-solid border-gray-200">
-                                <div className="">
+                            <div className="w-full py-10 leading-normal border-b flex flex-col items-center border-solid border-gray-200">
+                                <div className="w-full pb-2">
                                     <h1 className="font-black">پایه تحصیلی</h1>
                                     <p className="font-bold text-gray-300 text-sm">لطفا پایه تحصیلی دانش آموز را وارد کنید</p>
                                 </div>
-                                <select className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-gray-400 outline-red52 mx-6">
+                                <select className="bg-white border border-solid border-gray-300 w-full p-3 rounded-lg text-gray-400 outline-red52 mx-6">
                                     {grades.map((item) => (
                                         <option key={`Grade__${item.id}`}>{item.title}</option>
                                     ))}
                                 </select>
                             </div>
-                            <div className="w-full px-10 py-8 flex flex-col ">
+                            <div className="w-full  py-8 flex flex-col ">
                                 <div className="mb-4">
                                     <h1 className="font-black">مشخصات هویتی دانش آموز</h1>
                                     <p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p>
                                 </div>
-                                <div className="flex justify-between items-center">
+                                <div className="flex flex-col items-center">
                                     <Input title="نام مدرسه" borderType="rounded" gapSize="20" direction='rtl' id={5} />
                                     <select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6">
                                         {grades.map((item) => (
@@ -383,13 +343,13 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                                     <div className="w-40">
                                         <Button borderType='rounded' title='مرحله بعد' onClick={() => {
                                             const inputs = document.querySelectorAll('.Login-box-form-item-input')
-                                            if (inputs[0].value) {
+                                            // if (inputs[0].value) {
                                                 setSteps(1)
                                                 setActiveStep([true, true, false, false])
                                                 setError('')
-                                            } else {
-                                                alert('لطفا تمامی فیلد ها را پر کنید')
-                                            }
+                                            // } else {
+                                            //     toast.warn('لطفا تمامی فیلد ها را پر کنید')
+                                            // }
                                             setUserInfo(prevState => {
                                                 return {
                                                     ...prevState,
@@ -408,7 +368,7 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                                             })
                                         }} />
                                     </div>
-                                </div>
+                                </div> 
 
                             </div>
 
@@ -416,13 +376,17 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                     }
                     {
                         steps == 1 &&
-                        <form>
-                            <div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
+                        <form className="w-full">
+                            <div className="mb-4 flex w-full justify-between font-black text-red52">
+                                    <h1 className="">مشخصات هویتی خانواده دانش آموز</h1>
+                                   <p>مرحله ۲ از ۴</p>
+                                </div>
+                            <div className="w-full pb-6 border-b border-solid border-gray-200">
                                 <div className="mb-4">
                                     <h1 className="font-black">مشخصات هویتی پدر</h1>
                                     <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
                                 </div>
-                                <div className="flex">
+                                <div className="flex flex-col">
 
 
                                     <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} />
@@ -435,8 +399,7 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
 
 
 
-                                </div>
-                                <div className="flex">
+                                
 
 
                                     <Input title="تلفن همراه" borderType="rounded" type='number' id={4} />
@@ -454,12 +417,12 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
 
 
 
-                            <div className="w-full px-10 py-6 border-b border-solid border-gray-200">
+                            <div className="w-full py-6 border-b border-solid border-gray-200">
                                 <div className="mb-4">
                                     <h1 className="font-black">مشخصات هویتی مادر</h1>
                                     <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی مادر را وارد کنید</p>
                                 </div>
-                                <div className="flex">
+                                <div className="flex w-full flex-col">
 
 
                                     <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={8} />
@@ -472,8 +435,7 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
 
 
 
-                                </div>
-                                <div className="flex">
+                               
 
 
                                     <Input title="تلفن همراه" borderType="rounded" type='number' id={12} />
@@ -490,51 +452,49 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                             </div>
 
 
-                            <div className="w-full px-10 py-8 flex flex-col ">
+                            <div className="w-full  py-8 flex flex-col ">
                                 <div className="mb-4">
                                     <h1 className="font-black">زندگی با خانواده </h1>
                                     <p className="font-bold text-gray-300 text-sm">در این قسمت مشخص کنید دانشس آموز به همراه چه کسانی زندگی میکند </p>
                                 </div>
-                                <div className="flex justify-between items-center">
-                                    <div className="w-4/5 flex">
+                                <div className="flex flex-col items-center">
+                                    
                                         <select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6">
                                             {grades.map((item) => (
                                                 <option key={`Grade__${item.id}`}>{item.title}</option>
                                             ))}
                                         </select>
                                         <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} />
-                                    </div>
+                                    
                                     <Input title="نشانی محل سکونت" borderType="rounded" gapSize="40" id={17} />
 
-                                </div>
-                                <div className="flex justify-start items-center">
-                                    <div className="w-2/5 flex">
+                               
 
-                                        <Input title="تلفن ثابت" borderType="rounded" type='number' gapSize="40" direction='rtl' id={18} className="w-1/2" />
-                                        <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={19} className="w-1/2" />
-                                    </div>
+                                        <Input title="تلفن ثابت" borderType="rounded" type='number' gapSize="40" direction='rtl' id={18}  />
+                                        <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={19}  />
+                                   
 
 
                                 </div>
-                                <div className="flex pt-10 justify-end">
-                                    <div className="w-40 mx-4">
+                                <div className="flex w-full pt-10 justify-between">
+                                    <div className="w-1/2 ml-2">
                                         <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
                                             setSteps(0);
                                             setActiveStep([true, false, false, false])
                                         }} />
                                     </div>
 
-                                    <div className="w-40">
+                                    <div className="w-1/2 mr-2">
                                         <Button borderType='rounded' title='مرحله بعد' onClick={() => {
                                             const inputs = document.querySelectorAll('.Login-box-form-item-input')
-                                            if (inputs[0].value) {
+                                            // if (inputs[0].value) {
                                                 setSteps(2);
 
                                                 setActiveStep([true, true, true, false])
 
-                                            } else {
-                                                alert('لطفا تمامی فیلد ها را پر کنید')
-                                            }
+                                            // } else {
+                                            //     alert('لطفا تمامی فیلد ها را پر کنید')
+                                            // }
                                             setUserInfo(prevState => {
                                                 return {
                                                     ...prevState,
@@ -579,13 +539,14 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                     {
                         steps == 2 &&
                         <>
-                            <div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
-                                <div className="mb-4">
-                                    <h1 className="font-black">قوانین و مقررات ثبت نام</h1>
-                                    <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
+                            <div className="w-full  pb-6 border-b border-solid border-gray-200">
+                            <div className="mb-4 flex w-full justify-between font-black text-red52">
+                                    <h1 className="">تایید قوانین و مقررات</h1>
+                                   <p>مرحله ۳ از ۴</p>
                                 </div>
+                                
 
-                                <p className="text-gray-500">
+                                <p className="text-gray-500 text-sm overflow-x-hidden overflow-scroll w-full" style={{height:'60vh'}}>
                                     بند اول: موارد مربوط به آموزش مخاطبین
                                     پیر مردی هر روز تو محله می دید پسر کی با کفش های پاره و پای برهنه با توپ پلاستیکی فوتبال بازی می کند، روزی رفت ی کتانی نو خرید و اومد و به پسرک گفت بیا این کفشا رو بپوش…پسرک کفشا رو پوشید و خوشحال رو به پیر مرد کرد و گفت: شما خدایید؟! پیر مرد لبش را گزید و گفت نه! پسرک گفت پس دوست خدایی، چون من دیشب فقط به خدا گفتم كه کفش ندارم
                                     هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس می‌زند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و دلواپسی زیاد به زندگی ادامه می دهیم، همان‌ طور که تا آنجا که ممکن است طولانی‌ تر در یک حباب صابون می‌ دمیم تا بزرگتر شود، گر چه با قطعیتی تمام می‌ دانیم که خواهد ترکید.
@@ -601,8 +562,8 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                                 </p>
 
                             </div>
-                            <div className="flex items-center px-10 py-6">
-                                <input type="checkbox" className="w-6 h-6" />
+                            <div className="flex items-start text-xs py-6">
+                                <Checkbox name="TAEED_REGISTER_MOBILE" />
                                 <label className="mr-4 font-bold text-gray-500">
                                     اینجانبان
                                     <span className="text-red52 font-bold"> {userInfo.fatherName} {userInfo.fatherFamilyName} </span>
@@ -613,15 +574,15 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                                     با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد
                                 </label>
                             </div>
-                            <div className="w-full flex pt-10 justify-end">
-                                <div className="w-40 mx-4">
+                            <div className="w-full flex pt-10 justify-between">
+                                <div className="w-1/2 ml-2">
                                     <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
                                         setSteps(1);
                                         setActiveStep([true, true, false, false])
                                     }} />
                                 </div>
 
-                                <div className="w-40">
+                                <div className="w-1/2 mr-2">
                                     <Button borderType='rounded' title='مرحله بعد' onClick={() => {
                                         setSteps(3);
                                         setActiveStep([true, true, true, true])
@@ -636,11 +597,10 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                     {
                         steps == 3 &&
                         <>
-                            <div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
-                                <div className="mb-4 pb-4">
-                                    <h1 className="font-black">تایید اطلاعات</h1>
-                                    <p className="font-bold text-gray-300 text-sm">لطفا اطلاعاتی که وارد کرده اید را چک کنید</p>
-                                    
+                            <div className="w-full pb-6">
+                            <div className="mb-4 flex w-full justify-between font-black text-red52">
+                                    <h1 className="">تایید اطلاعات</h1>
+                                   <p>مرحله ۴ از ۴</p>
                                 </div>
                                 
                                 <div className="flex flex-col border-b border-solid border-gray-300 leading-7 pb-6">
@@ -685,16 +645,16 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
                                     </div>
                                     </div>
 
-                                <div className="w-full flex pt-10 justify-end">
-                                    <div className="w-40 mx-4">
+                                <div className="w-full flex pt-10 justify-between">
+                                    <div className="w-1/2 ml-2">
                                         <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
                                             setSteps(2)
                                             setActiveStep([true, true, true, false])
                                         }} />
                                     </div>
 
-                                    <div className="w-40">
-                                        <Button borderType='rounded' title='ورود' to='/dashboard' onClick={() =>
+                                    <div className="w-1/2 mr-2">
+                                        <Button borderType='rounded' title='ورود' to='/' onClick={() =>
                                             activeLogin()
                                         } />
                                     </div>