doctors cards

public/index.html

@@ -12,7 +12,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="./images/favicon.png" />
+    <link rel="shortcut icon" href="../images/favicon.png" />
     <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&display=swap" rel="stylesheet">
     <!--

src/App.js

@@ -25,7 +25,9 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
-
+        
+        // console.log (this.props.app)
+        
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",

src/components/Footer.js

@@ -9,7 +9,7 @@ const Footer = () => {
                     <p>пр. Науки, 64</p>
            </div>
            <div className="footer-part logo-box">
-               <img src="./images/logo.png" alt="logo"/>
+               <img src="../images/logo.png" alt="logo"/>
                </div>
            <div className="footer-part contacts">
               <h4> Контакты</h4>

src/components/Services.js

@@ -11,7 +11,7 @@ export class Services extends React.Component {
                     <div className = "doctors-wrap">
                         {
                             data.map(el => (
-                                <div key={el._id} style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                                <div key={el._id} style={{display:'flex',flexDirection:'column', width:'200px', margin:'10px 20px'}}>
                                     <p>{el.name}</p>
                                     <p>Duration:{el.duration}h</p>
                                     <p>{el.description}</p>

src/components/specialists/Doctors.js

@@ -3,7 +3,7 @@ import {Link} from 'react-router-dom'
 import {connect} from 'react-redux'
 
 export class Doctors extends React.Component {
-    render() {
+        render() {
         const {data} = this.props;
         return (
             <div className="main">

src/components/specialists/MoreInfo.js

@@ -9,23 +9,33 @@ export class MoreInfo extends React.Component {
         const service = services.find(el => el._id === match.params.service);
         return (
             <>
-               {doctor &&
-               <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
-                   <h3>{doctor.name}</h3>
-                   <img src={`.${doctor.photo}`} alt=""/>
-                   <p>{doctor.profession}</p>
-                   <p>Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
-                   <Link to={`/appointment/${doctor}`}>Make an appointment</Link>
-               </div>}
+            <div className="main">
+                {doctor &&
+                    <div className = "info-wrap">
+                        <div className="card">
+                            <div className="card-item">
+                                <img src={`.${doctor.photo}`} alt=""/>
+                            </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>
+                             </div>
+                        </div>
+                    </div>}
 
                 {service  &&
-                <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                <div  className = "info-wrap">
                     {service.name}
                     <p>Duration:{service.duration}h</p>
                     <p>{service.description}</p>
                     <p>Price:{service.price}грн.</p>
                     <Link to={`/appointment/${service}`}>Make an appointment</Link>
                 </div>}
+               </div>
+              
             </>
         );
     }

src/containers/auth.js

@@ -22,7 +22,8 @@ class Auth extends Component {
 
     return (
       <div className="main">
-        <div className="auth">
+        <div className="auth-wrapper">
+            <div className="auth">
           <div className="auth__content">
             { auth ? (
                 <Loader flag={this.props.isFetching}>
@@ -57,6 +58,8 @@ class Auth extends Component {
             </div>
           </div>
         </div>        
+      
+        </div>
       </div>
 
     );

src/style/all.scss

@@ -18,7 +18,7 @@ body {
 	background-size: cover;
 	background-attachment: fixed;
 	min-height: 100vh;
-	padding-top: 120px;
+	// padding-top: 120px;
 }
 
 .container {
@@ -26,7 +26,8 @@ body {
 	// background-size: cover;
 	min-height: 100vh;
 }
-.wrapper {
+.wrapper,
+.info-wrap {
 	max-width: 1280px;
 	margin: 0 auto;
 }
@@ -172,10 +173,19 @@ body {
 	}
 }
 
+.link {
+	width: 100%;
+	display: block;
+	padding: 15px 2px;
+	text-align: center;
+}
+
+
 //  section About Us
 .aboutsection, 
 .team-container,
 .doctors-wrap,
+.info-wrap,
 h2  {
 	background-color: $opacity-color;
 	box-shadow: 0px 0px 15px 15px  $opacity-color;
@@ -271,11 +281,6 @@ h2 {
 		.link-box {
 			margin-top: 20px;
 		}
-		.link {
-			width: 100%;
-			display: block;
-			padding: 15px 2px;
-		}
 		.more {
 			background-color: $opacity-color;
 			&:hover {
@@ -309,7 +314,8 @@ h2 {
 		margin-right: 50px;
 		padding-top: 15px;
 		@media (max-width: 768px) {
-			margin-right: 0;	
+			margin-right: 0;
+			order: -1;	
 		}
 	}
 	.logo-box  img {
@@ -352,9 +358,45 @@ h2 {
 
 
 // _____DOCTORS_____ 
-
 .doctors-wrap {
-	margin-top: 120px;
+padding-top: 110px;	
+}
+.info-wrap {
+	padding: 110px 10px 25px;
+ 	min-height: 100vh;
+}
+.card {
+	display: flex;
+	justify-content: space-around;
+	flex-direction: row;
+	flex-wrap: wrap;
+	color: $header-color;
+	h3 {
+		margin-top: 0;
+		font-size: 2em;
+		@media (max-width: 768px) {
+			text-align: center;
+		}
+	}
+	.desc {
+		width: 50%;
+		@media (max-width: 768px) {
+			width: 100%;
+		}
+	}
+	.card-item {
+		margin: 0 20px 10px; 
+		.highlights {
+			font-weight: 700;
+			color: $hover-color;
+		}
+		p {
+			margin: 10px 0;
+		}
+		img {
+			border-radius: 3px;
+			box-shadow: 1px 1px 15px 1px $hover-color;
+		}
+	}
 }
-
 

src/style/auth.scss

@@ -6,6 +6,11 @@ $hover-color: #b1e8ca;
 $opacity-color: rgba(17,17,17,0.8);
 
 
+.auth-wrapper {
+	background-color: $opacity-color;
+	height: 100vh;
+}
+
 .auth {
 	width: 100%;
 	height: 100%;