changed admin-part orders, users

src/components/Admin/Orders.js

@@ -26,51 +26,48 @@ class Orders extends Component {
         const{findOrderInput,ordersArray,searching,orders} = this.props;
         console.log(this.props);
         return (
-            <div style={{
-                display:'flex',
-            }}>
-                <div style={{
-                    width:'50%'
-                }}>
-                    <input type="text" onKeyDown={this.enterPressed} onChange={this.changeInputFindOrder}/>
+            <div className = "orders-container">
+                <div className = "orders-item find-order">
+                    <input className = " appointment admin-form" type="text" onKeyDown={this.enterPressed} onChange={this.changeInputFindOrder}/>
                     {findOrderInput &&
-                    <button id='enter' onClick={this.findOrders}>Find User</button>
+                    <button className = "btn service-btn"  id='enter' onClick={this.findOrders}>Найти</button>
                     }
-                    {searching && ordersArray.length === 0 && <p>Order not found</p>}
+                    {searching && ordersArray.length === 0 && <p>Заказ не найден</p>}
                     {ordersArray.map(el => (
-                        <div key={el._id} style={{
-                            display:'flex',
-
-                        }}>
-                            <Link to={`/order/${el._id}`}>{el.orderNumber}</Link>
-                            <div>
+                        <div className = "order"  key={el._id}>
+                            <div className = "order-date">
+                                <Link to={`/order/${el._id}`} className = "order-info">{el.orderNumber}</Link>
                                 <p>{el.date.split('T')[0]}</p>
                                 <p>{el.time}</p>
                             </div>
-                            <Link to={`/user/${el.user._id}`}>{el.user.email}</Link>
-                            <Link to={`/doctors/${el.doctor._id}`}>{el.doctor.name}</Link>
-                            <Link to={`/services/${el.spec._id}`}>{el.spec.name}</Link>
+                            <div className="name-info">
+                                <Link to={`/user/${el.user._id}`} className = "order-info">{`${el.user.firstName} ${el.user.lastName}`}</Link>
+                                <div className="info-serv-doc">
+                                    <Link to={`/doctors/${el.doctor._id}`} className = "order-info">{el.doctor.name}</Link>
+                                    <Link to={`/services/${el.spec._id}`} className = "order-info">{el.spec.name}</Link>
+                                </div>                                
+                            </div>
                         </div>
                     ))}
                 </div>
-                <div style={{
+                <div className = "orders-item" style={{
                     display:'flex',
                     flexDirection:'column',
-                    width:'50%'
                 }}>
                     {orders.map(el => (
-                        <div key={el._id} style={{
-                            display:'flex',
-
-                        }}>
-                            <Link to={`/order/${el._id}`}>{el.orderNumber}</Link>
-                            <div>
+                        <div  className = "order"  key={el._id} >
+                            <div className = "order-date">
+                                <Link to={`/order/${el._id}`} className = "order-info">{el.orderNumber}</Link>
                                 <p>{el.date.split('T')[0]}</p>
                                 <p>{el.time}</p>
                             </div>
-                            <Link to={`/user/${el.user._id}`}>{el.user.email}</Link>
-                            <Link to={`/doctors/${el.doctor._id}`}>{el.doctor.name}</Link>
-                            <Link to={`/services/${el.spec._id}`}>{el.spec.name}</Link>
+                            <div className="name-info">
+                                <Link to={`/user/${el.user._id}`} className = "order-info">{`${el.user.firstName} ${el.user.lastName}`}</Link>
+                                <div className="info-serv-doc">
+                                    <Link to={`/doctors/${el.doctor._id}`} className = "order-info">{el.doctor.name}</Link>
+                                    <Link to={`/services/${el.spec._id}`} className = "order-info">{el.spec.name}</Link>
+                                </div>
+                            </div>
                         </div>
                     ))}
                 </div>

src/style/all.scss

@@ -1024,7 +1024,7 @@ h2 {
 		flex-basis: 50%;
 	}
 	.change-user-form {
-		 margin-top: 30px;
+		//  margin-top: 30px;
 		 form {
 			 display: flex;
 			flex-direction: column;
@@ -1068,6 +1068,59 @@ h2 {
 	}
 }
 
+// __________orders-container_____________
+.orders-container {
+	display: flex;
+	justify-content: space-between;
+	.orders-item {
+		width: 55%;
+		margin: 15px;
+	}
+	.find-order {
+		max-width: 30%;	
+	}
+	.order {
+		display: flex;
+		flex-direction: column;
+		padding: 10px 25px;
+		border: 1px solid $main-color;
+		border-radius:  3px;
+		margin: 10px 0;
+	}
+	.order-info {
+		text-decoration: none;
+		color: $header-color;
+		padding: 5px;
+	}
+	.order-date {
+		display: flex;
+		justify-content: space-between;
+		margin: 10px 0;
+		color: $hover-color;
+		a {
+			color: $hover-color;
+		}
+		p {
+			margin: 0;
+		}
+	}
+	.name-info {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.info-serv-doc {
+			display: flex;
+			margin-left: 10px;
+			flex-basis: 75%;
+			justify-content: space-between;
+			a {
+				display: flex;
+				margin: 0 10px;
+			}
+		}
+	}
+
+}
 
 
 	// _______________ACCORDION___________

src/utils/formFields.js

@@ -8,7 +8,7 @@ import Reviews from "../components/Reviews";
 import Admin from "../components/Admin/Admin";
 import Appointment from "../components/appointment/Appointment";
 import Auth from "../containers/auth";
-import User from "../components/user";
+import User from "../containers/user";
 
 
 const PAGENOTFOUND = () =>