Skip to content

Commit 59aad04

Browse files
authored
Merge pull request #73 from emmbyiringiro/ui-design
Refactor mentor card image thumbnail from ellipse to perfect circle
2 parents 4893582 + 0797b4b commit 59aad04

File tree

2 files changed

+172
-173
lines changed

2 files changed

+172
-173
lines changed

src/components/MentorList.js

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,35 @@
11
import React, { Component } from "react";
2-
import { Link } from 'react-router-dom';
3-
import Heart from './Heart';
2+
import { Link } from "react-router-dom";
3+
import Heart from "./Heart";
44

55
class MentorList extends Component {
6-
render() {
7-
return (
8-
<div className="col-sm-4">
9-
<Link to={{ pathname: '/MentorList', state: { id: this.props.data } }} className="card">
10-
<div className="thumbnail" style={ { backgroundImage: `url(${this.props.data.image})` } } alt="Card cap" />
11-
<div className="content-card">
12-
<h3>{this.props.data.name}</h3>
13-
<p className="tags">{this.props.data.technology}</p>
14-
<div className="bottom-info">
15-
<p>{this.props.data.country}</p>
16-
<Heart {...this.props.data} />
17-
</div>
18-
</div>
19-
</Link>
6+
render() {
7+
return (
8+
<div className="col-sm-4 ">
9+
<Link
10+
to={{ pathname: "/MentorList", state: { id: this.props.data } }}
11+
className="card"
12+
>
13+
<div className="text-center">
14+
{" "}
15+
<img
16+
className="img-thumbnail img-fluid rounded-circle thumbnail"
17+
src={this.props.data.image}
18+
alt={this.props.data.name}
19+
/>{" "}
20+
</div>
21+
22+
<div className="content-card">
23+
<h3>{this.props.data.name}</h3>
24+
<p className="tags">{this.props.data.technology}</p>
25+
<div className="bottom-info">
26+
<p>{this.props.data.country}</p>
27+
<Heart {...this.props.data} />
2028
</div>
21-
);
22-
}
29+
</div>
30+
</Link>
31+
</div>
32+
);
33+
}
2334
}
2435
export default MentorList;

0 commit comments

Comments
 (0)