changed admin-shedule block

src/components/Admin/Shedule.js

@@ -21,33 +21,34 @@ export default class Shedule extends React.Component {
     render() {
         const {doctors,postNewShedule,sheduleMonthArray,setSheduleDoctor} = this.props;
         return (
-            <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'10px 20px'}}>
-
+            <div  className = "shedule-container" >
+                <div className="option">
+                    <select className = "appointment admin-appointment"  onChange={(e) => setSheduleDoctor(e.target.value)} defaultValue='Выберите доктора'>
+                    <option disabled >Выберите доктора</option>
+                        {
+                            doctors.map(el=> (
+                                <option key={el._id} id={el._id}>{el.name}</option>
+                            ))
+                        }
+                    </select>
 
-                <select  onChange={(e) => setSheduleDoctor(e.target.value)} defaultValue='choose doctor'>
-                    <option disabled >choose doctor</option>
-                    {
-                        doctors.map(el=> (
-                            <option key={el._id} id={el._id}>{el.name}</option>
-                        ))
+                    {postNewShedule.doctor &&
+                        <div className = "input-box">
+                            <input className = "shedule-input " type="date" onChange={(e) => this.setState({startDate:e.target.value})}/>
+                            <input className = "shedule-input right" type="date" onChange={(e) => this.setState({endDate:e.target.value})}/>
+                        </div>
                     }
-                </select>
-
-
-                {postNewShedule.doctor &&
-                    <>
-                        <input type="date" onChange={(e) => this.setState({startDate:e.target.value})}/>
-                        <input type="date" onChange={(e) => this.setState({endDate:e.target.value})}/>
-                    </>
-                }
 
 
-                {(this.state.startDate && this.state.endDate) && <button onClick={this.post}>Post</button>}
+                {(this.state.startDate && this.state.endDate) && <button className = "btn admin" onClick={this.post}>Post</button>}
 
+                </div>
+                
 
                 {postNewShedule.doctor &&
-                    <div style={{display:'flex', margin:'10px 20px'}}>
-                        <p>{new Date().toLocaleString('ru',{month:'long'})}</p>
+                <>
+                    <p className = "month">{new Date().toLocaleString('ru',{month:'long'})}</p>
+                    <div className = "shedule">
                         {
                             sheduleMonthArray[new Date().getMonth()].map(el => (
                                 <div key={el._id} style={{margin:'10px 20px'}}>
@@ -61,9 +62,8 @@ export default class Shedule extends React.Component {
                             ))
                         }
                     </div>
+                </>
                 }
-
-
             </div>
         );
     }

src/style/all.scss

@@ -193,6 +193,7 @@ body {
 
 .admin {
 	width: 30%;	
+	margin: 0;
 }
 
 
@@ -495,4 +496,51 @@ aside {
 // _______ADMIN PANEL __________
 .btn-box {
 	display: flex;
-}
+	justify-content: space-between;
+}
+.option {
+	width: 40%;
+	margin: 0 auto;
+}
+.admin-appointment {
+	width: 100%;
+}
+.shedule-container {
+	margin-top: 50px;
+	.input-box {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+	}
+	
+	.shedule-input {
+		// width: calc(20% - 20px);
+		margin: 20px 10px 0 0;
+		border: 1px solid $hover-color;
+		border-radius: 3px;
+		padding: 0.5rem;
+	}
+	.right {
+		margin-right: 0;
+	}
+
+	.shedule {
+		display: flex; 
+		margin: 10px 20px;
+		width: 100%;
+		flex-wrap: wrap;
+	}
+	.month {
+		color: $hover-color;
+		text-transform: uppercase;
+		font-weight: 700;
+		letter-spacing: 0.2em;
+	}
+	.admin {
+		margin-top: 30px;
+		width: 100%;
+	}
+}
+