Merge pull request #142 from VasylievYurii/BloodCircle

Fix blood circles in Diary & Product
VasylievYurii · Nov 20, 2023 · fae90de · fae90de
2 parents 8e9ddd8 + 1fab5d1
commit fae90de
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 7 deletions.
diff --git a/src/components/DayProductItem/DayProductItem.jsx b/src/components/DayProductItem/DayProductItem.jsx
@@ -54,7 +54,7 @@ const DayProductItem = ({ meal, points }) => {
           <DiarySupTitle>Recommend</DiarySupTitle>
           <ValueBox $maxwidth='76px' display='flex' width={(points < 1440 && points >= 768) ? '80px' : ((points >= 1440) ? '110px' : '100%')}>
             <Circle color={`${groupBloodNotAllowed[blood]}`} />
-            {groupBloodNotAllowed[blood] ? 'Yes' : 'No'}
+            {groupBloodNotAllowed[blood] ? 'No' : 'Yes'}
           </ValueBox>
         </DescriptionItem>
         <DiaryTrashButton

diff --git a/src/components/DayProductItem/DayProductItem.styled.js b/src/components/DayProductItem/DayProductItem.styled.js
@@ -6,5 +6,5 @@ export const Circle = styled.div`
   height: 14px;
   border-radius: 10px;
   background: ${(props) =>
-  props.color === 'true' ? 'var(--color-approved-two)': 'var(--color-wrong-two)'|| 'var(--color-back-two)'};
+  props.color === 'false' ? 'var(--color-approved-two)': 'var(--color-wrong-two)'|| 'var(--color-back-two)'};
 `;
diff --git a/src/components/ProductsItem/ProductsItem.jsx b/src/components/ProductsItem/ProductsItem.jsx
@@ -25,7 +25,7 @@ const ProductsItem = ({
 }) => {
   const [showModal, setShowModal] = useState(false);
   const [showModalSuccess, setShowModalSuccess] = useState(false);
-
+console.log('recommended', recommended);
   const toggleModal = () => {
     setShowModal((prevState) => !prevState);
   };
@@ -57,8 +57,7 @@ const ProductsItem = ({
           <LeftTopLabelWrapper>
             <p>DIET</p>
           </LeftTopLabelWrapper>
-          <RightTopBlockWrapper>
-            {/* <RightTopBlockWrapper isrecommended={`${recommended}`}> */}
+            <RightTopBlockWrapper color={`${recommended}`}>
             <div></div>
             <p>{recommended ? `Recommended` : `Not recommended`}</p>
             <AddButton type="button" onClick={toggleModal}>

diff --git a/src/components/ProductsItem/ProductsItem.styled.js b/src/components/ProductsItem/ProductsItem.styled.js
@@ -42,7 +42,7 @@ export const RightTopBlockWrapper = styled.div`
 
   > div {
     background-color: ${(props) =>
-      Boolean(props.isrecommended)
+      (props.color === 'true')
         ? 'var(--color-approved-two)'
         : 'var(--color-wrong-two)'};
     display: block;

diff --git a/src/components/ProductsList/ProductsList.jsx b/src/components/ProductsList/ProductsList.jsx
@@ -26,7 +26,7 @@ const ProductsList = () => {
   const category = useSelector(selectCategoryFilter);
   const recommended = useSelector(selectRecommendedFilter);
   const blood = useSelector(selectUserBlood);
-
+console.log('blood', blood);
   const products = useSelector(selectProducts);
   const total = useSelector(selectProductsTotal);