4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Vins 2024-07-22 14:39:39 +02:00
commit 119f7d4112
9 changed files with 119 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/front/Components/DesignSystem/Button/classes.module.scss
View File

@ -26,17 +26,17 @@
*/
&[variant="primary"] {
color: var(--color-primary-500);
background: var(--button-contained-primary-default-background, #005bcb);
border-color: var(--button-contained-primary-default-border);
color: var(--button-contained-primary-hovered-contrast);
border: 1px solid var(--button-contained-primary-default-border);
background: var(--button-contained-primary-default-background);
svg {
stroke: var(--button-contained-primary-default-contrast);
}
&:hover {
border-color: var(--button-contained-primary-hovered-border);
background: var(--button-contained-primary-hovered-background, #0040a4);
border: 1px solid var(--button-contained-primary-hovered-border);
background: var(--button-contained-primary-hovered-background);
svg {
stroke: var(--button-contained-primary-hovered-contrast);
@ -45,8 +45,9 @@
&:focus,
&:active {
border-color: var(--button-contained-primary-pressed-border);
background: var(--button-contained-primary-pressed-background, #013391);
color: var(--button-contained-primary-default-contrast);
border: 1px solid var(--button-contained-primary-pressed-border);
background: var(--button-contained-primary-pressed-background);
svg {
stroke: var(--button-contained-primary-pressed-contrast);
@ -54,15 +55,17 @@
}
&[styletype="outlined"] {
border-color: var(--button-outlined-primary-default-border);
color: var(--button-outlined-primary-default-contrast);
border: 1px solid var(--button-outlined-primary-default-border);
background: var(--button-outlined-primary-default-background);
svg {
stroke: var(--button-outlined-primary-default-contrast);
}
&:hover {
background-color: var(--color-primary-50);
border-color: var(--button-outlined-primary-hovered-border);
border: 1px solid var(--button-outlined-primary-hovered-border);
background: var(--button-outlined-primary-hovered-background);
svg {
stroke: var(--button-outlined-primary-hovered-contrast);
@ -71,9 +74,9 @@
&:focus,
&:active {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
border-color: var(--button-outlined-primary-pressed-border);
color: var(--button-outlined-primary-pressed-contrast);
border: 1px solid var(--button-outlined-primary-pressed-border);
background: var(--button-outlined-primary-pressed-background);
svg {
stroke: var(--button-outlined-primary-pressed-contrast);
@ -82,13 +85,17 @@
}
&[styletype="text"] {
color: var(--button-text-primary-default-contrast);
border-bottom: 1px solid var(--button-text-primary-default-border);
background: var(--button-text-primary-default-background);
svg {
stroke: var(--button-text-primary-default-contrast);
}
&:hover {
background-color: transparent;
border-color: var(--button-outlined-primary-hovered-border);
border-bottom: 1px solid var(--button-outlined-primary-hovered-border);
background: var(--button-outlined-primary-default-background);
svg {
stroke: var(--button-text-primary-hovered-contrast);
@ -97,9 +104,9 @@
&:focus,
&:active {
background-color: transparent;
color: var(--color-primary-800);
border-color: var(--color-primary-800);
background: var(--button-outlined-primary-default-background);
border-bottom: 1px solid var(--color-primary-800);
svg {
stroke: var(--button-text-primary-pressed-contrast);
@ -109,17 +116,18 @@
}
&[variant="secondary"] {
color: var(--color-secondary-500);
background: var(--color-secondary-500);
border-color: var(--color-secondary-500);
color: var(--button-contained-secondary-default-contrast);
background: var(--button-contained-secondary-default-background);
border-color: var(--button-contained-secondary-default-border);
svg {
stroke: var(--button-contained-secondary-default-contrast);
}
&:hover {
background: var(--color-secondary-700);
border-color: var(--color-secondary-700);
color: var(--button-contained-secondary-hovered-contrast);
background: var(--button-contained-secondary-hovered-background);
border-color: var(--button-contained-secondary-hovered-border);
svg {
stroke: var(--button-contained-secondary-hovered-contrast);
@ -128,8 +136,9 @@
&:focus,
&:active {
background: var(--color-secondary-800);
border-color: var(--color-secondary-800);
color: var(--button-contained-secondary-pressed-contrast);
background: var(--button-contained-secondary-pressed-background);
border-color: var(--button-contained-secondary-pressed-border);
svg {
stroke: var(--button-contained-secondary-pressed-contrast);
@ -137,12 +146,16 @@
}
&[styletype="outlined"] {
color: var(--button-outlined-secondary-default-contrast);
border: 1px solid var(--button-outlined-secondary-default-border);
background: var(--button-outlined-secondary-default-background);
svg {
stroke: var(--button-outlined-secondary-default-contrast);
}
&:hover {
background-color: var(--color-secondary-50);
border: 1px solid var(--button-outlined-secondary-hovered-border);
background: var(--button-outlined-secondary-hovered-background);
svg {
stroke: var(--button-outlined-secondary-hovered-contrast);
@ -151,9 +164,9 @@
&:focus,
&:active {
background-color: var(--color-secondary-100);
color: var(--color-secondary-700);
border-color: var(--color-secondary-700);
color: var(--button-outlined-secondary-pressed-contrast);
border: 1px solid var(--button-outlined-secondary-pressed-border);
background: var(--button-outlined-secondary-pressed-background);
svg {
stroke: var(--button-outlined-secondary-pressed-contrast);
@ -162,12 +175,16 @@
}
&[styletype="text"] {
color: var(--button-text-secondary-default-contrast);
border-bottom: 1px solid var(--button-text-secondary-default-border);
background: var(--button-text-secondary-default-background);
svg {
stroke: var(--button-text-secondary-default-contrast);
}
&:hover {
background-color: transparent;
border-bottom: 1px solid var(--button-outlined-secondary-hovered-border);
background: var(--button-outlined-secondary-default-background);
svg {
stroke: var(--button-text-secondary-hovered-contrast);
@ -176,9 +193,9 @@
&:focus,
&:active {
background-color: transparent;
color: var(--color-secondary-800);
border-color: var(--color-secondary-800);
color: var(--button-outlined-secondary-pressed-contrast);
border-bottom: 1px solid var(--button-outlined-secondary-pressed-border);
background: var(--button-outlined-secondary-pressed-background);
svg {
stroke: var(--button-text-secondary-pressed-contrast);
@ -188,17 +205,17 @@
}
&[variant="neutral"] {
color: var(--color-neutral-500);
background: var(--color-neutral-500);
border-color: var(--color-neutral-500);
color: var(--button-contained-neutral-hovered-contrast);
border: 1px solid var(--button-contained-neutral-default-border);
background: var(--button-contained-neutral-default-background);
svg {
stroke: var(--button-contained-neutral-default-contrast);
}
&:hover {
background: var(--color-neutral-700);
border-color: var(--color-neutral-700);
border: 1px solid var(--button-contained-neutral-hovered-border);
background: var(--button-contained-neutral-hovered-background);
svg {
stroke: var(--button-contained-neutral-hovered-contrast);
@ -207,8 +224,9 @@
&:focus,
&:active {
background: var(--color-neutral-800);
border-color: var(--color-neutral-800);
color: var(--button-contained-neutral-default-contrast);
border: 1px solid var(--button-contained-neutral-pressed-border);
background: var(--button-contained-neutral-pressed-background);
svg {
stroke: var(--button-contained-neutral-pressed-contrast);
@ -216,13 +234,16 @@
}
&[styletype="outlined"] {
color: var(--button-outlined-neutral-default-contrast);
border: 1px solid var(--button-outlined-neutral-default-border);
background: var(--button-outlined-neutral-default-background);
svg {
stroke: var(--button-outlined-neutral-default-contrast);
}
&:hover {
background-color: var(--color-neutral-50);
border: 1px solid var(--button-outlined-neutral-hovered-border);
background: var(--button-outlined-neutral-hovered-background);
svg {
stroke: var(--button-outlined-neutral-hovered-contrast);
}
@ -230,9 +251,9 @@
&:focus,
&:active {
background-color: var(--color-neutral-100);
color: var(--color-neutral-700);
border-color: var(--color-neutral-700);
color: var(--button-outlined-neutral-pressed-contrast);
border: 1px solid var(--button-outlined-neutral-pressed-border);
background: var(--button-outlined-neutral-pressed-background);
svg {
stroke: var(--button-outlined-neutral-pressed-contrast);
@ -241,12 +262,16 @@
}
&[styletype="text"] {
color: var(--button-text-neutral-default-contrast);
border-bottom: 1px solid var(--button-text-neutral-default-border);
background: var(--button-text-neutral-default-background);
svg {
stroke: var(--button-text-neutral-default-contrast);
}
&:hover {
background-color: transparent;
border-bottom: 1px solid var(--button-outlined-neutral-hovered-border);
background: var(--button-outlined-neutral-default-background);
svg {
stroke: var(--button-text-neutral-hovered-contrast);
@ -255,9 +280,9 @@
&:focus,
&:active {
background-color: transparent;
color: var(--color-neutral-800);
border-color: var(--color-neutral-800);
color: var(--color-primary-800);
background: var(--button-outlined-neutral-default-background);
border-bottom: 1px solid var(--color-primary-800);
svg {
stroke: var(--button-text-neutral-pressed-contrast);

2
src/front/Components/DesignSystem/CircleProgress/classes.module.scss
View File

@ -3,7 +3,7 @@
.root {
display: flex;
align-items: center;
gap: 24px;
gap: var(--spacing-sm);
svg {
width: 100%;

2
src/front/Components/DesignSystem/CircleProgress/index.tsx
View File

@ -54,7 +54,7 @@ export default function CircleProgress(props: IProps) {
/>
</svg>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
{percentage}%
{Math.round(percentage)}%
</Typography>
</div>
);

1
src/front/Components/DesignSystem/Header/Navigation/index.tsx
View File

@ -52,6 +52,7 @@ export default function Navigation() {
title: notification.notification.message,
uid: notification.uid,
redirectUrl: notification.notification.redirection_url,
created_at: notification.notification.created_at,
});
});
}, []);

4
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
View File

@ -45,6 +45,10 @@
margin-top: 24px;
overflow: hidden;
overflow-y: auto;
cursor: pointer;
&hover {
background: var(--notification-unread-hovered, #ffe4d4);
}
.missing-notification {
padding: var(--spacing-3);

21
src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
View File

@ -25,10 +25,13 @@
.root {
pointer-events: all;
position: relative;
padding: 24px;
background: var(--color-warning-500-soft);
padding: var(--spacing-2);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
border-radius: 5px;
border-radius: 8px;
background: var(--notification-unread-default, #fff3ed);
&:hover {
background: var(--notification-unread-hovered, #ffe4d4);
}
animation-name: slide-left;
animation-duration: 300ms;
@ -88,6 +91,18 @@
}
}
.notif-unread {
display: flex;
align-items: center;
gap: 8px;
.notif-unread-dot {
width: 12px;
height: 12px;
background-color: var(--notification-text-contrast, #ff4617);
border-radius: 100px;
}
}
.text-container {
font-family: var(--font-text-family);
font-style: normal;

19
src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
View File

@ -8,8 +8,8 @@ import React from "react";
import classes from "./classes.module.scss";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import CheckIcon from "@Assets/Icons/check.svg";
import Image from "next/image";
// import CheckIcon from "@Assets/Icons/check.svg";
// import Image from "next/image";
import { NextRouter, useRouter } from "next/router";
type IProps = {
@ -39,6 +39,8 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
public override render(): JSX.Element {
const toast = this.props.toast;
console.log(toast);
const style = {
"--data-duration": `${toast.time}ms`,
} as React.CSSProperties;
@ -49,15 +51,19 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
data-clickable={toast.redirectUrl ? true : false}
onClick={this.handleClick}>
{toast.time !== 0 && <div className={classes["loadbar"]} style={style} />}
<div className={classes["header"]}>
<div className={classes["header"]} onClick={this.onClose}>
<div className={classes["text-icon_row"]}>
{toast.icon && toast.icon}
<div className={classes["text-container"]}>
{this.getToastTitle(toast.title)}
{this.getToastText(toast.text)}
{this.getToastDate(toast.created_at)}
</div>
</div>
{toast.closable && <Image src={CheckIcon} alt="Document check" className={classes["cross"]} onClick={this.onClose} />}
<div className={classes["notif-unread"]}>
<div className={classes["notif-unread-dot"]} onClick={this.onClose} />
</div>
{/* {toast.closable && <Image src={CheckIcon} alt="Document check" className={classes["cross"]} onClick={this.onClose} />} */}
</div>
{toast.button}
</div>
@ -79,6 +85,11 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
return title;
}
private getToastDate(date: Date | null | undefined) {
const tempDate = new Date(date!);
return tempDate.toDateString();
}
private getToastText(text: React.ReactNode) {
if (typeof text === "string") {
return (

1
src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss
View File

@ -5,6 +5,7 @@
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
border-radius: 8px;
& > *:not(:first-child) {
margin-top: 16px;

2
src/front/Stores/Toasts.tsx
View File

@ -18,6 +18,7 @@ export interface IToast {
time?: number;
closable?: boolean;
priority?: EToastPriority;
created_at?: Date | null;
}
export default class Toasts {
@ -61,6 +62,7 @@ export default class Toasts {
toast.time = toast.time ?? this.defaultTime;
toast.closable = toast.closable ?? this.defaultClosable;
toast.priority = toast.priority ?? this.defaultPriority;
toast.created_at = toast.created_at;
const highToasts = this.toastList.filter((toast) => {
return toast.priority === EToastPriority.HIGH;