Merge pull request #73 from emmbyiringiro/ui-design

Refactor mentor card image thumbnail from ellipse to perfect circle

Author: elangosundar

src/components/MentorList.js

@@ -1,24 +1,35 @@
 import React, { Component } from "react";
-import { Link } from 'react-router-dom';
-import Heart from './Heart';
+import { Link } from "react-router-dom";
+import Heart from "./Heart";
 
 class MentorList extends Component {
-    render() {
-        return (
-            <div className="col-sm-4">
-                <Link to={{ pathname: '/MentorList', state: { id: this.props.data } }} className="card">
-                    <div className="thumbnail" style={ { backgroundImage: `url(${this.props.data.image})` } } alt="Card cap" />
-                    <div className="content-card">
-                        <h3>{this.props.data.name}</h3>
-                        <p className="tags">{this.props.data.technology}</p>
-                        <div className="bottom-info">
-                          <p>{this.props.data.country}</p>
-                          <Heart {...this.props.data} />
-                        </div>
-                    </div>
-                </Link>
+  render() {
+    return (
+      <div className="col-sm-4 ">
+        <Link
+          to={{ pathname: "/MentorList", state: { id: this.props.data } }}
+          className="card"
+        >
+          <div className="text-center">
+            {" "}
+            <img
+              className="img-thumbnail img-fluid rounded-circle thumbnail"
+              src={this.props.data.image}
+              alt={this.props.data.name}
+            />{" "}
+          </div>
+
+          <div className="content-card">
+            <h3>{this.props.data.name}</h3>
+            <p className="tags">{this.props.data.technology}</p>
+            <div className="bottom-info">
+              <p>{this.props.data.country}</p>
+              <Heart {...this.props.data} />
             </div>
-        );
-    }
+          </div>
+        </Link>
+      </div>
+    );
+  }
 }
 export default MentorList;