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 { .notification-subheader {
width: 100%; display: flex;
display: inline-flex; align-items: center;
justify-content: space-between; gap: 8px;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px;
color: var(--pink-flash);
cursor: pointer; cursor: pointer;
} }

View File

@ -5,6 +5,7 @@ import CloseIcon from "@Assets/Icons/cross.svg";
import Image from "next/image"; import Image from "next/image";
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler"; import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
import Toasts, { IToast } from "@Front/Stores/Toasts"; import Toasts, { IToast } from "@Front/Stores/Toasts";
import Check from "@Front/Components/Elements/Icons/Check";
type IProps = { type IProps = {
isOpen: boolean; isOpen: boolean;
@ -39,7 +40,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
</div> </div>
</div> </div>
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}> <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>
<div className={classes["notification-body"]}> <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>
);
}