reworked changeUser

package-lock.json

@@ -3012,11 +3012,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -3029,15 +3031,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3140,7 +3145,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3150,6 +3156,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3162,17 +3169,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -3189,6 +3199,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3261,7 +3272,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3271,6 +3283,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3376,6 +3389,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7076,7 +7090,8 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -7085,7 +7100,8 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7188,7 +7204,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7198,6 +7215,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7223,6 +7241,7 @@
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7239,6 +7258,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7311,7 +7331,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7321,6 +7342,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7426,6 +7448,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",

src/components/Admin/ChangeServices-Doctors.js

@@ -123,7 +123,7 @@ export default class ChangeServicesDoctors extends React.Component {
                 <ConfirmButton
                     yes={this.deleteItem}
                     no={this.changeConfirm}
-                    text={'Are you sure you want to Delete Item?'}
+                    text={'Подтвердить удаление?'}
                 />
                 }
             </div>

src/components/Admin/Orders/ChangeOrder.js

@@ -98,45 +98,33 @@ class ChangeOrder extends React.Component {
                     text={'Уверены что хотите изменить заказ?'}
                 />
                 }
-                <div style={{
-                    position: 'fixed',
-                    right: '0',
-                    left: '0',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'center',
-                    backgroundColor: 'black',
-                    margin: '-3% auto',
-                    width: '80%',
-                    fontSize: '12px',
-                    zIndex: '5',
-                }}>
+                <div className = "change-order-form" >
 
-                    <input readOnly={true} id={this.state.order.orderNumber}
+                    <input  className = "appointment admin-form order-change-input" readOnly={true} id={this.state.order.orderNumber}
                            defaultValue={this.state.order.orderNumber}
                     />
-                    <input readOnly={true} id={this.state.order.spec._id}
+                    <input className = "appointment admin-form" readOnly={true} id={this.state.order.spec._id}
                            defaultValue={this.state.order.spec.name}
                     />
-                    <input readOnly={true} id={this.state.order.doctor._id}
+                    <input  className = "appointment admin-form" readOnly={true} id={this.state.order.doctor._id}
                            defaultValue={this.state.order.doctor.name}
                     />
-                    <input readOnly={true} id={this.state.order.user._id}
+                    <input className = "appointment admin-form" readOnly={true} id={this.state.order.user._id}
                            defaultValue={this.state.order.user.email}
                     />
-                    <input readOnly={true} id={this.state.order.date}
+                    <input className = "appointment admin-form" readOnly={true} id={this.state.order.date}
                            defaultValue={this.state.order.date}
                     />
-                    <input readOnly={true} id={this.state.order.time}
+                    <input  className = "appointment admin-form" readOnly={true} id={this.state.order.time}
                            defaultValue={this.state.order.time}
                     />
-                    <input readOnly={true} id={this.state.order.comment}
+                    <input  className = "appointment admin-form" readOnly={true} id={this.state.order.comment}
                            defaultValue={this.state.order.comment}
                     />
-                    <button onClick={this.changeOrder}>Change Order</button>
+                    <button className = "btn service-btn"  onClick={this.changeOrder}>Изменить заказ</button>
                     {this.state.flag &&
-                    <div>
-                        <input readOnly={true} id={this.state.order.orderNumber}
+                    <div className = "order-change-input">
+                        <input className = "appointment admin-form" readOnly={true} id={this.state.order.orderNumber}
                                defaultValue={this.state.order.orderNumber}
                         />
                         <CustomSelect
@@ -190,7 +178,6 @@ class ChangeOrder extends React.Component {
                         <button className="btn link" onClick={this.changeConfirm}>Подтвердите запись
                         </button>
                         }
-
                     </div>
                     }
                 </div>

src/components/Admin/Orders/Orders.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom'
 import ChangeOrder from "./ChangeOrder";
