diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 1117261..83b3943 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -1,15 +1,16 @@ -import React, { useState, useEffect } from "react"; -import * as Styled from "./Calendar.styled"; -import { useAppDispatch } from "../../redux/redux_ts/hook"; -import { getAmountMonthlyThunk } from "../../redux/water/water.operations"; -import { useSelector } from "react-redux"; +import React, { useState, useEffect } from 'react'; +import * as Styled from './Calendar.styled'; +import { useAppDispatch } from '../../redux/redux_ts/hook'; +import { getAmountMonthlyThunk } from '../../redux/water/water.operations'; +import { useSelector } from 'react-redux'; import { selectAmountDaily, selectAmountMonthly, -} from "../../redux/water/waterSelectors"; -import CalendarModal from "./CalendarModal"; -import { useTranslation } from "react-i18next"; -import { selectDailyNorma } from "../../redux/auth/authSelectors"; +} from '../../redux/water/waterSelectors'; +import { addScrollLock, removeScrollLock } from '../Modal/services/services'; +import CalendarModal from './CalendarModal'; +import { useTranslation } from 'react-i18next'; +import { selectDailyNorma } from '../../redux/auth/authSelectors'; export interface Day { day: number; @@ -32,7 +33,7 @@ const Calendar: React.FC = () => { const data = useSelector(selectAmountDaily); const id = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1) .toString() - .padStart(2, "0")}`; + .padStart(2, '0')}`; const dispatch = useAppDispatch(); useEffect(() => { @@ -48,7 +49,7 @@ const Calendar: React.FC = () => { for (let i = 1; i <= lastDay; i++) { daysArray.push({ day: i, - month: date.toLocaleString("en-US", { month: "long" }), + month: date.toLocaleString('en-US', { month: 'long' }), }); } @@ -57,7 +58,7 @@ const Calendar: React.FC = () => { const handlePrevMonth = (): void => { setCurrentDate( - (prevDate) => new Date(prevDate.getFullYear(), prevDate.getMonth() - 1) + prevDate => new Date(prevDate.getFullYear(), prevDate.getMonth() - 1) ); setSelectedDay(null); }; @@ -77,6 +78,7 @@ const Calendar: React.FC = () => { if (selectedDay === day.day) { closeModal(); setSelectedDay(null); + removeScrollLock(); return; } @@ -118,17 +120,19 @@ const Calendar: React.FC = () => { setSelectedDay(day.day); setModalContent(day); - document.documentElement.style.setProperty("--modal-top", `${modalTop}px`); + document.documentElement.style.setProperty('--modal-top', `${modalTop}px`); document.documentElement.style.setProperty( - "--modal-left", + '--modal-left', `${modalLeft}px` ); setIsModalOpen(true); + addScrollLock(); }; const closeModal = (): void => { setIsModalOpen(false); + removeScrollLock(); }; const getCurrentDayInfo = (day: IDateInfo) => { @@ -141,7 +145,7 @@ const Calendar: React.FC = () => { const currentDay = day.day.toString(); const index = amountMonth.month - .map((obj) => obj.date.slice(-2).trim()) + .map(obj => obj.date.slice(-2).trim()) .indexOf(currentDay); if (index === -1) { @@ -175,17 +179,17 @@ const Calendar: React.FC = () => { return (
-

{t("homepage.h2Month")}

+

{t('homepage.h2Month')}

- {currentDate.toLocaleString("en-US", { month: "long" })},{" "} + {currentDate.toLocaleString('en-US', { month: 'long' })},{' '} {currentDate.getFullYear()}
{currentDate.getMonth() === new Date().getMonth() && @@ -211,13 +215,13 @@ const Calendar: React.FC = () => {
  • {day.percent !== undefined && day.percent < 100 ? ( handleDayClick(day)} aria-disabled={isDisabled} > @@ -226,8 +230,8 @@ const Calendar: React.FC = () => { ) : ( handleDayClick(day)} aria-disabled={isDisabled} > @@ -237,8 +241,8 @@ const Calendar: React.FC = () => {

    {`${ day.percent !== undefined && day.percent >= 100 diff --git a/src/components/Calendar/CalendarModal.tsx b/src/components/Calendar/CalendarModal.tsx index 87ea06f..bf0a8d9 100644 --- a/src/components/Calendar/CalendarModal.tsx +++ b/src/components/Calendar/CalendarModal.tsx @@ -1,8 +1,9 @@ -import { FC, useEffect, useRef } from "react"; -import * as Styled from "./Calendar.styled"; -import { useOutsideClick } from "../../hooks/useOutsideClick"; -import { Day } from "./Calendar"; -import { useTranslation } from "react-i18next"; +import { FC, useEffect, useRef } from 'react'; +import * as Styled from './Calendar.styled'; +import { useOutsideClick } from '../../hooks/useOutsideClick'; +import { Day } from './Calendar'; +import { useTranslation } from 'react-i18next'; +import { removeScrollLock } from '../Modal/services/services'; interface ICalendarModal { setIsModalOpen(state: boolean): void; @@ -21,37 +22,38 @@ const CalendarModal: FC = ({ const modalRef = useRef(null); useEffect(() => { const handleEscapeKey = (event: Event): void => { - if (event instanceof KeyboardEvent && event.key === "Escape") { + if (event instanceof KeyboardEvent && event.key === 'Escape') { closeModal(); } }; - window.addEventListener("keydown", handleEscapeKey); + window.addEventListener('keydown', handleEscapeKey); return () => { - window.removeEventListener("keydown", handleEscapeKey); + window.removeEventListener('keydown', handleEscapeKey); }; }, [closeModal]); useOutsideClick(modalRef, () => { if (isModalOpen) { setIsModalOpen(false); + removeScrollLock(); } }); return ( - +

    {`${modalContent?.day}, ${modalContent?.month}`}

    - {t("calendarModal.daily")} + {t('calendarModal.daily')} {modalContent?.dailyNorma}

    - {t("calendarModal.fulfill")} + {t('calendarModal.fulfill')} {modalContent?.percent !== undefined && modalContent?.percent >= 100 ? 100 @@ -60,7 +62,7 @@ const CalendarModal: FC = ({

    - {t("calendarModal.serve")} + {t('calendarModal.serve')} {modalContent?.amountOfWater}

    diff --git a/src/components/DailyNorma/DailyNorma.tsx b/src/components/DailyNorma/DailyNorma.tsx index ba3344b..c7366b6 100644 --- a/src/components/DailyNorma/DailyNorma.tsx +++ b/src/components/DailyNorma/DailyNorma.tsx @@ -1,6 +1,6 @@ -import { useState } from "react"; -import Modal from "../Modal/Modal"; -import DailyNormaModal from "./DailyNormaModal"; +import { useState } from 'react'; +import Modal from '../Modal/Modal'; +import DailyNormaModal from './DailyNormaModal'; import { EditButton, SpanNorma, @@ -8,40 +8,48 @@ import { Wrapper, WrapperButton, WrapperImg, -} from "./DailyNorma.styled"; -import { useSelector } from "react-redux"; -import { selectDailyNorma } from "../../redux/auth/authSelectors"; -import { useTranslation } from "react-i18next"; +} from './DailyNorma.styled'; +import { useSelector } from 'react-redux'; +import { selectDailyNorma } from '../../redux/auth/authSelectors'; +import { useTranslation } from 'react-i18next'; +import { addScrollLock, removeScrollLock } from '../Modal/services/services'; const DailyNorma: React.FC = () => { const [visible, setVisible] = useState(false); - const toggleModal = () => { - setVisible(!visible); - }; - const waterRate = useSelector(selectDailyNorma); const { t } = useTranslation(); return ( <> - {t("homepage.h3DailyNorma")} + {t('homepage.h3DailyNorma')} - {waterRate} {t("homepage.litres")} + {waterRate} {t('homepage.litres')} {visible && ( - + { + setVisible(false); + removeScrollLock(); + }} + /> )} - - {t("homepage.editButton")} + { + setVisible(true); + addScrollLock(); + }} + > + {t('homepage.editButton')} diff --git a/src/components/Header/SettingModal/SettingModal.tsx b/src/components/Header/SettingModal/SettingModal.tsx index b7deecc..307e935 100644 --- a/src/components/Header/SettingModal/SettingModal.tsx +++ b/src/components/Header/SettingModal/SettingModal.tsx @@ -1,13 +1,13 @@ -import React, { useState } from "react"; -import { useSelector } from "react-redux"; -import { SubmitHandler, useForm } from "react-hook-form"; -import Icon from "../../Icon/Icon"; -import { selectUser } from "../../../redux/auth/authSelectors"; -import { useAppDispatch } from "../../../redux/redux_ts/hook"; +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; +import { SubmitHandler, useForm } from 'react-hook-form'; +import Icon from '../../Icon/Icon'; +import { selectUser } from '../../../redux/auth/authSelectors'; +import { useAppDispatch } from '../../../redux/redux_ts/hook'; import { updateUserAvatarThunk, updateUserInfoThunk, -} from "../../../redux/auth/auth.operations"; +} from '../../../redux/auth/auth.operations'; import { FormGenderWrap, FormSettingStyled, @@ -20,15 +20,16 @@ import { BtnSubmit, FormUserWrap, MainInfoWrap, -} from "./SettingModal.styled"; -import { toast } from "react-toastify"; -import AvatarForm from "./Avatar/AvatarForm"; -import { useTranslation } from "react-i18next"; -import i18n from "../../../i18n/i18n"; +} from './SettingModal.styled'; +import { toast } from 'react-toastify'; +import AvatarForm from './Avatar/AvatarForm'; +import { useTranslation } from 'react-i18next'; +import i18n from '../../../i18n/i18n'; +import { removeScrollLock } from '../../Modal/services/services'; type SettingForm = { avatar: File | null; - gender: "woman" | "man"; + gender: 'woman' | 'man'; name: string; email: string; password?: string; @@ -41,10 +42,10 @@ const SettingModal: React.FC<{ setVisible: (boolean: boolean) => void }> = ({ }) => { const [file, setFile] = useState(null); - const [passwordToggle, setPasswordToggle] = useState("password"); - const [newPasswordToggle, setNewPasswordToggle] = useState("password"); + const [passwordToggle, setPasswordToggle] = useState('password'); + const [newPasswordToggle, setNewPasswordToggle] = useState('password'); const [repeatNewPasswordToggle, setRepeatNewPasswordToggle] = - useState("password"); + useState('password'); const { t } = useTranslation(); const user = useSelector(selectUser); @@ -58,37 +59,35 @@ const SettingModal: React.FC<{ setVisible: (boolean: boolean) => void }> = ({ formState: { errors, isSubmitting }, } = useForm({ defaultValues: { - gender: user.gender || "woman", - name: user.name || "", + gender: user.gender || 'woman', + name: user.name || '', email: user.email, - password: "", - newPassword: "", - repeatNewPassword: "", + password: '', + newPassword: '', + repeatNewPassword: '', }, }); const handleTogglePassword = (field: string) => { - if (field === "password") { - setPasswordToggle((prev) => (prev === "password" ? "text" : "password")); - } else if (field === "newPassword") { - setNewPasswordToggle((prev) => - prev === "password" ? "text" : "password" - ); - } else if (field === "repeatNewPassword") { - setRepeatNewPasswordToggle((prev) => - prev === "password" ? "text" : "password" + if (field === 'password') { + setPasswordToggle(prev => (prev === 'password' ? 'text' : 'password')); + } else if (field === 'newPassword') { + setNewPasswordToggle(prev => (prev === 'password' ? 'text' : 'password')); + } else if (field === 'repeatNewPassword') { + setRepeatNewPasswordToggle(prev => + prev === 'password' ? 'text' : 'password' ); } }; - const onSubmit: SubmitHandler = async (data) => { + const onSubmit: SubmitHandler = async data => { let newData: Partial = {}; if (file) { await dispatch(updateUserAvatarThunk(file)) .unwrap() - .then(() => toast.success(`${t("settingModal.avatar")}`)) - .catch(() => toast.error(`${t("settingModal.notifyError")}`)); + .then(() => toast.success(`${t('settingModal.avatar')}`)) + .catch(() => toast.error(`${t('settingModal.notifyError')}`)); } if (data.gender !== user.gender || data.name !== user.name) { @@ -106,15 +105,16 @@ const SettingModal: React.FC<{ setVisible: (boolean: boolean) => void }> = ({ if (Object.keys(newData).length > 0) { await dispatch(updateUserInfoThunk(newData)) .unwrap() - .then(() => toast.success(`${t("settingModal.notify")}`)) - .catch(() => toast.error(`${t("settingModal.notifyError")}`)); + .then(() => toast.success(`${t('settingModal.notify')}`)) + .catch(() => toast.error(`${t('settingModal.notifyError')}`)); } setVisible(false); + removeScrollLock(); reset({ - password: "", - newPassword: "", - repeatNewPassword: "", + password: '', + newPassword: '', + repeatNewPassword: '', }); }; @@ -125,72 +125,72 @@ const SettingModal: React.FC<{ setVisible: (boolean: boolean) => void }> = ({ - {t("settingModal.gender")} + {t('settingModal.gender')} - {t("authPlaceholders.password")} + {t('authPlaceholders.password')} - {isSubmitting ? `${t("settingModal.saving")}` : `${t("addWater.save")}`} + {isSubmitting ? `${t('settingModal.saving')}` : `${t('addWater.save')}`} ); diff --git a/src/components/Header/UserLogoModal/UserLogoModal.tsx b/src/components/Header/UserLogoModal/UserLogoModal.tsx index d0e1a8e..3bfb271 100644 --- a/src/components/Header/UserLogoModal/UserLogoModal.tsx +++ b/src/components/Header/UserLogoModal/UserLogoModal.tsx @@ -1,14 +1,15 @@ -import { useRef, useState } from "react"; -import SettingModal from "../SettingModal/SettingModal"; -import Modal from "../../Modal/Modal"; -import UserLogoutModal from "../UserLogoutModal/UserLogoutModal"; -import { LogoWrapper } from "./UserLogoModal.styled"; -import { useOutsideClick } from "../../../hooks/useOutsideClick"; -import { useSelector } from "react-redux"; -import { selectUser } from "../../../redux/auth/authSelectors"; -import Icon from "../../Icon/Icon"; -import { useTranslation } from "react-i18next"; -import LanguageModal from "../Language/LanguageModal"; +import { useRef, useState } from 'react'; +import SettingModal from '../SettingModal/SettingModal'; +import Modal from '../../Modal/Modal'; +import UserLogoutModal from '../UserLogoutModal/UserLogoutModal'; +import { LogoWrapper } from './UserLogoModal.styled'; +import { useOutsideClick } from '../../../hooks/useOutsideClick'; +import { useSelector } from 'react-redux'; +import { selectUser } from '../../../redux/auth/authSelectors'; +import Icon from '../../Icon/Icon'; +import { useTranslation } from 'react-i18next'; +import LanguageModal from '../Language/LanguageModal'; +import { addScrollLock } from '../../Modal/services/services'; // import PrifileImageEmail from "./PrifileImageEmail"; const UserLogoModal = () => { @@ -44,48 +45,61 @@ const UserLogoModal = () => { > -
    +
    {settingsVisible && ( )} - {visible && ( )} - {languagesVisible && ( - + )} diff --git a/src/components/Header/UserLogoutModal/UserLogoutModal.tsx b/src/components/Header/UserLogoutModal/UserLogoutModal.tsx index 6b9d690..47effe1 100644 --- a/src/components/Header/UserLogoutModal/UserLogoutModal.tsx +++ b/src/components/Header/UserLogoutModal/UserLogoutModal.tsx @@ -1,13 +1,14 @@ -import { FC } from "react"; -import { logOutThunk } from "../../../redux/auth/auth.operations"; -import { useAppDispatch } from "../../../redux/redux_ts/hook"; +import { FC } from 'react'; +import { logOutThunk } from '../../../redux/auth/auth.operations'; +import { useAppDispatch } from '../../../redux/redux_ts/hook'; import { BtnCancel, BtnLogout, BtnWrapper, TextModal, -} from "./UserLogautModal.styled"; -import { useTranslation } from "react-i18next"; +} from './UserLogautModal.styled'; +import { useTranslation } from 'react-i18next'; +import { removeScrollLock } from '../../Modal/services/services'; interface Props { setVisible: (b: boolean) => void; @@ -18,14 +19,26 @@ const UserLogoutModal: FC = ({ setVisible }) => { const { t } = useTranslation(); return (
    - {t("logoutModal.really")} + {t('logoutModal.really')} - setVisible(false)}> - {t("deleteModal.cancel")} + { + setVisible(false); + removeScrollLock(); + }} + > + {t('deleteModal.cancel')} - dispatch(logOutThunk())}> - {t("header.logout")} + { + dispatch(logOutThunk()); + removeScrollLock(); + }} + > + {t('header.logout')}
    diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index cb082fb..e937a86 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -1,6 +1,7 @@ import { FC, ReactNode, useEffect } from 'react'; import { Overlay } from './Modal.styled'; import Icon from '../Icon/Icon'; +import { removeScrollLock } from './services/services'; interface Props { setVisible: (boolean: boolean) => void; @@ -24,6 +25,7 @@ const Modal: FC = ({ const handleKeyDown = (e: KeyboardEvent) => { if (e.code === 'Escape') { setVisible(false); + removeScrollLock(); } }; @@ -36,6 +38,7 @@ const Modal: FC = ({ const handleBackdropClick = (e: React.MouseEvent) => { if (e.currentTarget === e.target) { setVisible(false); + removeScrollLock(); } }; @@ -68,7 +71,12 @@ const Modal: FC = ({ } >

    {title}

    -
    diff --git a/src/components/Modal/services/services.ts b/src/components/Modal/services/services.ts new file mode 100644 index 0000000..223e989 --- /dev/null +++ b/src/components/Modal/services/services.ts @@ -0,0 +1,7 @@ +export const addScrollLock = () => { + document.body.classList.add('no-scroll'); +}; + +export const removeScrollLock = () => { + document.body.classList.remove('no-scroll'); +}; diff --git a/src/components/TeamModal/TeamModal.styled.ts b/src/components/TeamModal/TeamModal.styled.ts index 248a0fc..a1895f3 100644 --- a/src/components/TeamModal/TeamModal.styled.ts +++ b/src/components/TeamModal/TeamModal.styled.ts @@ -1,5 +1,5 @@ -import styled from "styled-components"; -import { device } from "../../css/deviceSize"; +import styled from 'styled-components'; +import { device } from '../../css/deviceSize'; export const SwipeImg = styled.img` display: block; @@ -26,19 +26,23 @@ export const SwipeInfo = styled.div` align-items: center; gap: 10px; width: 210px; - text-align: center; + margin: 0 auto; @media ${device.tablet} { + margin: 0; gap: 15px; } `; export const SwipeTitle = styled.h2` + width: 150px; + text-align: center; font-size: 20px; line-height: 1.33; font-weight: var(--bold-font-weight); @media ${device.tablet} { + width: 100%; font-size: 24px; } `; diff --git a/src/components/WaterList/DeleteWaterModal/DeleteWaterModal.tsx b/src/components/WaterList/DeleteWaterModal/DeleteWaterModal.tsx index 7e07596..2ce040e 100644 --- a/src/components/WaterList/DeleteWaterModal/DeleteWaterModal.tsx +++ b/src/components/WaterList/DeleteWaterModal/DeleteWaterModal.tsx @@ -1,11 +1,11 @@ -import { FC } from "react"; -import { useAppDispatch } from "../../../redux/redux_ts/hook"; +import { FC } from 'react'; +import { useAppDispatch } from '../../../redux/redux_ts/hook'; -import { DeleteWaterModalStyled } from "../WaterList.styled"; -import { deleteWaterThunk } from "../../../redux/water/water.operations"; - -import { useTranslation } from "react-i18next"; +import { DeleteWaterModalStyled } from '../WaterList.styled'; +import { deleteWaterThunk } from '../../../redux/water/water.operations'; +import { useTranslation } from 'react-i18next'; +import { removeScrollLock } from '../../Modal/services/services'; interface IProps { title: string; @@ -18,6 +18,7 @@ const DeleteWaterModal: FC = ({ closeModal, _id }) => { const dispatch = useAppDispatch(); const handleCancel = () => { closeModal(); + removeScrollLock(); }; const handleDeleteWater = (waterID: string) => { @@ -28,17 +29,20 @@ const DeleteWaterModal: FC = ({ closeModal, _id }) => { const { t } = useTranslation(); return ( -

    {t("deleteModal.sure")}

    +

    {t('deleteModal.sure')}

     diff --git a/src/components/WaterList/WaterList.tsx b/src/components/WaterList/WaterList.tsx index 434f011..0636d40 100644 --- a/src/components/WaterList/WaterList.tsx +++ b/src/components/WaterList/WaterList.tsx @@ -1,19 +1,20 @@ -import { useSelector } from "react-redux"; -import { useState } from "react"; +import { useSelector } from 'react-redux'; +import { useState } from 'react'; import { selectAmountDaily, selectError, selectIsLoading, -} from "../../redux/water/waterSelectors"; +} from '../../redux/water/waterSelectors'; -import AddWaterModal from "./AddWaterModal/AddWaterModal"; -import Modal from "../Modal/Modal"; -import WaterListItem from "./WaterListItem/WaterListItem"; -import Loading from "../Loading/Loading"; -import { WaterContainerStyled } from "./WaterList.styled"; -import Icon from "../Icon/Icon"; -import { useTranslation } from "react-i18next"; +import AddWaterModal from './AddWaterModal/AddWaterModal'; +import Modal from '../Modal/Modal'; +import WaterListItem from './WaterListItem/WaterListItem'; +import Loading from '../Loading/Loading'; +import { WaterContainerStyled } from './WaterList.styled'; +import Icon from '../Icon/Icon'; +import { useTranslation } from 'react-i18next'; +import { addScrollLock, removeScrollLock } from '../Modal/services/services'; export interface IWaterData { waterVolume: number; @@ -31,14 +32,15 @@ const WaterList = () => { const error = useSelector(selectError); const closeModal = () => { setVisible(false); + removeScrollLock(); }; return ( -

    {t("homepage.h2-3Today")}

    +

    {t('homepage.h2-3Today')}

    {loading && !error && } {entries.length === 0 ? ( -

    {t("homepage.pEmpty")}

    +

    {t('homepage.pEmpty')}

    ) : (
      {entries.length > 0 && @@ -53,15 +55,21 @@ const WaterList = () => {
    )} - {visible && ( - + diff --git a/src/components/WaterList/WaterListItem/WaterListItem.tsx b/src/components/WaterList/WaterListItem/WaterListItem.tsx index 91e80aa..4949765 100644 --- a/src/components/WaterList/WaterListItem/WaterListItem.tsx +++ b/src/components/WaterList/WaterListItem/WaterListItem.tsx @@ -1,17 +1,17 @@ -import { FC, useState } from "react"; -import { useAppDispatch } from "../../../redux/redux_ts/hook"; +import { FC, useState } from 'react'; +import { useAppDispatch } from '../../../redux/redux_ts/hook'; -import { updateWaterVolumeThunk } from "../../../redux/water/water.operations"; -import { WaterItemBoxStyled } from "../WaterList.styled"; -import { IUpdateWaterPayload } from "../../../redux/redux_ts/interfaces"; +import { updateWaterVolumeThunk } from '../../../redux/water/water.operations'; +import { WaterItemBoxStyled } from '../WaterList.styled'; +import { IUpdateWaterPayload } from '../../../redux/redux_ts/interfaces'; -import Icon from "../../Icon/Icon"; -import Modal from "../../Modal/Modal"; - -import DeleteWaterModal from "../DeleteWaterModal/DeleteWaterModal"; -import EditWaterModal from "../EditWaterModal/EditWaterModal"; -import { useTranslation } from "react-i18next"; +import Icon from '../../Icon/Icon'; +import Modal from '../../Modal/Modal'; +import DeleteWaterModal from '../DeleteWaterModal/DeleteWaterModal'; +import EditWaterModal from '../EditWaterModal/EditWaterModal'; +import { useTranslation } from 'react-i18next'; +import { addScrollLock, removeScrollLock } from '../../Modal/services/services'; interface IProps { _id: string; @@ -30,7 +30,6 @@ const WaterListItem: FC = ({ _id, waterVolume, time }) => { dispatch(updateWaterVolumeThunk(waterData)); }; - const waterIcon = (volume: number) => { if (volume >= 1500) { return ; @@ -41,13 +40,12 @@ const WaterListItem: FC = ({ _id, waterVolume, time }) => { } }; - return (
    {waterIcon(waterVolume)}

    - {waterVolume} {t("addWater.ml")} + {waterVolume} {t('addWater.ml')}

    {time}

    @@ -55,7 +53,10 @@ const WaterListItem: FC = ({ _id, waterVolume, time }) => { @@ -64,6 +65,7 @@ const WaterListItem: FC = ({ _id, waterVolume, time }) => { className="delete-btn-card" onClick={() => { setDeleteModalVisible(true); + addScrollLock(); }} > @@ -72,13 +74,14 @@ const WaterListItem: FC = ({ _id, waterVolume, time }) => { {editModalVisible && ( { setEditModalVisible(false); + removeScrollLock(); }} id={_id} /> @@ -87,11 +90,11 @@ const WaterListItem: FC = ({ _id, waterVolume, time }) => { {deleteModalVisible && ( { setDeleteModalVisible(false); diff --git a/src/components/WaterRatio/WaterRatio.tsx b/src/components/WaterRatio/WaterRatio.tsx index ecbb6d4..fac2504 100644 --- a/src/components/WaterRatio/WaterRatio.tsx +++ b/src/components/WaterRatio/WaterRatio.tsx @@ -1,5 +1,5 @@ -import { useState } from "react"; -import { Range, getTrackBackground } from "react-range"; +import { useState } from 'react'; +import { Range, getTrackBackground } from 'react-range'; import { Output, OutputThumb, @@ -14,12 +14,13 @@ import { WaterRatioRangeThumb, WaterRatioThumb, WaterRatioTitle, -} from "./WaterRatio.styled"; -import Icon from "../Icon/Icon"; -import Modal from "../Modal/Modal"; -import AddWaterModal from "../WaterList/AddWaterModal/AddWaterModal"; -import { useWaterPercentage } from "../../hooks/useWaterPercentage"; -import { useTranslation } from "react-i18next"; +} from './WaterRatio.styled'; +import Icon from '../Icon/Icon'; +import Modal from '../Modal/Modal'; +import AddWaterModal from '../WaterList/AddWaterModal/AddWaterModal'; +import { useWaterPercentage } from '../../hooks/useWaterPercentage'; +import { useTranslation } from 'react-i18next'; +import { addScrollLock, removeScrollLock } from '../Modal/services/services'; const WaterRatio = () => { const [visible, setVisible] = useState(false); @@ -29,6 +30,7 @@ const WaterRatio = () => { const closeModal = () => { setVisible(false); + removeScrollLock(); }; const { t } = useTranslation(); @@ -37,7 +39,7 @@ const WaterRatio = () => { - {t("homepage.h2-3Today")} + {t('homepage.h2-3Today')} { ...props.style, background: getTrackBackground({ values: [normalizedValue], - colors: ["#9EBBFF", "#D7E3FF"], + colors: ['#9EBBFF', '#D7E3FF'], min: 0, max: 100, }), @@ -86,18 +88,21 @@ const WaterRatio = () => { setVisible(true)} + onClick={() => { + setVisible(true); + addScrollLock(); + }} > - {t("homepage.addWaterButton")} + {t('homepage.addWaterButton')} {visible && ( - + diff --git a/src/pages/HomePage/HomePage.styled.ts b/src/pages/HomePage/HomePage.styled.ts index e7aca40..db1a92d 100644 --- a/src/pages/HomePage/HomePage.styled.ts +++ b/src/pages/HomePage/HomePage.styled.ts @@ -1,22 +1,22 @@ -import styled from "styled-components"; +import styled from 'styled-components'; -import BgImgHomeMob from "../../assets/images/homePage/BgHomeMob.png"; -import BgImgHomeTab from "../../assets/images/homePage/BgHomeTabl.png"; -import BgImgHomeDesk from "../../assets/images/homePage/BgHomeDesk.png"; -import { device } from "../../css/deviceSize"; +import BgImgHomeMob from '../../assets/images/homePage/BgHomeMob.png'; +import BgImgHomeTab from '../../assets/images/homePage/BgHomeTabl.png'; +import BgImgHomeDesk from '../../assets/images/homePage/BgHomeDesk.png'; +import { device } from '../../css/deviceSize'; export const StyledHomePageSection = styled.section` - background-image: url("${BgImgHomeMob}"); + background-image: url('${BgImgHomeMob}'); background-repeat: no-repeat; background-position: 50% 115px; @media ${device.tablet} { - background-image: url("${BgImgHomeTab}"); + background-image: url('${BgImgHomeTab}'); background-position: 50% 60px; } @media ${device.desktop} { - background-image: url("${BgImgHomeDesk}"); + background-image: url('${BgImgHomeDesk}'); background-position: 50% 65px; } `; @@ -102,6 +102,9 @@ export const ContainerCalendar = styled.div` height: 32px; fill: var(--primary-blue); + &.active { + fill: var(--secondary-orange); + } &:hover { fill: var(--secondary-orange); } diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 37e20d6..ca93948 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -13,21 +13,23 @@ import { TeamContainerDiv, TeamForce, } from './HomePage.styled'; -import { Link, Outlet } from 'react-router-dom'; +import { Link, Outlet, useLocation } from 'react-router-dom'; import Icon from '../../components/Icon/Icon'; import Modal from '../../components/Modal/Modal'; import TeamModal from '../../components/TeamModal/TeamModal'; +import { addScrollLock } from '../../components/Modal/services/services'; import { useTranslation } from 'react-i18next'; const HomePage = () => { const [visible, setVisible] = useState(false); const dispatch = useAppDispatch(); + const location = useLocation(); useEffect(() => { dispatch(getAmountDailyThunk()); }, [dispatch]); - const {t} = useTranslation() + const { t } = useTranslation(); return ( <> @@ -41,16 +43,31 @@ const HomePage = () => {
    - + - +
    copyright © 2024 | - setVisible(true)}> + { + setVisible(true); + addScrollLock(); + }} + > by TeamForce @@ -62,7 +79,7 @@ const HomePage = () => { diff --git a/src/pages/WelcomePage/WelcomePage.tsx b/src/pages/WelcomePage/WelcomePage.tsx index 518f80d..9be2445 100644 --- a/src/pages/WelcomePage/WelcomePage.tsx +++ b/src/pages/WelcomePage/WelcomePage.tsx @@ -7,6 +7,7 @@ import { useState } from 'react'; import Modal from '../../components/Modal/Modal'; import TeamModal from '../../components/TeamModal/TeamModal'; import { DivStyled, TeamContainerDiv } from './WelcomePage.styled'; +import { addScrollLock } from '../../components/Modal/services/services'; const WelcomePage = () => { const [visible, setVisible] = useState(false); @@ -23,7 +24,14 @@ const WelcomePage = () => { copyright © 2024 | - setVisible(true)}>by TeamForce + { + setVisible(true); + addScrollLock(); + }} + > + by TeamForce +