add scroll on mainPage select calendar

package-lock.json

@@ -10817,6 +10817,14 @@
         "workbox-webpack-plugin": "4.2.0"
       }
     },
+    "react-scrollchor": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-scrollchor/-/react-scrollchor-6.0.0.tgz",
+      "integrity": "sha512-Ryc3SoxG/urLrqQ4rFIsj1nWfW9pPGZK30CSlJ670zJWpPFQtVfYOmiZmQUwY96P8L+LcCVmV4q1ZdBlZsuW/Q==",
+      "requires": {
+        "requestanimationframe-timer": "1.x.x"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11128,6 +11136,14 @@
         "tough-cookie": "^2.3.3"
       }
     },
+    "requestanimationframe-timer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/requestanimationframe-timer/-/requestanimationframe-timer-1.0.4.tgz",
+      "integrity": "sha512-5ehtMkIS7RLI/UxjgAEZg6zGLoRdSSzfwjwowpBRImAr8Rbs2pdcS/4tmJ7CAtvYjtO/H+ui96AMkyefzUqUlQ==",
+      "requires": {
+        "raf": "^3.4.0"
+      }
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
+    "react-scrollchor": "^6.0.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"
   },

src/App.js

@@ -59,7 +59,7 @@ export class App extends React.Component {
                         <Route exact path="/appointment/:doctorId" component={Appointment}/>
                         <Route exact path="/auth" component={Auth} />
                     </Switch>
-                <Footer/>
+                <Footer />
              </Loader>
         );
     }

