From 8aec7dd21512cc987b6e05d3fd4483811788fc17 Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Tue, 16 Jul 2024 16:04:09 +0200
Subject: [PATCH] Notifications

---
 src/front/Assets/Icons/notif-empty.svg                    | 3 +++
 .../Notifications/NotificationModal/classes.module.scss   | 8 +++++++-
 .../Header/Notifications/NotificationModal/index.tsx      | 6 ++++--
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 src/front/Assets/Icons/notif-empty.svg

diff --git a/src/front/Assets/Icons/notif-empty.svg b/src/front/Assets/Icons/notif-empty.svg
new file mode 100644
index 00000000..ad6a4f2f
--- /dev/null
+++ b/src/front/Assets/Icons/notif-empty.svg
@@ -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>
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
index d3421913..f2c81a9c 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -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);
+			}
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index 456a46c3..82b8a5f2 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -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>