diff --git a/src/components/productDisplay/additives/additives.css b/src/components/productDisplay/additives/additives.css new file mode 100644 index 0000000..8a60b37 --- /dev/null +++ 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 index 07f57ad..26fdef0 100644 --- 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 ( <> -