4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Notifications

Browse Source
This commit is contained in:
Vins 2024-07-16 16:04:09 +02:00
parent 9cb87460c1
commit 8aec7dd215
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/Icons/notif-empty.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.19085 19.7757C10.4398 19.9238 11.7109 20 12.9997 20C13.4408 20 13.8798 19.9911 14.3165 19.9734M9.19085 19.7757C6.66458 19.4761 4.22854 18.8821 1.91797 18.0292C3.70052 16.0505 4.83399 13.4756 4.98297 10.6398M9.19085 19.7757C9.06692 20.1615 9 20.573 9 21C9 23.2091 10.7909 25 13 25C14.7152 25 16.1783 23.9204 16.7468 22.4036M19.3666 19.3666L25 25M19.3666 19.3666C20.9859 19.0397 22.5609 18.5905 24.0815 18.0292C22.1658 15.9027 20.9997 13.0875 20.9997 10V9.06558L21 9C21 4.58172 17.4183 1 13 1C9.7556 1 6.96228 2.93132 5.70701 5.70701M19.3666 19.3666L5.70701 5.70701M1 1L5.70701 5.70701" stroke="#005BCB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 785 B

8
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
View File

@ -47,8 +47,14 @@
overflow-y: auto;
.missing-notification {
padding: 56px 0;
padding: var(--spacing-3);
text-align: center;
border-radius: var(--radius-md);
background-color: var(--color-primary-50);
.notif-icon {
cursor: pointer;
margin-bottom: var(--radius-xl);
}
}
}

6
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
View File

@ -6,6 +6,7 @@ import Image from "next/image";
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Check from "@Front/Components/Elements/Icons/Check";
import NotifEmptyIcon from "@Assets/Icons/notif-empty.svg";
type IProps = {
isOpen: boolean;
@ -40,7 +41,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
</div>
</div>
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_SECONDARY_500}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500}>
Tout marquer comme lu
</Typography>
<Check color={ETypoColor.COLOR_SECONDARY_500} />
@ -49,7 +50,8 @@ export default class NotificationModal extends React.Component<IProps, IState> {
<>
{!this.state.toastList || this.state.toastList.length === 0 ? (
<div className={classes["missing-notification"]}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<Image src={NotifEmptyIcon} alt="Notif Empty" className={classes["notif-icon"]}></Image>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
Vous n'avez pas de notifications.
</Typography>
</div>