Style updates for when top languages are missing

Author: cnocon

dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-github-stats-card-v2",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "GitHub Stats card component for React applications.",
   "main": "dist/index.js",

package.json

@@ -11,8 +11,8 @@
 .github-stats-card h5 span {display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0 5px; box-sizing: border-box; font-size: 13px; line-height: 18px; vertical-align: middle;}
 .github-stats-card h5 span b { margin-right: 3px; font-size: 16px;}
 .github-stats-card ol, ul {max-width: 100%; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0 0 10px 10px;}
-.github-stats-card ol {list-style: none; display: flex; width: 100%; flex-direction: row; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; margin-bottom: 10px; text-align: center; justify-content: space-around;}
-
+.github-stats-card ol {list-style: none; display: flex; width: 100%; flex-direction: row; padding-bottom: 10px; text-align: center; justify-content: space-around;}
+hr {display: flex; flex-direction: column; width: 100%; border: 0; border-bottom: 1px solid #efefef;}
 .github-stats-card ol li:first-of-type { order: 2; }
 .github-stats-card ol li:nth-of-type(2) { order: 1; }
 .github-stats-card ol li:last-of-type { order: 3; }

src/components/Card/card.scss

@@ -78,7 +78,7 @@ function Card({...props}) {
         'method': 'GET',
         'headers': {
           'Accept': 'application/vnd.github.v3+json',
-          'User-Agent': `@cnocon/react-github-stats-card-v2`,
+          'User-Agent': `react-github-stats-card-v2`,
           'Authorization': `token ${accessToken}`
         }
       };
@@ -87,7 +87,7 @@ function Card({...props}) {
         'method': 'GET',
         'headers': {
           'Accept': 'application/vnd.github.v3+json',
-          'User-Agent': `@cnocon/github-stats-card-v2`
+          'User-Agent': `react-github-stats-card-v2`
         }
       };
     }
@@ -117,7 +117,6 @@ function Card({...props}) {
   const following = <li>Following <b>{user.following}</b> {pluralizer(parseInt(user.following), `member`)}</li>;
   const openIssues = <li><b>{openIssuesCount}</b>&nbsp;{pluralizer(parseInt(openIssuesCount), `open issue`)}</li>;
   const company = !user.company ? `` : <p>Currently at {user.company}</p>;
-  const location = !user.location ? `` : <p>{user.location}</p>;
 
   const profileLink = <p><a href={user.html_url} target='_blank' rel='noreferrer nofollow'>@{user.login} on GitHub</a></p>
   const fullName = !user.name ? `` : <p><b>{user.name}</b></p>;
@@ -128,6 +127,7 @@ function Card({...props}) {
   const totalYears = Math.round(relativeDate / 1000 / 60 / 60 / 24 / 365);
   const yearsOnGitHub = <p>{totalYears} {pluralizer(totalYears, 'Year')} of Membership</p>;
   const footer = <footer><section>{profileLink}{yearsOnGitHub}{company}</section><img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" alt="Octocat"/></footer>;
+  const rule = languagesMarkup.length ? <hr/> : ``;
 
 
   useEffect(() => {
@@ -144,7 +144,7 @@ function Card({...props}) {
     <div className={theme ? 'github-stats-card' : ''}>
       <header>
         <h3><a href={user.html_url} target="_blank" rel="noopener nofollow">@{username}</a>&nbsp;on GitHub</h3>{user && user.bio ? <h4>{user.bio}</h4> : ``}<h5><span><b>{user.public_repos}</b>Public Repos</span><span>|</span><span><b>{user.public_gists}</b>Public Gists</span></h5></header>
-      <div><p><b>Top Languages</b></p><ol>{languagesMarkup}</ol><ul>{openIssues}{watchers}{stargazers}{followers}{following}</ul></div>
+      <div>{languagesMarkup.length ? <p><b>Top Languages</b></p> : ``}<ol>{languagesMarkup}</ol>{rule}<ul>{openIssues}{watchers}{stargazers}{followers}{following}</ul></div>
       {footer}
     </div>
   )

src/components/Card/index.js

@@ -1,4 +1,4 @@
 // /src/index.js
 
 import Card from './components/Card/index.js'
-export { Card }
+export { Card }