From b14a7a5fbf706c69f6163bf5caabe97602c61f5a Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 9 Oct 2023 17:28:00 +0200
Subject: [PATCH] :sparkles: Design for read all notifications

---
 .../NotificationModal/classes.module.scss     |  8 +++++---
 .../Notifications/NotificationModal/index.tsx |  6 +++++-
 .../Components/Elements/Icons/Check/index.tsx | 19 +++++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/front/Components/Elements/Icons/Check/index.tsx

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 ad7cd54d..1e7bcdf7 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -32,10 +32,12 @@
 	}
 
 	.notification-subheader {
-		width: 100%;
-		display: inline-flex;
-		justify-content: space-between;
+		display: flex;
+		align-items: center;
+		gap: 8px;
 		text-decoration: underline;
+		text-underline-offset: 2px;
+		color: var(--pink-flash);
 		cursor: pointer;
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index 2ea50c06..56c15f11 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -5,6 +5,7 @@ import CloseIcon from "@Assets/Icons/cross.svg";
 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";
 
 type IProps = {
 	isOpen: boolean;
@@ -39,7 +40,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14}>Tout marquer comme lu</Typography>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
+							Tout marquer comme lu
+						</Typography>
+						<Check color={ITypoColor.PINK_FLASH} />
 					</div>
 					<div className={classes["notification-body"]}>
 						<>
diff --git a/src/front/Components/Elements/Icons/Check/index.tsx b/src/front/Components/Elements/Icons/Check/index.tsx
new file mode 100644
index 00000000..b3ec1825
--- /dev/null
+++ b/src/front/Components/Elements/Icons/Check/index.tsx
@@ -0,0 +1,19 @@
+import { ITypoColor } from "@Front/Components/DesignSystem/Typography";
+
+type IProps = {
+	color?: ITypoColor;
+};
+
+export default function Check(props: IProps) {
+	return (
+		<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M15 4.5L6.75 12.75L3 9"
+				stroke={`var(--${props.color ?? "white"})`}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}