scss integration

.gitignore

@@ -20,5 +20,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
- # Environment
+# Environment
 .env
+
+# Styles
+src/**/*.css

package.json

@@ -27,6 +27,8 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
+    "node-sass-chokidar": "0.0.3",
+    "npm-run-all": "^4.0.2",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.6",
@@ -54,8 +56,11 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "start": "node scripts/start.js",
+    "build-css": "node-sass-chokidar src/ -o src/",
-    "build": "node scripts/build.js",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
     "test": "node scripts/test.js --env=jsdom"
   },
   "devDependencies": {

src/components/Compare/index.css

@@ -1,65 +0,0 @@
-.compare table {
-  background-color: #fff;
-  border-radius: 5px;
-  overflow: hidden;
-  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05);
-  border: 1px solid #eee;
-  font-size: 18px;
-  table-layout: fixed;
-}
-
-.compare .thead-default th {
-  background-color: #fff;
-}
-
-.compare table tr > td,
-.compare table tr > th {
-  padding-top: 25px;
-  padding-bottom: 25px;
-  text-align: center;
-}
-
-.compare table thead th {
-  font-size: 20px;
-  color: #393c45;
-  font-weight: normal;
-}
-
-.compare table th[scope="row"] {
-  font-size: 20px;
-  color: #393c45;
-  font-weight: normal;
-  background-color: #f9f9f9;
-  border: 1px solid #eee;
-  text-align: left;
-  padding-left: 45px;
-}
-
-.compare table tr.condition {
-  color: #fff;
-  font-size: 20px;
-}
-
-.compare table tr.colors span {
-  height: 20px;
-  width: 20px;
-  background-color: #000;
-  display: inline-block;
-  margin-right: 5px;
-  border-radius: 100%;
-}
-
-.compare table td.red,
-.compare table tr.colors span.red {
-  background-color: #ff715b;
-}
-
-.compare table td.green,
-.compare table tr.colors span.green {
-  background-color: #48cfad;
-}
-
-.compare table td.blue,
-.compare table tr.colors span.blue {
-  background-color: #0197F6;
-}

src/components/Compare/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import './index.css'
+import './styles.css'
 
 const Compare = ({products}) =>
   <div className="row compare">
@@ -30,7 +30,7 @@ const Compare = ({products}) =>
               {products.map(product =>
                 <td key={product.id}>
                 {product.colors.map((color, index) =>
-                    <span key={index} className={color}></span>
+                    <span key={index} className={"bg-" + color}></span>
                 )}
                 </td>
               )}
@@ -38,7 +38,7 @@ const Compare = ({products}) =>
             <tr className="condition">
               <th scope="row">Condition</th>
               {products.map(product =>
-                <td key={product.id} className={product.condition === "Used" ? "red" : "green"}>
+                <td key={product.id} className={product.condition === "Used" ? "bg-red" : "bg-green"}>
                   {product.condition}
                 </td>
               )}

src/components/Compare/styles.scss

