✨ Design for read all notifications
This commit is contained in:
parent
cb22c0d4d0
commit
b14a7a5fbf
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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"]}>
|
||||||
<>
|
<>
|
||||||
|
19
src/front/Components/Elements/Icons/Check/index.tsx
Normal file
19
src/front/Components/Elements/Icons/Check/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user