From d948b16c4a2141b103804d87907477f3d6007944 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimirreza98@gmail.com>
Date: Mon, 28 Jun 2021 06:44:30 +0430
Subject: [PATCH] Reza added desktop login

---
 src/views/Auth/Login/Cellphone/index.js       | 106 ++++++---
 src/views/Auth/Login/Cellphone/index.scss     | 104 ++++++---
 src/views/Auth/Login/Code/index.js            | 209 +++++++++++-------
 src/views/Auth/Login/Code/index.scss          | 174 ++++++++-------
 src/views/Auth/Login/Timer/index.js           |  32 ++-
 src/views/Auth/Login/index.js                 |   2 +-
 src/views/Auth/Profile/Select/index.js        |   2 +-
 src/views/Auth/Profile/index.js               |  81 ++++++-
 src/views/Auth/Profile/index.scss             | 108 +++++++++
 .../Mobile/NavbarDrawer/NavbarDrawer.js       |   6 +-
 10 files changed, 598 insertions(+), 226 deletions(-)

diff --git a/src/views/Auth/Login/Cellphone/index.js b/src/views/Auth/Login/Cellphone/index.js
index 2b8f063..3a15f01 100644
--- a/src/views/Auth/Login/Cellphone/index.js
+++ b/src/views/Auth/Login/Cellphone/index.js
@@ -2,46 +2,88 @@ 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">
-            <img src={logo} alt="دانوین" />
-            <div></div>
-            <form
-              onSubmit={() =>
-                this.props.parent.setState({
-                  page: 1,
-                  cellphone: "09" + this.state.cellphone,
-                })
-              }
-            >
-              <input
-                id="cellphone"
-                type="text"
-                maxLength={9}
-                inputMode="numeric"
-                autoComplete="off"
-                ref={(input) => {
-                  this.inputRef1 = input;
-                }}
-                onChange={(e) => this.setState({ cellphone: e.target.value })}
-                onInput={(e) =>
-                  (e.target.value = e.target.value
-                    .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
-                      return c.charCodeAt(0) & 0xf;
+          <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="دانوین" />
+                <form
+                  className="mb-3"
+                  onSubmit={() =>
+                    this.props.parent.setState({
+                      page: 1,
+                      cellphone: "09" + this.state.cellphone,
                     })
-                    .replace(/[^\d]/, ""))
-                }
-              />
-            </form>
+                  }
+                >
+                  <span style={{ fontSize: fontSize.desktop.span }}>+98</span>
+                  <img src={iran} alt="پرچم" />
+                  <input
+                    style={{ fontSize: fontSize.desktop.span }}
+                    id="cellphone"
+                    type="text"
+                    maxLength={9}
+                    inputMode="numeric"
+                    autoComplete="off"
+                    ref={(input) => {
+                      this.inputRef1 = input;
+                    }}
+                    onChange={(e) =>
+                      this.setState({ cellphone: e.target.value })
+                    }
+                    onInput={(e) =>
+                      (e.target.value = e.target.value
+                        .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
+                          return c.charCodeAt(0) & 0xf;
+                        })
+                        .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 ? (
diff --git a/src/views/Auth/Login/Cellphone/index.scss b/src/views/Auth/Login/Cellphone/index.scss
index 9fec438..7eebc51 100644
--- a/src/views/Auth/Login/Cellphone/index.scss
+++ b/src/views/Auth/Login/Cellphone/index.scss
@@ -1,21 +1,75 @@
 .auth-cellphone {
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  label {
-    text-align: right;
-    display: flex;
-    flex-direction: column;
-    color: white;
-    input {
-      background-color: inherit;
-      border: 0px;
-      border-bottom: 2px solid white;
-      font-size: 24px;
-      color: white;
-      direction: ltr;
-      text-align: center;
+  width: 100vw;
+  height: 100vh;
+  &__box {
+    width: 100%;
+    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;
+        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;
+        font-family: numeralMedium;
+        background-color: #6cbe44;
+        color: white;
+        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;
+        }
+      }
     }
   }
 }
