Add icons on skill preferences (#1128)

* Add icons on skill preferences

* Resize icons

frontend/src/components/profile/my-skill.js

@@ -10,20 +10,22 @@ import { withRouter } from 'react-router-dom'
 import { injectIntl } from 'react-intl'
 import PropTypes from 'prop-types'
 
+import { SkillIcon } from "./skill-icon"
+
 class MySkill extends Component {
-  render () {
+  render() {
     const { classes, title } = this.props
 
     return (
       <Chip
         avatar={
           <Avatar>
-            <Folder />
+            <SkillIcon name={title} />
           </Avatar>
         }
-        label={ title }
-        className={ classes.chipSkill }
-        onDelete={ this.props.onDelete }
+        label={title}
+        className={classes.chipSkill}
+        onDelete={this.props.onDelete}
       />
     )
   }

frontend/src/components/profile/preferences.js

@@ -15,7 +15,9 @@ import Skill from './skill'
 import MySkill from './my-skill'
 
 const skills = [
-  'Node.js', 'Ruby', 'Python', 'CSS', 'Design', 'Writing', 'Documentation', 'React', 'React Native', 'Angular', 'Vue.js', 'Blogging', 'Wordpress', 'PHP', 'Testing', 'Git', 'Continuous Integration'
+  'Node.js', 'Ruby', 'Python', 'CSS', 'Design', 'Writing', 'Documentation',
+  'React', 'React Native', 'Angular', 'Vue.js', 'Blogging', 'Wordpress',
+  'PHP', 'Testing', 'Git', 'Continuous Integration'
 ]
 
 const styles = theme => ({

frontend/src/components/profile/skill-icon.js

@@ -0,0 +1,45 @@
+import React from "react";
+
+import Nodejs from "../../images/icons/skill-preferences/Node.js.svg";
+import Ruby from "../../images/icons/skill-preferences/Ruby.svg";
+import Python from "../../images/icons/skill-preferences/Python.svg";
+import CSS from "../../images/icons/skill-preferences/CSS.svg";
+import Design from "../../images/icons/skill-preferences/Design.svg";
+import Writing from "../../images/icons/skill-preferences/Writing.svg";
+import Documentation from "../../images/icons/skill-preferences/Documentation.svg";
+import ReactIcon from "../../images/icons/skill-preferences/React.svg";
+import Angular from "../../images/icons/skill-preferences/Angular.svg";
+import Vuejs from "../../images/icons/skill-preferences/Vue.js.svg";
+import Blogging from "../../images/icons/skill-preferences/Blogging.svg";
+import Wordpress from "../../images/icons/skill-preferences/Wordpress.svg";
+import PHP from "../../images/icons/skill-preferences/PHP.svg";
+import Testing from "../../images/icons/skill-preferences/Testing.svg";
+import Git from "../../images/icons/skill-preferences/Git.svg";
+import ContinuousIntegration from "../../images/icons/skill-preferences/Continuous Integration.svg";
+
+export function getSkillIcon(name) {
+    switch (name) {
+        case 'Node.js': return Nodejs;
+        case 'Ruby': return Ruby;
+        case 'Python': return Python;
+        case 'CSS': return CSS;
+        case 'Design': return Design;
+        case 'Writing': return Writing;
+        case 'Documentation': return Documentation;
+        case 'React': return ReactIcon;
+        case 'React Native': return ReactIcon;
+        case 'Angular': return Angular;
+        case 'Vue.js': return Vuejs;
+        case 'Blogging': return Blogging;
+        case 'Wordpress': return Wordpress;
+        case 'PHP': return PHP;
+        case 'Testing': return Testing;
+        case 'Git': return Git;
+        case 'Continuous Integration': return ContinuousIntegration;
+    }
+    return "";
+}
+
+export function SkillIcon(props) {
+    return <img src={getSkillIcon(props.name)} style={{ objectFit: "contain", width: "80%" }} />;
+}

frontend/src/components/profile/skill.js

@@ -3,16 +3,26 @@ import { withRouter } from "react-router-dom";
 import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
 import classNames from "classnames";
+import { withStyles, Grid, Typography, Checkbox, Avatar, } from "@material-ui/core";
+import { SkillIcon } from "./skill-icon"
+
+const styles = theme => ({
+  skillIcon: {
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+  },
+  greyed: {
+    filter: 'grayscale(0.8)',
+  }
+})
 
-import { Grid, Typography, Checkbox, Avatar } from "@material-ui/core";
-import FolderIcon from "@material-ui/icons/Folder";
 
 function Skill({ classes, title, onClick, isSelected }) {
   return (
     <Grid container direction="row" alignItems="center" xs={6}>
       <Grid item xs={2}>
-        <Avatar className={classNames(classes.avatar, classes.bigAvatar)}>
-          <FolderIcon />
+        <Avatar className={classNames(classes.skillIcon, !isSelected && classes.greyed)}>
+          <SkillIcon name={title} />
         </Avatar>
       </Grid>
       <Grid item xs={6}>
@@ -36,4 +46,4 @@ Skill.propTypes = {
   isSelected: PropTypes.bool,
 };
 
-export default injectIntl(withRouter(Skill));
+export default injectIntl(withRouter(withStyles(styles)(Skill)));