some

src/components/Admin/Shedule.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from "moment";
 
-import Calendar from "../appointment/Calendar";
+import Calendar from "../Calendar";
 
 export default class Shedule extends React.Component {
     state ={

src/components/appointment/Calendar.js

@@ -8,7 +8,7 @@ import {
     changeCalendarMonth,
     resetCurrent
 
-} from "../../actions/calendar";
+} from "../actions/calendar";
 
 export class Calendar extends React.Component {
 

src/components/appointment/Appointment.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {connect} from "react-redux";
 import moment from "moment";
-// import { CustomSelect } from "./select";
+import { CustomSelect } from "./select";
 
 import {
     setAppointmentSpec,
@@ -15,7 +15,7 @@ import {
 } from "../../actions/actions";
 
 
-import Calendar from "./Calendar";
+import Calendar from "../Calendar";
 
 export class Appoint extends React.Component {
     state = {
@@ -31,7 +31,7 @@ export class Appoint extends React.Component {
     }
 
     setSpec = (e) => {
-        this.props.setAppointmentSpec(e.target.value)
+        this.props.setAppointmentSpec(e)
     };
 
     setShedule = (e) => {
@@ -73,18 +73,11 @@ export class Appoint extends React.Component {
                                 <h3>{doctor.name}</h3>
                                 <p className = "highlights">{doctor.profession}</p>
 
-                                {/* <CustomSelect label="Выбор услуги" /> */}
+                                <CustomSelect label="Выбор услуги" options = { doctor.speciality} clickOptionEvent = {this.setSpec} />
 
                                
 
-                                <select className = "appointment "  onChange={this.setSpec} defaultValue='Выбор услуги'>
-                                    <option disabled >Выбор услуги</option>
-                                    {
-                                        doctor.speciality.map(el=> (
-                                            <option key={el._id}>{el.name}</option>
-                                        ))
-                                    }
-                                </select>
+
 
                                 {appointment.spec &&
                                     <Calendar
@@ -166,4 +159,15 @@ const mapDispatchToProps = {
     postOrders,
 };
 
-export default connect (mapStateToProps,mapDispatchToProps)(Appoint)
+export default connect (mapStateToProps,mapDispatchToProps)(Appoint)
+
+
+
+// <select className = "appointment "  onChange={this.setSpec} defaultValue='Выбор услуги'>
+//      <option disabled >Выбор услуги</option>
+//         {
+//             doctor.speciality.map(el=> (
+//                 <option key={el._id}>{el.name}</option>
+//              ))
+//         }
+// </select>

src/components/appointment/select.js

@@ -2,20 +2,11 @@ import React from "react";
 
 
 
-// _____
-// const {doctors, appointment, servicesArray} = this.props.app;
 
-// ________
-const mock = [
-    { id: 1, text: "Закрытие рецессии десны" }, 
-    { id: 2, text: "Удаление кисты" }, 
-    { id: 3, text: "THREE" }
-];
 
 
+export const CustomSelect = ({ label, options , emptyLine = false, searchInput = true,  reset, clickOptionEvent = () =>{} }) => {
 
-
-export const CustomSelect = ({ label, options = mock, emptyLine = false, searchInput = true, reset }) => {
 	const [copyOption, setCopyOption] = React.useState([]);
 	const [show, toggleShow] = React.useState(false);
 	const [value, toggleValue] = React.useState("");
@@ -52,6 +43,7 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 	};
 
 	const toggleEvent = text => {
+		if (typeof clickOptionEvent === "function" ) clickOptionEvent(text);
 		toggleValue(text);
 		toggleInputValue(text);
 		toggleShow(false);
@@ -72,7 +64,7 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 			setCopyOption(options);
 			toggleInputValue(value);
 		} else {
-			const filtered = copyOption.filter(el => el.text.toLowerCase().indexOf(value.toLowerCase()) >= 0);
+			const filtered = copyOption.filter(el => el.name.toLowerCase().indexOf(value.toLowerCase()) >= 0);
 
 			setCopyOption(filtered);
 			toggleInputValue(value);
@@ -80,7 +72,7 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 	};
 
 	return (
-		<div className="select">
+		<div className="select ">
 			{label && (
 				<label htmlFor="select" className="select__lable">
 					{label}
@@ -96,7 +88,7 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 					id="select"
 					className="select__input icon-angle-down"
 				/>
-				<span class="icon-angle-down"></span>
+				<span className="icon-angle-down"></span>
 			</div>
 			{show && (
 				<ul className="select__list " ref={list}>
@@ -106,8 +98,8 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 						</li>
 					)}
 					{copyOption.map(el => (
-						<li className="select__item" key={el.id} onClick={toggleEvent.bind(null, el.text)}>
-							{el.text}
+						<li className="select__item" key={el._id} onClick={toggleEvent.bind(null, el.name)}>
+							{el.name}
 						</li>
 					))}
 				</ul>

src/components/signIn.js

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { useForm } from "./hooks/useForm";
-import Input from "./input";
+import { useForm } from "../hooks/useForm";
+import Input from "../input";
 
-import Button from "./button";
-import { logInForm } from "../utils/formFields";
+import Button from "../buttons/button";
+import { logInForm } from "../../utils/formFields";
 
 export const SignInForm = ({ error, submitHandler }) => {
 	const [form, { onChangeHandler, returnAllValues, focusEvent, blurEvent }] = useForm(logInForm);

src/components/signUp.js

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { signUpForm } from "../utils/formFields";
-import { useForm } from "./hooks/useForm";
+import { signUpForm } from "../../utils/formFields";
+import { useForm } from "../hooks/useForm";
 
-import Input from "./input";
-import Button from "./button";
+import Input from "../input";
+import Button from "../buttons/button";
 
 export const SignUpForm = ({ submitHandler, error, successRegister }) => {
 	const [form, { onChangeHandler, returnAllValues, focusEvent, blurEvent }] = useForm(signUpForm);

src/components/specialists/Doctors.js

@@ -12,16 +12,21 @@ export class Doctors extends React.Component {
                         {
                             data.map(el => (
                                 <div className="item"  key = {el._id} >
-                                    <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
-                                    <h3>{el.name}</h3>
+                                    <div className="photo">
+                                        <img src= {el.photo} alt= {el.name}/>
+                                        <div className="hover-block">
+                                            <Link to = {`/doctors/${el._id}`} className = "btn link more">Подробнее ...</Link>
+                                        </div>
+                                    </div>
+                                    
                                     <div className="desc">
-                                        <p className="experience">Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - el.experience.split('T')[0].split('-')[0]} лет</p>
+                                        <h3>{el.name}</h3>
                                         <p className="rank">{el.profession}</p>
+                                        <div className="link-box">
+                                            <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
+                                        </div>     
                                     </div>
-                                    <div className="link-box">
-                                        <Link to = {`/doctors/${el._id}`} className = "btn link more">Подробнее ...</Link>
-                                        <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
-                                    </div>
+
                                 </div>
                             ))
                         }

src/containers/auth.js

@@ -4,8 +4,8 @@ import { Redirect } from 'react-router-dom';
 
 import { auth, register } from '../actions/auth';
 
-import {SignUpForm} from '../components/signUp';
-import {SignInForm} from '../components/signIn';
+import {SignUpForm} from '../components/auth/signUp';
+import {SignInForm} from '../components/auth/signIn';
 import Loader from '../components/loader';
 
 class Auth extends Component {

src/style/all.scss

@@ -240,7 +240,7 @@ aside {
 	text-transform: uppercase;
 	text-decoration: none;
 	letter-spacing: 0.05em;
-	font-size: 0.8em;
+	font-size: 0.9em;
 	font-weight: bold;
 	line-height: 35px;
 	padding-top: 7px;
@@ -271,9 +271,11 @@ aside {
 }
 
 .more {
-	background-color: $opacity-color;
+	background-color: $main-color;
+	color: $opacity-color;
 	&:hover {
-		background-color: $main-color;
+	color: $main-color;
+	background-color: $opacity-color;
 	}
 }
 
@@ -372,7 +374,7 @@ h2 {
 	}
 	.item {
 		width: 20%;
-		margin: 10px 30px; 
+		margin: 10px 40px; 
 		text-align: center;
 		display: flex;
 		flex-direction: column;
@@ -380,7 +382,7 @@ h2 {
 		border-radius: 5px;
 		box-shadow: 0px 2px 8px 1px $main-color;
 		.photo {
-			border-radius: 5px;
+			border-radius: 5px; 
 			img {
 				border-radius: 5px;
 				width: 100%;
@@ -414,7 +416,7 @@ h2 {
 
 .team-container {
 	.item {
-		max-height: 365px;
+		max-height: 100%;
 		position: relative;
 		.desc {
 			position: absolute;
@@ -422,10 +424,13 @@ h2 {
 			left: 0;
 			display: none;
 			background-color: $opacity-color;
+			border-radius: 5px;
+			line-height: 1.2em;
 			height: 100%;
 		}
 		.photo {
 			overflow: hidden;
+			line-height: 0;
 			&:hover .desc {
 				display: flex;
 				flex-direction: column;
@@ -440,7 +445,16 @@ h2 {
 	}
 }
 
-
+// .doctors-wrap {
+// 	.item {
+// 		.photo {
+// 			height: 30vh;
+// 		}
+// 		.desc {
+// 			background-color: $opacity-color;
+// 		}
+// 	}
+// }
 
 //  ______Footer______
 .footer {
@@ -509,12 +523,31 @@ h2 {
 	@media (max-width: 768px) {
 		padding-top: 65px;
 	}
-	.item h3 {
-		font-size: 1em;
-		@media (max-width: 375px) {
-			font-size: 0.8em;
+	.item {
+		
+		.photo {
+			position: relative;
+			.hover-block {
+				display: none;
+				height: 100%;
+				width: 100%;
+				background-color: $opacity-color;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+			&:hover .hover-block {
+				display: block;
+			}
 		}
-	}
+
+		h3 {
+			font-size: 1em;
+			@media (max-width: 375px) {
+				font-size: 0.8em;
+			}
+		}
+	}	
 }
 .info-wrap {
 	padding: 110px 10px 25px;

src/style/auth.scss

@@ -9,7 +9,6 @@ $opacity-color: rgba(17,17,17,0.8);
 .auth-wrapper {
 	background-color: $opacity-color;
 	min-height: 100vh;
-	min-width: 100vw;
 	@media (max-width: 1024px) {
 		min-height: 84vh;
 	}

src/style/select.scss

@@ -9,13 +9,14 @@ $opacity-color: rgba(17,17,17,0.8);
 	display: flex;
 	flex-direction: column;
 	position: relative;
+	font-family: 'Lato', sans-serif;
 
 	&__list {
 		list-style: none;
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		background-color: #fff;
+		background-color: $opacity-color;
 
 		position: absolute;
 		left: 0;
@@ -24,8 +25,10 @@ $opacity-color: rgba(17,17,17,0.8);
 	}
 
 	&__value-box {
-        position: relative;
-		border: 1px solid #eee;
+        // position: relative;
+		border: 1px solid $main-color;
+		background-color: $header-color;
+		color: $opacity-color;
 		border-radius: 3px;
 		padding: 0.5rem;
 	}
@@ -35,14 +38,18 @@ $opacity-color: rgba(17,17,17,0.8);
 		padding: 0.5rem;
 		cursor: pointer;
 		&:hover {
-			background-color: #eee;
+			background-color: $main-color;
+			color:$opacity-color;
+			font-weight: 700;
 		}
 	}
 
 	&__input {
+		position: relative;
         border: none;
         background: none;
-
+		color: $opacity-color;
+		font-weight: 700;
 		width: 100%;
 		&:focus {
 			outline: none;

src/style/style.css

@@ -61,10 +61,10 @@
 }
 .icon-angle-down:before {
   content: "\f107";
-  color:  var(--hover-color);
+  color:  var(--opacity-color);
   position: absolute;
   right: 15px;
-  top: 22%;
+  top: 55%;
 }
 .icon-lens:before {
   content: "\e901";