change order form

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/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/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

@@ -19,6 +19,9 @@
 
 .user-item {
   width: 60%;
+  @media (max-width: 769px) {
+    width: 100%;
+  }
 }
 .user-form {
   width: 100%;
@@ -48,7 +51,6 @@
   }
 
   &__heading {
-    // margin: 2px;
     margin: 15px 0;
     text-align: center;
     border-bottom: 1px solid rgba(17, 17, 17, 0.8);