some change

db.json

@@ -2,7 +2,7 @@
 {
     "doctors": [
             {
-                "name": "Грегори Хаус",
+                "name": "Григорий Андреевич Катамаранов",
                 "photo": "./images/doctors/gregoryhaus.jpg",
                 "experience": "1991-03-22",
                 "rank": "Стоматолог-хирург",
@@ -65,7 +65,7 @@
                 "id": 1
             },
             {
-                "description": "Лиза Кадди",
+                "description": "Елизавета Борисовна Толдонова",
                 "photo": "./images/doctors/lisa.jpg",
                 "experience": "2004-05-13",
                 "rank": "Стоматолог-ортодонт",
@@ -128,7 +128,7 @@
                 "id": 2
             },
             {
-                "description": "Эллисон Кэмерон",
+                "description": "Анастасия Петровна Захарова",
                 "photo": "./images/doctors/alison.jpg",
                 "experience": "2011-08-02",
                 "rank": "Стоматолог-эндодонтист ",
@@ -191,7 +191,7 @@
                 "id": 3
             },
             {
-                "description": "Лоренс Катнер",
+                "description": "Виктор Николаевич Белый",
                 "photo": "./images/doctors/lorenskatner.jpg",
                 "experience": "2015-10-01",
                 "rank": "Стоматолог-терапевт",
@@ -254,7 +254,7 @@
                 "id": 4
             },
             {
-                "description": "Эрик Форман",
+                "description": "Иван Петрович Ефимов",
                 "photo": "./images/doctors/ericforman.jpg",
                 "experience": "2009-02-10",
                 "rank": "Стоматолог-протезист",
@@ -317,7 +317,7 @@
                 "id": 5
             },
             {
-                "description": "Крис Тауб",
+                "description": "Мирослав Артурович  Левандовский",
                 "photo":  "./images/doctors/kris_taub.jpg",
                 "experience": "1999-03-29",
                 "rank": "Детский стоматолог",

src/App.js

@@ -14,12 +14,12 @@ import Main from "./components/main/Main";
 import Doctors from "./components/specialists/Doctors";
 import Services from "./components/Services"
 import MoreInfo from "./components/specialists/MoreInfo"
-import Appointment from "./components/Appointment";
+import Appointment from "./components/appointment/Appointment";
 import Reviews from "./components/Reviews"
 import Admin from './components/Admin/Admin'
 import Auth from './containers/auth'
 import Footer from "./components/Footer";
-import Calendar from "./components/Calendar"
+// import Calendar from "./components/Calendar"
 
 export class App extends React.Component {
 
@@ -27,7 +27,7 @@ export class App extends React.Component {
         this.props.getDoctors();
         this.props.getServices();
         
-        // console.log (this.props.app)
+        console.log (this.props.app)
         
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",

src/components/Appointment.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from "react-redux";
+import { CustomSelect } from "./select";
 
 import {
     setAppointmentSpec,
@@ -10,9 +11,9 @@ import {
     setAppointmentComment,
     postOrders
 
-} from "../actions/actions";
+} from "../../actions/actions";
 
-import Calendar from "../components/Calendar"
+import Calendar from "../../components/Calendar";
 
 export class Appoint extends React.Component {
 
@@ -45,6 +46,8 @@ export class Appoint extends React.Component {
                                 <h3>{doctor.name}</h3>
                                 <p className = "highlights">{doctor.profession}</p>
 
+                                <CustomSelect label="Выбор услуги" />
+
                                 {appointment.spec &&
                                 <div>
                                     <p>{spec.name}</p>

src/components/appointment/select.js

@@ -0,0 +1,112 @@
+import React from "react";
+
+// _____
+// const {doctors, appointment, timeArray,services} = this.props.app;
+
+// ________
+const mock = [
+    { id: 1, text: "ONE" }, 
+    { id: 2, text: "TWO" }, 
+    { id: 3, text: "THREE" }
+];
+
+
+
+
+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("");
+	const [inputValue, toggleInputValue] = React.useState("");
+	const list = React.createRef();
+
+	React.useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutSide);
+		return () => document.removeEventListener("mousedown", handleClickOutSide);
+	});
+
+	React.useEffect(() => {
+		if (reset) {
+			toggleValue("");
+			toggleInputValue("");
+			setCopyOption(options);
+
+			toggleShow(false);
+		}
+	}, [options, reset]);
+
+	React.useEffect(() => {
+		setCopyOption(options);
+	}, [options]);
+
+	const handleClickOutSide = e => {
+		if (!show) return;
+
+		if (list.current && !list.current.contains(e.target)) {
+			toggleShow(false);
+		}
+	};
+
+	const toggleEvent = text => {
+		toggleValue(text);
+		toggleInputValue(text);
+		toggleShow(false);
+	};
+
+	const clickOnEptyLine = () => {
+		toggleValue("");
+		toggleInputValue("");
+
+		toggleShow(false);
+	};
+
+	const chahgeValueEvent = e => {
+		const { value } = e.target;
+		toggleInputValue(e.target.value);
+
+		if (!value) {
+			setCopyOption(options);
+			toggleInputValue(value);
+		} else {
+			const filtered = copyOption.filter(el => el.text.toLowerCase().indexOf(value.toLowerCase()) >= 0);
+
+			setCopyOption(filtered);
+			toggleInputValue(value);
+		}
+	};
+
+	return (
+		<div className="select">
+			{label && (
+				<label htmlFor="select" className="select__lable">
+					{label}
+				</label>
+			)}
+			<div className="select__value-box" onClick={() => toggleShow(true)}>
+				{searchInput ? null : <span>{value} &nbsp;</span>}
+				<input
+					value={inputValue}
+					autoComplete="off"
+					type={searchInput ? "text" : "hidden"}
+					onChange={chahgeValueEvent}
+					id="select"
+					className="select__input"
+				/>
+			</div>
+			{show && (
+				<ul className="select__list" ref={list}>
+					{emptyLine && (
+						<li className="select__item" onClick={clickOnEptyLine}>
+							&nbsp;
+						</li>
+					)}
+					{copyOption.map(el => (
+						<li className="select__item" key={el.id} onClick={toggleEvent.bind(null, el.text)}>
+							{el.text}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};

src/components/main/Main.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import {Link} from 'react-router-dom'
 
-import Button from "../buttons/button";
+// import Button from "../buttons/button";
 import About from "./aboutUs";
 import Team from "./team";
 // import MyMap from "./myMap";
@@ -12,16 +13,14 @@ import {connect} from 'react-redux'
 export class Main extends React.Component {
  render() {
 
-        return (
+    return (
             <main className = "main">
                <div className="container">
                     <div className="wrapper">
                                 <div className="title-box">
                                     <img className = "logotype" src="./images/logo.png" alt=""/>
                                     <h1>Стоматология для всей семьи</h1>
-                                    <Button className = "btn" text = "Записаться на приём" 
-                                        onClick = { ( ) => {  } } 
-                                    />
+                                    <Link to={ `/appointment` } className = "btn ">Записаться на приём</Link>
                                 </div>
                     </div>
                 </div>
@@ -33,7 +32,7 @@ export class Main extends React.Component {
                 <div className=" case">
                         <img className = "banner" src="./images/medical.jpeg" alt="medical"/>
                         <div className="button-box">
-                            <Button className = "btn" text = "Записаться на приём" onClick = { ( ) => { } }/>
+                        <Link to={`/appointment`} className = "btn">Записаться на приём</Link>
                         </div>     
                  </div>
 

src/components/main/team.js

@@ -28,7 +28,7 @@ export default class Team extends React.Component {
                                 <Link to ={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
                             </div> */}
                         </div>
-                    )}
+                    ) }
                  </div>
             </>
         ) 

src/index.js

@@ -11,6 +11,7 @@ import {Provider} from "react-redux";
 import "./style/normalize.css"
 import './style/all.scss'
 import "./style/style.css"
+import "./style/select.scss"
 import "./style/auth.scss"
 
 ReactDOM.render(

src/style/all.scss

@@ -86,6 +86,7 @@ body {
 		}
 		a {
 			text-decoration: none;
+			font-family: 'Montserrat', sans-serif;
 			color: $header-color;
 			padding: 20px 3px;
 			&:hover {
@@ -145,6 +146,7 @@ body {
 
 // button
 .btn {
+	display: block;
 	min-height: 50px;
 	width: 70%;
 	margin: 20px auto;
@@ -155,6 +157,7 @@ body {
 	font-size: 15px;
 	font-weight: bold;
 	line-height: 35px;
+	padding-top: 7px;
 	border: none;
 	border-radius: 3px;
 	background-color:  $hover-color;
@@ -242,10 +245,13 @@ h2 {
 		width: 100%;
 		background-color: rgba(255,255,255,0.4);
 		margin: 20px 0;
-		text-align: right;
+		text-align: center;
 		.btn {
 			width: 35%;
-			margin: 20px 10px;
+			float: right;
+			margin: 20px;
+			display: block;
+			padding-top: 7px;
 			@media (max-width: 768px) {
 				width: 100%;
 				margin: 20px 0px;
@@ -270,11 +276,12 @@ h2 {
 		justify-content: center;
 	}
 	.item {
-		width: 24%;
+		width: 25%;
 		margin: 10px; 
 		text-align: center;
 		display: flex;
 		flex-direction: column;
+		justify-content: space-between;
 		border-radius: 5px;
 		box-shadow: 0px 2px 8px 1px $main-color;
 		.photo {
@@ -332,6 +339,7 @@ h2 {
 
 //  Footer
 .footer {
+	font-family: 'Montserrat', sans-serif;
 	position: static;
 	background-image: url(../assets/images/bg2.jpg);
 	background-size: cover;
@@ -343,6 +351,11 @@ h2 {
 	@media (max-width: 768px) {
 		justify-content: center;
 	}
+	h4 {
+		font-family: 'Montserrat', sans-serif;
+		font-weight: 700;
+		font-size: 1.3em;
+	}
 	.logo-box {
 		margin-right: 0px;
 		padding-top: 15px;
@@ -363,6 +376,7 @@ h2 {
 		padding: 20px 15px;
 		min-width: 30%;
 		text-align: center;
+		font-size: 1em;
 		@media (max-width: 768px) {
 			width: 100%;
 		}
@@ -405,7 +419,7 @@ h2 {
 	flex-wrap: wrap;
 	color: $header-color;
 	h3 {
-		margin-top: 0;
+		margin: 0;
 		font-size: 2em;
 		line-height: 2em;
 		text-align:  center;

src/style/select.scss

@@ -0,0 +1,6 @@
+$header-color: #d4d5d7;
+$main-title-color: #3b3b3b;
+$main-color:   #789084;
+$hover-color: #b1e8ca;
+$opacity-color: rgba(17,17,17,0.8);
+