@@ -51,13 +105,13 @@
     width: 100%;
     position: relative;
     bottom: 40px;
-    img{
+    img {
       position: absolute;
       left: 10px;
       top: 6px;
       width: 45px;
     }
-    span{
+    span {
       text-align: right;
       position: absolute;
       left: 65px;
@@ -81,30 +135,30 @@
         outline: 0px;
       }
     }
-    button{
+    button {
       margin-top: 20px;
       width: 100%;
       border: 0px;
       font-family: numeralMedium;
-      background-color: #6CBE44;
+      background-color: #6cbe44;
       color: white;
       border-radius: 7px;
       padding: 8px;
       font-size: calc(100vw / 20);
     }
   }
-  &__footer{
+  &__footer {
     position: fixed;
     bottom: 40px;
-    div{
+    div {
       font-family: numeralMedium;
       font-size: calc(100vw / 28);
       color: #a5a5a5;
       letter-spacing: -1px;
-      button{
+      button {
         background-color: white;
         border: 0px;
-        color: #02733C;
+        color: #02733c;
       }
     }
   }
diff --git a/src/views/Auth/Login/Code/index.js b/src/views/Auth/Login/Code/index.js
index 6e487a4..e204cf2 100644
--- a/src/views/Auth/Login/Code/index.js
+++ b/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,86 +83,126 @@ export default class Code extends Component {
     return (
       <>
         {window.innerWidth > 1000 ? (
-          <div className="auth-code d-flex">
-            <label htmlFor="code1">
-              <input
-                id="code1"
-                name="o1"
-                type="text"
-                inputMode="numeric"
-                maxLength="2"
-                ref={(input) => {
-                  this.inputRef1 = input;
-                }}
-                autoComplete="off"
-                value={this.state.o1}
-                onKeyDown={(e) => this.keyboardEvent(e)}
-                onInput={this.onInput}
-                onChange={(e) => this.changeValue(e)}
-              />
-            </label>
-            <label htmlFor="code2">
-              <input
-                id="o2"
-                name="o2"
-                type="text"
-                inputMode="numeric"
-                maxLength="2"
-                ref={(input) => {
-                  this.inputRef2 = input;
-                }}
-                autoComplete="off"
-                value={this.state.o2}
-                onKeyDown={(e) => this.keyboardEvent(e)}
-                onInput={this.onInput}
-                onChange={(e) => this.changeValue(e)}
-              />
-            </label>
-            <label htmlFor="code3">
-              <input
-                id="code3"
-                name="o3"
-                type="text"
-                inputMode="numeric"
-                maxLength="2"
-                ref={(input) => {
-                  this.inputRef3 = input;
-                }}
-                autoComplete="off"
-                value={this.state.o3}
-                onKeyDown={(e) => this.keyboardEvent(e)}
-                onInput={this.onInput}
-                onChange={(e) => this.changeValue(e)}
-              />
-            </label>
-            <label htmlFor="code4">
-              <input
-                id="code4"
-                name="o4"
-                type="text"
-                inputMode="numeric"
-                maxLength="2"
-                ref={(input) => {
-                  this.inputRef4 = input;
-                }}
-                autoComplete="off"
-                value={this.state.o4}
-                onKeyDown={(e) => this.keyboardEvent(e)}
-                onInput={this.onInput}
-                onChange={(e) => this.changeValue(e)}
-              />
-            </label>
-            {!this.state.resendStatus ? (
-              <Timer seconds={10} parent={this} />
-            ) : (
+          <div className="auth-code d-flex justify-content-center align-items-center">
+            <div className="auth-code__box d-flex">
               <div
-                style={{ color: "#88ff88" }}
-                className="timer d-flex"
-                onClick={() => this.setState({ resendStatus: false })}
+                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"
+                      name="o1"
+                      type="text"
+                      inputMode="numeric"
+                      maxLength="2"
+                      ref={(input) => {
+                        this.inputRef1 = input;
+                      }}
+                      autoComplete="off"
+                      value={this.state.o1}
+                      onKeyDown={(e) => this.keyboardEvent(e)}
+                      onInput={this.onInput}
+                      onChange={(e) => this.changeValue(e)}
+                      style={{ fontSize: fontSize.desktop.input }}
+                    />
+                  </label>
+                  <label htmlFor="code2">
+                    <input
+                      id="o2"
+                      name="o2"
+                      type="text"
+                      inputMode="numeric"
+                      maxLength="2"
+                      ref={(input) => {
+                        this.inputRef2 = input;
+                      }}
+                      autoComplete="off"
+                      value={this.state.o2}
+                      onKeyDown={(e) => this.keyboardEvent(e)}
+                      onInput={this.onInput}
+                      onChange={(e) => this.changeValue(e)}
+                      style={{ fontSize: fontSize.desktop.input }}
+                    />
+                  </label>
+                  <label htmlFor="code3">
+                    <input
+                      id="code3"
+                      name="o3"
+                      type="text"
+                      inputMode="numeric"
+                      maxLength="2"
+                      ref={(input) => {
+                        this.inputRef3 = input;
+                      }}
+                      autoComplete="off"
+                      value={this.state.o3}
+                      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"
+                      inputMode="numeric"
+                      maxLength="2"
+                      ref={(input) => {
+                        this.inputRef4 = input;
+                      }}
+                      autoComplete="off"
+                      value={this.state.o4}
+                      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: "#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>
diff --git a/src/views/Auth/Login/Code/index.scss b/src/views/Auth/Login/Code/index.scss
index 23d6f2a..3c0f243 100644
--- a/src/views/Auth/Login/Code/index.scss
+++ b/src/views/Auth/Login/Code/index.scss
@@ -1,84 +1,110 @@
 .auth-code{
-  width: 100%;
-  height: 100%;
-  justify-content:center;
-  align-items:center;
-  direction: ltr;
-  position: relative;
-  input {
-    width: 50px;
-    background-color: inherit;
-    border : 0px;
-    border-bottom: 2px solid white;
-    margin : 0px 7px;
-    font-size: 24px;
-    color : white;
-    text-align: center;
-    direction : ltr;
-    &:focus{
-      outline: 0px;
+  width: 100vw;
+  height: 100vh;
+  &__box {
+    width: 100%;
+    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;
+      input {
+        max-width: 60px;
+        max-height: 60px;
+        background-color: #f2f2f2;
+        border : 0px;
+        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{
-  width: 100%;
-  height: 100%;
-  justify-content:center;
-  align-items:center;
-  direction: ltr;
-  position: relative;
-  max-width: 360px;
-  margin: 0px auto;
-  img {
-    margin-bottom: 30px;
-    position: relative;
-    bottom: 40px;
-  }
-  h1 {
-    font-family: numeralBold;
-    font-size: calc(100vw / 15);
-    color: #6f7074;
-    position: relative;
-    bottom: 40px;
-  }
-  p {
-    font-family: numeralLight;
-    font-size: calc(100vw / 25);
-    color: #6f7074;
-    letter-spacing: -1px;
-    position: relative;
-    bottom: 40px;
-  }
-  button{
-    margin-top: 20px;
+  
+  .mobile-auth-code{
     width: 100%;
-    max-width: 300px;
-    border: 0px;
-    font-family: numeralMedium;
-    background-color: #6CBE44;
-    color: white;
-    border-radius: 7px;
-    padding: 8px;
-    font-size: calc(100vw / 20);
-  }
-  &__codes{
+    height: 100%;
+    justify-content:center;
+    align-items:center;
     direction: ltr;
-    input {
-      max-width: 60px;
-      max-height: 60px;
-      background-color: #f2f2f2;
-      border : 0px;
-      margin : 0px 10px;
-      color: #6F7074;
-      text-align: center;
-      direction : ltr;
+    position: relative;
+    max-width: 360px;
+    margin: 0px auto;
+    img {
+      margin-bottom: 30px;
+      position: relative;
+      bottom: 40px;
+    }
+    h1 {
+      font-family: numeralBold;
       font-size: calc(100vw / 15);
-      border-radius: 5px;
-      padding: 10px 15px;
-      &:focus{
-        outline: 0px;
+      color: #6f7074;
+      position: relative;
+      bottom: 40px;
+    }
+    p {
+      font-family: numeralLight;
+      font-size: calc(100vw / 25);
+      color: #6f7074;
+      letter-spacing: -1px;
+      position: relative;
+      bottom: 40px;
+    }
+    button{
+      margin-top: 20px;
+      width: 100%;
+      max-width: 300px;
+      border: 0px;
+      font-family: numeralMedium;
+      background-color: #6CBE44;
+      color: white;
+      border-radius: 7px;
+      padding: 8px;
+      font-size: calc(100vw / 20);
+    }
+    &__codes{
+      direction: ltr;
+      input {
+        max-width: 60px;
+        max-height: 60px;
+        background-color: #f2f2f2;
+        border : 0px;
+        margin : 0px 10px;
+        color: #6F7074;
+        text-align: center;
+        direction : ltr;
+        font-size: calc(100vw / 15);
+        border-radius: 5px;
+        padding: 10px 15px;
+        &:focus{
+          outline: 0px;
+        }
       }
     }
   }
+  
 }
\ No newline at end of file
diff --git a/src/views/Auth/Login/Timer/index.js b/src/views/Auth/Login/Timer/index.js
index 2687754..b3befab 100644
--- a/src/views/Auth/Login/Timer/index.js
+++ b/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 (
-      <div className="timer d-flex mt-4">
-        <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>
+      <>
+        {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>{this.state.time.s}</div>:
+            <div>{this.state.time.m + this.state.time.h * 60}</div>
+          </div>
+        ) : null}
+      </>
     );
   }
 }
diff --git a/src/views/Auth/Login/index.js b/src/views/Auth/Login/index.js
index 0c5e20f..d27f4c6 100644
--- a/src/views/Auth/Login/index.js
+++ b/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,
     };
   }
 
diff --git a/src/views/Auth/Profile/Select/index.js b/src/views/Auth/Profile/Select/index.js
index ecf9703..376b94d 100644
--- a/src/views/Auth/Profile/Select/index.js
+++ b/src/views/Auth/Profile/Select/index.js
@@ -43,7 +43,7 @@ export default function CustomizedSelects(props) {
 
   console.log(props);
   return (
-    <div style={{ position: "relative" }}>
+    <div style={{ position: "relative"}}>
       <FormControl variant="outlined" className={classes.marginLeft}>
         <InputLabel id="demo-simple-select-outlined-label">{props.label}</InputLabel>
         <Select
diff --git a/src/views/Auth/Profile/index.js b/src/views/Auth/Profile/index.js
index 2c0ee1e..c4fdaf6 100644
--- a/src/views/Auth/Profile/index.js
+++ b/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,
@@ -18,11 +27,59 @@ export default class Profile extends Component {
     });
   };
   render() {
-    const {user} = this.props;
+    const { user } = this.props;
     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">
@@ -53,11 +110,21 @@ export default class Profile extends Component {
               )}
             </div>
             <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" />
+            <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" />
             <div className="mobile-auth-profile__footer d-flex justify-content-center">
               <button>‌ذخیره</button>
             </div>
diff --git a/src/views/Auth/Profile/index.scss b/src/views/Auth/Profile/index.scss
index de711d2..7606ba6 100644
--- a/src/views/Auth/Profile/index.scss
+++ b/src/views/Auth/Profile/index.scss
@@ -142,4 +142,112 @@
       padding: 12px 0px;
     }
   }
+}
+
+
+.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%;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
index df9bcae..22e7350 100644
--- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
+++ b/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: "",
     },