Commit c3fae3fc authored by Hashan Punchihewa's avatar Hashan Punchihewa

Updates design of leaderboard on profile page

parent 3291c34c
......@@ -407,12 +407,15 @@ class Profile extends React.Component {
<div className="card">
<div className="card-header">How your friends are doing</div>
<ul className="list-group">
<li className="list-group-item">#1 <img className="miniprofile" src=""/> Hashan
<h4><span className="badge badge-pill float-right badge-primary">5</span></h4>
<li className="list-group-item profile-row">#1 <img className="miniprofile" src=""/> <span className="profile-name">Hashan</span>
<span className="badge badge-pill profile-streak badge-primary">5</span>
<li className="list-group-item profile-row">#2<img className="miniprofile" src=""/> <span className="profile-name">Hugo</span> <span className="badge badge-pill profile-streak badge-primary">4</span>
<li className="list-group-item profile-row">#3 <img className="miniprofile" src=""/> <span className="profile-name">Jack</span> <span className="badge badge-pill profile-streak badge-primary">3</span>
<li className="list-group-item profile-row">#4 <img className="miniprofile" src=""/> <span className="profile-name">Joe</span> <span className="badge badge-pill profile-streak badge-primary">2</span>
<li className="list-group-item">#2<img className="miniprofile" src=""/> Hugo 4 </li>
<li className="list-group-item">#3 <img className="miniprofile" src=""/> Jack 3</li>
<li className="list-group-item">#4 <img className="miniprofile" src=""/> Joe 2</li>
......@@ -20,6 +20,21 @@
margin-right: 10px;
border-radius: 50%;
.profile-row {
display: flex;
flex-direction: row;
align-items: center;
.profile-streak {
font-size: 16px;
.profile-name {
flex-grow: 1;
.circle1 {
height: 300px;
width: 300px;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment