diff --git a/src/components/CalendarElement/CalendarElement.jsx b/src/components/CalendarElement/CalendarElement.jsx
index 8799cf4..a8f5a20 100644
--- a/src/components/CalendarElement/CalendarElement.jsx
+++ b/src/components/CalendarElement/CalendarElement.jsx
@@ -13,6 +13,7 @@ import DaysGeneralStats from '../DaysGeneralStats/DaysGeneralStats';
import { useDispatch, useSelector } from 'react-redux';
import {
selectMonthWaterData,
+ selectorWaterInfo,
showDaysGenStats,
} from '../../store/water/selectors.js';
import { changeShowDaysStats } from '../../store/water/waterSlice';
@@ -28,6 +29,8 @@ const CalendarElement = () => {
const [currentDate, setCurrentDate] = useState(new Date());
const [chosenDay, setChosenDay] = useState(0);
const hero = useSelector(selectUser);
+ const percentageToday = useSelector(selectorWaterInfo);
+ const thisToday = new Date();
const changeMonth = (direction) => {
setCurrentDate((prevDate) => {
@@ -137,6 +140,10 @@ const CalendarElement = () => {
}
}
+ function correctPercentage(percentage) {
+ return percentage >= 100 ? 100 : percentage || 0;
+ }
+
return (
<>
{monthWaterData && (
@@ -174,16 +181,19 @@ const CalendarElement = () => {
{item.day}
- {item?.waterVolPercentage >= 100
- ? 100
- : item?.waterVolPercentage || 0}
+ {thisToday.getDate() === item.day &&
+ thisToday.getMonth() + 1 === month
+ ? correctPercentage(percentageToday)
+ : correctPercentage(item?.waterVolPercentage) || 0}
%
+
{showDaysStats && item.day === chosenDay && (
+ $percentageToday < 100 || $percentageToday?.length === 0
+ ? '1px solid #FF9D43'
+ : 'none'};
+ border: ${({ $percentageToday }) =>
+ $percentageToday >= 100 ? '1px solid #407bff' : ''};
}
}
@@ -110,7 +116,7 @@ export const DayStyles = styled.li`
? '1px solid #FF9D43'
: 'none'};
border: ${({ $percentage }) =>
- $percentage > 100 ? '1px solid #407bff' : ''};
+ $percentage >= 100 ? '1px solid #407bff' : ''};
font-size: 14px;
line-height: 1.29;