Create component for Ingredient Search Box

.eslintrc.json

@@ -9,6 +9,8 @@
     "airbnb"
   ],
 
+  "parser": "babel-eslint",
+
   "parserOptions": {
     "ecmaFeatures": {
         "experimentalObjectRestSpread": true,

package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
     "babel-jest": "^21.2.0",
     "babel-loader": "^7.1.4",
     "babel-preset-es2015": "^6.24.1",

src/assets/styles/colors.scss

@@ -0,0 +1,4 @@
+$colors-purple: #44318D;
+$colors-light-purple: #8162FF;
+$colors-light-gray-0: #757575;
+$colors-light-gray-1: #999;

src/base.scss

@@ -7,6 +7,7 @@ html {
         width: 100%;
         height: 100%;
         margin: 0;
+        font-family: 'Source Sans Pro', sans-serif;
 
         #content {
             width: 100%;

src/components/Header/Header.scss

@@ -1,8 +1,10 @@
+@import '~styles/colors';
+
 .header {
     display: flex;
     justify-content: flex-end;
     overflow: hidden;
-    background: #44318D;
+    background: $colors-purple;
     padding: 10px 30px;
 
     .header-user-circle {

src/components/SearchBox/SearchBox.jsx

@@ -3,31 +3,23 @@ import PropTypes from 'prop-types';
 import './SearchBox.scss';
 
 class SearchBox extends Component {
-  constructor(props) {
-    super();
+  state = {
+    value: '',
+  };
 
-    this.props = props;
-    this.state = {
-      value: '',
-    };
+  onInputChange = ({ target: { value } }) => (
+    this.setState({ value })
+  );
 
-    this.onInputChange = this.onInputChange.bind(this);
-  }
-
-  onInputChange(event) {
-    const { value } = event.target;
-
-    this.setState({ value });
-  }
-
-  render() {
+  render = () => {
     const { value } = this.state;
+    const { placeholder } = this.props;
 
     return (
-      <div className="searchbox">
+      <div className="search-box">
         <input
           onChange={this.onInputChange}
-          placeholder={this.props.placeholder}
+          placeholder={placeholder}
           value={value}
           spellCheck={false}
         />

src/components/SearchBox/SearchBox.scss

@@ -1,4 +1,6 @@
-.searchbox {
+@import '~styles/colors';
+
+.search-box {
     $input-font-size: 30px;
     $input-line-height: 70px;
     $font-family: Roboto Slab, sans-serif;
@@ -15,24 +17,24 @@
         border-radius: 0;
         line-height: $input-line-height;
         background-color: transparent;
-        color: #757575;
+        color: $colors-light-gray-0;
         font-size: $input-font-size;
         border: none;
         outline: none;
-        border-bottom: 3px solid #757575;
+        border-bottom: 3px solid $colors-light-gray-0;
         font-family: $font-family;
 
+        ::placeholder {
+            color: $colors-light-gray-1;
+        }
+
         &:focus {
             + .input-highlight {
-                border-top: 3px solid #8162FF;
+                border-top: 3px solid $colors-light-purple;
             }
         }
     }
 
-    ::placeholder {
-        color: #999;
-    }
-
     .input-highlight {
         font-size: $input-font-size;
         user-select: none;
@@ -47,4 +49,4 @@
         font-family: $font-family;
         overflow: hidden;
     }
-}
+}

webpack.config.js

@@ -70,7 +70,7 @@ module.exports = {
     alias: {
       components: path.resolve(__dirname, 'src/components'),
       state: path.resolve(__dirname, 'src/state'),
-      styles: path.resolve(__dirname, 'src/components/styles'),
+      styles: path.resolve(__dirname, 'src/assets/styles'),
       images: path.resolve(__dirname, 'src/assets/images'),
     },
     extensions: ['.js', '.jsx'],