fix(Card): card difficulty bedge color

src/__tests__/__snapshots__/Card.test.js.snap

@@ -28,7 +28,7 @@ exports[`renders a simple Card 1`] = `
     type="button"
   >
     <div
-      className="makeStyles-tag-6"
+      className="makeStyles-tag-6 makeStyles-tag-7"
     />
     <img
       className="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img"

src/components/Card/index.js

@@ -19,7 +19,17 @@ import clsx from 'clsx';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 function Card({ data, onClickCard, onClickLike, ...others }) {
-  const classes = useStyles();
+  const {
+    description,
+    difficulty,
+    preparation_time,
+    portions,
+    status,
+    title,
+    logo,
+  } = data;
+
+  const classes = useStyles({ difficulty });
   const [expanded, setExpanded] = React.useState(false);
   const [like, setLike] = React.useState(false);
 
@@ -37,16 +47,6 @@ function Card({ data, onClickCard, onClickLike, ...others }) {
     if (onClickCard) onClickCard(data);
   };
 
-  const {
-    description,
-    difficulty,
-    preparation_time,
-    portions,
-    status,
-    title,
-    logo,
-  } = data;
-
   const difficultyObject = {
     1: 'Fácil',
     2: 'Fácil',
@@ -62,7 +62,8 @@ function Card({ data, onClickCard, onClickLike, ...others }) {
         style={{ position: 'relative' }}
       >
         <div className={classes.tag}>
-          {status || difficultyObject[difficulty]}
+          {/* TODO: Levar em consideracao status */}
+          {difficultyObject[difficulty]}
         </div>
         <CardMedia
           component="img"

src/components/Card/styles.js

 import { makeStyles } from '@material-ui/styles';
 
+function getDifficultyColor(difficulty) {
+  const colorMap = {
+    1: '#52944F',
+    2: '#52944F',
+    3: '#FFCE00',
+    4: '#FFCE00',
+    5: '#FF6E61',
+  };
+
+  return colorMap[difficulty];
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     borderRadius: 20,
@@ -34,7 +46,7 @@ const useStyles = makeStyles(theme => ({
     top: 10,
     left: 10,
     color: 'white',
-    backgroundColor: '#FF6E61',
+    backgroundColor: props => getDifficultyColor(props.difficulty),
     padding: '6px 10px',
     borderRadius: 21,
     letterSpacing: 0.9,