some

src/components/Admin/Admin.js

@@ -53,9 +53,9 @@ export class Admin extends React.Component {
             <div className="main">
                 <div className="info-wrap">
                     <div className = " btn-box">
-                        <Link to='/admin/change-shedule' className = "btn link admin">Shedule</Link>
-                        <Link to='/admin/change-doctors' className = "btn link admin">Doctors</Link>
-                        <Link to='/admin/change-services' className = "btn link admin">Services</Link>
+                        <Link to='/admin/change-shedule' className = "btn link admin">Расписание</Link>
+                        <Link to='/admin/change-doctors' className = "btn link admin">Сотрудники</Link>
+                        <Link to='/admin/change-services' className = "btn link admin">Сервисы</Link>
                     </div>
                     <Switch>
                         <Route path='/admin/change-shedule' render={() => <Shedule

src/components/appointment/Appointment.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from "react-redux";
+import moment from "moment";
 // import { CustomSelect } from "./select";
 
 import {
@@ -17,6 +18,9 @@ import {
 import Calendar from "./Calendar";
 
 export class Appoint extends React.Component {
+    state = {
+        pickedDate:null
+    };
 
     componentDidMount() {
         this.props.setAppointmentDoctor(this.props.match.params.doctorId)
@@ -30,6 +34,11 @@ export class Appoint extends React.Component {
         this.props.setAppointmentSpec(e.target.value)
     };
 
+    setShedule = (e) => {
+        this.setState({pickedDate:e.target.id});
+        this.props.setAppointmentShedule(e.target.id)
+    };
+
     setTime = (e) => {
         this.props.setAppointmentTime(e.target.value)
     };
@@ -45,7 +54,7 @@ export class Appoint extends React.Component {
 
     render() {
         const {doctors, appointment, timeArray,services} = this.props.app;
-        const {match, setAppointmentShedule} = this.props;
+        const {match} = this.props;
         const doctor = doctors.find(el => el._id === match.params.doctorId);
         let spec;
         if (appointment.spec){
@@ -66,13 +75,7 @@ export class Appoint extends React.Component {
 
                                 {/* <CustomSelect label="Выбор услуги" /> */}
 
-                                {appointment.spec &&
-                                <div>
-                                    <p>{spec.name}</p>
-                                    <p>Длительность: {spec.duration} ч.</p>
-                                    <p>Цена от {spec.price} грн.</p>
-                                </div>
-                                }
+                               
 
                                 <select className = "appointment "  onChange={this.setSpec} defaultValue='Выбор услуги'>
                                     <option disabled >Выбор услуги</option>
@@ -84,41 +87,58 @@ export class Appoint extends React.Component {
                                 </select>
 
                                 {appointment.spec &&
-                                <Calendar
-                                    doctor={doctor}
-                                    action={setAppointmentShedule}
-                                />
+                                    <Calendar
+                                        doctor={doctor}
+                                        action={this.setShedule}
+                                    />
                                 }
 
-                                {appointment.shedule &&
 
-                             
+
+                                {appointment.shedule &&
                                    <div className = "appointment-time" >
                                         <div className="btn-box"  >
-                                        {   timeArray.map ( (el, index)=> (
-
-                                                <label  key={Object.keys(el)} >
-                                                    <input
-                                                        type ="radio"
-                                                        name = "choise-time"
-                                                        id = {index} onChange={this.setTime}
-                                                        value =  {Object.keys(el)}
-                                                    />
-                                                   {Object.keys(el)}
-                                                </label>
-                                            ))
+                                            {
+                                                timeArray.map ( (el, index) => (
+                                                    <label  key={Object.keys(el)} >
+                                                        <input
+                                                            type ="radio"
+                                                            name = "choise-time"
+                                                            id = {index} onChange={this.setTime}
+                                                            value =  {Object.keys(el)}
+                                                        />
+                                                        <span> {Object.keys(el)}</span>
+                                                       
+                                                    </label>
+                                                ))
+                                            }
+                                        </div>
+                                   </div>
+                                }
+                                 {appointment.spec &&
+                                    <div>
+                                        <p>{spec.name}</p>
+                                        <p>Длительность: {spec.duration} ч.</p>
+                                        <p>Цена от {spec.price} грн.</p>
+                                        {this.state.pickedDate &&
+                                            <p>{moment(this.state.pickedDate).format('DD-MMMM-YYYY')}</p>
+                                        }
+                                        {appointment.time &&
+                                            <p>{appointment.time}</p>
                                         }
-                                            </div>
                                     </div>
                                 }
 
                                 {appointment.time &&
                                 <div style={{display:"flex",flexDirection:"column"}}>
-                                    <input className = "appointment comment" type='text' placeholder='Добавить комментарий' onChange={this.setComment}/>
+                                    <input
+                                        className = "appointment comment"
+                                        type='text'
+                                        placeholder='Добавить комментарий'
+                                        onChange={this.setComment}/>
                                     <button className = "btn link" onClick={this.postOrder}>Подтвердите запись</button>
                                 </div>
                                 }
-
                             </div>
                         </div>
                     </div>

src/components/appointment/Calendar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from "moment";
 import {connect} from "react-redux";
+import 'moment/locale/ru';
 
 import {
     createCalendarMonthArray,
@@ -12,11 +13,7 @@ import {
 export class Calendar extends React.Component {
 
     componentDidMount() {
-        moment.locale('ru', {
-            week : {
-                dow:1
-            }
-        });
+        moment.locale('ru');
         this.props.createCalendarMonthArray(this.props.doctor)
     }
     componentDidUpdate(prevProps) {
@@ -38,7 +35,7 @@ export class Calendar extends React.Component {
     };
 
     action = (e) => {
-        this.props.action(e.target.id)
+        this.props.action(e)
     };
 
     render() {
@@ -56,7 +53,7 @@ export class Calendar extends React.Component {
                 </div>
                 <div className = "weekdays">
                     {moment.weekdaysShort(true).map(el => (
-                        <p key={el}>{el}</p>
+                        <p style={{ width:"40px",height:"40px"}} key={el}>{el}</p>
                     ))}
                 </div>
                 <div  className = "days">

src/components/appointment/select.js

@@ -3,7 +3,7 @@ import React from "react";
 
 
 // _____
-// const {doctors, appointment, timeArray,services} = this.props.app;
+// const {doctors, appointment, servicesArray} = this.props.app;
 
 // ________
 const mock = [

src/components/modal.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+
+
+export default class Modal extends Component {
+	modal = React.createRef();
+
+	componentWillMount() {
+		document.addEventListener("mousedown", this.handleClickOutside);
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener("mousedown", this.handleClickOutside);
+	}
+
+	handleClickOutside = event => {
+		if (!this.props.open) return;
+
+		if (this.modal.current && !this.modal.current.contains(event.target)) {
+			this.props.close();
+		}
+	};
+
+	render() {
+		const { children, open } = this.props;
+		return open
+			? ReactDOM.createPortal(
+					<div className="modal-wrapper">
+						<div className="modal" ref={this.modal}>
+							{children}
+						</div>
+					</div>,
+					document.body
+			  )
+			: null;
+	}
+}

src/index.js

@@ -14,6 +14,7 @@ import "./style/style.css"
 import "./style/select.scss"
 import "./style/calendar.scss"
 import "./style/auth.scss"
+import "./style/modal.scss"
 
 ReactDOM.render(
     <Provider store={store}>

src/reducers/calendar.js

@@ -16,7 +16,7 @@ export const calendarReducer = (state = defaultState, action) => {
                     day:"",
                     disabled:false,
                     backgroundColor:"",
-                    border:""
+                    border:"", 
                 };
                 let el = state.current.date(x).format('YYYY-MM-DD');
                 day.day = el;
@@ -31,13 +31,13 @@ export const calendarReducer = (state = defaultState, action) => {
             }
 
             const prevMonth = moment(state.current).subtract(1,'months');
-            const startDay = state.current.startOf('month').day() === 0 ? 7 : state.current.startOf('month').day();
-            for (let x=1; x < startDay ;x++){
+            const startDay = state.current.startOf ('month').day ( ) === 0 ? 7 : state.current.startOf('month').day( );
+            for (let x=1; x < startDay; x++){
                 let day = {
-                    day:"",
-                    disabled:false,
-                    backgroundColor:"",
-                    border:""
+                    day: "",
+                    disabled: false,
+                    backgroundColor: "",
+                    border: "",
                 };
                 let el = prevMonth.endOf('month').subtract(x-1,'days').format('YYYY-MM-DD');
                 day.day = el;

src/reducers/reducers.js

@@ -115,7 +115,7 @@ export const appReducer = (state = defaultState,action) => {
             let doctor = state.doctors.find(el => el._id === state.appointment.doctor);
             let shedule = doctor.shedule.find(el => el.data === action.payload);
             let duration = state.services.find(el => el._id === state.appointment.spec).duration;
-            console.log(shedule,action.payload)
+            console.log(shedule,  action.payload)
             for (let index in shedule) {
                 let check = true;
                 for (let x=0;x < duration; x++){

src/style/all.scss

@@ -23,7 +23,9 @@ body {
 	background-image: url(../assets/images/fon1.jpg);
 	background-size: cover;
 	min-height: 100vh;
-	
+	@media (max-width: 1024px) {
+		background-position-x: -450px;
+	}
 	@media (max-width: 768px) {
 		background-position-x: -270px;
 	}
@@ -44,7 +46,62 @@ body {
 	margin: 0 auto;
 }
 
-// header +  navigation
+// __________SIDEBAR __________
+aside {
+	position: fixed;
+	top: 50%;
+	right: 2%;
+	z-index: 999999;
+	.sidebar-ul {
+		list-style: none;
+		.sidebar-item {
+			margin-top: 15px;
+		}
+	}
+	.nav-link {
+		text-decoration: none;
+		margin-top: 15px;
+		padding: 15px 0;
+	}
+	@media (max-width: 1024px) {
+		top: 70%;	
+	}
+	@media (max-width: 375px) {
+		top: 75%;	
+	}
+	@media (max-width: 320px) {
+		top: 25%;	
+	}
+}
+
+// _______loadrer______________
+.loader-box {
+	border: none;
+	min-width: 100vw;
+	min-height: 100vh;
+	background-color: $opacity-color;
+	.loader {
+		margin: 0 auto;
+		position: fixed;
+		top: 30%;
+		left: 40%;
+		@media (max-width: 1024px) {
+			left: 35%;
+		}
+		@media (max-width: 768px) {
+			left: 30%;
+		}
+		@media (max-width: 768px) {
+			left: 25%;
+			width: 50%;
+		}
+	}
+
+}
+
+
+
+// _______header +  navigation______________
 .header,
 .footer {
 	width: 100%;
@@ -120,7 +177,7 @@ body {
 	}	
 }
 	
-// banner + title
+// ________banner + title_________
 .title-box {
 	color: $header-color;
 	margin: 0px 40px;
@@ -173,7 +230,7 @@ body {
 	}
 }
 
-// buttons
+// ________buttons _________
 .btn {
 	display: block;
 	min-height: 50px;
@@ -183,7 +240,7 @@ body {
 	text-transform: uppercase;
 	text-decoration: none;
 	letter-spacing: 0.05em;
-	font-size: 15px;
+	font-size: 0.8em;
 	font-weight: bold;
 	line-height: 35px;
 	padding-top: 7px;
@@ -229,8 +286,9 @@ body {
 	border: none;	
 	height: 30px;
 }
+// ______________________________________//
 
-//  section About Us
+//  ___________section About Us______________
 .aboutsection, 
 .team-container,
 .doctors-wrap,
@@ -258,11 +316,14 @@ h2 {
 	box-shadow: none;
 	color: $main-color;
 	border-bottom: 1px solid $opacity-color;
+	@media (max-width: 1024px) {
+		padding: 2px 15px;
+	}
 }
 // ____
 
 
-// second banner 
+// ____________second banner____________ 
 .case {
 	position: relative;
 	.banner {
@@ -297,21 +358,21 @@ h2 {
 	}
 }
 
-// shortly about doctors 
+// ______shortly about doctors ________
 .team-container,
 .doctors-wrap {
 	color: $header-color;
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: space-around;
+	justify-content: space-evenly;
 	align-items: stretch;
 	padding: 15px 5px 50px;
 	@media (max-width: 768px) {
 		justify-content: center;
 	}
 	.item {
-		width: 25%;
-		margin: 10px; 
+		width: 20%;
+		margin: 10px 30px; 
 		text-align: center;
 		display: flex;
 		flex-direction: column;
@@ -328,10 +389,14 @@ h2 {
 		}
 		h3 {
 			margin: 10px;
-			// font-size: 18px;
+			font-size: 1em;
 		}
 		p {
 			margin: 5px;
+			font-size: 0.9em;
+		} 
+		.link	{
+			font-size: 0.6em;
 		}
 		// .link-box {
 		// 	margin-top: 20px;
@@ -377,7 +442,7 @@ h2 {
 
 
 
-//  Footer
+//  ______Footer______
 .footer {
 	font-family: 'Montserrat', sans-serif;
 	position: static;
@@ -436,32 +501,6 @@ h2 {
 
 
 
-// loadrer
-.loader-box {
-	border: none;
-	min-width: 100vw;
-	min-height: 100vh;
-	background-color: $opacity-color;
-	.loader {
-		margin: 0 auto;
-		position: fixed;
-		top: 30%;
-		left: 40%;
-		@media (max-width: 1024px) {
-			left: 35%;
-		}
-		@media (max-width: 768px) {
-			left: 30%;
-		}
-		@media (max-width: 768px) {
-			left: 25%;
-			width: 50%;
-		}
-	}
-
-}
-
-
 
 
 // _____DOCTORS_____ 
@@ -471,8 +510,9 @@ h2 {
 		padding-top: 65px;
 	}
 	.item h3 {
+		font-size: 1em;
 		@media (max-width: 375px) {
-			font-size: 1em;
+			font-size: 0.8em;
 		}
 	}
 }
@@ -509,6 +549,7 @@ h2 {
 		.highlights {
 			font-weight: 700;
 			color: $hover-color;
+			letter-spacing: 0.1em;
 		}
 		p {
 			margin: 10px 0;
@@ -539,6 +580,9 @@ h2 {
  	&:focus {
 		outline: none;
 	}
+	option {
+		max-width: 90%;
+	}
 }
 .appointment-time {
 	.btn-box {
@@ -554,16 +598,19 @@ h2 {
 			display: flex;
 			margin: 10px 10px 3px 0;
 			text-align: center;
-			padding: 5px 10px;
-			min-width: 80px;
+			padding: 5px 15px;
+			min-width: 100px;
 			background-color: $hover-color;
 			color: $opacity-color;
 			&:hover {
 				background-color: $main-color;
 				color: $header-color;
 			}
+			span {
+				margin: 0px auto;
+			}
 		}
-		label input:checked ~ label {
+		label input[type = "radio"]:checked {
 			background-color: $main-color;
 			color: $header-color;
 		  }
@@ -574,33 +621,6 @@ h2 {
 
 
 
-// __________SIDEBAR __________
-aside {
-	position: fixed;
-	top: 50%;
-	right: 2%;
-	z-index: 999999;
-	.sidebar-ul {
-		list-style: none;
-		.sidebar-item {
-			margin-top: 15px;
-		}
-	}
-	.nav-link {
-		text-decoration: none;
-		margin-top: 15px;
-		padding: 15px 0;
-	}
-	@media (max-width: 1024px) {
-		top: 70%;	
-	}
-	@media (max-width: 375px) {
-		top: 75%;	
-	}
-	@media (max-width: 320px) {
-		top: 25%;	
-	}
-}
 
 
 

src/style/calendar.scss

@@ -34,7 +34,8 @@ $opacity-color: rgba(17,17,17,0.8);
         width: 30px;
     }
     button {
-        // color: $main-title-color;
+        width:50px;
+        height: 50px;
         &:focus {
             outline: none;
         }

src/style/modal.scss

@@ -0,0 +1,28 @@
+$header-color: #d4d5d7;
+$main-title-color: #3b3b3b;
+$main-color:   #789084;
+$hover-color: #b1e8ca;
+$opacity-color: rgba(17,17,17,0.8);
+
+
+.modal {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10;
+	padding: 30px;
+	border: 1px solid #eee;
+	background-color: $hover-color;
+	border-radius: 3px;
+}
+
+.modal-wrapper {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 8;
+	background-color: $opacity-color;
+}