changed appointment part add time-buttons

src/components/appointment/Appointment.js

@@ -57,7 +57,7 @@ export class Appoint extends React.Component {
                                 </div>
                                 }
 
-                                <select className = "appointment"  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
+                                <select className = "appointment "  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
                                     <option disabled >Выбор услуги</option>
                                     {
                                         doctor.speciality.map(el=> (
@@ -74,18 +74,20 @@ export class Appoint extends React.Component {
                                 }
 
                                 {appointment.shedule &&
-                                <div>
-                                    <div>
-                                        <select className = "appointment" onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
-                                            <option disabled >Выбор даты</option>
-                                            {
-                                                timeArray.map(el=> (
-                                                    <option key={Object.keys(el)[0]}> {Object.keys(el)[0]} </option>
-                                                ))
-                                            }
-                                        </select>
+                             
+                                   <div className = "appointment-time" >
+                                        <div className="btn-box"  >
+                                        {   timeArray.map ( (el, index)=> (
+                                            
+                                                <label  key={Object.keys(el)[0]} >
+                                                    <input type ="radio" name = "choise-time"   id = {index} onChange={(e)=> setAppointmentTime(e.target.value)}
+                                                  value =  {Object.keys(el)[0]}  />
+                                                   {Object.keys(el)[0]}
+                                                </label>
+                                            ))
+                                        }
+                                            </div>
                                     </div>
-                                </div>
                                 }
 
                                 {appointment.time &&
@@ -124,3 +126,11 @@ const mapDispatchToProps = {
 
 export default connect (mapStateToProps,mapDispatchToProps)(Appoint)
 
+
+
+
+// <div className = "btn appointment-link" onClick={(e)=> setAppointmentTime(e.target.value)}  key={Object.keys(el)[0]} >
+// {Object.keys(el)[0]} 
+// </div>
+
+// setAppointmentTime

src/components/header/navigation.js

@@ -62,5 +62,4 @@ const mapStateToProps = state => ({
 	user: state.auth.user
 });
 
-export default connect(mapStateToProps)(withRouter(header));
-
+export default connect(mapStateToProps)(withRouter(header));

src/components/services/Services.js

@@ -1,69 +1,61 @@
-import React from 'react';
-
-// import {Link} from 'react-router-dom';
-import {connect} from 'react-redux';
-
+import React from "react";
 
+import {Link} from 'react-router-dom';
+import { connect } from "react-redux";
 
 export class Services extends React.Component {
-    
-    render() {
-        const { categories} = this.props;
-        const servArray =  Object.keys(categories).map(key => {
-            return [key, categories[key]];
-        })
-
-        // console.log ("data:", data);
-        // console.log ("categories:", Object.values (categories))
-        // console.log ("servArray:", servArray)
-        // console.log ("this.props:", this.props.app)
-
-        return (
-            <div className="main">
-                <div className="wrapper">
-                    <div className = "doctors-wrap  services">
-                        <div className = "categories" id = "accordion">
-                                 { servArray.map ( (el, index )=> (
-                                <div className="service-type" key = {index} id = {`item${index}`}>                           
-                                        <a href =  {`#item${index}`} className = "categories-link icon-angle-down" key = {index}>
-                                            {el[0]}
-                                        </a>
-                                        {   el[1].map ((item, index) => (
-                                          
-                                          <div className = "servise-name" key = {index} >
-                                              <p>{item.name}</p>
-                                              {/* <p>Длительность: {item.duration} ч.</p>  */}
-                                              <p>Стоимость: {item.price} грн.</p>
-                                              <div>
-                                                  
-                                                  <button className = "btn service-btn"> Записаться </button>
-                                              </div>
-                                          </div>
-                                      ))}
-                                </div>
-                            ) ) 
-                            }
-                      
-                        </div> 
+  render() {
+    const { categories } = this.props;
+    const servArray = Object.keys(categories).map(key => {
+      return [key, categories[key]];
+    });
+
+    // console.log ("data:", data);
+    // console.log ("categories:", Object.values (categories))
+    // console.log ("servArray:", servArray)
+    // console.log ("this.props:", this.props.app)
+
+    return (
+      <div className="main">
+        <div className="wrapper">
+          <div className="doctors-wrap  services">
+            <div className="categories" id="accordion">
+              {servArray.map((el, index) => (
+                <div className="service-type" key={index} id={`item${index}`}>
+                  <a   href={`#item${index}`} className="categories-link icon-angle-down"   key={index}>
+                    {el[0]}
+                  </a>
+                  {el[1].map((item, index) => (
+                    <div className="servise-name" key={index}>
+                      <p>{item.name}</p>
+                      {/* <p>Длительность: {item.duration} ч.</p>  */}
+                      <p>Стоимость: {item.price} грн.</p>
+                      <div>
+                        <Link to = {`/appointment/${el._id}`}  className="btn service-btn">  Записаться  </Link>
+                      </div>
                     </div>
+                  ))}
                 </div>
+              ))}
             </div>
-        );
-    }
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
 const mapStateToProps = state => {
-    return {
-        app:state.app,
-        // data:state.app.services,
-        categories:state.app.servicesArray
-    }
+  return {
+    app: state.app,
+    // data:state.app.services,
+    categories: state.app.servicesArray
+  };
 };
 
-const mapDispatchToProps = {
-
-};
-
-export default connect (mapStateToProps,mapDispatchToProps)(Services)
-
+const mapDispatchToProps = {};
 
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Services);

src/style/all.scss

@@ -173,7 +173,7 @@ body {
 	}
 }
 
-// button
+// buttons
 .btn {
 	display: block;
 	min-height: 50px;
@@ -224,7 +224,11 @@ body {
 	width: 30%;	
 	margin: 0;
 }
-
+.nav-exit {
+	background-color: none;
+	border: none;	
+	height: 30px;
+}
 
 //  section About Us
 .aboutsection, 
@@ -371,6 +375,8 @@ h2 {
 	}
 }
 
+
+
 //  Footer
 .footer {
 	font-family: 'Montserrat', sans-serif;
@@ -515,7 +521,7 @@ h2 {
 }
 
 
-// _____t APPOINTMENT _________
+// _____ APPOINTMENT _________
 
 .appointment {
 	width: 100%;
@@ -524,13 +530,46 @@ h2 {
 	border-radius: 3px;
 	padding: 0.5rem;
 	margin: 15px 0;
-	&:focus {
+	color: $opacity-color;
+	background-color: $header-color;
+	cursor: pointer;
+	-webkit-appearance: none; 
+   -moz-appearance: none;
+   appearance: none;       /* remove default arrow */
+ 	&:focus {
 		outline: none;
 	}
 }
-// .comment {
-// 	margin: 15px 0;
-// }
+.appointment-time {
+	.btn-box {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+		margin: 30px 0;
+		input[type = "radio"] {
+			display: none;
+		}
+		label {
+			display: flex;
+			margin: 10px 10px 3px 0;
+			text-align: center;
+			padding: 5px 10px;
+			min-width: 80px;
+			background-color: $hover-color;
+			color: $opacity-color;
+			&:hover {
+				background-color: $main-color;
+				color: $header-color;
+			}
+		}
+		label input:checked ~ label {
+			background-color: $main-color;
+			color: $header-color;
+		  }
+	}
+
+}
 
 
 

src/style/style.css

@@ -69,8 +69,9 @@
 .icon-lens:before {
   content: "\e901";
   color:  var(--opacity-color);
-  margin: 15px 0;
   font-size: 1.6em;
+  margin: 15px 0;
+
 }
 @media (max-width: 1024px) {
 	.icon-lens:before {
@@ -116,6 +117,8 @@
 }
 .icon-exit:before {
   content: "\ea14";
+  color:  var(--opacity-color);
+  font-size: 1.6em;
 }
 .icon-location:before {
   content: "\e947";