@@ -0,0 +1,69 @@
+@import '../../styles/_variables.scss';
+
+.compare {
+  table {
+    background-color: #fff;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05);
+    border: 1px solid #eee;
+    font-size: 18px;
+    table-layout: fixed;
+
+    .bg-red {
+      background-color: $red;
+    }
+
+    .bg-green {
+      background-color: $green;
+    }
+
+    .bg-blue {
+      background-color: $blue;
+    }
+
+    tr > td,
+    tr > th {
+      padding-top: 25px;
+      padding-bottom: 25px;
+      text-align: center;
+    }
+
+    th[scope="row"] {
+      font-size: 20px;
+      color: #393c45;
+      font-weight: normal;
+      background-color: #f9f9f9;
+      border: 1px solid #eee;
+      text-align: left;
+      padding-left: 45px;
+    }
+
+    tr {
+      &.condition {
+        color: #fff;
+        font-size: 20px;
+      }
+
+      &.colors span {
+        height: 20px;
+        width: 20px;
+        display: inline-block;
+        margin-right: 5px;
+        border-radius: 100%;
+      }
+    }
+
+    thead {
+      th {
+        font-size: 20px;
+        color: #393c45;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .thead-default th {
+    background-color: #fff;
+  }
+}

src/components/Header/index.css

@@ -1,3 +0,0 @@
-header {
-  margin-top: 10vh;
-}

src/components/Header/index.js

@@ -1,17 +0,0 @@
-import React from 'react'
-import './index.css'
-
-export default class Header extends React.Component {
-  render() {
-    return (
-      <div className="container">
-        <header>
-          <div className="row">
-            <div className="col-12 text-center">
-            </div>
-          </div>
-        </header>
-      </div>
-    );
-  }
-}

src/components/Product/index.css

@@ -1,101 +0,0 @@
-.product {
-  cursor: pointer;
-  position: relative;
-  padding-bottom: 100px;
-  border-radius: 5px;
-  overflow: hidden;
-  -webkit-transition: all 500ms ease-out;
-  -moz-transition: all 500ms ease-out;
-  -o-transition: all 500ms ease-out;
-  transition: all 500ms ease-out;
-}
-
-.product:hover {
-  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
-}
-
-.product img {
-  width: 100%;
-}
-
-.stats-container {
-  background: #fff;
-  padding: 25px 15px;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-
-.stats-container .product_name {
-  font-size: 22px;
-  color: #393c45;
-}
-
-.stats-container p {
-  font-size: 16px;
-  color: #b1b1b3;
-  margin: 0;
-}
-
-.stats-container .product_price {
-  float: right;
-  color: #48cfad;
-  font-size: 22px;
-  font-weight: 600;
-}
-
-.image_overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #48cfad;
-  opacity: 0;
-  -webkit-transition: all 200ms ease-out;
-  -moz-transition: all 200ms ease-out;
-  -o-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-}
-
-.product.compare .image_overlay, .product:hover .image_overlay {
-  opacity: 0.7;
-}
-
-.view_details {
-  position: absolute;
-  top: 112px;
-  left: 50%;
-  margin-left: -85px;
-  border: 2px solid #fff;
-  color: #fff;
-  font-size: 19px;
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: 700;
-  padding: 10px 0;
-  width: 172px;
-  opacity: 0;
-  -webkit-transition: all 200ms ease-out;
-  -moz-transition: all 200ms ease-out;
-  -o-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-}
-
-.view_details:hover {
-  background: #fff;
-  color: #48cfad;
-  cursor: pointer;
-}
-
-.product:hover .view_details {
-  opacity: 1;
-  width: 152px;
-  font-size: 15px;
-  margin-left: -75px;
-  top: 150px;
-  -webkit-transition: all 200ms ease-out;
-  -moz-transition: all 200ms ease-out;
-  -o-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-}

src/components/Product/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import './index.css'
+import './styles.css'
 
 const Product = ({product, compare}) =>
     <div key={product.id} className="col-3">

src/components/Product/styles.scss

@@ -0,0 +1,98 @@
+@import '../../styles/_variables.scss';
+$image-overlay-opacity: 0.7;
+$product-main-color: $green;
+
+.product {
+  cursor: pointer;
+  position: relative;
+  padding-bottom: 100px;
+  border-radius: 5px;
+  overflow: hidden;
+  transition: all 500ms ease-out;
+
+  &:hover {
+    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
+    .image_overlay {
+      opacity: $image-overlay-opacity;
+    }
+
+    .view_details {
+      opacity: 1;
+      width: 152px;
+      font-size: 15px;
+      margin-left: -75px;
+      top: 150px;
+      transition: all 200ms ease-out;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  &.compare {
+    .image_overlay {
+      opacity: $image-overlay-opacity;
+    }
+  }
+
+  .stats-container {
+    background: #fff;
+    padding: 25px 15px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+
+    .product_name {
+      font-size: 22px;
+      color: #393c45;
+    }
+
+    p {
+      font-size: 16px;
+      color: #b1b1b3;
+      margin: 0;
+    }
+
+    .product_price {
+      float: right;
+      color: $product-main-color;
+      font-size: 22px;
+      font-weight: 600;
+    }
+  }
+
+  .image_overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $product-main-color;
+    opacity: 0;
+    transition: all 200ms ease-out;
+  }
+
+  .view_details {
+    position: absolute;
+    top: 112px;
+    left: 50%;
+    margin-left: -85px;
+    border: 2px solid #fff;
+    color: #fff;
+    font-size: 19px;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: 700;
+    padding: 10px 0;
+    width: 172px;
+    opacity: 0;
+    transition: all 200ms ease-out;
+
+    &:hover {
+      background: #fff;
+      color: $product-main-color;
+      cursor: pointer;
+    }
+  }
+}

src/containers/App/index.js

@@ -1,9 +1,6 @@
 import React, {Component} from 'react';
-import Header from '../../components/Header'
 import {Route, Switch} from 'react-router-dom'
 
-import './style.css';
-
 import Home from '../Home';
 import NotFound from '../NotFound';
 
@@ -11,8 +8,6 @@ export default class App extends Component {
   render() {
     return (
       <div className="App">
-        <Header />
-
         <div className="container mt-4">
           <Switch>
             <Route exact path="/" component={Home}/>

src/index.js

@@ -10,7 +10,7 @@ import reducer from './reducers'
 import App from './containers/App'
 
 import 'bootstrap/dist/css/bootstrap.css'
-import './index.css'
+import './styles.css'
 
 const loggerMiddleware = createLogger()