diff --git a/components/header/changelog-notification.module.css b/components/header/changelog-notification.module.css index 32c210d8c..f30b9f3b9 100644 --- a/components/header/changelog-notification.module.css +++ b/components/header/changelog-notification.module.css @@ -2,7 +2,7 @@ content: ''; position: absolute; top: 5px; - right: 5px; + right: 2px; width: 10px; height: 10px; background-color: #ff0000; @@ -11,6 +11,14 @@ } .changelogNotification { - top: -2px; position: relative; } + +@media only screen and (min-width: 1px) and (max-width: 992px) { + .notificationText { + display: none; + } + .changelogNotification::before { + top: 0; + } +} diff --git a/components/header/changelog-notification.tsx b/components/header/changelog-notification.tsx index feddeeb04..6d88c15a2 100644 --- a/components/header/changelog-notification.tsx +++ b/components/header/changelog-notification.tsx @@ -1,11 +1,10 @@ 'use client'; import { useEffect } from 'react'; -import FadeIn from '#components-ui/animation/fade-in'; import { Icon } from '#components-ui/icon/wrapper'; -import InformationTooltip from '#components-ui/information-tooltip'; import { changelogData } from '#models/historique-modifications'; import { EScope, hasRights } from '#models/user/rights'; +import { formatDate } from '#utils/helpers'; import { useStorage } from 'hooks'; import useSession from 'hooks/use-session'; import style from './changelog-notification.module.css'; @@ -31,7 +30,7 @@ export default function ChangelogNotification() { const [previousDateOfLastNews, saveDateOfLastNews] = useStorage( 'local', NEW_SINCE_LAST_VISIT_ID, - dateOfLastNews + null ); useEffect(() => { @@ -40,32 +39,27 @@ export default function ChangelogNotification() { } }, []); + if (!previousDateOfLastNews) { + saveDateOfLastNews(formatDate(new Date())); + } + if ( - !dateOfLastNews || !previousDateOfLastNews || + !dateOfLastNews || convertToISO(previousDateOfLastNews) >= convertToISO(dateOfLastNews) ) { return null; } return ( -