Adds colors to risk values

moigonzalez · Oct 28, 2019 · fe06e73 · fe06e73
1 parent 815da3c
commit fe06e73
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/src/components/productDisplay/additives/additives.css b/src/components/productDisplay/additives/additives.css
@@ -0,0 +1,27 @@
+.additives__section {
+  margin-top: 20px;
+}
+
+.productDisplay__additive + .productDisplay__additive {
+  margin-top: 10px;
+}
+
+.additive__name {
+  font-weight: bold;
+}
+
+.additive__code {
+  text-transform: uppercase;
+}
+
+.additive__risk--value.high {
+  color: #ff6347;
+}
+
+.additive__risk--value.moderate {
+  color: #ffa500;
+}
+
+.additive__risk--value.low {
+  color: #3cb371;
+}
diff --git a/src/components/productDisplay/additives/index.js b/src/components/productDisplay/additives/index.js
@@ -1,11 +1,13 @@
 import React from 'react';
 
+import './additives.css';
+
 import ADDITIVES_DATA from "./additives.json";
 
 const Additives = (product) => {
   const setAdditives = () => {
-    if (localStorage.getItem("ADDITIVES") === null) {
-      localStorage.setItem("ADDITIVES", JSON.stringify(ADDITIVES_DATA));
+    if (localStorage.getItem('ADDITIVES') === null) {
+      localStorage.setItem('ADDITIVES', JSON.stringify(ADDITIVES_DATA));
     }
     return JSON.parse(localStorage.getItem("ADDITIVES"));
   };
@@ -24,11 +26,11 @@ const Additives = (product) => {
     }
     return (
       <>
-        <div>
-          Name: {x.name}
-        </div>
-        <div>
-          Risk: {x.risk}
+        <span className="additive__name">
+          - {x.name}
+        </span>
+        <div className="additive__risk">
+          Risk: <span className={`additive__risk--value ${x.risk.toLowerCase()}`}>{x.risk}</span>
         </div>
         <div>
           Function: {x.function}
@@ -46,13 +48,14 @@ const Additives = (product) => {
       }
       return product.product.additives().map((x) =>
         <div key={x} className="productDisplay__additive">
-          <div><b>{x}</b></div>
-          <div>{getAdditiveData(getAdditive(normalize(x)))}</div>
+          <div><b className="additive__name additive__code">{x} </b>
+            {getAdditiveData(getAdditive(normalize(x)))}
+          </div>
         </div>
     );
   }
 
-  return (<section className="productDisplay__section">
+  return (<section className="additives__section">
     <h3 className="productDisplay__sectionTitle">Additives</h3>
     {displayAdditives()}
   </section>);

diff --git a/src/components/productDisplay/productDisplay.css b/src/components/productDisplay/productDisplay.css
@@ -43,14 +43,6 @@
   margin-bottom: 10px;
 }
 
-.productDisplay__additive {
-  text-transform: uppercase;
-}
-
-.productDisplay__additive + .productDisplay__additive{
-  margin-left: 5px;
-}
-
 .productDisplay__list--item {
   margin-top: 10px;
 }