Design for read all notifications

This commit is contained in:
Maxime Lalo 2023-10-09 17:28:00 +02:00
parent cb22c0d4d0
commit b14a7a5fbf
3 changed files with 29 additions and 4 deletions

View File

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

View File

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

View File

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