scss integration

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;
+  }
+}