some style changes

src/components/Calendar.js

@@ -63,8 +63,6 @@ export class Calendar extends React.Component {
                             id={el.day}
                             disabled={el.disabled}
                             style={{
-                                width:"50px",
-                                height:"50px",
                                 backgroundColor:el.backgroundColor,
                                 border:el.border
                             }}

src/components/appointment/Appointment.js

@@ -81,20 +81,7 @@ export class Appoint extends React.Component {
 
                                 <CustomSelect label="Выбор услуги" options = { doctor.speciality} clickOptionEvent = {this.setSpec} />
 
-                                {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>
-                                }
-
+                               
                                 {appointment.spec &&
                                     <Calendar
                                         doctor={doctor}
@@ -124,12 +111,26 @@ export class Appoint extends React.Component {
 
                                 }
 
+                            {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>
+                            }
+
                                 {appointment.time &&
-                                <div style={{display:"flex",flexDirection:"column"}}>
-                                    <input
+                                <div className = "comment-input" >
+                                    <textarea
                                         className = "appointment comment"
-                                        type='text'
-                                        placeholder='Добавить комментарий'
+                                        rows="3"
+                                        placeholder = "Добавить комментарий "
                                         onChange={this.setComment}/>
                                     <button className = "btn link" onClick={this.postOrder}>Подтвердите запись</button>
                                 </div>

src/components/appointment/select.js

@@ -84,6 +84,7 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 					value={inputValue}
 					autoComplete="off"
 					type={searchInput ? "text" : "hidden"}
+					readOnly="readonly"
 					onChange={chahgeValueEvent}
 					id="select"
 					className="select__input icon-angle-down"

src/style/all.scss

@@ -208,10 +208,11 @@ aside {
 	h1{
 		text-transform: uppercase;
 		background-color: $opacity-color;
-		width: 100%;
-		font-size: 2.6em;
+		width: 85%;
+		font-size: 2.4em;
 		padding: 35px;
-		line-height: 50px;
+		line-height: 1em;
+		letter-spacing: 0.05em;
 		font-weight: bold;
 		margin: 30px auto 0;
 		text-align: center;
@@ -234,7 +235,7 @@ aside {
 .btn {
 	display: block;
 	min-height: 50px;
-	width: 70%;
+	width: 60%;
 	margin: 20px auto;
 	color: $main-color;
 	text-transform: uppercase;
@@ -498,7 +499,7 @@ h2 {
 	color: $header-color;
 	h3 {
 		margin: 0;
-		font-size: 1.8em;
+		font-size: 1.6em;
 		line-height: 2em;
 		text-align:  center;
 		@media (max-width: 768px) {
@@ -506,13 +507,16 @@ h2 {
 		}
 	}
 	.desc {
-		width: 50%;
+		width: 60%;
 		@media (max-width: 1024px) {
-			width: 60%;
+			width: 70%;
 		}
 		@media (max-width: 768px) {
 			width: 100%;
 		}
+		.link {
+				font-size: 0.8em;
+		}
 	}
 	.card-item {
 		margin: 0 20px 10px; 
@@ -526,6 +530,7 @@ h2 {
 		}
 		img {
 			border-radius: 3px;
+			width: 85%;
 			box-shadow: 1px 1px 15px 1px $hover-color;
 		}
 	}
@@ -589,6 +594,18 @@ h2 {
 
 }
 
+.comment-input {
+	display: flex;
+	flex-direction: column;
+}
+.comment {
+	resize: none;
+	background-color: $main-color;
+	&::placeholder {
+		color: $opacity-color;  
+	  }
+}
+
 
 
 //  ______Footer______
@@ -620,15 +637,15 @@ h2 {
 		}
 	}
 	.logo-box  img {
-		width: 300px;
+		width: 250px;
 		@media (max-width: 768px) {
-			width: 250px;	
+			width: 200px;	
 		}
 		@media (max-width: 414px) {
-			width: 200px;	
+			width: 150px;	
 		}
 		@media (max-width: 375px) {
-			width: 150px;	
+			width: 100px;	
 		}
 	}	
 	.contacts {
@@ -638,6 +655,7 @@ h2 {
 		min-width: 30%;
 		text-align: center;
 		font-size: 1em;
+		font-weight: 400;
 		@media (max-width: 768px) {
 			width: 100%;
 		}
@@ -853,4 +871,8 @@ h2 {
 				display: flex;
 			}
 		}
+		.icon-angle-down:before {
+			top: 22%;
+			color: $header-color;
+		}
 	}

src/style/calendar.scss

@@ -16,6 +16,7 @@ $opacity-color: rgba(17,17,17,0.8);
         align-items: center;
         h4 {
             margin: 0 20px;
+            font-weight: 400;
         }
     }
     .weekdays {
@@ -35,7 +36,7 @@ $opacity-color: rgba(17,17,17,0.8);
     }
     button {
         width:50px;
-        height: 50px;
+        height: 40px;
         &:focus {
             outline: none;
         }

src/style/select.scss

@@ -10,13 +10,14 @@ $opacity-color: rgba(17,17,17,0.8);
 	flex-direction: column;
 	position: relative;
 	font-family: 'Lato', sans-serif;
+	cursor: pointer;
 
 	&__list {
 		list-style: none;
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		background-color: $opacity-color;
+		background-color: $main-color;
 
 		position: absolute;
 		left: 0;
@@ -40,7 +41,6 @@ $opacity-color: rgba(17,17,17,0.8);
 		&:hover {
 			background-color: $main-color;
 			color:$opacity-color;
-			font-weight: 700;
 		}
 	}
 
@@ -49,8 +49,8 @@ $opacity-color: rgba(17,17,17,0.8);
         border: none;
         background: none;
 		color: $opacity-color;
-		font-weight: 700;
 		width: 100%;
+		cursor: pointer;
 		&:focus {
 			outline: none;
 		}

src/style/style.css

@@ -50,13 +50,13 @@
   content: "\f104";
   color:  var(--opacity-color);
   font-size: 1.7em;
-  font-weight: 700;
+  /* font-weight: 700; */
 }
 .icon-angle-right:before {
   content: "\f105";
   color:  var(--opacity-color);
   font-size: 1.7em;
-  font-weight: 700;
+  /* font-weight: 700; */
 }
 .icon-angle-down:before {
   content: "\f107";