Add icons (#118)

* add icons

* add icons to share-exp

src/components/ShareExperience/InterviewForm/InterviewExperience/index.js

@@ -1,9 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import ButtonAdd from 'common/button/ButtonAdd';
 import AddButton from 'common/button/AddButton';
+import i from 'common/icons';
 
-import styles from './InterviewExperience.module.css';
+import styles from '../../ShareExperience.module.css';
 
+import IconHeading from '../../common/IconHeading';
 import Title from './Title';
 import Sections from './Sections';
 import InterviewQas from './InterviewQas';
@@ -34,16 +36,9 @@ class InterviewExperience extends Component {
           marginTop: '59px',
         }}
       >
-        <h1
-          className="pLBold"
-          style={{
-            marginBottom: '13px',
-          }}
-        >
-          面試經驗
-        </h1>
+        <IconHeading text="面試經驗" Icon={i.Comment2} />
         <div
-          className={styles.form}
+          className={styles.block}
         >
           <div
             style={{

src/components/ShareExperience/InterviewForm/InterviewInfo/index.js

@@ -1,7 +1,9 @@
 import React, { PropTypes } from 'react';
+import i from 'common/icons';
 
-import styles from './InterviewInfo.module.css';
+import styles from '../../ShareExperience.module.css';
 
+import IconHeading from '../../common/IconHeading';
 import CompanyQuery from './CompanyQuery';
 import Region from './Region';
 import JobTitle from './JobTitle';
@@ -35,15 +37,8 @@ class InterviewInfo extends React.PureComponent {
           marginTop: '30px',
         }}
       >
-        <h1
-          className="pLBold"
-          style={{
-            marginBottom: '13px',
-          }}
-        >
-          面試資訊
-        </h1>
-        <div className={styles.form}>
+        <IconHeading text="面試資訊" Icon={i.People} />
+        <div className={styles.block}>
           <div
             style={{
               marginBottom: '35px',

src/components/ShareExperience/ShareExperience.module.css

@@ -0,0 +1,20 @@
+@value main-yellow from "common/variables.module.css";
+
+.iconHeading {
+  margin-bottom: 16px;
+  display: flex;
+  letter-spacing: 1px;
+  svg {
+    width: 30px;
+    height: 30px;
+    fill: main-yellow;
+    margin-right: 12px;
+  }
+}
+
+.block {
+  background: white;
+  width: 100%;
+  padding: 48px;
+	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+}

src/components/ShareExperience/common/IconHeading.js

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+import cn from 'classnames';
+import styles from '../ShareExperience.module.css';
+
+const IconHeading = ({ text, Icon }) => (
+  <h2 className={cn('pLBold', styles.iconHeading)}>
+    <Icon />{text}
+  </h2>
+);
+
+IconHeading.propTypes = {
+  text: PropTypes.string.isRequired,
+  Icon: PropTypes.func.isRequired,
+};
+
+export default IconHeading;

src/components/common/button/RateButtonElement.js

@@ -1,28 +1,16 @@
 import React, { PropTypes } from 'react';
+import cn from 'classnames';
+import i from 'common/icons';
 import styles from './RateButtonElement.module.css';
 
-const handleClassName = hover => active => {
-  if (hover) {
-    return styles.hover;
-  }
-
-  if (active) {
-    return styles.active;
-  }
-
-  return styles.container;
-};
-
 const RateButtonElement = ({ hover, active, onClick }) => (
-  <div
-    className={handleClassName(hover)(active)}
-    style={{
-      fontSize: '3rem',
-    }}
+  <i.Glike
+    className={cn(styles.container, {
+      [styles.hover]: hover,
+      [styles.active]: active,
+    })}
     onClick={onClick}
-  >
-    T
-  </div>
+  />
 );
 
 RateButtonElement.propTypes = {

src/components/common/button/RateButtonElement.module.css

@@ -1,14 +1,18 @@
 @value main-yellow from '../variables.module.css';
 
 .container {
-  color: #c5c5c5;
+  fill: #c5c5c5;
+  width: 32px;
+  height: 32px;
+  transition-property: fill;
+  transition-duration: .3s;
+  cursor: pointer;
 }
 
 .hover {
-  color: #969696;
+  fill: #969696;
 }
 
 .active {
-  composes: container;
-  color: main-yellow;
+  fill: main-yellow;
 }

src/components/common/icons/Add.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+/* eslint-disable */
+const Add = (props) => (
+  <svg {...props} width="148" height="148" viewBox="0 0 148 148">
+    <path d="M79,79 L104,79 L104,69 L79,69 L79,44 L69,44 L69,69 L44,69 L44,79 L69,79 L69,104 L79,104 L79,79 Z"/>
+  </svg>
+);
+/* eslint-enable */
+
+export default Add;

src/components/common/icons/Checked.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+/* eslint-disable */
+const Checked = (props) => (
+  <svg {...props} width="148" height="148" viewBox="0 0 148 148">
+    <g fillRule="evenodd">
+      <path d="M106.432812,41.823875 L55.7566875,97.8349375 L39.7773125,80.174375 C38.0660625,78.278125 35.1384375,78.1370625 33.2468125,79.846 C31.3551875,81.5595625 31.204875,84.484875 32.92075,86.3788125 L51.53175,106.946188 C52.38275,108.185688 53.7956875,108.911813 55.2941875,108.911813 C55.463,108.911813 55.6318125,108.842438 55.8029375,108.821625 C55.920875,108.830875 56.0341875,108.895625 56.1498125,108.895625 C57.5188125,108.895625 58.8461875,108.2805 59.74575,107.219063 L113.289375,48.030625 C115.00525,46.134375 114.85725,43.2090625 112.963312,41.4955 C111.071687,39.7819375 108.146375,39.923 106.432812,41.823875 L106.432812,41.823875 Z"/>
+      <path d="M73.995375,0 C33.193625,0 0,33.1959375 0,74 C0,114.804062 33.193625,148 73.995375,148 C114.804063,148 148,114.804063 148,74 C148,33.1959375 114.804063,0 73.995375,0 L73.995375,0 Z M73.995375,138.75 C38.2973125,138.75 9.25,109.702688 9.25,74 C9.25,38.2973125 38.2973125,9.25 73.995375,9.25 C109.700375,9.25 138.75,38.2973125 138.75,74 C138.75,109.702688 109.700375,138.75 73.995375,138.75 L73.995375,138.75 Z"/>
+    </g>
+  </svg>
+);
+/* eslint-enable */
+
+export default Checked;

src/components/common/icons/Company.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/* eslint-disable */
+const Company = (props) => (
+  <svg {...props} width="148" height="148" viewBox="0 0 148 148">
+    <g transform="translate(5)">
+      <path d="M48.4044336 147.763501L80.0395603 147.763501 80.0395603 114.790382 99.0548489 114.790382 99.0548489 147.763501 130.689976 147.763501 130.689976.137832061 48.4044336.137832061 48.4044336 147.763501zM95.3195511 17.5355522L114.33447 17.5355522 114.33447 36.9175267 95.3195511 36.9175267 95.3195511 17.5355522zM95.3195511 48.6852214L114.33447 48.6852214 114.33447 68.0671959 95.3195511 68.0671959 95.3195511 48.6852214zM95.3195511 79.8341374L114.33447 79.8341374 114.33447 99.216112 95.3195511 99.216112 95.3195511 79.8341374zM64.7595695 17.5355522L83.7744885 17.5355522 83.7744885 36.9175267 64.7595695 36.9175267 64.7595695 17.5355522zM64.7595695 48.6852214L83.7744885 48.6852214 83.7744885 68.0671959 64.7595695 68.0671959 64.7595695 48.6852214zM64.7595695 79.8341374L83.7744885 79.8341374 83.7744885 99.216112 64.7595695 99.216112 64.7595695 79.8341374zM0 147.763501L28.8013252 147.763501 28.8013252 117.744733 41.0177069 117.744733 41.0177069 13.3621781 0 13.3621781 0 147.763501zM14.8902046 29.201944L32.201887 29.201944 32.201887 46.847084 14.8902046 46.847084 14.8902046 29.201944zM14.8902046 57.5610789L32.201887 57.5610789 32.201887 75.2062188 14.8902046 75.2062188 14.8902046 57.5610789zM14.8902046 85.9194606L32.201887 85.9194606 32.201887 103.564601 14.8902046 103.564601 14.8902046 85.9194606z"/>
+    </g>
+  </svg>
+);
+/* eslint-enable */
+
+export default Company;

src/components/common/icons/Exclamation.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/* eslint-disable */
+const Exclamation = (props) => (
+  <svg {...props} width="148" height="148" viewBox="0 0 148 148">
+    <g transform="translate(56)">
+      <path d="M17.0982379 114.997956C8.23127753 114.997956.798678414 122.430555.798678414 131.297515.798678414 140.164476 8.23127753 147.597075 17.0982379 147.597075 25.639207 147.597075 33.3977974 140.164476 33.0066079 131.688705 33.3977974 122.365357 26.0303965 114.997956 17.0982379 114.997956zM13.0559471.575048458C5.29735683 2.79178855.472687225 9.83319824.472687225 18.3741674.863876652 23.5248282 1.18986784 28.7406872 1.58105727 33.891348 2.68942731 53.5160176 3.79779736 72.7494978 4.9061674 92.3741674 5.29735683 99.0243877 10.4480176 103.849057 17.0982379 103.849057 23.7484581 103.849057 28.9643172 98.6983965 29.2903084 91.982978 29.2903084 87.9406872 29.2903084 84.2243877 29.6814978 80.1168987 30.3986784 67.5336388 31.1810573 54.9503789 31.8982379 42.3671189 32.2894273 34.2173392 33.0066079 26.0675595 33.3977974 17.9177797 33.3977974 14.983859 33.0066079 12.3759295 31.8982379 9.768 28.5731278 2.46579736 20.8145374-1.2505022 13.0559471.575048458z" />
+    </g>
+  </svg>
+);
+/* eslint-enable */
+
+export default Exclamation;