✨ Design for read all notifications

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;
 	}
 

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"]}>
 						<>

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>
+	);
+}