change images, update readme

src/components/Compare/index.js

@@ -7,7 +7,7 @@ const Compare = ({products}) =>
       <table className="table">
         <thead className="thead-default">
           <tr>
-            <th></th>
+            <th />
             {products.map(product =>
               <th key={product.id}>
                 {product.name}
@@ -27,7 +27,7 @@ const Compare = ({products}) =>
             {products.map(product =>
               <td key={product.id}>
                 {product.colors.map((color, index) =>
-                  <span key={index} className={"bg-" + color}></span>
+                  <span key={index} className={"bg-" + color} />
                 )}
               </td>
             )}
@@ -35,7 +35,7 @@ const Compare = ({products}) =>
           <tr className="condition">
             <th scope="row">Condition</th>
             {products.map(product =>
-              <td key={product.id} className={product.condition === "Used" ? "bg-red" : "bg-green"}>
+              <td key={product.id} className={product.condition === "Frozen" ? "bg-red" : "bg-green"}>
                 {product.condition}
               </td>
             )}
@@ -43,6 +43,6 @@ const Compare = ({products}) =>
         </tbody>
       </table>
     </div>
-  </div>
+  </div>;
 
 export default Compare

src/components/Compare/styles.scss

@@ -5,7 +5,7 @@
     background-color: #fff;
     border-radius: 5px;
     overflow: hidden;
-    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 13px 21px -5px rgba(0, 0, 0, 0.05);
     border: 1px solid #eee;
     font-size: 18px;
     table-layout: fixed;

src/components/Product/index.js

@@ -5,7 +5,7 @@ const Product = ({product, compare}) =>
     <div key={product.id} className="col-sm-6 col-md-3">
         <div className={"product " + (product.compare ? "compare" : "")} >
             <img src={product.image} alt={product.name} />
-            <div className="image_overlay"></div>
+            <div className="image_overlay"/>
             <div className="view_details" onClick={() => compare(product)}>
               {product.compare ? "Remove" : "Compare"}
             </div>
@@ -17,6 +17,6 @@ const Product = ({product, compare}) =>
                 </div>
             </div>
         </div>
-    </div>
+    </div>;
 
 export default Product

src/components/Product/styles.scss

@@ -10,8 +10,9 @@ $product-main-color: $green;
   overflow: hidden;
   transition: all 500ms ease-out;
   margin-bottom: 30px;
+  border: 1px solid #ddd;
   &:hover {
-    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 13px 21px -5px rgba(0, 0, 0, 0.2);
     .image_overlay {
       opacity: $image-overlay-opacity;
     }

src/components/ProductList/index.js

@@ -2,12 +2,10 @@ import React from 'react'
 import {Product} from '../'
 
 const ProductList = ({products, compare}) =>
-  <div>
-    <div className="row mt-3">
-        {products.map(product =>
-          <Product key={product.id} product={product} compare={compare} />
-        )}
-    </div>
-  </div>
+  <div className="row mt-3">
+      {products.map(product =>
+        <Product key={product.id} product={product} compare={compare} />
+      )}
+  </div>;
 
 export default ProductList

src/constants/types.js

@@ -1,2 +1,2 @@
-export const FETCH_PRODUCTS = 'FETCH_PRODUCTS'
-export const COMPARE_PRODUCT = 'COMPARE_PRODUCT'
+export const FETCH_PRODUCTS = 'FETCH_PRODUCTS';
+export const COMPARE_PRODUCT = 'COMPARE_PRODUCT';

src/containers/Home/index.js

@@ -10,11 +10,16 @@ class Home extends Component {
   }
 
   render() {
-    const {products, actions} = this.props
-    const compareProducts = products.filter(product => product.compare)
+    const {products, actions} = this.props;
+    const compareProducts = products.filter(product => product.compare);
 
     return (
       <div className="home mt-5">
+        <div className="row">
+          <div className="col-12">
+            <h2 className="mb-3">Compare Products</h2>
+          </div>
+        </div>
         <ProductList products={products} compare={actions.compare}/>
         {compareProducts.length >= 2 &&
           <Compare products={compareProducts}/>

src/index.js

@@ -12,7 +12,7 @@ import App from './containers/App'
 import 'bootstrap/dist/css/bootstrap.css'
 import './styles.css'
 
-const loggerMiddleware = createLogger()
+const loggerMiddleware = createLogger();
 
 const store = createStore(
   reducer,
@@ -20,7 +20,7 @@ const store = createStore(
     thunkMiddleware,
     loggerMiddleware
   )
-)
+);
 
 ReactDOM.render(
   <Provider store={store}>
@@ -29,6 +29,6 @@ ReactDOM.render(
     </BrowserRouter>
   </Provider>,
   document.getElementById('root')
-)
+);
 
-registerServiceWorker()
+registerServiceWorker();

src/reducers/index.js

@@ -1,8 +1,8 @@
 import { combineReducers } from 'redux'
-import product from './product_reducer'
+import product from './productReducer'
 
 const compareApp = combineReducers({
   product
-})
+});
 
 export default compareApp

src/reducers/productReducer.js

@@ -2,7 +2,7 @@ import * as types from '../constants/types'
 
 const INITIAL_STATE = {
   products: []
-}
+};
 
 export default function (state = INITIAL_STATE, action) {
   switch (action.type) {
@@ -11,7 +11,7 @@ export default function (state = INITIAL_STATE, action) {
         ...state, products: action.payload.map(product =>
           ({...product, compare: false})
         )
-      }
+      };
     case types.COMPARE_PRODUCT:
       return {
         ...state, products: state.products.map(product =>
@@ -19,7 +19,7 @@ export default function (state = INITIAL_STATE, action) {
             ({...product, compare: !product.compare}) :
             product
         )
-      }
+      };
     default:
       return state
   }

src/styles.scss

@@ -2,6 +2,6 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-	background: #eaebec;
+  background: #f6f7f8;
   color: #393c45;
 }