From 2410bbdbbdc1e7b548b34fa5191d159364638f0c Mon Sep 17 00:00:00 2001
From: Fauz <fauzy.abdillah@gmail.com>
Date: Tue, 29 Oct 2019 00:40:54 +0700
Subject: [PATCH] Fix user meta on contributor page

user profile with more readable context and fill the white space
---
 pages/contributors.js | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/pages/contributors.js b/pages/contributors.js
index aebcf81..7f42530 100644
--- a/pages/contributors.js
+++ b/pages/contributors.js
@@ -18,9 +18,11 @@ function ContributorCard(props) {
                             <div className="picture">
                                 <img src={cont.user.avatar_url}/>
                             </div>
-                            <div className="name">{cont.user.login}</div>
-                            <div className="tricks-count">{cont.issues.length} {cont.issues.length === 1 ? 'trick' : 'tricks'}</div>
-                            <div className="profile-url"><a href={`https://github.com/${cont.user.login}`} target="_blank">{`https://github.com/${cont.user.login}`}</a></div>
+                            <div className="user-info">
+                                <div className="name">{cont.user.login}</div>
+                                <div className="tricks-count">{cont.issues.length} {cont.issues.length === 1 ? 'trick' : 'tricks'}</div>
+                                <div className="profile-url"><a href={`https://github.com/${cont.user.login}`} target="_blank">{`https://github.com/${cont.user.login}`}</a></div>
+                            </div>
                         </div>
                     </div>
                 ))}
@@ -73,12 +75,31 @@ function ContributorCard(props) {
                         margin-bottom: 40px;
                     }
 
+                    .user-meta {
+                        display: flex;
+                        vertical-align: middle;
+                        align-items: center;
+                    }
+
                     .user-meta .picture img {
                         width: 100px;
                         height: 100px;
                         border-radius:  52% 55% 77% 67% / 54% 84% 41% 72%;
                         border: 3px solid #4618B1
                     }
+
+                    .user-info {
+                        padding-left: 10px;
+                    }
+
+                    .user-info div {
+                        padding: 3px 0;
+                    }
+
+                    .user-info .name {
+                        font-weight: 600;
+                    }
+
                 `}
             </style>
         </div>