From c7adbfcbb18c0b7fed716796676ac7be830d6758 Mon Sep 17 00:00:00 2001
From: OlenaIa <121794911+OlenaIa@users.noreply.github.com>
Date: Sat, 18 Nov 2023 14:02:51 +0200
Subject: [PATCH] FixBig Nan and adaptive

---
 src/components/DayDashboard/DayDashboard.jsx  |  7 +++---
 .../DayDashboard/DayDashboard.styled.js       |  5 ++++
 src/components/DayExercises/DayExercises.jsx  | 12 +++++-----
 .../DayExercisesItem/DayExercisesItem.jsx     | 24 +++++++++----------
 src/pages/Diary.jsx                           |  5 ++++
 src/pages/Diary/Diary.styled.js               |  4 ++++
 .../userIndicators/userIndicatorsSlice.js     |  5 +++-
 7 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/components/DayDashboard/DayDashboard.jsx b/src/components/DayDashboard/DayDashboard.jsx
index 32cd1e66..e4b15f83 100644
--- a/src/components/DayDashboard/DayDashboard.jsx
+++ b/src/components/DayDashboard/DayDashboard.jsx
@@ -8,6 +8,7 @@ import {
   WrapDashText,
   DashIconExclamationWrapper,
   IconWrapper,
+  Message,
 } from './DayDashboard.styled';
 import { useSelector } from 'react-redux';
 import {
@@ -60,7 +61,7 @@ const DayDashboard = () => {
             </DashIconWrapper>
             Daily calorie intake
           </DashTitle>
-          {dayCalories}
+          {dayCalories !== 0 ? dayCalories : <Message>Please enter your details in the profile</Message>}
         </DashIndicators>
         <DashIndicators color="var(--color-main-one)">
           <DashTitle color="rgba(239, 237, 232, 0.80)">
@@ -98,7 +99,7 @@ const DayDashboard = () => {
           </DashTitle>
           {burnCalories}
         </DashIndicators>
-        <DashIndicators $borderColor={borderColorRestCalories}>
+        <DashIndicators $border={borderColorRestCalories}>
           <DashTitle>
             <DashIconWrapper
               fill="var(--color-main-two)"
@@ -110,7 +111,7 @@ const DayDashboard = () => {
           </DashTitle>
           {restCalories}
         </DashIndicators>
-        <DashIndicators $borderColor={borderColorRestWorkoutsTime}>
+        <DashIndicators $border={borderColorRestWorkoutsTime}>
           <DashTitle>
             <DashIconWrapper
               fill="var(--color-main-two)"
diff --git a/src/components/DayDashboard/DayDashboard.styled.js b/src/components/DayDashboard/DayDashboard.styled.js
index 42e17077..73616993 100644
--- a/src/components/DayDashboard/DayDashboard.styled.js
+++ b/src/components/DayDashboard/DayDashboard.styled.js
@@ -80,6 +80,11 @@ export const DashTitle = styled.h3`
   }
 `;
 
+export const Message = styled.p`
+    font-size: 12px;
+    font-weight: 400;
+`;
+
 export const WrapDashText = styled.div`
   display: flex;
   gap: 8px;
diff --git a/src/components/DayExercises/DayExercises.jsx b/src/components/DayExercises/DayExercises.jsx
index 0f4a1e06..46755ce3 100644
--- a/src/components/DayExercises/DayExercises.jsx
+++ b/src/components/DayExercises/DayExercises.jsx
@@ -44,22 +44,22 @@ const DayExercises = () => {
       {workouts.length !== 0 ? (
         <>
           <WrapTitlesTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '206px' : '212px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '90px' : '115px'}>
               Body Part
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '130px' : '166px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '132px' : '157px'}>
               Equipment
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '130px' : '166px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '128px' : '131px'}>
               Name
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '92px' : '105px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '84px' : '106px'}>
               Target
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '92px' : '105px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '78px' : '91px'}>
               Burned Calories
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '82px' : '110px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '72px' : '82px'}>
               Time
             </DiarySupTitleTablet>
           </WrapTitlesTablet>
diff --git a/src/components/DayExercisesItem/DayExercisesItem.jsx b/src/components/DayExercisesItem/DayExercisesItem.jsx
index d81a4afa..ec228008 100644
--- a/src/components/DayExercisesItem/DayExercisesItem.jsx
+++ b/src/components/DayExercisesItem/DayExercisesItem.jsx
@@ -29,34 +29,34 @@ const DayExercisesItem = ({ workout, points }) => {
     <DiaryCard key={_id}>     
       <DescriptionItem>
         <DiarySupTitle>Body Part</DiarySupTitle>
-        <ValueBox width={(points < 1440 && points >= 768) ? '204px' : ((points >= 1440) ? '212px' : '100%')}>{bodyPart}</ValueBox>
+        <ValueBox width={(points < 1440 && points >= 768) ? '90px' : ((points >= 1440) ? '115px' : '100%')}>
+          {bodyPart}</ValueBox>
       </DescriptionItem>
       <DescriptionItem>
         <DiarySupTitle>Equipment</DiarySupTitle>
-        <ValueBox width={(points < 1440 && points >= 768) ? '128px' : ((points >= 1440) ? '166px' : '100%')}>{equipment}</ValueBox>
+        <ValueBox width={(points < 1440 && points >= 768) ? '132px' : ((points >= 1440) ? '157px' : '100%')}>
+          {equipment}</ValueBox>
           </DescriptionItem>
           <DescriptionItem>
         <DiarySupTitle>Name</DiarySupTitle>
-        <ValueBox width={(points < 1440 && points >= 768) ? '128px' : ((points >= 1440) ? '166px' : '100%')}>{name}</ValueBox>
+        <ValueBox width={(points < 1440 && points >= 768) ? '128px' : ((points >= 1440) ? '131px' : '100%')}>
+          {name}</ValueBox>
       </DescriptionItem>
       <WrapLastDescrBox>
         <DescriptionItem>
           <DiarySupTitle>Target</DiarySupTitle>
-          <ValueBox width={(points < 1440 && points >= 768) ? '90px' : ((points >= 1440) ? '105px' : '100%')}>
-            {target}
-          </ValueBox>
+          <ValueBox width={(points < 1440 && points >= 768) ? '84px' : ((points >= 1440) ? '106px' : '100%')}>
+            {target}</ValueBox>
         </DescriptionItem>
         <DescriptionItem>
           <DiarySupTitle size="80px">Burned Calories</DiarySupTitle>
-          <ValueBox width={(points < 1440 && points >= 768) ? '90px' : ((points >= 1440) ? '105px' : '100%')}>
-            {burnedCalories}
-          </ValueBox>
+          <ValueBox width={(points < 1440 && points >= 768) ? '78px' : ((points >= 1440) ? '91px' : '100%')}>
+            {burnedCalories}</ValueBox>
         </DescriptionItem>
         <DescriptionItem>
           <DiarySupTitle>Time</DiarySupTitle>
-          <ValueBox width={(points < 1440 && points >= 768) ? '80px' : ((points >= 1440) ? '110px' : '100%')}>
-            {time}
-          </ValueBox>
+          <ValueBox width={(points < 1440 && points >= 768) ? '72px' : ((points >= 1440) ? '82px' : '100%')}>
+            {time}</ValueBox>
         </DescriptionItem>
         <DiaryTrashButton
           type="button"
diff --git a/src/pages/Diary.jsx b/src/pages/Diary.jsx
index 33015fc3..e1deb5ed 100644
--- a/src/pages/Diary.jsx
+++ b/src/pages/Diary.jsx
@@ -14,6 +14,7 @@ import {
   DiaryWrapContent,
   DiaryWrapTitle,
 } from './Diary/Diary.styled';
+import { getIndicatorsThunk } from '../redux/userIndicators/userIndicOperations';
 
 const Diary = () => {
   const dispatch = useDispatch();
@@ -44,6 +45,10 @@ const Diary = () => {
     dispatch(getDiaryWorkoutThunk(selectedDate));
   }, [selectedDate]);
 
+  useEffect(() => {
+    dispatch(getIndicatorsThunk());
+  }, []);
+
   return (
     <SectionTemplate>
       <DiaryWrapTitle>
diff --git a/src/pages/Diary/Diary.styled.js b/src/pages/Diary/Diary.styled.js
index 82676014..8832b739 100644
--- a/src/pages/Diary/Diary.styled.js
+++ b/src/pages/Diary/Diary.styled.js
@@ -120,7 +120,11 @@ export const WrapTitlesTablet = styled.ul`
 `;
 
 export const DiarySupTitleTablet = styled.li`
+  display: inline-block;
   width: ${(props) => props.width || '100%'};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const DiaryLists = styled.ul`
diff --git a/src/redux/userIndicators/userIndicatorsSlice.js b/src/redux/userIndicators/userIndicatorsSlice.js
index 183c515c..538ef127 100644
--- a/src/redux/userIndicators/userIndicatorsSlice.js
+++ b/src/redux/userIndicators/userIndicatorsSlice.js
@@ -2,7 +2,10 @@ import { createSlice } from '@reduxjs/toolkit';
 import { getIndicatorsThunk } from './userIndicOperations';
 
 const initialIndState = {
-  indicators: {},
+  indicators: {
+        targetBmr: 0,
+        targetTime: 110
+  },
   isLoading: false,
   error: null,
 };