choise service

src/components/Appointment.js

@@ -42,72 +42,78 @@ export class Appoint extends React.Component {
         }
         return (
             <>
-                {doctor &&
-                    <div style={{display:'flex',flexDirection:'column',width:'400px',margin:'100px 0'}}>
-                        <img src={doctor.photo} alt=""/>
-                        <p>{doctor.name}</p>
-                        <p>{doctor.profession}</p>
-                        <p>Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
-                        <p>{doctor.skillsDescription}</p>
-
-                        {appointment.spec &&
-                            <div>
-                                <p>{spec.name}</p>
-                                <p>Duration:{spec.duration}h</p>
-                                <p>{spec.description}</p>
-                                <p>Price: {spec.price} грн.</p>
-                            </div>
-                        }
-                        <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='choose spec'>
-                            <option disabled >choose spec</option>
-                            {
-                                doctor.speciality.map(el=> (
-                                    <option key={el._id}>{el.name}</option>
-                                ))
-                            }
-                        </select>
+            <div className="main">
+            {doctor &&
+                    <div className = "info-wrap">
+                            <div className="card">
+                                <div className="card-item">
+                                    <img src={`.${doctor.photo}`} alt={doctor.name}/>
+                                </div>
+                                <div className="card-item desc">
+                                    <h3>{doctor.name}</h3>
+                                    <p className = "highlights">{doctor.profession}</p>
+                                    {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='choose spec'>
+                                        <option disabled >Выбор услуги</option>
+                                        {
+                                            doctor.speciality.map(el=> (
+                                                <option key={el._id}>{el.name}</option>
+                                            ))
+                                        }
+                                    </select>
+                                    {appointment.spec &&
+                                    <input
+                                        type="date"
+                                        onChange={(e) => setAppointmentShedule(doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])
+                                            ? doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])._id
+                                            : null
+                                        )}
+                                    />
+                                }
 
-                        {appointment.spec &&
-                            <input
-                                type="date"
-                                onChange={(e) => setAppointmentShedule(doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])
-                                    ? doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])._id
-                                    : null
-                                )}
-                            />
-                        }
+                                {!appointment.shedule ?
+                                    !wrongDate ?
+                                        <p>На эту дату нет свободного времени для выбора</p>
+                                        : null
+                                    : <div>
+                                        { choosedData >= currentDate ?
+                                            <div>
+                                                <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
+                                                    <option disabled >Выбор даты</option>
+                                                    {
+                                                        timeArray.map(el=> (
+                                                            Object.values(el)[0]
+                                                                ? <option key={Object.keys(el)[0]} style={{color:'green'}} > {Object.keys(el)[0]} </option>
+                                                                : <option key={Object.keys(el)[0]} style={{color:'red'}} disabled > {Object.keys(el)[0]} </option>
+                                                        ))
+                                                    }
+                                                </select>
+                                            </div>
+                                            : <p>Выберите текущую или будущую дату</p>
+                                        }
+                                        </div>
+                                }
 
-                        {!appointment.shedule ?
-                            !wrongDate ?
-                                <p>There is no available time to choose on this date</p>
-                                : null
-                            : <div>
-                                { choosedData >= currentDate ?
-                                    <div>
-                                        <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
-                                            <option disabled >choose time</option>
-                                            {
-                                                timeArray.map(el=> (
-                                                    Object.values(el)[0]
-                                                        ? <option key={Object.keys(el)[0]} style={{color:'green'}} > {Object.keys(el)[0]} </option>
-                                                        : <option key={Object.keys(el)[0]} style={{color:'red'}} disabled > {Object.keys(el)[0]} </option>
-                                                ))
-                                            }
-                                        </select>
+                                {appointment.time &&
+                                    <div style={{display:"flex",flexDirection:"column"}}>
+                                        <input type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
+                                        <button onClick={() => postOrders(appointment)}>Подтвердите запись</button>
                                     </div>
-                                    : <p>Choose current or future date</p>
                                 }
-                                </div>
-                        }
 
-                        {appointment.time &&
-                            <div style={{display:"flex",flexDirection:"column"}}>
-                                <input type='text' placeholder='Add comments here' onChange={(e)=>setAppointmentComment(e.target.value)}/>
-                                <button onClick={() => postOrders(appointment)}>Confirm Appointment</button>
+                                </div>
                             </div>
-                        }
                     </div>
                 }
+            </div>
+                
             </>
         );
     }

src/components/specialists/MoreInfo.js

@@ -14,14 +14,14 @@ export class MoreInfo extends React.Component {
                     <div className = "info-wrap">
                         <div className="card">
                             <div className="card-item">
-                                <img src={`.${doctor.photo}`} alt=""/>
+                                <img src={`.${doctor.photo}`} alt={doctor.name}/>
                             </div>
                              <div className="card-item desc">
                                  <h3>{doctor.name}</h3>
                                 <p className = "highlights">{doctor.profession}</p>
                                 <p className = "highlights">Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
                                 {doctor.skillsDescription.split ("<br>").map ( (el, index) => (  <p key= {index}> { el } </p>)  ) }
-                                <Link to={`/appointment/${doctor}`} className = "btn link">Make an appointment</Link>
+                                <Link to={`/appointment/${doctor._id}`} className = "btn link">Записаться на приём</Link>
                              </div>
                         </div>
                     </div>}

src/style/all.scss

@@ -1,6 +1,5 @@
 $header-color: #d4d5d7;
 $main-title-color: #3b3b3b;
-$main-text-color: #101010;
 $main-color:   #789084;
 $hover-color: #b1e8ca;
 $opacity-color: rgba(17,17,17,0.8);
@@ -81,12 +80,13 @@ body {
 		&:last-child a {
 			color: $hover-color;
 			&:hover {
-				color: $main-title-color;
+				color: #4dea94;
 			}
 		}
 		a {
 			text-decoration: none;
 			color: $header-color;
+			padding: 20px 3px;
 			&:hover {
 				color: $hover-color;
 			}