Merge branch 'dev' of http://gitlab.a-level.com.ua/Entony/FEA_12_CLINIC into dev

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

@@ -1,22 +1,19 @@
 import React from 'react';
 import moment from "moment";
 import {connect} from "react-redux";
+import 'moment/locale/ru';
 
 import {
     createCalendarMonthArray,
     changeCalendarMonth,
     resetCurrent
 
-} from "../../actions/calendar";
+} from "../actions/calendar";
 
 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/Appointment.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {connect} from "react-redux";
-// import { CustomSelect } from "./select";
+import moment from "moment";
+import { CustomSelect } from "./select";
 
 import {
     setAppointmentSpec,
@@ -14,9 +15,12 @@ import {
 } from "../../actions/actions";
 
 
-import Calendar from "./Calendar";
+import Calendar from "../Calendar";
 
 export class Appoint extends React.Component {
+    state = {
+        pickedDate:null
+    };
 
     componentDidMount() {
         this.props.setAppointmentDoctor(this.props.match.params.doctorId)
@@ -27,7 +31,12 @@ export class Appoint extends React.Component {
     }
 
     setSpec = (e) => {
-        this.props.setAppointmentSpec(e.target.value)
+        this.props.setAppointmentSpec(e)
+    };
+
+    setShedule = (e) => {
+        this.setState({pickedDate:e.target.id});
+        this.props.setAppointmentShedule(e.target.id)
     };
 
     setTime = (e) => {
@@ -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){
@@ -64,61 +73,65 @@ 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} />
+
+                               
 
-                                {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>
-                                    {
-                                        doctor.speciality.map(el=> (
-                                            <option key={el._id}>{el.name}</option>
-                                        ))
-                                    }
-                                </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>
@@ -146,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, timeArray,services} = 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/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/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/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.9em;
 	font-weight: bold;
 	line-height: 35px;
 	padding-top: 7px;
@@ -214,9 +271,11 @@ body {
 }
 
 .more {
-	background-color: $opacity-color;
+	background-color: $main-color;
+	color: $opacity-color;
 	&:hover {
-		background-color: $main-color;
+	color: $main-color;
+	background-color: $opacity-color;
 	}
 }
 
@@ -229,8 +288,9 @@ body {
 	border: none;	
 	height: 30px;
 }
+// ______________________________________//
 
-//  section About Us
+//  ___________section About Us______________
 .aboutsection, 
 .team-container,
 .doctors-wrap,
@@ -258,11 +318,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 +360,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 40px; 
 		text-align: center;
 		display: flex;
 		flex-direction: column;
@@ -319,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%;
@@ -328,10 +391,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;
@@ -349,7 +416,7 @@ h2 {
 
 .team-container {
 	.item {
-		max-height: 365px;
+		max-height: 100%;
 		position: relative;
 		.desc {
 			position: absolute;
@@ -357,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;
@@ -375,9 +445,18 @@ h2 {
 	}
 }
 
-
-
-//  Footer
+// .doctors-wrap {
+// 	.item {
+// 		.photo {
+// 			height: 30vh;
+// 		}
+// 		.desc {
+// 			background-color: $opacity-color;
+// 		}
+// 	}
+// }
+
+//  ______Footer______
 .footer {
 	font-family: 'Montserrat', sans-serif;
 	position: static;
@@ -436,32 +515,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_____ 
@@ -470,11 +523,31 @@ h2 {
 	@media (max-width: 768px) {
 		padding-top: 65px;
 	}
-	.item h3 {
-		@media (max-width: 375px) {
+	.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;
@@ -509,6 +582,7 @@ h2 {
 		.highlights {
 			font-weight: 700;
 			color: $hover-color;
+			letter-spacing: 0.1em;
 		}
 		p {
 			margin: 10px 0;
@@ -539,6 +613,9 @@ h2 {
  	&:focus {
 		outline: none;
 	}
+	option {
+		max-width: 90%;
+	}
 }
 .appointment-time {
 	.btn-box {
@@ -554,16 +631,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 +654,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/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/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;
+}

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";