+
 class Orders extends Component {
     state={
         order:null,
@@ -8,7 +9,6 @@ class Orders extends Component {
 
     componentDidMount() {
         this.props.getUsers();
-
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -42,7 +42,7 @@ class Orders extends Component {
     };
 
     render() {
-        const{findOrderInput,ordersArray,searching,orders,doctors,services,
+        const{ findOrderInput,ordersArray,searching,orders,doctors,services,
             appointment,
             timeArray,
             setAppointmentSpec,
@@ -94,10 +94,7 @@ class Orders extends Component {
                         </div>
                     ))}
                 </div>
-                <div className = "orders-item" style={{
-                    display:'flex',
-                    flexDirection:'column',
-                }}>
+                <div className = "orders-item">
                     {orders.map(el => (
                         <div  className = "order"  key={el._id} >
                             <div className = "order-date">
@@ -116,7 +113,7 @@ class Orders extends Component {
                     ))}
                 </div>
             </div>
-                </>
+        </>
         );
     }
 }

src/components/services/Services.js

@@ -20,7 +20,7 @@ export class Services extends React.Component {
 
                                     {el.services.map(item => (
                                         <div className="servise-name" key={item._id}>
-                                            <Link to={`/services/${item._id}/true`}>{item.name}</Link>
+                                            <p>{item.name}</p>
                                             <p>Стоимость: {item.price} грн.</p>
                                             <div>
                                                 <Link to={`/appointment/${item._id}`}
@@ -50,3 +50,5 @@ const mapDispatchToProps = {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Services);
+
+{/* <Link to={`/services/${item._id}/true`}>{item.name}</Link> */}

src/components/userInfo.js

@@ -1,40 +1,37 @@
-import React from 'react';
-import Input from './Admin/Input'
-
+import React from "react";
+import Input from "./Admin/Input";
 
 class UserInfo extends React.Component {
-
-    changeUser = (e) => {
-        e.preventDefault();
-        const obj = {};
-        this.props.changeUserUserForm.map(el => {
-           return  obj[el.name] =  el.value
-        });
-        // console.log(obj)
-        // console.log(this.props.user._id)
-        this.props.putUser({data:obj,path:this.props.user._id})
-    };
-    render() { 
-        const { changeUserUserForm, changeInputValueUserUserForm} = this.props
-        console.log('user',this.props.user)
-        console.log('form', changeUserUserForm)
-        return ( 
-            <div>
-                <div className="admin-item">
-                    <form className="form-doctors" >
-               {changeUserUserForm.map(el =>
-                <Input
+  changeUser = e => {
+    e.preventDefault();
+    const obj = {};
+    this.props.changeUserUserForm.map(el => {
+      return (obj[el.name] = el.value);
+    });
+    this.props.putUser({ data: obj, path: this.props.user._id });
+  };
+  render() {
+    const { changeUserUserForm, changeInputValueUserUserForm } = this.props;
+    return (
+      <div className="user-info">
+        <div className="admin-item user-item">
+          <form className="form-doctors user-form">
+            {changeUserUserForm.map(el => (
+              <Input
                 key={el.id}
                 el={el}
                 changeInputValues={changeInputValueUserUserForm}
                 className={el.className}
-            /> )}
-                    </form>
-                    <button onClick={this.changeUser} className="btn link admin">Изменить</button>
-                </div>
-            </div>
-        );
-    }
+              />
+            ))}
+          </form>
+          <button onClick={this.changeUser} className="btn link admin user-btn">
+            Изменить
+          </button>
+        </div>
+      </div>
+    );
+  }
 }
- 
-export default UserInfo;
+
+export default UserInfo;

src/components/userOrders.js

@@ -1,18 +1,25 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 class UserOrders extends Component {
-    render() { 
-        const { data } = this.props
-        console.log(data)
-        return ( <div>
-            {data.map(el =>  
-                     <div key={el._id}>
-                        <p>Номер заказа: {el.orderNumber}</p>
-                        <p>Дата заказа: {el.date.split('T')[0]}</p>
-                        <p>Время заказа: {el.time}</p>
-                        </div>)}
-        </div> );
-    }
+  render() {
+    const { data } = this.props;
+    console.log(data);
+    return (
+      <div className="user-orders">
+        {data.map(el => (
+          //   console.log(el)
+          <div key={el._id} className="user-orders__content">
+            <h4 className="user-orders__heading">Процедура: {el.spec.name}</h4>
+            <p className="user-orders__paragraph">
+              Дата записи: {el.date.split("T")[0]}
+            </p>
+            <p className="user-orders__paragraph"> Время записи: {el.time}</p>
+            <p className="user-orders__paragraph">Доктор: {el.doctor.name}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
 }
- 
-export default UserOrders;
+
+export default UserOrders;

src/containers/user.js

@@ -1,72 +1,89 @@
-import React, { Component } from 'react';
-import {connect} from "react-redux";
-import {Link} from "react-router-dom";
-import {Switch, Route} from "react-router-dom";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { Switch, Route } from "react-router-dom";
 
-import UserInfo from '../components/userInfo'
-import UserOrders from '../components/userOrders'
+import UserInfo from "../components/userInfo";
+import UserOrders from "../components/userOrders";
 
-import { getUserOrders,getOrders } from "../actions/orders"
-import { changeInputValueUserUserForm } from '../actions/auth'
-import {putUser} from '../actions/user'
+import { getUserOrders, getOrders } from "../actions/orders";
+import { changeInputValueUserUserForm } from "../actions/auth";
+import { putUser } from "../actions/user";
 
 class UserContainer extends Component {
+  componentDidMount() {
+    this.props.getOrders({
+      doctors: this.props.doctors,
+      services: this.props.services,
+      users: this.props.users
+    });
+  }
+  // componentDidUpdate(){
+  //     if(this.props.orders.length > 0 &&)
+  //     // console.log('did update', this.props.orders)
+  //      this.props.getUserOrders(this.props.currentUser)
+  // }
+  componentDidUpdate(prevProps) {
+    if (this.props.orders.length > 0)
+      if (prevProps.orders !== this.props.orders)
+        this.props.getUserOrders(this.props.currentUser);
+  }
 
-    componentDidMount() {
-        this.props.getOrders({
-            doctors: this.props.doctors,
-            services: this.props.services,
-            users: this.props.users})
-    }
-    // componentDidUpdate(){
-    //     if(this.props.orders.length > 0 &&) 
-    //     // console.log('did update', this.props.orders)
-    //      this.props.getUserOrders(this.props.currentUser)
-    // }
-    componentDidUpdate(prevProps) {
-        if(this.props.orders.length > 0 ) 
-            if(prevProps.orders !==  this.props.orders)
-            this.props.getUserOrders(this.props.currentUser)
-    }
-
-    render() { 
-        console.log(this.props.userOrdersArray)
-        const { currentUser,changeUserUserForm, changeInputValueUserUserForm,putUser,userOrdersArray } = this.props
-        return (
-            <div className="main">
-                <div className="info-wrap">
-                <h2>Добро пожаловать в личный кабинет, {currentUser.firstName}!</h2>
-                 <div className="btn-box">
-                    <Link to='/user/orders' className = "btn link admin" >Мои заказы</Link>
-                    <Link to='/user/info' className = "btn link admin">Редактировать профиль</Link>
-                 </div>
-                 <Switch>
-                    <Route path='/user/orders'  render={() => <UserOrders
-                           data={ userOrdersArray}
-                        />} />
-                    <Route path='/user/info' render={() => <UserInfo
-                            user={currentUser}
-                            changeUserUserForm = {changeUserUserForm}
-                            changeInputValueUserUserForm={changeInputValueUserUserForm}
-                            putUser= {putUser}
-                        />} />
-                 </Switch>
-                </div>
-            </div>
-
-              );
-    }
+  render() {
+    const {
+      currentUser,
+      changeUserUserForm,
+      changeInputValueUserUserForm,
+      putUser,
+      userOrdersArray
+    } = this.props;
+    return (
+      <div className="main">
+        <div className="info-wrap">
+          <h2>Добро пожаловать в личный кабинет, {currentUser.firstName}!</h2>
+          <div className="btn-box user-btn-box">
+            <Link to="/user/orders" className="btn link admin user-link">
+              Мои заказы
+            </Link>
+            <Link to="/user/info" className="btn link admin  user-link">
+              Редактировать профиль
+            </Link>
+          </div>
+          <Switch>
+            <Route
+              path="/user/orders"
+              render={() => <UserOrders data={userOrdersArray} />}
+            />
+            <Route
+              path="/user/info"
+              render={() => (
+                <UserInfo
+                  user={currentUser}
+                  changeUserUserForm={changeUserUserForm}
+                  changeInputValueUserUserForm={changeInputValueUserUserForm}
+                  putUser={putUser}
+                />
+              )}
+            />
+          </Switch>
+        </div>
+      </div>
+    );
+  }
 }
 
 const mapStateToProps = state => {
-    return {
-        currentUser: state.auth.user,
-        changeUserUserForm: state.auth.changeUserForm,
-        orders: state.orders.orders,
-        users:state.user.users,
-        services: state.services.services,
-        doctors:state.app.doctors,
-        userOrdersArray: state.orders.userOrdersArray
-    }
-}
-export default connect(mapStateToProps, { changeInputValueUserUserForm, putUser, getOrders,getUserOrders })(UserContainer);
+  return {
+    currentUser: state.auth.user,
+    changeUserUserForm: state.auth.changeUserForm,
+    orders: state.orders.orders,
+    users: state.user.users,
+    services: state.services.services,
+    doctors: state.app.doctors,
+    userOrdersArray: state.orders.userOrdersArray
+  };
+};
+export default connect(
+  mapStateToProps,
+  { changeInputValueUserUserForm, putUser, getOrders, getUserOrders }
+)(UserContainer);

src/index.js

@@ -1,31 +1,29 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App'
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-import {BrowserRouter} from "react-router-dom";
-import {store} from './store'
-import {Provider} from "react-redux";
-
-
-import "./style/normalize.css"
-import './style/all.scss'
-import "./style/style.css"
-import "./style/select.scss"
-import "./style/calendar.scss"
-import "./style/auth.scss"
-import "./style/modal.scss"
-import "./style/checkBoxWindow.scss"
+import { BrowserRouter } from "react-router-dom";
+import { store } from "./store";
+import { Provider } from "react-redux";
 
+import "./style/normalize.css";
+import "./style/all.scss";
+import "./style/style.css";
+import "./style/select.scss";
+import "./style/calendar.scss";
+import "./style/auth.scss";
+import "./style/modal.scss";
+import "./style/checkBoxWindow.scss";
+import "./style/user.scss";
 
 ReactDOM.render(
-    <Provider store={store}>
-        <BrowserRouter>
-            <App/>
-        </BrowserRouter>
-    </Provider>,
-    document.getElementById('root')
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
+  document.getElementById("root")
 );
 
-
 serviceWorker.unregister();

src/style/all.scss

@@ -143,7 +143,15 @@ aside {
 		text-transform: uppercase;
 		@media (max-width: 768px) {
 			display: none;	
+			// display: flex;
+			// flex-direction: column;
+			// position: absolute;
+			// right: 0%;
+			// top: 100%;
+			// padding: 10px 20px;
+			// background-color: rgba(17,17,17,0.8);
 		}
+
 	}
 	& .item {
 		padding: 0;
@@ -160,6 +168,9 @@ aside {
 			&:hover {
 				color: #4dea94;
 			}
+			&:hover .icon-exit:before  {
+				color: #4dea94;
+			  }
 		}
 		a {
 			text-decoration: none;
@@ -413,6 +424,7 @@ h2 {
 		}
 		@media (max-width: 414px) {
 			width: 100%;
+			margin: 20px 10px;
 		}
 		.photo {
 			border-radius: 5px; 
@@ -481,7 +493,6 @@ h2 {
 		padding-top: 65px;
 	}
 	.item {
-		
 		.photo {
 			position: relative;
 			line-height: 0;
@@ -643,44 +654,6 @@ h2 {
 		@media (max-width: 414px) {
 			max-width: 100%;
 		}
-		.appointment-time {
-			transition: all 0.5s ease;
-			.btn-box {
-				display: flex;
-				flex-direction: row;
-				flex-wrap: wrap;
-				justify-content: flex-start;
-				margin: 55px 0 10px;
-				@media (max-width: 1024px) {
-					margin-top: 10px;
-				}
-			}
-			.radio {
-				display: none;
-			}
-			.radio-btn {
-				flex-basis: 10%;
-			}
-			label {
-				margin: 10px 10px 3px 10px;
-				padding: 3px 10px;
-				display: block;
-				min-width: 75px;	
-				background-color: $hover-color;
-				color: $opacity-color;
-				&:hover {
-					background-color: $main-color;
-					color: $header-color;
-				}
-				@media (max-width: 320px) {
-					margin: 10px 5px 3px 10px;
-				}
-			}
-			.radio-btn input[type="radio"]:checked + label {
-				background-color: $main-color;
-				color: $header-color;
-			}
-		}
 	}
 	.order-information {
 		order: -1;	
@@ -706,6 +679,7 @@ h2 {
 }
 
 
+
 // _____ APPOINTMENT _________
 
 .appointment {
@@ -728,7 +702,44 @@ h2 {
 		max-width: 90%;
 	}
 }
-
+.appointment-time {
+	transition: all 0.5s ease;
+	.btn-box {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		margin: 55px 0 10px;
+		@media (max-width: 1024px) {
+			margin-top: 10px;
+		}
+	}
+	.radio {
+		display: none;
+	}
+	.radio-btn {
+		flex-basis: 10%;
+	}
+	label {
+		margin: 10px 10px 3px 10px;
+		padding: 3px 10px;
+		display: block;
+		min-width: 75px;	
+		background-color: $hover-color;
+		color: $opacity-color;
+		&:hover {
+			background-color: $main-color;
+			color: $header-color;
+		}
+		@media (max-width: 320px) {
+			margin: 10px 5px 3px 10px;
+		}
+	}
+	.radio-btn input[type="radio"]:checked + label {
+		background-color: $main-color;
+		color: $header-color;
+	}
+}
 .comment {
 	resize: none;
 	background-color: $main-color;
@@ -1076,9 +1087,7 @@ h2 {
 		width: 55%;
 		margin: 15px;
 	}
-	.find-order {
-		max-width: 30%;	
-	}
+
 	.order {
 		display: flex;
 		flex-direction: column;
@@ -1137,6 +1146,7 @@ h2 {
 	z-index: 99;
 	h3 {
 		margin: 10px;
+		text-align: center;
 	}
 	.btns{
 		display: flex;
@@ -1148,11 +1158,37 @@ h2 {
 		min-height: 25px;
 		margin: 5px;
 	}
+	.yes:hover {
+		color: $opacity-color;
+		background-color: $hover-color;
+	}
 	.no {
 		background-color: rgb(255, 151, 116);
 	}
 }
 
+// ________change-order-form______________
+.change-order-form {
+	position: absolute;
+	right: 0;
+	left: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: -3px auto;
+	width: 80%;
+	font-size: 1em;
+	z-index: 55;
+	background-color: $opacity-color;
+	border-radius: 3px;
+	.order-change-input {
+		margin-top: 25px;
+	}
+	input {
+		font-size: 1em;
+	}
+}
+
 
 
 	// _______________ACCORDION___________

src/style/checkBoxWindow.scss

@@ -65,8 +65,8 @@ input[type = "checkbox"] {
     position: fixed;
     top: 0;
    left: 0;
-  width: 100%;
+   width: 100%;
    height: 100%;
-   background-color: black;
+   background-color: $opacity-color;
   opacity: 0.5;
   }

src/style/user.scss

@@ -0,0 +1,65 @@
+.user-link {
+  width: 25% !important;
+  @media (max-width: 768px) {
+    width: 80% !important;
+    margin: 10px 5px;
+  }
+}
+.user-btn-box {
+  justify-content: space-evenly;
+}
+.user-info {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 50px;
+  align-content: stretch;
+  align-items: flex-start;
+}
+
+.user-item {
+  width: 60%;
+  @media (max-width: 769px) {
+    width: 100%;
+  }
+}
+.user-form {
+  width: 100%;
+}
+.user-btn {
+  cursor: pointer;
+}
+
+.user-orders {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  &__content {
+    color: #789084;
+    padding: 5px;
+    margin: 10px;
+    align-items: stretch;
+    align-content: stretch;
+    height: 100%;
+    flex-basis: 30%;
+    border: 1px solid;
+    box-shadow: 0 1.5rem 4rem rgba(17, 17, 17, 1.5);
+    border-radius: 10px;
+    background-color: rgba(17, 17, 17, 0.5);
+  }
+
+  &__heading {
+    margin: 15px 0;
+    text-align: center;
+    border-bottom: 1px solid rgba(17, 17, 17, 0.8);
+  }
+  &__paragraph {
+    text-align: center;
+    margin: 5px;
+  }
+  @media (max-width: 769px) {
+    display: block;
+  }
+}

src/utils/formFields.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 import Main from "../components/main/Main";
 import Doctors from "../components/specialists/Doctors";
@@ -10,289 +10,286 @@ import Appointment from "../components/appointment/Appointment";
 import Auth from "../containers/auth";
 import User from "../containers/user";
 
-
-const PAGENOTFOUND = () => 
-	<div className="main">
-		<div className="info-wrap">
-			<div className="page-not-found">
-				<h1>PAGE 404 NOT FOUND</h1>
-				<img src="./images/logo.png" alt=""/>			
-			</div>
-		</div>
-	</div>;
-
-
+const PAGENOTFOUND = () => (
+  <div className="main">
+    <div className="info-wrap">
+      <div className="page-not-found">
+        <h1>PAGE 404 NOT FOUND</h1>
+        <img src="./images/logo.png" alt="" />
+      </div>
+    </div>
+  </div>
+);
 
 export const logInForm = {
-	form: {
-		email: {
-			id: 1,
-			name: "email",
-			type: "email",
-			label: "Email",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		},
-		password: {
-			id: 2,
-			name: "password",
-			type: "password",
-			label: "Пароль",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				},
-				minL: {
-					cb: v => v.trim().length < 6
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		}
-	},
-	validForm: false
+  form: {
+    email: {
+      id: 1,
+      name: "email",
+      type: "email",
+      label: "Email",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    },
+    password: {
+      id: 2,
+      name: "password",
+      type: "password",
+      label: "Пароль",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        },
+        minL: {
+          cb: v => v.trim().length < 6
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    }
+  },
+  validForm: false
 };
 
 export const signUpForm = {
-	form: {
-		email: {
-			id: 1,
-			name: "email",
-			type: "email",
-			label: "Email",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		},
-		firstName: {
-			id: 2,
-			type: "text",
-			name: "firstName",
-			label: "Имя",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				},
-				regExp: {
-					cb: v => !/^\w/.test(v)
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		},
-		lastName: {
-			id: 3,
-			type: "text",
-			name: "lastName",
-			label: "Фамилия",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		},
-		phone: {
-			id: 4,
-			type: "number",
-			name: "phone",
-			label: "Телефон",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		},
-		password: {
-			id: 5,
-			name: "password",
-			type: "password",
-			label: "Пароль",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				},
-				minL: {
-					cb: v => v.trim().length < 6
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		},
-		confirmPassword: {
-			id: 6,
-			name: "confirmPassword",
-			type: "password",
-			label: "Повторите пароль",
-			validation: {
-				requred: {
-					cb: v => v.trim() === ""
-				},
-				minL: {
-					cb: v => v.trim().length < 6
-				},
-				match: {
-					match: "password",
-					cb: (v, m) => v !== m
-				}
-			},
-			fail: false,
-			touch: false,
-			value: ""
-		}
-	},
-	validForm: false
+  form: {
+    email: {
+      id: 1,
+      name: "email",
+      type: "email",
+      label: "Email",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    },
+    firstName: {
+      id: 2,
+      type: "text",
+      name: "firstName",
+      label: "Имя",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        },
+        regExp: {
+          cb: v => !/^\w/.test(v)
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    },
+    lastName: {
+      id: 3,
+      type: "text",
+      name: "lastName",
+      label: "Фамилия",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    },
+    phone: {
+      id: 4,
+      type: "number",
+      name: "phone",
+      label: "Телефон",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    },
+    password: {
+      id: 5,
+      name: "password",
+      type: "password",
+      label: "Пароль",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        },
+        minL: {
+          cb: v => v.trim().length < 6
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    },
+    confirmPassword: {
+      id: 6,
+      name: "confirmPassword",
+      type: "password",
+      label: "Повторите пароль",
+      validation: {
+        requred: {
+          cb: v => v.trim() === ""
+        },
+        minL: {
+          cb: v => v.trim().length < 6
+        },
+        match: {
+          match: "password",
+          cb: (v, m) => v !== m
+        }
+      },
+      fail: false,
+      touch: false,
+      value: ""
+    }
+  },
+  validForm: false
 };
 
-export const postNewDoctorForm =[
-	{
-		id:1,
-		type:'text',
-		value:"",
-		name:'name',
-		placeholder:'Введите ФИО сотрудника',
-		required:true
-	},
-	{
-		id:2,
-		type:'text',
-		value:"",
-		name:'experience',
-		placeholder:'Введите дату начала практики',
-		required:true
-	},
-	{
-		id:3,
-		type:'text',
-		value:"",
-		name:'photo',
-		className: "btn service-btn",
-		placeholder:'Добавьте фотографию',
-		required:true
-	},
-	{
-		id:4,
-		type:'text',
-		value:"",
-		name:'profession',
-		placeholder:'Добавьте специализацию',
-		required:true
-	},
-	{
-		id:5,
-		type:'text',
-		value:"",
-		name:'skillsDescription',
-		placeholder:'Введите описание навыков здесь',
-		required:true
-	}
+export const postNewDoctorForm = [
+  {
+    id: 1,
+    type: "text",
+    value: "",
+    name: "name",
+    placeholder: "Введите ФИО сотрудника",
+    required: true
+  },
+  {
+    id: 2,
+    type: "text",
+    value: "",
+    name: "experience",
+    placeholder: "Введите дату начала практики",
+    required: true
+  },
+  {
+    id: 3,
+    type: "text",
+    value: "",
+    name: "photo",
+    className: "btn service-btn",
+    placeholder: "Добавьте фотографию",
+    required: true
+  },
+  {
+    id: 4,
+    type: "text",
+    value: "",
+    name: "profession",
+    placeholder: "Добавьте специализацию",
+    required: true
+  },
+  {
+    id: 5,
+    type: "text",
+    value: "",
+    name: "skillsDescription",
+    placeholder: "Введите описание навыков здесь",
+    required: true
+  }
 ];
 
-export const postNewServiceForm =[
-	{
-		id:1,
-		type:'text',
-		value:"",
-		name:'name',
-		placeholder:'Введите название сервиса',
-		required:true
-	},
-	{
-		id:2,
-		type:'text',
-		value:"",
-		name:'description',
-		placeholder:'Введите описание сервиса',
-		required:true
-	},
-	{
-		id:3,
-		type:'number',
-		value:"",
-		name:'duration',
-		placeholder:'Введите длительность (часы)',
-		required:true
-	},
-	{
-		id:4,
-		type:'number',
-		value:"",
-		name:'price',
-		placeholder:'Введите стоимость сервиса',
-		required:true
-	}
+export const postNewServiceForm = [
+  {
+    id: 1,
+    type: "text",
+    value: "",
+    name: "name",
+    placeholder: "Введите название сервиса",
+    required: true
+  },
+  {
+    id: 2,
+    type: "text",
+    value: "",
+    name: "description",
+    placeholder: "Введите описание сервиса",
+    required: true
+  },
+  {
+    id: 3,
+    type: "number",
+    value: "",
+    name: "duration",
+    placeholder: "Введите длительность (часы)",
+    required: true
+  },
+  {
+    id: 4,
+    type: "number",
+    value: "",
+    name: "price",
+    placeholder: "Введите стоимость сервиса",
+    required: true
+  }
 ];
 
 export const changeUserForm = [
-	{
-		id:1,
-		type:'email',
-		value:"",
-		name:'email',
-		placeholder:'Введите E-mail',
-		readOnly:true,
-		required:true
-	},
-	{
-		id:2,
-		type:'text',
-		value:"",
-		name:'firstName',
-		placeholder:'Введите Имя',
-		required:true
-	},
-	{
-		id:3,
-		type:'text',
-		value:"",
-		name:'lastName',
-		placeholder:'Введите Фамилию',
-		required:true
-	},
-	{
-		id:4,
-		type:'number',
-		value:"",
-		name:'phone',
-		placeholder:'Введите ваш номер',
-		required:true
-	},
-	{
-		id:5,
-		type:'password',
-		value:"",
-		name:'password',
-		placeholder:'Введите новый пароль',
-		required:true
-	},
-	{
-		id:6,
-		type:'password',
-		value:"",
-		name:'confirmPassword',
-		placeholder:'Повторите пароль',
-		required:true
-	}
-	
+  {
+    id: 1,
+    type: "email",
+    value: "",
+    name: "email",
+    placeholder: "Введите E-mail",
+    readOnly: true,
+    required: true
+  },
+  {
+    id: 2,
+    type: "text",
+    value: "",
+    name: "firstName",
+    placeholder: "Введите Имя",
+    required: true
+  },
+  {
+    id: 3,
+    type: "text",
+    value: "",
+    name: "lastName",
+    placeholder: "Введите Фамилию",
+    required: true
+  },
+  {
+    id: 4,
+    type: "number",
+    value: "",
+    name: "phone",
+    placeholder: "Введите ваш номер",
+    required: true
+  },
+  {
+    id: 5,
+    type: "password",
+    value: "",
+    name: "password",
+    placeholder: "Введите новый пароль",
+    required: true
+  },
+  {
+    id: 6,
+    type: "password",
+    value: "",
+    name: "confirmPassword",
+    placeholder: "Повторите пароль",
+    required: true
+  }
 ];
 
 export const adminChangeUserForm =[
@@ -363,83 +360,83 @@ export const adminChangeUserForm =[
 		className:"radio",
 		defaultChecked:false,
 	},
+
 ];
 
 export const route = [
-	{
-		id: 1,
-		exact: true,
-		path: "/",
-		protected: false,
-		// hasAccess: [],
-		component: Main
-	},
-	{
-		id: 2,
-		exact: true,
-		path: "/doctors",
-		protected: false,
-		component: Doctors
-	},
-	{
-		id: 3,
-		exact: true,
-		path: "/services",
-		protected: false,
-		component: Services
-	},
-	{
-		id: 3,
-		exact: false,
-		path: "/doctors/:doctor/:flag",
-		protected: false,
-		component: MoreInfo
-	},
-	{
-		id: 4,
-		exact: true,
-		path: "/services/:service/:flag",
-		protected: false,
-		component: MoreInfo
-	},
-	{
-		id: 5,
-		exact: true,
-		path: "/reviews",
-		protected: false,
-		component: Reviews
-	},
-	{
-		id: 6,
-		exact: false,
-		path: "/admin",
-		protected: true,
-		component: Admin
-	},
-	{
-		id: 7,
-		exact: true,
-		path: "/appointment/:doctorId",
-		protected: false,
-		component: Appointment
-	},
-	{
-		id: 8,
-		exact: true,
-		path: "/auth",
-		protected: false,
-		component: Auth
-	},
-	{
-		id: 9,
-		exact: false,
-		path: "/user",
-		protected: true,
-		component: User
-	},
-	{
-		id: 10,
-		component: PAGENOTFOUND
-	},
-
+  {
+    id: 1,
+    exact: true,
+    path: "/",
+    protected: false,
+    // hasAccess: [],
+    component: Main
+  },
+  {
+    id: 2,
+    exact: true,
+    path: "/doctors",
+    protected: false,
+    component: Doctors
+  },
+  {
+    id: 3,
+    exact: true,
+    path: "/services",
+    protected: false,
+    component: Services
+  },
+  {
+    id: 3,
+    exact: false,
+    path: "/doctors/:doctor/:flag",
+    protected: false,
+    component: MoreInfo
+  },
+  {
+    id: 4,
+    exact: true,
+    path: "/services/:service/:flag",
+    protected: false,
+    component: MoreInfo
+  },
+  {
+    id: 5,
+    exact: true,
+    path: "/reviews",
+    protected: false,
+    component: Reviews
+  },
+  {
+    id: 6,
+    exact: false,
+    path: "/admin",
+    protected: true,
+    component: Admin
+  },
+  {
+    id: 7,
+    exact: true,
+    path: "/appointment/:doctorId",
+    protected: true,
+    component: Appointment
+  },
+  {
+    id: 8,
+    exact: true,
+    path: "/auth",
+    protected: false,
+    component: Auth
+  },
+  {
+    id: 9,
+    exact: false,
+    path: "/user",
+    protected: true,
+    component: User
+  },
+  {
+    id: 10,
+    component: PAGENOTFOUND
+  }
 ];