Display language colors (#43)

* Add language colors

* Add language colors to language filter

6 files changed, 44 insertions, 5 deletions

diff --git a/src/components/filters/language-filter/index.js b/src/components/filters/language-filter/index.js
index 1d290c0..edc1db4 100644
--- a/src/components/filters/language-filter/index.js
+++ b/src/components/filters/language-filter/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import GithubColors  from 'github-colors';
 
 import './styles.css';
 import languages from './languages';
@@ -68,12 +69,18 @@ class LanguageFilter extends React.Component {
 
       // This will be used in making sure of the element visibility
       const refProp = isSelectedIndex ? { ref: 'activeItem' } : {};
+      const languageColor = GithubColors.get(language.title) || {
+        color: language.title === 'All Languages' ? 'transparent' : '#e8e8e8'
+      };
 
       return (
         <a className={ classNames('select-menu-item', { 'active-item': isSelectedIndex }) }
            { ...refProp }
            onMouseDown={ () => this.selectLanguage(counter) }
            key={ counter }>
+          <span className='repo-language-color' style={{
+            backgroundColor: languageColor.color
+          }}></span>
           <span className="select-menu-item-text">{ language.title }</span>
         </a>
       );
diff --git a/src/components/filters/language-filter/styles.css b/src/components/filters/language-filter/styles.css
index eb7e79b..ea0fa23 100644
--- a/src/components/filters/language-filter/styles.css
+++ b/src/components/filters/language-filter/styles.css
@@ -72,7 +72,8 @@
   border-top: 0;
   border-right: 0;
   border-left: 0;
-  display: block;
+  display: flex;
+  align-items: center;
   padding: 10px 8px 10px 16px;
   overflow: hidden;
   color: inherit;
@@ -95,6 +96,13 @@
   color: white;
 }
 
+.select-menu-item .repo-language-color {
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
 .select-menu-item-text {
   display: block;
   text-align: left;
diff --git a/src/components/repository-grid/grid-item/index.js b/src/components/repository-grid/grid-item/index.js
index 776edfd..6873568 100644
--- a/src/components/repository-grid/grid-item/index.js
+++ b/src/components/repository-grid/grid-item/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import GithubColors  from 'github-colors';
 
 import './styles.css';
 import Star from '../../icons/star';
@@ -9,6 +10,8 @@ import Issue from "../../icons/issue";
 
 class GridItem extends React.Component {
   render() {
+    const languageColor = GithubColors.get(this.props.repository.language);
+
     return (
       <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
         <div className="grid-item-body">
@@ -43,8 +46,10 @@ class GridItem extends React.Component {
           <div className="repo-footer">
             {
               this.props.repository.language && (
-                <span className="d-inline-block mr-3">
-                  <span className="repo-language-color ml-0"></span>
+                <span className="d-inline-flex align-items-center mr-3">
+                  <span className="repo-language-color" style={{
+                    backgroundColor: languageColor ? languageColor.color : '#e8e8e8'
+                  }}></span>
                   <span itemProp="programmingLanguage">
                     { this.props.repository.language }
                   </span>
diff --git a/src/components/repository-grid/grid-item/styles.css b/src/components/repository-grid/grid-item/styles.css
index 624d536..0799ace 100644
--- a/src/components/repository-grid/grid-item/styles.css
+++ b/src/components/repository-grid/grid-item/styles.css
@@ -97,6 +97,13 @@
   font-weight: 500;
 }
 
+.grid-item-container .repo-footer .repo-language-color {
+  width: 10px;
+  height: 10px;
+  margin-right: 4px;
+  border-radius: 50%;
+}
+
 .grid-item-container .repo-footer a svg {
   position: relative;
   top: -2px;
diff --git a/src/components/repository-list/list-item/index.js b/src/components/repository-list/list-item/index.js
index 37a68d6..2efc744 100644
--- a/src/components/repository-list/list-item/index.js
+++ b/src/components/repository-list/list-item/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import GithubColors  from 'github-colors';
 
 import './styles.css';
 import moment from 'moment';
@@ -9,6 +10,8 @@ import Issue from "../../icons/issue";
 
 class ListItem extends React.Component {
   render() {
+    const languageColor = GithubColors.get(this.props.repository.language);
+
     return (
       <div className="col-12 list-item-container">
         <div className="list-item-body">
@@ -27,8 +30,10 @@ class ListItem extends React.Component {
           <div className="repo-footer">
             {
               this.props.repository.language && (
-                <span className="d-inline-block mr-3">
-                  <span className="repo-language-color ml-0"></span>
+                <span className="d-inline-flex align-items-center mr-3">
+                  <span className="repo-language-color" style={{
+                    backgroundColor: languageColor ? languageColor.color : '#e8e8e8'
+                  }}></span>
                   <span itemProp="programmingLanguage">
                     { this.props.repository.language }
                   </span>
diff --git a/src/components/repository-list/list-item/styles.css b/src/components/repository-list/list-item/styles.css
index 28530eb..6174875 100644
--- a/src/components/repository-list/list-item/styles.css
+++ b/src/components/repository-list/list-item/styles.css
@@ -57,6 +57,13 @@
   text-decoration: none;
 }
 
+.list-item-container .repo-footer .repo-language-color {
+  width: 10px;
+  height: 10px;
+  margin-right: 4px;
+  border-radius: 50%;
+}
+
 .list-item-container .author-link {
   position: absolute;
   top: 15px;