Merge branch 'main' into fix/Header

package.json

@@ -34,6 +34,7 @@
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.4.5",
     "react-redux": "^8.1.2",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.15.0",
     "react-table": "^7.8.0",
     "react-toastify": "^9.1.3",

src/components/AddProductForm/AddProductForm.jsx

@@ -14,7 +14,7 @@ import {
 import formatDate from '../../utils/formatDate';
 
 function AddProductForm({ data, closeModal, addProduct }) {
-  const [quantity, setQuantity] = useState(0);
+  const [quantity, setQuantity] = useState('');
 
   const amount = Math.round((quantity * data.calories) / 100);
   const date = formatDate(new Date());
@@ -28,12 +28,14 @@ function AddProductForm({ data, closeModal, addProduct }) {
 
         <label>
           <InputQuantity
+
             placeholder="grams"
             type="number"
             value={quantity}
             onChange={e => setQuantity(e.target.value)}
           />
-        </label>
+           </label>
+
       </InputContainer>
 
       <Calories>

src/components/AddProductForm/AddProductForm.styled.jsx

@@ -34,9 +34,12 @@ export const InputTitle = styled.input`
     width: 244px;
     height: 40px;
   }
+  
+
 `;
 
 export const InputQuantity = styled.input`
+  position: relative;
   width: 287px;
   height: 34px;
   padding: 8px 14px;
@@ -66,6 +69,10 @@ export const InputQuantity = styled.input`
     height: 40px;
     margin-top: 0;
   }
+
+  :focus-visible {
+    outline: 2px solid ${colors.orange};
+  }
 `;
 
 export const Calories = styled.p`

src/components/AuthForm/AuthForm.styled.jsx

@@ -3,8 +3,8 @@ import { colors, mq } from '../../utils';
 import { Form, Field } from 'formik';
 
 export const FormContainer = styled(Form)`
-  width: 335px;
   margin-top: 28px;
+
   ${mq.tablet} {
     margin-top: 32px;
     width: 364px;
@@ -15,10 +15,10 @@ export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 21px;
+  gap: 28px;
   margin-bottom: 28px;
   ${mq.tablet} {
-    gap: 24px;
+    gap: 32px;
     margin-bottom: 64px;
   }
 `;
@@ -55,6 +55,9 @@ export const TextInput = styled(Field)`
 
 export const Warning = styled.div`
   position: absolute;
+  ${mq.smallMobile} {
+    bottom: -24px;
+  }
 `;
 
 export const Error = styled.div`

src/components/ButtonIconForInput/ButtonIconForInput.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import { Button } from './ButtonIconForInput.styled';
 
-export default function ButtonIconForInput({ children, onClick, right, type }) {
+export default function ButtonIconForInput({ children, onClick, right, type, }) {
   return (
-    <Button onClick={onClick} right={right} type={type}>
+    <Button onClick={onClick}  right={right} type={type} > 
       {children}
     </Button>
   );
@@ -12,6 +12,6 @@ export default function ButtonIconForInput({ children, onClick, right, type }) {
 ButtonIconForInput.propTypes = {
   // onClick: PropTypes.func.isRequired,
   right: PropTypes.string,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
   children: PropTypes.object.isRequired,
 };

src/components/DailyStatsCards/DailyStatsCards.styled.jsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { colors, mq } from '../../utils';
 
-export const CardWrap = styled.div`
+export const CardWrap = styled.li`
   box-sizing: border-box;
   border: 1px solid;
 

src/components/DiaryStatisticsList/DiaryStatisticsList.jsx

@@ -10,8 +10,11 @@ import {
   consumedCalories,
   doneExercisesTime,
 } from '../../redux/diary/selectors';
+import { useMediaQuery } from 'react-responsive';
 
 const DairyStatisticList = () => {
+  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1439 });
+
   const dayliTime = useSelector(selectDailyTime);
   const dailyСalories = useSelector(selectDailyСalories);
   const burnCalories = useSelector(burnedCalories);
@@ -31,7 +34,45 @@ const DairyStatisticList = () => {
   let resultTime = dayliTime - result.minutes;
   let theRestOfTheСalories = dailyСalories - consumCalories;
 
-  return (
+  return isTablet ? (
+    <List>
+      {' '}
+      <DailyStatsCards
+        icon="fork-and-knife"
+        fill="true"
+        label="Daily calorie intake"
+        keyValue={dailyСalories}
+      ></DailyStatsCards>
+      <DailyStatsCards
+        icon="apple"
+        label="Сalories consumed"
+        keyValue={consumCalories}
+      ></DailyStatsCards>
+      <DailyStatsCards
+        icon="bubble"
+        label="The rest of the calories"
+        keyValue={theRestOfTheСalories}
+        border={theRestOfTheСalories < 0 ? 'red' : 'default'}
+      ></DailyStatsCards>
+      <DailyStatsCards
+        icon="barbell"
+        fill="true"
+        label="Daily norm of sports"
+        keyValue={dayliTime + ' min'}
+      ></DailyStatsCards>
+      <DailyStatsCards
+        icon="fire"
+        label="Сalories burned"
+        keyValue={burnCalories}
+      ></DailyStatsCards>
+      <DailyStatsCards
+        icon="runningMan"
+        label="The rest of sports"
+        keyValue={resultTime + ' min'}
+        border={resultTime > dayliTime ? 'green' : 'default'}
+      ></DailyStatsCards>
+    </List>
+  ) : (
     <List>
       <DailyStatsCards
         icon="fork-and-knife"

src/components/DiaryStatisticsList/DiaryStatisticsList.styled.jsx

@@ -3,16 +3,16 @@ import { mq, colors } from '../../utils';
 
 export const List = styled.ul`
   display: grid;
-  width: 335px;
   gap: 13px;
 
   grid-template-columns: repeat(2, 1fr);
 
   ${mq.tablet} {
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
-
     width: 593px;
+
+
   }
   ${mq.desktop} {
     grid-template-columns: repeat(2, 1fr);

src/components/EmptyProductList/EmptyProductList.jsx

@@ -0,0 +1,16 @@
+import {TextContainer, MainText, AccentText } from './EmptyProductList.styled';
+
+import PropTypes from 'prop-types';
+
+const EmptyProductList = () => {
+  return (
+   <TextContainer>
+    <MainText> <AccentText>Sorry, no results were found</AccentText> for the product filters you selected. You may want to consider other search options to find the product you want. Our range is wide and you have the opportunity to find more options that suit your needs.</MainText>
+     <AccentText>Try changing the search parameters.</AccentText>
+    </TextContainer>
+  );
+};
+
+
+
+export default EmptyProductList;

src/components/EmptyProductList/EmptyProductList.styled.jsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { mq } from '../../utils';
+
+export const TextContainer = styled.div`
+  
+  ${mq.tablet} {
+   width: 580px;
+   margin-top: 45px;
+  }
+  ${mq.desktop} {
+    margin-top: 100px;
+  }
+`;
+export const MainText = styled.p`
+color: rgba(239, 237, 232, 0.30);
+margin-bottom: 16px;
+font-size: 14px;
+line-height: 1.28;
+  ${mq.tablet} {
+  
+  }
+  ${mq.desktop} {
+  
+  }
+`;
+export const AccentText = styled.span`
+color:  #E6533C;
+
+font-size: 14px;
+
+line-height: 1.28; 
+  ${mq.tablet} {
+    gap: 32px;
+  }
+  ${mq.desktop} {
+
+  }
+`;

src/components/ExercisesItem/ExercisesItem.styled.js

@@ -8,9 +8,7 @@ export const Item = styled.li`
     margin-bottom: 0px;
   }
 
-  // &:nth-child(10) {
-  //   margin-bottom: 0;
-  // }
+
 
   ${mq.tablet} {
     flex-basis: calc((100% - 32px) / 3);