reza added profile

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

@@ -82,11 +82,14 @@ export default class Cellphone extends Component {
                     .replace(/[^\d]/, ""))
                 }
               />
-                <button type="submit">ادامه</button>
+              <button type="submit">ادامه</button>
             </form>
             <div className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center">
-                <div> حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button></div>
+              <div>
-                <div>شرایط استفاده و حریم خصوصی</div>
+                {" "}
+                حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button>
+              </div>
+              <div>شرایط استفاده و حریم خصوصی</div>
             </div>
           </div>
         ) : null}

src/views/Auth/Profile/Input/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& .MuiTextField-root': {
+     
+      width: '100%',
+      position : 'relative',
+      marginRight : 10,
+      
+    },
+  },
+}));
+
+export default function FormPropsTextFields(props) {
+  const classes = useStyles();
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+      <div>
+        <TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" />
+      </div>
+    </form>
+  );
+}

src/views/Auth/Profile/Select/index.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+import Select from '@material-ui/core/Select';
+import InputBase from "@material-ui/core/InputBase";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
+import InputLabel from '@material-ui/core/InputLabel';
+
+const BootstrapInput = withStyles((theme) => ({
+  root: {
+    "label + &": {
+      marginTop: theme.spacing(3),
+    },
+  },
+  input: {
+    borderRadius: 4,
+    position: "relative",
+    // backgroundColor: theme.palette.background.paper,
+    border: "1px solid #a5a5a5",
+    fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
+    color: "#a5a5a5",
+    // maxWidth : 70,
+    minWidth: '100%',
+    padding: "0px",
+    transition: theme.transitions.create(["border-color", "box-shadow"]),
+    // Use the system font instead of the default Roboto font.
+    fontFamily: "numeralLight",
+    "&:focus": {
+      borderRadius: 4,
+    },
+  },
+}))(InputBase);
+
+const useStyles = makeStyles((theme) => ({
+  marginLeft: {
+    // margin: theme.spacing(1),
+    marginLeft: 8,
+  },
+}));
+
+export default function CustomizedSelects(props) {
+  const classes = useStyles();
+
+  console.log(props);
+  return (
+    <div style={{ position: "relative" }}>
+      <FormControl variant="outlined" className={classes.marginLeft}>
+        <InputLabel id="demo-simple-select-outlined-label">{props.label}</InputLabel>
+        <Select
+          labelId="demo-simple-select-outlined-label"
+          id="demo-simple-select-outlined"
+          value={props.parent.state[props.name]}
+          onChange={(e) =>
+            props.parent.setState({ [props.name]: e.target.value })
+          }          label="Age"
+        >
+          {props.options.map((item,i) => (
+            <option key={i} value={item}>
+              {item}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <KeyboardArrowDownIcon
+        style={{
+          position: "absolute",
+          left: 5,
+          top: 25,
+          fontSize: 30,
+          color: "#a5a5a5",
+        }}
+      />
+    </div>
+  );
+}

src/views/Auth/Profile/TextArea/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& .MuiTextField-root': {
+      margin: theme.spacing(0),
+      width: '100%',
+    },
+  },
+}));
+
+export default function MultilineTextFields(props) {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('Controlled');
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+        <TextField
+          id="outlined-multiline-static"
+          label={props.label}
+          multiline
+          rows={4}
+          onChange={(e) => props.parent.setState({[props.name] : e.target.value})}
+          name={props.name}
+          defaultValue=""
+          variant="outlined"
+        />
+    </form>
+  );
+}

src/views/Auth/Profile/index.js

@@ -1,26 +1,77 @@
 import React, { Component } from "react";
+import Select from "./Select/index";
+import Input from "./Input/index";
+import TextArea from "./TextArea/index";
 
 import logo from "../../../assets/icons/logo.png";
+import pic from "../../../assets/images/pic.png";
+import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
 
-import './index.scss';
+import "./index.scss";
 export default class Profile extends Component {
+  state = {
+    file: null,
+  };
+  onChange = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
+  };
   render() {
+    const {user} = this.props;
     return (
       <>
-        {
+        {window.innerWidth > 1000 ? (
-          window.innerWidth > 1000 ?
+          <div className="auth-profile d-flex"></div>
-          <div className="auth-profile d-flex">
+        ) : null}
-        
+        {window.innerWidth < 1000 ? (
-          </div> : null
-        }
-        {
-          window.innerWidth < 1000 ?
           <div className="mobile-auth-profile d-flex flex-column">
-            <img src={logo} alt='دانوین' />
+            <img src={logo} alt="دانوین" />
-          </div> : null
+            <h1>حساب کاربری</h1>
-        }
+            <p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p>
+            <div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3">
+              {this.state.file === null ? (
+                <>
+                  <input
+                    type="file"
+                    name="file"
+                    onChange={(e) => this.onChange(e)}
+                  />
+                  <AddAPhotoIcon
+                    style={{ width: 40, height: 40, color: "white" }}
+                  />
+                </>
+              ) : (
+                <>
+                  <input
+                    type="file"
+                    name="file"
+                    onChange={(e) => this.onChange(e)}
+                  />
+                  <img src={this.props.user.icon} alt={"کاربر"} />
+                </>
+              )}
+            </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" />
+            <div className="mobile-auth-profile__footer d-flex justify-content-center">
+              <button>‌ذخیره</button>
+            </div>
+          </div>
+        ) : null}
       </>
-      
     );
   }
 }
+
+Profile.defaultProps = {
+  user: {
+    name: "باربی",
+    icon: pic,
+    description: "",
+  },
+};

src/views/Auth/Profile/index.scss

@@ -4,4 +4,142 @@
   overflow-y: scroll;
   position: relative;
   padding: 15px;
+  img{
+    width: calc(100% / 2.5);
+  }
+  h1{
+    margin-top: 15px;
+    font-family: numeralBold;
+    font-size: calc(100vw / 15);
+    color: #6F7074;
+    letter-spacing: -1px;
+  }
+  p{
+    font-family: numeralLight;
+    font-size: calc(100vw / 22);
+    color: #6f7074;
+    letter-spacing: -1px;
+    text-align: justify;
+  }
+  &__upload {
+    margin: 10px auto;
+    min-width: 120px;
+    min-height: 120px;
+    border-radius: 50%;
+    background-color: rgb(209, 209, 209);
+    position: relative;
+    input {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      opacity: 0;
+    }
+    img{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+  }
+  // .MuiFormControl-root {
+  //   min-width: 310px;
+  //   width: 80%;
+  //   max-width: 400px;
+  //   margin-top: 20px;
+  //   border: 1px solid #eee;
+  //   border-radius: 5px;
+  //   padding : 10px 8px;
+  //   .MuiInputBase-input{
+  //     color: #00cba2 !important;
+  //     font-size: 18px;
+  //     &::placeholder{
+  //       font-size: 14px;
+  //       color: black;
+  //       letter-spacing: -1px;
+  //     }
+  //   }
+  // }
+
+  .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 / 22) !important;
+    border-radius: 10px !important;
+  }
+
+  .MuiOutlinedInput-input {
+    padding: 20px 14px !important;
+    font-size: calc(100vw / 25) !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 / 25) !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: #128c7e;
+      border-radius: 7px;
+      width: 90%;
+      font-size: 18px;
+      font-weight: 600;
+      color: white;
+      padding: 12px 0px;
+    }
+  }
 }

src/views/Auth/index.js

@@ -34,6 +34,5 @@ export default class Auth extends Component {
 }
 
 Auth.defaultProps = {
-
+  page: 'login'
-  
 }