Reza added desktop login

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

@@ -2,20 +2,35 @@ import React, { Component } from "react";
 
 import logo from "../../../../assets/icons/logo.png";
 import iran from "../../../../assets/icons/iran.svg";
+import pic from "../../../../assets/images/pic.png";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
+    input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
+    button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
+    div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 95,
+  },
+};
+
 export default class Cellphone extends Component {
-  componentDidMount() {
-    this.inputRef1.focus();
-  }
   render() {
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <div className="auth-cellphone d-flex flex-column align-items-center">
+          <div className="auth-cellphone d-flex justify-content-center align-items-center">
+            <div className="auth-cellphone__box d-flex">
+              <div
+                style={{ width: "48%", height: "100%" }}
+                className="d-flex flex-column justify-content-center align-items-center"
+              >
                 <img src={logo} alt="دانوین" />
-            <div></div>
                 <form
+                  className="mb-3"
                   onSubmit={() =>
                     this.props.parent.setState({
                       page: 1,
@@ -23,7 +38,10 @@ export default class Cellphone extends Component {
                     })
                   }
                 >
+                  <span style={{ fontSize: fontSize.desktop.span }}>+98</span>
+                  <img src={iran} alt="پرچم" />
                   <input
+                    style={{ fontSize: fontSize.desktop.span }}
                     id="cellphone"
                     type="text"
                     maxLength={9}
@@ -32,7 +50,9 @@ export default class Cellphone extends Component {
                     ref={(input) => {
                       this.inputRef1 = input;
                     }}
-                onChange={(e) => this.setState({ cellphone: e.target.value })}
+                    onChange={(e) =>
+                      this.setState({ cellphone: e.target.value })
+                    }
                     onInput={(e) =>
                       (e.target.value = e.target.value
                         .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
@@ -41,7 +61,29 @@ export default class Cellphone extends Component {
                         .replace(/[^\d]/, ""))
                     }
                   />
+                  <button
+                    style={{ fontSize: fontSize.desktop.button }}
+                    type="submit"
+                  >
+                    ادامه
+                  </button>
                 </form>
+                <div className="auth-cellphone__box--footer d-flex flex-column justify-content-center align-items-center">
+                  <div style={{ fontSize: fontSize.desktop.div }}>
+                    {" "}
+                    حساب کاربری ندارید ؟ همین حالا<button>ثبت نام کنید</button>
+                  </div>
+                  <div style={{ fontSize: fontSize.desktop.div }}>شرایط استفاده و حریم خصوصی</div>
+                </div>
+              </div>
+              <div style={{ width: "48%", height: "100%" }}>
+                <img
+                  src={pic}
+                  alt="عکس"
+                  style={{ width: "100%", height: "100%" }}
+                />
+              </div>
+            </div>
           </div>
         ) : null}
         {window.innerWidth < 1000 ? (

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

@@ -1,21 +1,75 @@
 .auth-cellphone {
+  width: 100vw;
+  height: 100vh;
+  &__box {
     width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  label {
+    max-width: 1000px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    justify-content: space-between;
+    height: 80%;
+    img {
+      margin-bottom: 30px;
+      width: 200px;
+    }
+    form {
+      width: 100%;
+      max-width: 400px;
+      position: relative;
+      img {
+        position: absolute;
+        left: 10px;
+        top: 6px;
+        width: 45px;
+      }
+      span {
         text-align: right;
-    display: flex;
-    flex-direction: column;
-    color: white;
+        position: absolute;
+        left: 65px;
+        top: 8px;
+        direction: ltr;
+        color: #a5a5a5;
+      }
       input {
+        width: 100%;
+        max-width: 400px;
         background-color: inherit;
+        color: #a5a5a5;
+        direction: ltr;
+        text-align: left;
+        background-color: #f2f2f2;
+        border: none;
+        padding: 8px 5px 8px 105px;
+        border-radius: 5px;
+        &:focus {
+          outline: 0px;
+        }
+      }
+      button {
+        margin-top: 20px;
+        width: 100%;
+        max-width: 400px;
         border: 0px;
-      border-bottom: 2px solid white;
-      font-size: 24px;
+        font-family: numeralMedium;
+        background-color: #6cbe44;
         color: white;
-      direction: ltr;
-      text-align: center;
+        border-radius: 7px;
+        padding: 8px;
+      }
+    }
+    &--footer {
+      max-width: 400px;
+      div {
+        font-family: numeralMedium;
+        color: #a5a5a5;
+        letter-spacing: -1px;
+        button {
+          background-color: white;
+          border: 0px;
+          color: #02733c;
+          letter-spacing: -1px;
+        }
+      }
     }
   }
 }
@@ -86,7 +140,7 @@
       width: 100%;
       border: 0px;
       font-family: numeralMedium;
-      background-color: #6CBE44;
+      background-color: #6cbe44;
       color: white;
       border-radius: 7px;
       padding: 8px;
@@ -104,7 +158,7 @@
       button {
         background-color: white;
         border: 0px;
-        color: #02733C;
+        color: #02733c;
       }
     }
   }

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

@@ -2,8 +2,19 @@ import React, { Component } from "react";
 import Timer from "../Timer/index";
 
 import logo from "../../../../assets/icons/logo.png";
+import pic from "../../../../assets/images/pic.png";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
+    button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
+    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
+  },
+};
 export default class Code extends Component {
   constructor(props) {
     super(props);
@@ -72,7 +83,14 @@ export default class Code extends Component {
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <div className="auth-code d-flex">
+          <div className="auth-code d-flex justify-content-center align-items-center">
+            <div className="auth-code__box d-flex">
+              <div
+                style={{ width: "48%", height: "100%" }}
+                className="d-flex flex-column justify-content-center align-items-center"
+              >
+                <img src={logo} alt="دانوین" />
+                <div className="auth-code__box--codes d-flex">
                   <label htmlFor="code1">
                     <input
                       id="code1"
@@ -88,6 +106,7 @@ export default class Code extends Component {
                       onKeyDown={(e) => this.keyboardEvent(e)}
                       onInput={this.onInput}
                       onChange={(e) => this.changeValue(e)}
+                      style={{ fontSize: fontSize.desktop.input }}
                     />
                   </label>
                   <label htmlFor="code2">
@@ -105,6 +124,7 @@ export default class Code extends Component {
                       onKeyDown={(e) => this.keyboardEvent(e)}
                       onInput={this.onInput}
                       onChange={(e) => this.changeValue(e)}
+                      style={{ fontSize: fontSize.desktop.input }}
                     />
                   </label>
                   <label htmlFor="code3">
@@ -122,10 +142,12 @@ export default class Code extends Component {
                       onKeyDown={(e) => this.keyboardEvent(e)}
                       onInput={this.onInput}
                       onChange={(e) => this.changeValue(e)}
+                      style={{ fontSize: fontSize.desktop.input }}
                     />
                   </label>
                   <label htmlFor="code4">
                     <input
+
                       id="code4"
                       name="o4"
                       type="text"
@@ -139,19 +161,48 @@ export default class Code extends Component {
                       onKeyDown={(e) => this.keyboardEvent(e)}
                       onInput={this.onInput}
                       onChange={(e) => this.changeValue(e)}
+                      style={{ fontSize: fontSize.desktop.input }}
                     />
                   </label>
+                </div>
+                <button style={{ fontSize: fontSize.desktop.button }}>ثبت</button>
                 {!this.state.resendStatus ? (
                   <Timer seconds={10} parent={this} />
                 ) : (
                   <div
-                style={{ color: "#88ff88" }}
-                className="timer d-flex"
+                    style={{
+                      color: "#A5A5A5",
+                      fontFamily: "numeralMedium",
+                      fontSize: fontSize.desktop.div,
+                    }}
+                    className="timer d-flex mt-4"
                     onClick={() => this.setState({ resendStatus: false })}
                   >
-                دریافت مجدد کد
+                    ارسال مجدد کد فعال سازی
                   </div>
                 )}
+                <div
+                  style={{
+                    color: "#A5A5A5",
+                    fontFamily: "numeralMedium",
+                    fontSize: fontSize.desktop.div,
+                  }}
+                  className="timer d-flex mt-2"
+                  onClick={() =>
+                    this.props.parent.setState({ page: 0, cellphone: "" })
+                  }
+                >
+                  بازگشت به مرحله قبل و اصلاح شماره
+                </div>
+              </div>
+              <div style={{ width: "48%", height: "100%" }} className="d-flex">
+                <img
+                  src={pic}
+                  alt="عکس"
+                  style={{ width: "100%", height: "100%" }}
+                />
+              </div>
+            </div>
           </div>
         ) : null}
         {window.innerWidth < 1000 ? (
@@ -249,7 +300,9 @@ export default class Code extends Component {
             <div
               style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
               className="timer d-flex mt-2"
-              onClick={() => this.props.parent.setState({ page : 0, cellphone : ''})}
+              onClick={() =>
+                this.props.parent.setState({ page: 0, cellphone: "" })
+              }
             >
               بازگشت به مرحله قبل و اصلاح شماره
             </div>

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

@@ -1,24 +1,48 @@
 .auth-code{
+  width: 100vw;
+  height: 100vh;
+  &__box {
     width: 100%;
-  height: 100%;
-  justify-content:center;
-  align-items:center;
+    max-width: 1000px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    justify-content: space-between;
+    height: 80%;
+    img {
+      margin-bottom: 30px;
+    }
+    button{
+      margin-top: 20px;
+      width: 100%;
+      max-width: 300px;
+      border: 0px;
+      font-family: numeralMedium;
+      background-color: #6CBE44;
+      color: white;
+      border-radius: 7px;
+      padding: 8px;
+    }
+    &--codes{
       direction: ltr;
-  position: relative;
       input {
-    width: 50px;
-    background-color: inherit;
+        max-width: 60px;
+        max-height: 60px;
+        background-color: #f2f2f2;
         border : 0px;
-    border-bottom: 2px solid white;
-    margin : 0px 7px;
-    font-size: 24px;
-    color : white;
+        margin : 0px 10px;
+        color: #6F7074;
         text-align: center;
         direction : ltr;
+        border-radius: 5px;
+        padding: 10px 15px;
         &:focus{
           outline: 0px;
         }
       }
+      div{
+        letter-spacing:-1px;
+      }
+    }
   }
   
   .mobile-auth-code{
@@ -82,3 +106,5 @@
       }
     }
   }
+  
+}

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

@@ -1,6 +1,13 @@
 import { Component } from "react";
 import "./index.css";
 
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
+  },
+};
 export default class Timer extends Component {
   constructor(props) {
     super(props);
@@ -56,11 +63,26 @@ export default class Timer extends Component {
   }
   render() {
     return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <div className="timer d-flex mt-4">
+            <div style={{ color: "#a5a5a5", marginLeft: 5, fontSize: fontSize.desktop.div, fontFamily:'numeralMedium' }}>
+              زمان باقیمانده تا انقضای کد:
+            </div>
+            <div style={{ fontSize: fontSize.desktop.div }}>{this.state.time.s}</div>:
+            <div style={{ fontSize: fontSize.desktop.div }}>{this.state.time.m + this.state.time.h * 60}</div>
+          </div>
+        ) : null}
+        {window.innerWidth < 1000 ? (
           <div className="timer d-flex mt-4">
-        <div style={{color: '#a5a5a5', marginLeft: 5}}>زمان باقیمانده تا انقضای کد:</div>
+            <div style={{ color: "#a5a5a5", marginLeft: 5 }}>
+              زمان باقیمانده تا انقضای کد:
+            </div>
             <div>{this.state.time.s}</div>:
             <div>{this.state.time.m + this.state.time.h * 60}</div>
           </div>
+        ) : null}
+      </>
     );
   }
 }

src/views/Auth/Login/index.js

@@ -7,7 +7,7 @@ export default class Login extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      page: 1,
+      page: 0,
     };
   }
 

src/views/Auth/Profile/index.js

@@ -8,6 +8,15 @@ import pic from "../../../assets/images/pic.png";
 import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55,
+    p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
+  },
+};
 export default class Profile extends Component {
   state = {
     file: null,
@@ -22,7 +31,55 @@ export default class Profile extends Component {
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <div className="auth-profile d-flex"></div>
+          <div className="auth-profile d-flex justify-content-center align-items-center">
+            <div className="auth-profile__box d-flex flex-column p-4">
+              <h1 style={{ fontSize: fontSize.desktop.h1 }}>حساب کاربری</h1>
+              <p style={{ fontSize: fontSize.desktop.p }}>
+                لطفا مشخصات خود را به صورت کامل نمایید.
+              </p>
+              <form className="auth-profile__box--form d-flex">
+                <div style={{ width: "48%" }}>
+                  <div className="mb-2">
+                    <Input name="name" label="نام و نام خانوادگی" />
+                  </div>
+                  <div className="mb-2">
+                    <Input name="username" label="نام کاربری" />
+                  </div>
+                  <div className="mb-2">
+                    <Input name="password" label="رمز عبور" />
+                  </div>
+                </div>
+                <div style={{ width: "48%" }}>
+                  <div className="mb-2" style={{ minWidth: "100%" }}>
+                    <Select
+                      parent={this}
+                      options={["karaj", "tehran"]}
+                      name="province"
+                      label={"استان"}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Select
+                      parent={this}
+                      options={["karaj", "tehran"]}
+                      name="city"
+                      label={"شهرستان"}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <TextArea
+                      parent={this}
+                      label={"آدرس محل سکونت"}
+                      name="address"
+                    />
+                  </div>
+                  <div className="auth-profile__box--form__footer d-flex justify-content-center">
+                    <button>‌ذخیره</button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
         ) : null}
         {window.innerWidth < 1000 ? (
           <div className="mobile-auth-profile d-flex flex-column">
@@ -55,9 +112,19 @@ export default class Profile extends Component {
             <Input name="name" label="نام و نام خانوادگی" />
             <Input name="username" label="نام کاربری" />
             <Input name="password" label="رمز عبور" />
-            <Select parent={this} options={['karaj', 'tehran']} name="province" label={'استان'} />
-            <Select parent={this} options={['karaj', 'tehran']} name="city" label={'شهرستان'} />
-            <TextArea parent={this} label={'آدرس محل سکونت'} name="address" />
+            <Select
+              parent={this}
+              options={["karaj", "tehran"]}
+              name="province"
+              label={"استان"}
+            />
+            <Select
+              parent={this}
+              options={["karaj", "tehran"]}
+              name="city"
+              label={"شهرستان"}
+            />
+            <TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
             <div className="mobile-auth-profile__footer d-flex justify-content-center">
               <button>‌ذخیره</button>
             </div>

src/views/Auth/Profile/index.scss

@@ -143,3 +143,111 @@
     }
   }
 }
+
+
+.auth-profile{
+  width : 100vw;
+  height: 100vh;
+  &__box{
+    width: 100%;
+    max-width: 1000px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    h1{
+      margin-top: 15px;
+      font-family: numeralBold;
+      color: #6F7074;
+      letter-spacing: -1px;
+    }
+    p{
+      font-family: numeralLight;
+      color: #6f7074;
+      letter-spacing: -1px;
+      text-align: justify;
+    }
+    &--form{
+      margin-top: 20px;
+      width: 100%;
+      justify-content:space-between;
+      .MuiFormControl-root{
+        width: 100%;
+        margin: 10px auto !important;
+        .MuiSelect-iconOutlined{
+          display: none;
+        }
+        .MuiSelect-outlined.MuiSelect-outlined{
+          padding-right: 15px;
+        }
+        color: #797979 !important;
+      }
+      .MuiOutlinedInput-notchedOutline {
+        top: 0px !important;
+      }
+      .MuiOutlinedInput-notchedOutline {
+        border-color: #cecece !important;
+        border-width: 1px !important;
+        color: green !important;
+        font-size: calc(100vw / 80) !important;
+        border-radius: 10px !important;
+      }
+    
+      .MuiOutlinedInput-input {
+        padding: 20px 14px !important;
+        font-size: calc(100vw / 85) !important;
+      }
+      .MuiInputLabel-outlined {
+        font-family: numeralLight !important;
+        display: inline !important;
+        position: absolute;
+        text-align: right !important;
+        right: 7px;
+        top: 20px;
+        padding: 0px !important;
+        transform: translate(0px, 0px) scale(1) !important;
+      }
+      .MuiInputLabel-shrink {
+        text-align: center !important;
+        display: inline;
+        position: absolute;
+        right: 0px;
+        top: -8px;
+        transform: translate(0px, 0px) scale(0.85) !important;
+        padding-right: 0px !important;
+      }
+    
+      label {
+        background-color: white;
+        max-width: 120px;
+        text-align: center;
+        font-size: calc(100vw / 85) !important;
+        color: #797979 !important;
+        letter-spacing: -1px;
+      }
+      .Mui-focused {
+        color: rgba(0, 0, 0, 0.54) !important;
+        border-color: #c4c4c5 !important;
+        background-color:white;
+      }
+    
+      .MuiInputBase-input{
+        height: auto !important;
+      }
+      &__footer {
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        button {
+          font-family: numeralLight;
+          border: 0px;
+          background-color: #00CC69;
+          border-radius: 7px;
+          font-size: 18px;
+          font-weight: 600;
+          color: white;
+          padding: 12px 0px;
+          width: 100%;
+        }
+      }
+    }
+  }
+}

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js

@@ -133,13 +133,13 @@ NavbarDrawer.defaultProps = {
     },
     {
       name: "بارکد خوان",
-      link: "/",
+      link: "/qr-code",
       icon: <img src={qrcode} alt="بارکد خوان" />,
       toast: "",
     },
     {
       name: "فروشگاه",
-      link: "/",
+      link: "/products",
       icon: <img src={mobileBasket} alt="فروشگاه" />,
       toast: "",
     },
@@ -157,7 +157,7 @@ NavbarDrawer.defaultProps = {
     },
     {
       name: "ویرایش مشخصات",
-      link: "/",
+      link: "/profile",
       icon: <img src={mobileProfile} alt="ویرایش مشخصات" />,
       toast: "",
     },