src/components/appointment/Appointment.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {connect} from "react-redux";
-import { CustomSelect } from "./select";
+// import { CustomSelect } from "./select";
 
 import {
     setAppointmentSpec,
@@ -13,7 +13,7 @@ import {
 
 } from "../../actions/actions";
 
-import Calendar from "../../components/Calendar";
+import Calendar from "./Calendar";
 
 export class Appoint extends React.Component {
 
@@ -46,18 +46,17 @@ export class Appoint extends React.Component {
                                 <h3>{doctor.name}</h3>
                                 <p className = "highlights">{doctor.profession}</p>
 
-                                <CustomSelect label="Выбор услуги" />
+                                {/* <CustomSelect label="Выбор услуги" /> */}
 
                                 {appointment.spec &&
                                 <div>
                                     <p>{spec.name}</p>
                                     <p>Длительность: {spec.duration} ч.</p>
-                                    {/* <p>{spec.description}</p> */}
                                     <p>Цена от {spec.price} грн.</p>
                                 </div>
                                 }
 
-                                <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
+                                <select className = "appointment"  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
                                     <option disabled >Выбор услуги</option>
                                     {
                                         doctor.speciality.map(el=> (
@@ -73,7 +72,7 @@ export class Appoint extends React.Component {
                                 {appointment.shedule &&
                                 <div>
                                     <div>
-                                        <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
+                                        <select className = "appointment" onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
                                             <option disabled >Выбор даты</option>
                                             {
                                                 timeArray.map(el=> (
@@ -87,8 +86,8 @@ export class Appoint extends React.Component {
 
                                 {appointment.time &&
                                 <div style={{display:"flex",flexDirection:"column"}}>
-                                    <input type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
-                                    <button onClick={() => postOrders(appointment)}>Подтвердите запись</button>
+                                    <input className = "appointment comment" type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
+                                    <button className = "btn link" onClick={() => postOrders(appointment)}>Подтвердите запись</button>
                                 </div>
                                 }
 

src/components/Calendar.js

@@ -27,18 +27,18 @@ export default class Calendar extends Component {
             daysArray.unshift(prevMonth.endOf('month').subtract(x-1,'days').format('YYYY-MM-DD'))
         }
         return (
-            <div style={{display:'flex',flexDirection:'column',margin:"0px 20px"}}>
-                <div style={{display:'flex',margin:'20px'}}>
-                    <button onClick={() => this.setState({current:current.subtract(1,"month")})}>{'<'}</button>
-                    <h4 style={{margin:'0 20px'}}>{current.format('MMMM-YYYY')}</h4>
-                    <button onClick={() => this.setState({current:current.add(1,"month")})}>{'>'}</button>
+            <div className = "calendar-container">
+                <div className = "calendar-title-box" >
+                    <button className= "btn angle" onClick={() => this.setState({current:current.subtract(1,"month")})}><span class="icon-angle-left"></span></button>
+                    <h4>{current.format('MMMM-YYYY')}</h4>
+                    <button  className= "btn angle"  onClick={() => this.setState({current:current.add(1,"month")})}><span class="icon-angle-right"></span></button>
                 </div>
-                <div style={{display:'flex',}}>
+                <div className = "weekdays">
                     {moment.weekdaysShort(true).map(el => (
-                            <p key={el} style={{margin:'0 6px'}}>{el}</p>
+                            <p key={el} >{el}</p>
                     ))}
                 </div>
-                <div  style={{display:'flex',flexWrap:'wrap',maxWidth:'350px',margin:'5px'}}>
+                <div  className = "days">
 
                     {daysArray.map(el => (
                         <button
@@ -54,8 +54,8 @@ export default class Calendar extends Component {
                             style={{
                                 height:'50px',
                                 width:'50px',
-                                backgroundColor:moment(el).month() === current.month() ? doctor.shedule.find(item => item.data === el) ? "lightgreen" : "coral" : "lightgrey",
-                                border:moment().format('YYYY-MM-DD') ===  moment(el).format('YYYY-MM-DD') ? "3px solid black" : null
+                                backgroundColor:moment(el).month() === current.month() ? doctor.shedule.find(item => item.data === el) ? "#b1e8ca" : "#ff9774" : "lightgrey",
+                                border:moment().format('YYYY-MM-DD') ===  moment(el).format('YYYY-MM-DD') ? "2px solid rgba(17,17,17,0.8)" : null
                             }}
                             onClick={(e) => setAppointmentShedule(e.target.id)}
                         >

src/components/appointment/select.js

@@ -1,12 +1,14 @@
 import React from "react";
 
+
+
 // _____
 // const {doctors, appointment, timeArray,services} = this.props.app;
 
 // ________
 const mock = [
-    { id: 1, text: "ONE" }, 
-    { id: 2, text: "TWO" }, 
+    { id: 1, text: "Закрытие рецессии десны" }, 
+    { id: 2, text: "Удаление кисты" }, 
     { id: 3, text: "THREE" }
 ];
 
@@ -20,6 +22,8 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 	const [inputValue, toggleInputValue] = React.useState("");
 	const list = React.createRef();
 
+
+
 	React.useEffect(() => {
 		document.addEventListener("mousedown", handleClickOutSide);
 		return () => document.removeEventListener("mousedown", handleClickOutSide);
@@ -82,7 +86,7 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 					{label}
 				</label>
 			)}
-			<div className="select__value-box" onClick={() => toggleShow(true)}>
+			<div className="select__value-box " onClick={() => toggleShow(true)}>
 				{searchInput ? null : <span>{value} &nbsp;</span>}
 				<input
 					value={inputValue}
@@ -90,11 +94,12 @@ export const CustomSelect = ({ label, options = mock, emptyLine = false, searchI
 					type={searchInput ? "text" : "hidden"}
 					onChange={chahgeValueEvent}
 					id="select"
-					className="select__input"
+					className="select__input icon-angle-down"
 				/>
+				<span class="icon-angle-down"></span>
 			</div>
 			{show && (
-				<ul className="select__list" ref={list}>
+				<ul className="select__list " ref={list}>
 					{emptyLine && (
 						<li className="select__item" onClick={clickOnEptyLine}>
 							&nbsp;

src/components/main/Main.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Link} from 'react-router-dom'
+import {Link} from 'react-router-dom';
+import Scrollchor from 'react-scrollchor';
 
 // import Button from "../buttons/button";
 import About from "./aboutUs";
@@ -15,6 +16,16 @@ export class Main extends React.Component {
 
     return (
             <main className = "main">
+
+                <aside>
+                    <ul className="sidebar-ul">
+                        <li className="sidebar-item"><Scrollchor to="#" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
+                        <li className="sidebar-item"><Scrollchor to="#team" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
+                        <li className="sidebar-item"><Scrollchor to="#banner" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
+                        <li className="sidebar-item"><Scrollchor to="#about" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
+                    </ul>
+                </aside>
+
                <div className="container">
                     <div className="wrapper">
                                 <div className="title-box">
@@ -25,18 +36,18 @@ export class Main extends React.Component {
                     </div>
                 </div>
 
-                    <div className="wrapper">
+                    <div className="wrapper" id = "team">
                         <Team doctorsArr = {this.props.app.doctors}/>
                     </div>
 
-                <div className=" case">
+                <div className=" case" id = "banner">
                         <img className = "banner" src="./images/medical.jpeg" alt="medical"/>
                         <div className="button-box">
                         <Link to={`/appointment`} className = "btn">Записаться на приём</Link>
                         </div>     
                  </div>
 
-                 <div className="wrapper">
+                 <div className="wrapper" id = "about">
                     <About/>
                  </div>
 

src/index.js

@@ -12,6 +12,7 @@ import "./style/normalize.css"
 import './style/all.scss'
 import "./style/style.css"
 import "./style/select.scss"
+import "./style/calendar.scss"
 import "./style/auth.scss"
 
 ReactDOM.render(

src/style/all.scss

@@ -450,6 +450,45 @@ h2 {
 }
 
 
+// _____t APPOINTMENT _________
+
+.appointment {
+	width: 100%;
+	display: flex;
+	border: 1px solid $hover-color;
+	border-radius: 3px;
+	padding: 0.5rem;
+	margin: 15px 0;
+	&:focus {
+		outline: none;
+	}
+}
+// .comment {
+// 	margin: 15px 0;
+// }
+
+
+
+
+// __________SIDEBAR __________
+aside {
+	position: fixed;
+	top: 50%;
+	right: 3%;
+	z-index: 999999;
+	.sidebar-ul {
+		list-style: none;
+		.sidebar-item {
+			margin-top: 15px;
+		}
+		
+	}
+	.nav-link {
+		text-decoration: none;
+		margin-top: 15px;
+		padding: 15px 0;
+	}
+}
 
 
 

src/style/calendar.scss

@@ -0,0 +1,42 @@
+$header-color: #d4d5d7;
+$main-title-color: #3b3b3b;
+$main-color:   #789084;
+$hover-color: #b1e8ca;
+$opacity-color: rgba(17,17,17,0.8);
+
+.calendar-container {
+    display: flex;
+    flex-direction: column ;
+    margin: 0px 20px;
+    .calendar-title-box {
+        display: flex;
+        align-self: flex-start;
+        margin: 20px 0;
+        flex-direction: row;
+        align-items: center;
+        h4 {
+            margin: 0 20px;
+        }
+    }
+    .weekdays {
+        display: flex;
+        p {
+            margin: 0 6px;
+        }
+    }
+    .days {
+        display: flex;
+        flex-wrap: wrap;
+        max-width: 350px;
+        margin: 5px 0;
+    }
+    .angle {
+        width: 30px;
+    }
+    button {
+        // color: $main-title-color;
+        &:focus {
+            outline: none;
+        }
+    }
+}

src/style/select.scss

@@ -4,3 +4,48 @@ $main-color:   #789084;
 $hover-color: #b1e8ca;
 $opacity-color: rgba(17,17,17,0.8);
 
+.select {
+	width: 90%;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	&__list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		background-color: #fff;
+
+		position: absolute;
+		left: 0;
+		top: 100%;
+		z-index: 10;
+	}
+
+	&__value-box {
+        position: relative;
+		border: 1px solid #eee;
+		border-radius: 3px;
+		padding: 0.5rem;
+	}
+
+	&__item {
+		display: flex;
+		padding: 0.5rem;
+		cursor: pointer;
+		&:hover {
+			background-color: #eee;
+		}
+	}
+
+	&__input {
+        border: none;
+        background: none;
+
+		width: 100%;
+		&:focus {
+			outline: none;
+		}
+	}
+}

src/style/style.css

@@ -47,17 +47,29 @@
   }
 }
 
-.icon-chevron-right:before {
-  content: "\e900";
-}
-.icon-chevron-left:before {
-  content: "\e901";
-}
 .icon-angle-left:before {
   content: "\f104";
+  color:  var(--opacity-color);
+  font-size: 1.7em;
+  font-weight: 700;
 }
 .icon-angle-right:before {
   content: "\f105";
+  color:  var(--opacity-color);
+  font-size: 1.7em;
+  font-weight: 700;
+}
+.icon-angle-down:before {
+  content: "\f107";
+  color:  var(--hover-color);
+  position: absolute;
+  right: 15px;
+  top: 22%;
+}
+.icon-lens:before {
+  content: "\e901";
+  color:  var(--opacity-color);
+  margin: 15px 0;
 }
 .icon-calendar:before {
   content: "\f073";