✨ MEP-PPD
This commit is contained in:
Maxime Lalo
parent
8cbd9da9bb
commit
81e46f6573
998
package-lock.json
generated
998
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,6 +18,7 @@
|
||||
"@types/node": "18.15.1",
|
||||
"@types/react": "18.0.28",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"@uidotdev/usehooks": "^2.4.1",
|
||||
"class-validator": "^0.14.0",
|
||||
"classnames": "^2.3.2",
|
||||
"crypto-random-string": "^5.0.0",
|
||||
@ -25,6 +26,7 @@
|
||||
"eslint": "8.36.0",
|
||||
"eslint-config-next": "13.2.4",
|
||||
"form-data": "^4.0.0",
|
||||
"heroicons": "^2.1.5",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.151",
|
||||
"next": "^14.2.3",
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1245.64 178.38">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #41a89f;
|
||||
}
|
||||
|
||||
.cls-1, .cls-2 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #4a2779;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Calque_1-2" data-name="Calque 1">
|
||||
<g>
|
||||
<path class="cls-2" d="M540.47,39.62c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.05,12.09-12.7,4.74-3.64,10.08-6.48,15.99-8.54,5.92-2.06,12.21-3.08,18.83-3.08h34.6l-4.74,19.69h-15.17c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.45,8.59-9.72,14.11l-4.98,19.69h30.09l-4.98,19.69h-30.09l-24.41,98.93h-39.34l34.36-138.31.02.02Z"/>
|
||||
<path class="cls-2" d="M631.24,39.62c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.05,12.09-12.7,4.74-3.64,10.08-6.48,15.98-8.54,5.93-2.06,12.22-3.08,18.83-3.08h34.6l-4.74,19.69h-15.16c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.45,8.59-9.71,14.11l-4.98,19.69h30.1l-4.97,19.69h-30.1l-24.41,98.93h-39.33l34.36-138.31.02.02Z"/>
|
||||
<path class="cls-2" d="M804.21,39.62l-4.98,19.69h-14.93c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.53,8.59-9.95,14.11l-24.41,98.69h-39.57l24.4-98.46c1.27-5.22,3.51-10.23,6.76-15.07,3.25-4.82,7.24-9.09,11.98-12.81,4.74-3.72,10.11-6.64,16.12-8.78,6-2.14,12.48-3.21,19.43-3.21h34.83v.03Z"/>
|
||||
<path class="cls-2" d="M834.08,177.93c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.39-5.85,1.18-9.49l14.69-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.01,12.08-12.57,4.74-3.56,10.11-6.36,16.12-8.43,6-2.06,12.32-3.08,18.95-3.08h29.86c11.69,0,20.54,2.82,26.54,8.43,6,5.61,9.01,12.78,9.01,21.48,0,2.85-.4,6.09-1.18,9.73l-9.71,39.38h-78.92l-4.97,19.93c-1.42,5.54-.52,10.2,2.74,14,3.24,3.8,8.8,5.69,16.71,5.69h39.81l-4.74,19.69h-59.47v-.02ZM849.01,98.93h39.57l4.74-19.8c1.26-5.5.47-10.19-2.37-14.03-2.84-3.86-7.03-5.77-12.55-5.77-2.69,0-5.37.51-8.06,1.53-2.69,1.03-5.14,2.44-7.35,4.24-2.21,1.8-4.14,3.92-5.8,6.36-1.66,2.44-2.81,5-3.43,7.67l-4.74,19.8h0Z"/>
|
||||
<path class="cls-2" d="M958,177.93v-39.62h39.57v39.62h-39.57Z"/>
|
||||
<path class="cls-1" d="M1056.56,39.62h39.57l-34.36,138.31h-39.57l34.36-138.31ZM1066.28,0h39.57l-4.74,19.69h-39.57l4.74-19.69Z"/>
|
||||
<path class="cls-1" d="M1145.9,177.93c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.4-5.85,1.18-9.49l14.7-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.01,12.09-12.57s10.11-6.36,16.11-8.43c6-2.06,12.32-3.08,18.95-3.08h29.87c11.68,0,20.53,2.85,26.53,8.54,6.01,5.69,9.01,12.81,9.01,21.35,0,2.69-.4,5.85-1.18,9.49l-14.7,59.31c-1.42,5.54-3.79,10.68-7.11,15.42-3.32,4.74-7.35,8.94-12.09,12.57-4.74,3.64-10.08,6.49-15.98,8.54-5.92,2.06-12.22,3.08-18.85,3.08h-29.86.02ZM1204.9,79.24c1.42-5.54.71-10.23-2.13-14.11-2.85-3.87-7.04-5.8-12.56-5.8s-10.66,1.95-15.4,5.8c-4.74,3.87-7.82,8.59-9.24,14.11l-14.7,59.07c-1.42,5.54-.71,10.25,2.13,14.11,2.84,3.88,7.03,5.8,12.56,5.8,2.69,0,5.37-.51,8.06-1.53,2.69-1.03,5.13-2.45,7.35-4.27,2.21-1.82,4.1-3.91,5.68-6.28,1.58-2.37,2.76-4.98,3.56-7.83l14.7-59.07Z"/>
|
||||
<path class="cls-1" d="M464.92,52.45c-30.16-7.73-61.61,13.38-70.25,47.15-8.64,33.77,8.8,67.42,38.97,75.16,30.16,7.73,61.61-13.38,70.25-47.15,8.64-33.77-8.8-67.43-38.97-75.16ZM458.89,119.45c.32-.73.58-1.49.79-2.28.41-1.63.54-3.26.4-4.82l31.55-21.18c4.08,10.12,5.04,22,2.01,33.89-2.95,11.53-9.19,21.21-17.27,28.1l-17.49-33.72h.02ZM462.19,64.42c10.14,2.59,18.5,8.84,24.3,17.21l-31.74,21.3c-.96-.63-2.02-1.11-3.19-1.41-.71-.19-1.42-.28-2.13-.32l-17.2-33.2c9.19-4.7,19.67-6.23,29.97-3.59ZM405.49,102.47c3-11.74,9.42-21.56,17.69-28.47l16.51,31.84c-1.25,1.53-2.21,3.4-2.75,5.49-.33,1.3-.47,2.59-.46,3.86l-29.51,19.8c-3.63-9.82-4.39-21.16-1.49-32.52ZM411.84,144.74l29.32-19.68c1.14.89,2.45,1.57,3.9,1.93,1.88.47,3.78.41,5.56-.08l16.78,32.38c-9.3,4.9-19.98,6.53-30.46,3.84-10.62-2.72-19.29-9.43-25.1-18.39Z"/>
|
||||
<path class="cls-1" d="M446.23,177.13c-4.25,0-8.53-.52-12.78-1.61-14.8-3.8-27.08-13.82-34.53-28.22-7.44-14.36-9.23-31.38-4.99-47.91,4.22-16.53,13.95-30.59,27.38-39.6,13.46-9.03,29.02-11.91,43.84-8.11,30.54,7.83,48.26,41.98,39.54,76.12-7.52,29.39-32.23,49.33-58.43,49.33h-.02ZM452.25,51.62c-10.38,0-20.74,3.23-30.06,9.49-13.11,8.79-22.61,22.54-26.73,38.69-4.12,16.15-2.4,32.76,4.87,46.78,7.25,14,19.16,23.72,33.52,27.41,29.68,7.62,60.77-13.29,69.29-46.58,8.51-33.29-8.7-66.59-38.4-74.19-4.12-1.06-8.31-1.58-12.5-1.58l.02-.02ZM447.06,165.19c-3.48,0-6.93-.43-10.32-1.3-10.38-2.66-19.46-9.32-25.58-18.73l-.43-.65,30.44-20.43.46.35c1.11.85,2.31,1.45,3.62,1.79,1.69.43,3.41.41,5.15-.08l.62-.17,17.44,33.64-.7.36c-6.56,3.45-13.65,5.2-20.71,5.2v.02ZM412.93,144.96c5.89,8.73,14.46,14.9,24.22,17.41,9.73,2.5,19.81,1.31,29.19-3.42l-16.13-31.11c-1.8.4-3.59.38-5.34-.06-1.33-.33-2.58-.92-3.73-1.74l-28.2,18.93-.02-.02ZM476.13,154.42l-18.12-34.94.16-.35c.32-.73.57-1.44.76-2.15.38-1.49.51-3.02.38-4.56l-.05-.46,32.75-21.99.36.9c4.27,10.61,4.99,22.82,2.04,34.39-2.91,11.34-8.96,21.21-17.52,28.5l-.76.65ZM459.77,119.41l16.86,32.5c7.91-7.02,13.52-16.35,16.26-27.05,2.8-10.91,2.21-22.41-1.61-32.5l-30.36,20.37c.08,1.57-.06,3.12-.46,4.62-.17.68-.39,1.36-.68,2.04v.02ZM406.58,136.21l-.35-.93c-3.84-10.41-4.36-21.81-1.52-32.99,2.91-11.39,9.29-21.65,17.95-28.88l.76-.63,17.2,33.17-.33.4c-1.23,1.52-2.1,3.26-2.59,5.19-.3,1.2-.46,2.42-.43,3.64v.43l-30.68,20.61-.02.02ZM405.49,102.47l.76.19c-2.69,10.53-2.31,21.26,1.12,31.11l28.31-19c0-1.22.17-2.44.47-3.62.51-1.98,1.37-3.78,2.57-5.38l-15.81-30.51c-8.03,6.98-13.93,16.67-16.68,27.41l-.76-.19.02-.02ZM454.76,103.88l-.44-.28c-.92-.6-1.9-1.04-2.95-1.31-.62-.16-1.26-.25-1.97-.28h-.46l-17.79-34.32.71-.36c9.79-5,20.35-6.26,30.52-3.65,10.03,2.56,18.58,8.64,24.75,17.52l.46.66-32.84,22.05.02-.02ZM449.92,100.45c.65.05,1.25.16,1.83.3,1.04.27,2.04.68,2.97,1.23l30.63-20.56c-5.91-8.22-13.98-13.82-23.38-16.24-9.56-2.45-19.46-1.34-28.7,3.18l16.63,32.09h.02Z"/>
|
||||
<path class="cls-2" d="M44.07.44h39.57l-39.34,158.24h59.24l-4.74,19.69H0L44.07.44Z"/>
|
||||
<path class="cls-2" d="M167.75.44h98.81l-4.74,19.69h-59.24l-14.93,59.55h54.03l-4.74,19.69h-54.03l-14.93,59.31h59.24l-4.74,19.69h-98.81L167.75.44Z"/>
|
||||
<path class="cls-2" d="M311.35,138.76c-1.42,5.54-.71,10.25,2.13,14.11,2.84,3.87,7.03,5.8,12.56,5.8,11.53,0,19.83-6.64,24.88-19.93h19.67c-4.11,13.29-10.43,23.22-18.96,29.78-8.53,6.56-20.22,9.84-35.07,9.84h-10.19c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.39-5.85,1.18-9.49l14.69-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.02,12.09-12.57,4.74-3.56,10.11-6.36,16.11-8.43,6-2.06,12.32-3.08,18.96-3.08h10.19c12.8,0,21.96,2.26,27.49,6.77,5.53,4.51,8.29,11.26,8.29,20.29,0,3.8-.47,7.91-1.42,12.34h-19.67c1.74-13.13-3.24-19.69-14.93-19.69-5.53,0-10.66,1.95-15.4,5.8-4.74,3.87-7.82,8.59-9.24,14.11l-14.69,59.07.02.02Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.6 KiB |
@ -6,15 +6,15 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
border: 1px solid $grey-medium;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-medium;
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
&[data-selected="true"] {
|
||||
background-color: $grey-medium;
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.left-side {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useCallback } from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Typography, { ETypo } from "../Typography";
|
||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
||||
import Image from "next/image";
|
||||
import WarningBadge from "../WarningBadge";
|
||||
@ -32,7 +32,7 @@ export default function BlockList({ blocks, onSelectedBlock }: IProps) {
|
||||
<div onClick={selectBlock} key={folder.id} id={folder.id}>
|
||||
<div className={classes["root"]} data-selected={folder.selected.toString()}>
|
||||
<div className={classes["left-side"]}>
|
||||
<Typography typo={ITypo.P_16}>{folder.name}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
|
||||
</div>
|
||||
<div className={classes["right-side"]}>
|
||||
{folder.hasFlag && <WarningBadge />}
|
||||
|
||||
@ -4,120 +4,666 @@
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
height: fit-content;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: transparent;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: var(--font-text-weight-regular, 400);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-primary);
|
||||
font-family: var(--font-text-family);
|
||||
border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&[variant="primary"] {
|
||||
color: $white;
|
||||
background-color: $purple-flash;
|
||||
border-color: $purple-flash;
|
||||
padding: 24px 48px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
/**
|
||||
* Every possible variants
|
||||
*/
|
||||
|
||||
&:hover {
|
||||
border-color: $purple-hover;
|
||||
background-color: $purple-hover;
|
||||
&[variant="primary"] {
|
||||
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);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: $purple-soft;
|
||||
background-color: $purple-soft;
|
||||
pointer-events: none;
|
||||
&:hover {
|
||||
border: 1px solid var(--button-contained-primary-hovered-border);
|
||||
background: var(--button-contained-primary-hovered-background);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-primary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="outlined"] {
|
||||
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 {
|
||||
border: 1px solid var(--button-outlined-primary-hovered-border);
|
||||
background: var(--button-outlined-primary-hovered-background);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-primary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="secondary"] {
|
||||
color: $white;
|
||||
background-color: $red-flash;
|
||||
border-color: $red-flash;
|
||||
padding: 24px 48px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
|
||||
&:hover {
|
||||
border-color: $re-hover;
|
||||
background-color: $re-hover;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: $red-soft;
|
||||
background-color: $red-soft;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="ghost"] {
|
||||
color: $pink-flash;
|
||||
background-color: transparent;
|
||||
border-color: $pink-flash;
|
||||
padding: 24px 48px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: var(--button-contained-secondary-default-contrast);
|
||||
background: var(--button-contained-secondary-default-background);
|
||||
border-color: var(--button-contained-secondary-default-border);
|
||||
|
||||
svg {
|
||||
path {
|
||||
stroke: $white;
|
||||
stroke: var(--button-contained-secondary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $pink-hover;
|
||||
color: $pink-hover;
|
||||
}
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--button-contained-secondary-pressed-contrast);
|
||||
background: var(--button-contained-secondary-pressed-background);
|
||||
border-color: var(--button-contained-secondary-pressed-border);
|
||||
|
||||
&:disabled {
|
||||
border-color: $pink-soft;
|
||||
background-color: $pink-soft;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="white"] {
|
||||
color: $pink-flash;
|
||||
background-color: white;
|
||||
border-color: $pink-flash;
|
||||
padding: 24px 48px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
|
||||
svg {
|
||||
path {
|
||||
stroke: $white;
|
||||
svg {
|
||||
stroke: var(--button-contained-secondary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $pink-hover;
|
||||
color: $pink-hover;
|
||||
&[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 {
|
||||
border: 1px solid var(--button-outlined-secondary-hovered-border);
|
||||
background: var(--button-outlined-secondary-hovered-background);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-secondary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: $pink-soft;
|
||||
background-color: $pink-soft;
|
||||
pointer-events: none;
|
||||
&[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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="neutral"] {
|
||||
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 {
|
||||
border: 1px solid var(--button-contained-neutral-hovered-border);
|
||||
background: var(--button-contained-neutral-hovered-background);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-neutral-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&[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 {
|
||||
border: 1px solid var(--button-outlined-neutral-hovered-border);
|
||||
background: var(--button-outlined-neutral-hovered-background);
|
||||
svg {
|
||||
stroke: var(--button-outlined-neutral-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="error"] {
|
||||
color: var(--color-error-600);
|
||||
background: var(--color-error-600);
|
||||
border-color: var(--color-error-600);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-error-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-error-800);
|
||||
border-color: var(--color-error-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-error-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-error-900);
|
||||
border-color: var(--color-error-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-error-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-error-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-secondary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-error-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-error-100);
|
||||
color: var(--color-secondary-700);
|
||||
border-color: var(--color-secondary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-error-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-error-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-error-800);
|
||||
border-color: var(--color-error-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-error-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: var(--color-error-900);
|
||||
border-color: var(--color-error-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-error-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="warning"] {
|
||||
color: var(--color-warning-600);
|
||||
background: var(--color-warning-600);
|
||||
border-color: var(--color-warning-600);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-warning-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-warning-800);
|
||||
border-color: var(--color-warning-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-warning-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-warning-900);
|
||||
border-color: var(--color-warning-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-warning-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-warning-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-700);
|
||||
color: var(--color-warning-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-warning-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-warning-100);
|
||||
color: var(--color-warning-700);
|
||||
border-color: var(--color-warning-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-warning-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-warning-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-warning-800);
|
||||
border-color: var(--color-warning-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-warning-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: var(--color-warning-900);
|
||||
border-color: var(--color-warning-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-warning-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="success"] {
|
||||
color: var(--color-success-600);
|
||||
background: var(--color-success-600);
|
||||
border-color: var(--color-success-600);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-success-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-success-800);
|
||||
border-color: var(--color-success-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-success-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-success-900);
|
||||
border-color: var(--color-success-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-success-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-success-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-700);
|
||||
color: var(--color-success-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-success-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-success-100);
|
||||
color: var(--color-success-700);
|
||||
border-color: var(--color-success-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-success-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-success-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-success-800);
|
||||
border-color: var(--color-success-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-success-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: var(--color-success-900);
|
||||
border-color: var(--color-success-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-success-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[variant="info"] {
|
||||
color: var(--color-info-700);
|
||||
background: var(--color-info-700);
|
||||
border-color: var(--color-info-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-info-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-info-900);
|
||||
border-color: var(--color-info-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-info-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-info-950);
|
||||
border-color: var(--color-info-950);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-info-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-info-default-contrast);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-700);
|
||||
color: var(--color-info-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-info-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-info-100);
|
||||
color: var(--color-info-700);
|
||||
border-color: var(--color-info-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-info-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styletype="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-info-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-info-900);
|
||||
border-color: var(--color-info-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-info-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: var(--color-info-950);
|
||||
border-color: var(--color-info-950);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-info-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Every possible sizes
|
||||
*/
|
||||
|
||||
&[sizing="sm"] {
|
||||
padding: var(--spacing-0-5) var(--spacing-1-5);
|
||||
gap: var(--spacing-0-75);
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&[sizing="md"] {
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
gap: var(--spacing-0-75);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&[sizing="lg"] {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
gap: var(--spacing-1-5);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Every possible style types
|
||||
*/
|
||||
&[styletype="contained"] {
|
||||
color: var(--color-generic-white);
|
||||
}
|
||||
|
||||
&[styletype="outlined"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&[styletype="text"] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Every possible states
|
||||
*/
|
||||
&[fullwidthattr="true"] {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
@ -131,14 +677,7 @@
|
||||
text-transform: inherit;
|
||||
}
|
||||
|
||||
&[variant="line"] {
|
||||
color: $pink-flash;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
text-decoration-line: underline;
|
||||
&[disabled="true"] {
|
||||
opacity: var(--opacity-disabled, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,59 +1,74 @@
|
||||
import Image from "next/image";
|
||||
import React, { CSSProperties } from "react";
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
import classNames from "classnames";
|
||||
|
||||
export enum EButtonVariant {
|
||||
PRIMARY = "primary",
|
||||
SECONDARY = "secondary",
|
||||
GHOST = "ghost",
|
||||
LINE = "line",
|
||||
WHITE = "white",
|
||||
NEUTRAL = "neutral",
|
||||
ERROR = "error",
|
||||
WARNING = "warning",
|
||||
SUCCESS = "success",
|
||||
INFO = "info",
|
||||
}
|
||||
|
||||
type IProps = {
|
||||
export enum EButtonSize {
|
||||
LG = "lg",
|
||||
MD = "md",
|
||||
SM = "sm",
|
||||
}
|
||||
|
||||
export enum EButtonstyletype {
|
||||
CONTAINED = "contained",
|
||||
OUTLINED = "outlined",
|
||||
TEXT = "text",
|
||||
}
|
||||
|
||||
export type IButtonProps = {
|
||||
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
||||
children?: React.ReactNode;
|
||||
variant?: EButtonVariant;
|
||||
size?: EButtonSize;
|
||||
styletype?: EButtonstyletype;
|
||||
fullwidth?: boolean;
|
||||
icon?: string;
|
||||
iconstyle?: CSSProperties;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
isLoading?: boolean;
|
||||
type?: "button" | "submit";
|
||||
isloading?: string;
|
||||
iconposition?: "left" | "right";
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function Button(props: IProps) {
|
||||
export default function Button(props: IButtonProps) {
|
||||
let {
|
||||
variant = EButtonVariant.PRIMARY,
|
||||
size = EButtonSize.LG,
|
||||
styletype = EButtonstyletype.CONTAINED,
|
||||
disabled = false,
|
||||
type = "button",
|
||||
isloading = "false",
|
||||
isLoading = false,
|
||||
fullwidth = false,
|
||||
iconposition = "right",
|
||||
onClick,
|
||||
children,
|
||||
icon,
|
||||
iconstyle,
|
||||
className = "",
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
} = props;
|
||||
|
||||
const fullwidthattr = fullwidth.toString();
|
||||
const isloadingattr = isloading.toString();
|
||||
const isloadingattr = isLoading.toString();
|
||||
|
||||
const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr };
|
||||
const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styletype };
|
||||
delete attributes.fullwidth;
|
||||
delete attributes.icon;
|
||||
delete attributes.iconstyle;
|
||||
delete attributes.iconposition;
|
||||
delete attributes.leftIcon;
|
||||
delete attributes.rightIcon;
|
||||
|
||||
return (
|
||||
<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
|
||||
{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
|
||||
{leftIcon}
|
||||
{children}
|
||||
{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
|
||||
{rightIcon}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
background-color: transparent;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $turquoise-flash;
|
||||
border: 1px solid var(--color-secondary-500);
|
||||
border-radius: 2px;
|
||||
margin-right: 16px;
|
||||
display: grid;
|
||||
@ -30,7 +30,7 @@
|
||||
display: grid;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $turquoise-flash;
|
||||
background-color: var(--color-secondary-500);
|
||||
border-radius: 2px;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
|
||||
import { IOption } from "../Form/SelectField";
|
||||
import Tooltip from "../ToolTip";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import classNames from "classnames";
|
||||
|
||||
@ -37,7 +37,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
|
||||
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
|
||||
<input
|
||||
type="checkbox"
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
.container {
|
||||
|
||||
|
||||
.root {
|
||||
padding: 24px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-generic-white);
|
||||
border: 1px dashed #e7e7e7;
|
||||
|
||||
height: fit-content;
|
||||
|
||||
&[data-drag-over="true"] {
|
||||
border: 1px dashed var(--grey);
|
||||
border: 1px dashed var(--color-neutral-500);
|
||||
}
|
||||
|
||||
&.validated {
|
||||
border: 1px dashed var(--green-flash);
|
||||
border: 1px dashed var(--color-success-600);
|
||||
}
|
||||
|
||||
.top-container {
|
||||
@ -34,12 +32,12 @@
|
||||
margin-left: 18px;
|
||||
|
||||
.validated {
|
||||
color: var(--green-flash);
|
||||
color: var(--color-success-600);
|
||||
}
|
||||
|
||||
.refused-button {
|
||||
font-size: 14px;
|
||||
color: var(--re-hover);
|
||||
color: var(--color-error-800);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -102,7 +100,7 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--red-flash);
|
||||
color: var(--color-error-600);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,16 +5,16 @@ import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
import Button, { EButtonVariant } from "../Button";
|
||||
import Button, { EButtonstyletype, EButtonVariant } from "../Button";
|
||||
import Tooltip from "../ToolTip";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer";
|
||||
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
import classNames from "classnames";
|
||||
import Confirm from "../Modal/Confirm";
|
||||
import Alert from "../Modal/Alert";
|
||||
import Confirm from "../OldModal/Confirm";
|
||||
import Alert from "../OldModal/Alert";
|
||||
import GreenCheckIcon from "@Assets/Icons/green-check.svg";
|
||||
import Loader from "../Loader";
|
||||
import TextAreaField from "../Form/TextareaField";
|
||||
@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["right"]}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
|
||||
<div
|
||||
className={
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
|
||||
@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
)}
|
||||
</Typography>
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
)}
|
||||
@ -157,7 +157,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
<div className={classes["file-container"]} key={fileObj.name + file.index}>
|
||||
<div className={classes["left-part"]}>
|
||||
<Image src={DocumentCheckIcon} alt="Document check" />
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
|
||||
<Typography
|
||||
typo={ETypo.TEXT_MD_REGULAR}
|
||||
color={ETypoColor.COLOR_NEUTRAL_500}
|
||||
title={file.fileName ?? fileObj.name}>
|
||||
{this.shortName(file.fileName || fileObj.name)}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -177,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
<div className={classes["loader"]}>
|
||||
<Loader />
|
||||
</div>
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Chargement...
|
||||
</Typography>
|
||||
</div>
|
||||
@ -187,8 +190,15 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
</div>
|
||||
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
|
||||
<div className={classes["bottom-container"]}>
|
||||
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
|
||||
<Button
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.TEXT}
|
||||
className={classes["add-button"]}
|
||||
onClick={this.addDocument}>
|
||||
<Typography
|
||||
typo={ETypo.TEXT_MD_SEMIBOLD}
|
||||
color={ETypoColor.COLOR_SECONDARY_500}
|
||||
className={classes["add-document"]}>
|
||||
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
|
||||
</Typography>
|
||||
</Button>
|
||||
@ -203,7 +213,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
header={"Motif du refus"}
|
||||
confirmText={"J'ai compris"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
Votre document a été refusé pour la raison suivante :
|
||||
</Typography>
|
||||
<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
|
||||
@ -211,14 +221,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
</Confirm>
|
||||
</div>
|
||||
{this.props.document.document_status === EDocumentStatus.REFUSED && (
|
||||
<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}>
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR} className={classes["error-message"]}>
|
||||
Ce document n'est pas conforme. Veuillez le déposer à nouveau.
|
||||
</Typography>
|
||||
)}
|
||||
{this.state.showFailedUploaded && (
|
||||
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
{this.state.showFailedUploaded}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -262,30 +272,31 @@ export default class DepositDocument extends React.Component<IProps, IState> {
|
||||
switch (history.document_status) {
|
||||
case EDocumentStatus.ASKED:
|
||||
return (
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
Demandé par votre notaire le {this.formatDate(history.created_at!)}
|
||||
</Typography>
|
||||
);
|
||||
case EDocumentStatus.VALIDATED:
|
||||
return (
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
Validé par votre notaire le {this.formatDate(history.created_at!)}
|
||||
</Typography>
|
||||
);
|
||||
case EDocumentStatus.DEPOSITED:
|
||||
return (
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
Déposé le {this.formatDate(history.created_at!)}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
case EDocumentStatus.REFUSED:
|
||||
return (
|
||||
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_800}>
|
||||
Document non conforme
|
||||
{history.refused_reason && history.refused_reason.length > 0 && (
|
||||
<Button
|
||||
variant={EButtonVariant.LINE}
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.TEXT}
|
||||
className={classes["refused-button"]}
|
||||
onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>
|
||||
Voir le motif de refus
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
.container {
|
||||
.root {
|
||||
padding: 24px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-generic-white);
|
||||
border: 1px dashed #e7e7e7;
|
||||
|
||||
height: fit-content;
|
||||
margin-top: 16px;
|
||||
|
||||
&[data-drag-over="true"] {
|
||||
border: 1px dashed var(--grey);
|
||||
border: 1px dashed var(--color-neutral-500);
|
||||
}
|
||||
|
||||
&.validated {
|
||||
border: 1px dashed var(--green-flash);
|
||||
border: 1px dashed var(--color-success-600);
|
||||
}
|
||||
|
||||
.top-container {
|
||||
@ -33,12 +33,12 @@
|
||||
margin-left: 18px;
|
||||
|
||||
.validated {
|
||||
color: var(--green-flash);
|
||||
color: var(--color-success-600);
|
||||
}
|
||||
|
||||
.refused-button {
|
||||
font-size: 14px;
|
||||
color: var(--re-hover);
|
||||
color: var(--color-error-800);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--red-flash);
|
||||
color: var(--color-error-600);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,17 +6,17 @@ import PlusIcon from "@Assets/Icons/plus.svg";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { Document } from "le-coffre-resources/dist/Customer";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
import classNames from "classnames";
|
||||
|
||||
import Button, { EButtonVariant } from "../Button";
|
||||
import Confirm from "../Modal/Confirm";
|
||||
import Button, { EButtonstyletype, EButtonVariant } from "../Button";
|
||||
import Confirm from "../OldModal/Confirm";
|
||||
import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
|
||||
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
|
||||
import Alert from "../Modal/Alert";
|
||||
import Alert from "../OldModal/Alert";
|
||||
|
||||
type IProps = {
|
||||
onChange?: (files: File[]) => void;
|
||||
@ -87,10 +87,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
canConfirm={!this.state.isLoading}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
Vous souhaitez envoyer un autre document à votre notaire ?
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
|
||||
document correspondant.
|
||||
</Typography>
|
||||
@ -110,7 +110,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["right"]}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
<Typography
|
||||
typo={ETypo.TEXT_MD_SEMIBOLD}
|
||||
color={ETypoColor.COLOR_GENERIC_BLACK}
|
||||
className={classes["title"]}>
|
||||
<div
|
||||
className={
|
||||
this.props.document.document_status === EDocumentStatus.VALIDATED
|
||||
@ -120,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
{this.props.document.document_type?.name}
|
||||
</div>
|
||||
</Typography>
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
</div>
|
||||
@ -134,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
<div className={classes["file-container"]} key={fileObj.name}>
|
||||
<div className={classes["left-part"]}>
|
||||
<Image src={DocumentCheckIcon} alt="Document check" />
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{this.shortName(fileObj.name)}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -151,8 +154,15 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
</div>
|
||||
)}
|
||||
<div className={classes["bottom-container"]}>
|
||||
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
|
||||
<Button
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.TEXT}
|
||||
className={classes["add-button"]}
|
||||
onClick={this.addDocument}>
|
||||
<Typography
|
||||
typo={ETypo.TEXT_MD_SEMIBOLD}
|
||||
color={ETypoColor.COLOR_SECONDARY_500}
|
||||
className={classes["add-document"]}>
|
||||
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
|
||||
</Typography>
|
||||
</Button>
|
||||
@ -167,7 +177,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
header={"L'ajout de Document n'est plus autorisé"}
|
||||
isOpen={!!this.state.showFailedDocument}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
{this.state.showFailedDocument}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -176,7 +186,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
|
||||
{this.state.showFailedUploaded && (
|
||||
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
{this.state.showFailedUploaded}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
.container {
|
||||
|
||||
|
||||
.root {
|
||||
padding: 24px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-generic-white);
|
||||
border: 1px dashed #e7e7e7;
|
||||
|
||||
height: fit-content;
|
||||
|
||||
&[data-drag-over="true"] {
|
||||
border: 1px dashed var(--grey);
|
||||
border: 1px dashed var(--color-neutral-500);
|
||||
}
|
||||
|
||||
&.validated {
|
||||
border: 1px dashed var(--green-flash);
|
||||
border: 1px dashed var(--color-success-600);
|
||||
}
|
||||
|
||||
.top-container {
|
||||
@ -34,12 +32,12 @@
|
||||
margin-left: 18px;
|
||||
|
||||
.validated {
|
||||
color: var(--green-flash);
|
||||
color: var(--color-success-600);
|
||||
}
|
||||
|
||||
.refused-button {
|
||||
font-size: 14px;
|
||||
color: var(--re-hover);
|
||||
color: var(--color-error-800);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -102,7 +100,7 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--red-flash);
|
||||
color: var(--color-error-600);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,8 @@ import CrossIcon from "@Assets/Icons/cross.svg";
|
||||
import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
|
||||
import Image from "next/image";
|
||||
|
||||
import Button, { EButtonVariant } from "../Button";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Button, { EButtonstyletype, EButtonVariant } from "../Button";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
|
||||
type IProps = {
|
||||
onChange: (documentList: File[]) => void;
|
||||
@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
|
||||
<div className={classes["separator"]} />
|
||||
|
||||
<div className={classes["right"]}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
|
||||
<div>Déposer un RIB</div>
|
||||
</Typography>
|
||||
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
|
||||
<Typography color={ETypoColor.COLOR_NEUTRAL_500} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
Sélectionnez des documents .jpg, .pdf ou .png
|
||||
</Typography>
|
||||
</div>
|
||||
@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
|
||||
<div className={classes["file-container"]} key="0">
|
||||
<div className={classes["left-part"]}>
|
||||
<Image src={DocumentCheckIcon} alt="Document check" />
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.name}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500} title={file.name}>
|
||||
{this.shortName(file.name)}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -160,8 +160,15 @@ export default class DepositRib extends React.Component<IProps, IState> {
|
||||
</div>
|
||||
|
||||
<div className={classes["bottom-container"]}>
|
||||
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
|
||||
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
|
||||
<Button
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.TEXT}
|
||||
className={classes["add-button"]}
|
||||
onClick={() => this.fileInput!.click()}>
|
||||
<Typography
|
||||
typo={ETypo.TEXT_MD_SEMIBOLD}
|
||||
color={ETypoColor.COLOR_SECONDARY_500}
|
||||
className={classes["add-document"]}>
|
||||
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
|
||||
</Typography>
|
||||
</Button>
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
border: 1px solid $grey-medium;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.DEPOSITED {
|
||||
cursor: pointer;
|
||||
border: 1px solid $orange-soft;
|
||||
border: 1px solid var(--color-warning-500-soft);
|
||||
&:hover {
|
||||
border: 1px solid $orange-soft;
|
||||
outline: 1px solid $orange-soft;
|
||||
border: 1px solid var(--color-warning-500-soft);
|
||||
outline: 1px solid var(--color-warning-500-soft);
|
||||
}
|
||||
}
|
||||
&.VALIDATED {
|
||||
cursor: pointer;
|
||||
border: 1px solid $green-soft;
|
||||
border: 1px solid var(--color-success-600-soft);
|
||||
&:hover {
|
||||
border: 1px solid $green-soft;
|
||||
outline: 1px solid $green-soft;
|
||||
border: 1px solid var(--color-success-600-soft);
|
||||
outline: 1px solid var(--color-success-600-soft);
|
||||
}
|
||||
}
|
||||
|
||||
.valid-radius {
|
||||
background-color: $green-flash;
|
||||
background-color: color-success-600;
|
||||
padding: 6px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import Image from "next/image";
|
||||
import { NextRouter, useRouter } from "next/router";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../../Typography";
|
||||
import Typography, { ETypo } from "../../Typography";
|
||||
import WarningBadge from "../../WarningBadge";
|
||||
import classes from "./classes.module.scss";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
@ -41,8 +41,8 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
|
||||
return (
|
||||
<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
|
||||
<div>
|
||||
<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
|
||||
<Typography typo={ITypo.CAPTION_14}>{this.getDocumentsTitle()}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
|
||||
</div>
|
||||
{this.renderIcon()}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import Loader from "../Loader";
|
||||
|
||||
@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
|
||||
{this.props.href && (
|
||||
<>
|
||||
{!type && (
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
||||
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||
Erreur lors du chargement du fichier
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
@ -18,6 +18,6 @@
|
||||
max-height: calc(100vh - 215px);
|
||||
height: calc(100vh - 215px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid var(--grey-medium);
|
||||
border-right: 1px solid var(--color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
background-color: var(--grey-soft);
|
||||
background-color: var(--color-neutral-50);
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -6,7 +6,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
|
||||
import Note from "le-coffre-resources/dist/Customer/Note";
|
||||
@ -70,42 +70,56 @@ export default function FolderBoxInformation(props: IProps) {
|
||||
case EFolderBoxInformationType.DESCRIPTION:
|
||||
return (
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
|
||||
<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Note dossier
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
|
||||
</div>
|
||||
);
|
||||
case EFolderBoxInformationType.NOTE:
|
||||
return (
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Note client</Typography>
|
||||
<Typography typo={ITypo.P_18}>{note?.content ?? ""}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Note client
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
|
||||
</div>
|
||||
);
|
||||
case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
|
||||
return (
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Note archive</Typography>
|
||||
<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Note archive
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
|
||||
</div>
|
||||
);
|
||||
case EFolderBoxInformationType.INFORMATIONS:
|
||||
return (
|
||||
<>
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
|
||||
<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Intitulé du dossier
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
|
||||
</div>
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
|
||||
<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Numéro de dossier
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
|
||||
</div>
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Type d'acte</Typography>
|
||||
<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Type d'acte
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
|
||||
</div>
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
|
||||
<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Ouverture du dossier
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
border: 1px solid $grey-medium;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-medium;
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
.left-side {
|
||||
|
||||
@ -4,7 +4,7 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Typography, { ETypo } from "../Typography";
|
||||
import WarningBadge from "../WarningBadge";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
@ -24,7 +24,7 @@ export default class FolderContainer extends React.Component<IProps, IState> {
|
||||
return (
|
||||
<div className={classes["root"]} onClick={this.onSelectedFolder}>
|
||||
<div className={classes["left-side"]}>
|
||||
<Typography typo={ITypo.P_16}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||
{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
|
||||
</Typography>
|
||||
{this.countPendingDocuments() > 0 && (
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
height: calc(100vh - 290px);
|
||||
overflow-y: scroll;
|
||||
|
||||
&.archived{
|
||||
&.archived {
|
||||
height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--grey-medium);
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,6 +18,6 @@
|
||||
max-height: calc(100vh - 290px);
|
||||
height: calc(100vh - 290px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid var(--grey-medium);
|
||||
border-right: 1px solid var(--color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { FormContext, IFormContext } from ".";
|
||||
import { ValidationError } from "class-validator";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
|
||||
export type IProps = {
|
||||
value?: string;
|
||||
@ -15,6 +15,7 @@ export type IProps = {
|
||||
disableValidation?: boolean;
|
||||
validationError?: ValidationError;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
type IState = {
|
||||
@ -107,7 +108,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
|
||||
let errors: JSX.Element[] = [];
|
||||
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
|
||||
errors.push(
|
||||
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
|
||||
<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.INPUT_ERROR}>
|
||||
{value}
|
||||
</Typography>,
|
||||
);
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
border: 1px solid var(--grey-medium);
|
||||
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
font-family: var(--font-text-family);
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@ -76,16 +76,16 @@
|
||||
padding: 0 16px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
background: $white;
|
||||
background: var(--color-generic-white);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-is-errored="true"] {
|
||||
.input {
|
||||
border: 1px solid var(--red-flash);
|
||||
border: 1px solid var(--color-error-600);
|
||||
~ .fake-placeholder {
|
||||
color: var(--red-flash);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import { ReactNode } from "react";
|
||||
import CopyIcon from "@Assets/Icons/copy.svg";
|
||||
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
|
||||
@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
|
||||
public override render(): ReactNode {
|
||||
const value = this.state.value ?? "";
|
||||
return (
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
|
||||
<input
|
||||
onChange={this.onChange}
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
border: 1px solid var(--grey-medium);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
|
||||
&[data-errored="true"]{
|
||||
border: 1px solid var(--red-flash);
|
||||
&[data-errored="true"] {
|
||||
border: 1px solid var(--color-error-600);
|
||||
}
|
||||
|
||||
&[data-disabled="true"]{
|
||||
.container-label{
|
||||
|
||||
&[data-disabled="true"] {
|
||||
.container-label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
opacity: 0.6;
|
||||
@ -23,13 +23,11 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
cursor: pointer;
|
||||
padding: 24px;
|
||||
z-index: 1;
|
||||
|
||||
|
||||
|
||||
&[data-border-right-collapsed="true"] {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
@ -52,7 +50,7 @@
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 8px;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
padding: 0 16px;
|
||||
|
||||
&[data-open="true"] {
|
||||
@ -64,7 +62,7 @@
|
||||
.chevron-icon {
|
||||
height: 24px;
|
||||
|
||||
fill: $grey;
|
||||
fill: var(--color-neutral-500);
|
||||
transition: all 350ms $custom-easing;
|
||||
transform: rotate(90deg);
|
||||
|
||||
@ -87,7 +85,7 @@
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
top: 50px;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
|
||||
&[data-open="false"] {
|
||||
height: 0;
|
||||
|
||||
@ -5,7 +5,7 @@ import classNames from "classnames";
|
||||
import Image from "next/image";
|
||||
import React, { FormEvent, ReactNode } from "react";
|
||||
|
||||
import Typography, { ITypo, ITypoColor } from "../../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { NextRouter, useRouter } from "next/router";
|
||||
|
||||
@ -81,14 +81,14 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
|
||||
{selectedOption && (
|
||||
<>
|
||||
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
|
||||
<Typography typo={ITypo.P_18}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>
|
||||
<span className={classes["text"]}>{selectedOption?.label}</span>
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
{!selectedOption && (
|
||||
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
@ -110,7 +110,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
|
||||
className={classes["container-li"]}
|
||||
onClick={(e) => this.onSelect(option, e)}>
|
||||
<div className={classes["token-icon"]}>{option.icon}</div>
|
||||
<Typography typo={ITypo.P_18}>{option.label}</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{option.label}</Typography>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
|
||||
private renderErrors(): JSX.Element | null {
|
||||
if (!this.state.errors) return null;
|
||||
return (
|
||||
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
{this.props.placeholder} ne peut pas être vide
|
||||
</Typography>
|
||||
);
|
||||
|
||||
@ -3,89 +3,103 @@
|
||||
.root {
|
||||
position: relative;
|
||||
|
||||
.input {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
border: 1px solid var(--grey-medium);
|
||||
|
||||
&:disabled {
|
||||
&[data-is-disabled="true"] {
|
||||
opacity: var(--opacity-disabled, 0.3);
|
||||
.input-container {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(-35px);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([data-value=""]) {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(-35px);
|
||||
}
|
||||
}
|
||||
|
||||
&[type="number"] {
|
||||
&:focus {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(-35px);
|
||||
}
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
&::placeholder {
|
||||
background: var(--input-background, #fff);
|
||||
}
|
||||
|
||||
&:not([data-value=""]) {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(-35px);
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
}
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
.input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* For Chrome, Safari, and Opera */
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* For IE 10+ */
|
||||
&::-ms-inner-spin-button,
|
||||
&::-ms-outer-spin-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([data-value=""]) {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(-35px);
|
||||
}
|
||||
}
|
||||
|
||||
~ .fake-placeholder {
|
||||
z-index: 2;
|
||||
top: 35%;
|
||||
margin-left: 8px;
|
||||
padding: 0 16px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
background: $white;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-is-errored="true"] {
|
||||
.label {
|
||||
padding: 0px var(--spacing-2, 16px);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
|
||||
align-items: center;
|
||||
gap: var(--spacing-2, 16px);
|
||||
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
background: var(--input-background, #fff);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--input-main-border-hovered, #b4bec5);
|
||||
}
|
||||
|
||||
&:not([data-value=""]) {
|
||||
border: 1px solid var(--input-main-border-filled, #6d7e8a);
|
||||
.input {
|
||||
font-weight: var(--font-text-weight-semibold, 600);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-is-errored="true"] {
|
||||
border: 1px solid var(--input-error, #dc2625);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--input-main-border-focused, #005bcb);
|
||||
.input {
|
||||
font-weight: var(--font-text-weight-semibold, 600);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--red-flash);
|
||||
~ .fake-placeholder {
|
||||
color: var(--red-flash);
|
||||
display: flex;
|
||||
padding: 0px var(--spacing-2, 16px);
|
||||
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
flex: 1 0 0;
|
||||
border: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-empty, #6d7e8a);
|
||||
/* text/md/regular */
|
||||
font-family: var(--font-text-family, Poppins);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: var(--font-text-weight-regular, 400);
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
|
||||
&[type="number"] {
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* For Chrome, Safari, and Opera */
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* For IE 10+ */
|
||||
&::-ms-inner-spin-button,
|
||||
&::-ms-outer-spin-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -94,9 +108,9 @@
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24px;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.errors-container {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import React from "react";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import { ReactNode } from "react";
|
||||
import CopyIcon from "@Assets/Icons/copy.svg";
|
||||
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
|
||||
import classes from "./classes.module.scss";
|
||||
import classnames from "classnames";
|
||||
import Image from "next/image";
|
||||
|
||||
import { XMarkIcon, Square2StackIcon } from "@heroicons/react/24/outline";
|
||||
export type IProps = IBaseFieldProps & {
|
||||
canCopy?: boolean;
|
||||
password?: boolean;
|
||||
@ -21,31 +19,39 @@ export default class TextField extends BaseField<IProps> {
|
||||
public override render(): ReactNode {
|
||||
const value = this.state.value ?? "";
|
||||
return (
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
|
||||
<input
|
||||
onChange={this.onChange}
|
||||
data-value={value}
|
||||
data-has-validation-errors={(this.state.validationError === null).toString()}
|
||||
className={classnames(classes["input"], this.props.className)}
|
||||
value={value}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
name={this.props.name}
|
||||
disabled={this.props.disabled}
|
||||
type={this.props.password ? "password" : "text"}
|
||||
/>
|
||||
<div className={classes["fake-placeholder"]}>
|
||||
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
|
||||
</div>
|
||||
{this.props.canCopy && (
|
||||
<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
|
||||
<Image src={CopyIcon} alt="Copy icon" />
|
||||
</div>
|
||||
<div className={classes["root"]} data-is-disabled={this.props.disabled}>
|
||||
<label>
|
||||
{this.props.label && (
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
|
||||
{this.props.label}
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
|
||||
<input
|
||||
onChange={this.onChange}
|
||||
className={classnames(classes["input"], this.props.className)}
|
||||
placeholder={this.props.placeholder}
|
||||
value={value}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
name={this.props.name}
|
||||
disabled={this.props.disabled}
|
||||
type={this.props.password ? "password" : "text"}
|
||||
/>
|
||||
{this.props.canCopy && !this.hasError() && (
|
||||
<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
|
||||
<Square2StackIcon height="24px" width="24px" color={"var(--color-neutral-700)"} />
|
||||
</div>
|
||||
)}
|
||||
{this.hasError() && (
|
||||
<div className={classes["cross-icon"]} onClick={this.onCopyClick}>
|
||||
<XMarkIcon height="24px" width="24px" color="var(--input-error)" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -3,61 +3,92 @@
|
||||
.root {
|
||||
position: relative;
|
||||
|
||||
.textarea {
|
||||
resize: none;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
|
||||
&:read-only {
|
||||
&[data-is-disabled="true"] {
|
||||
opacity: var(--opacity-disabled, 0.3);
|
||||
.input-container {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
gap: 10px;
|
||||
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: 1px solid var(--grey-medium);
|
||||
|
||||
~ .fake-placeholder {
|
||||
z-index: 2;
|
||||
top: -12px;
|
||||
margin-left: 8px;
|
||||
padding: 0 16px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
background: $white;
|
||||
transform: translateY(35px);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(0px);
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
&::placeholder {
|
||||
background: var(--input-background, #fff);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
}
|
||||
|
||||
.input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0px var(--spacing-2, 16px);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
|
||||
align-items: center;
|
||||
gap: var(--spacing-2, 16px);
|
||||
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
background: var(--input-background, #fff);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--input-main-border-hovered, #b4bec5);
|
||||
}
|
||||
|
||||
&:not([data-value=""]) {
|
||||
~ .fake-placeholder {
|
||||
transform: translateY(0px);
|
||||
border: 1px solid var(--input-main-border-filled, #6d7e8a);
|
||||
.input {
|
||||
font-weight: var(--font-text-weight-semibold, 600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-is-errored="true"] {
|
||||
.textarea {
|
||||
border: 1px solid var(--red-flash);
|
||||
~ .fake-placeholder {
|
||||
color: var(--red-flash);
|
||||
&[data-is-errored="true"] {
|
||||
border: 1px solid var(--input-error, #dc2625);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:focus-visible {
|
||||
border: 1px solid var(--input-main-border-focused, #005bcb);
|
||||
.input {
|
||||
font-weight: var(--font-text-weight-semibold, 600);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
padding: 0px var(--spacing-2, 16px);
|
||||
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
flex: 1 0 0;
|
||||
border: none;
|
||||
height: 94px;
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-empty, #6d7e8a);
|
||||
/* text/md/regular */
|
||||
font-family: var(--font-text-family, Poppins);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: var(--font-text-weight-regular, 400);
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
|
||||
color: var(--input-placeholder-filled, #24282e);
|
||||
/* text/md/semibold */
|
||||
font-family: var(--font-text-family, Poppins);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: var(--font-text-weight-semibold, 600);
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import React from "react";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
|
||||
import classes from "./classes.module.scss";
|
||||
import classnames from "classnames";
|
||||
|
||||
@ -17,31 +16,30 @@ export default class TextAreaField extends BaseField<IProps> {
|
||||
public override render(): ReactNode {
|
||||
const value = this.state.value ?? "";
|
||||
return (
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
|
||||
<textarea
|
||||
name={this.props.name}
|
||||
rows={4}
|
||||
data-value={value}
|
||||
onChange={this.onChange}
|
||||
className={classnames(classes["textarea"], this.props.className)}
|
||||
value={value}
|
||||
readOnly={this.props.readonly}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
/>
|
||||
<div className={classes["fake-placeholder"]}>
|
||||
{this.props.placeholder} {!this.props.required && " (Facultatif)"}
|
||||
</div>
|
||||
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
<div className={classes["root"]} data-is-disabled={this.props.disabled}>
|
||||
<label>
|
||||
{this.props.label && (
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
|
||||
{this.props.label}
|
||||
</Typography>
|
||||
)}
|
||||
<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
|
||||
<textarea
|
||||
onChange={this.onChange}
|
||||
className={classnames(classes["input"], this.props.className)}
|
||||
placeholder={this.props.placeholder}
|
||||
value={value}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
name={this.props.name}
|
||||
disabled={this.props.disabled}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
public override componentDidMount() {
|
||||
this.setState({
|
||||
value: this.props.defaultValue ?? "",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import classes from "./classes.module.scss";
|
||||
import { IAppRule } from "@Front/Api/Entities/rule";
|
||||
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
|
||||
import { IHeaderLinkProps } from "../../../HeaderLink";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
|
||||
import useToggle from "@Front/Hooks/useToggle";
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
|
||||
@ -34,7 +34,11 @@ export default function HeaderSubmenu(props: IProps) {
|
||||
<div className={classes["container"]}>
|
||||
<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
|
||||
<div className={classes["content"]} onClick={toggle}>
|
||||
<Typography typo={isActive || isSubmenuOpened ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
|
||||
<Typography
|
||||
typo={isActive || isSubmenuOpened ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
|
||||
color={isActive || isSubmenuOpened ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{props.text}
|
||||
</Typography>
|
||||
{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}
|
||||
</div>
|
||||
<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
box-shadow: $shadow-nav;
|
||||
padding: 24px;
|
||||
position: absolute;
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
border: 1px solid $grey-medium;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
.underline {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
&[data-active="true"] {
|
||||
background-color: $black;
|
||||
background-color: var(--color-generic-black);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import Typography, { ITypo } from "../../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import useHoverable from "@Front/Hooks/useHoverable";
|
||||
|
||||
@ -37,7 +37,11 @@ export default function HeaderLink(props: IHeaderLinkProps) {
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}>
|
||||
<div className={classes["content"]}>
|
||||
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
|
||||
<Typography
|
||||
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
|
||||
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{props.text}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
|
||||
</Link>
|
||||
@ -46,7 +50,9 @@ export default function HeaderLink(props: IHeaderLinkProps) {
|
||||
return (
|
||||
<div className={classNames(classes["root"], classes["desactivated"])}>
|
||||
<div className={classes["content"]}>
|
||||
<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{props.text}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import useHoverable from "@Front/Hooks/useHoverable";
|
||||
|
||||
type IHeaderLinkProps = {
|
||||
@ -29,7 +29,11 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
|
||||
|
||||
return (
|
||||
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
|
||||
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
|
||||
<Typography
|
||||
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
|
||||
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{props.text}
|
||||
</Typography>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,13 +13,13 @@
|
||||
.underline {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
&[data-active="true"] {
|
||||
background-color: $black;
|
||||
background-color: var(--color-generic-black);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { IHeaderLinkProps } from "../HeaderLink";
|
||||
|
||||
import Typography, { ITypo } from "../../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import useHoverable from "@Front/Hooks/useHoverable";
|
||||
import HeaderSubmenuLink from "./HeaderSubmenuLink";
|
||||
@ -34,7 +34,11 @@ export default function HeaderSubmenu(props: IProps) {
|
||||
<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
|
||||
<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
|
||||
<div className={classes["content"]}>
|
||||
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
|
||||
<Typography
|
||||
typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
|
||||
color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{props.text}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
|
||||
{isHovered && (
|
||||
|
||||
@ -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,
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
|
||||
import Link from "next/link";
|
||||
import classNames from "classnames";
|
||||
import { useRouter } from "next/router";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
type IProps = {
|
||||
text: string | JSX.Element;
|
||||
@ -29,7 +29,11 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
|
||||
onClick={this.props.onClick}
|
||||
target={this.props.target}>
|
||||
<div className={classes["content"]}>
|
||||
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
|
||||
<Typography
|
||||
typo={this.props.isActive ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
|
||||
color={this.props.isActive ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{this.props.text}
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
flex-direction: column;
|
||||
width: 390px;
|
||||
max-height: 80vh;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
box-shadow: $shadow-nav;
|
||||
padding: 24px;
|
||||
position: absolute;
|
||||
@ -37,7 +37,7 @@
|
||||
gap: 8px;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
color: var(--pink-flash);
|
||||
color: var(--color-secondary-500);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -45,10 +45,20 @@
|
||||
margin-top: 24px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
cursor: pointer;
|
||||
&hover {
|
||||
background: var(--notification-unread-hovered, #ffe4d4);
|
||||
}
|
||||
|
||||
.missing-notification {
|
||||
padding: 56px 0;
|
||||
padding: var(--spacing-3);
|
||||
text-align: center;
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-primary-50);
|
||||
.notif-icon {
|
||||
cursor: pointer;
|
||||
margin-bottom: var(--radius-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
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";
|
||||
import NotifEmptyIcon from "@Assets/Icons/notif-empty.svg";
|
||||
|
||||
type IProps = {
|
||||
isOpen: boolean;
|
||||
@ -34,22 +35,23 @@ export default class NotificationModal extends React.Component<IProps, IState> {
|
||||
<div className={classes["background"]} onClick={this.props.closeModal} />
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["notification-header"]}>
|
||||
<Typography typo={ITypo.P_SB_16}>Notifications</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Notifications</Typography>
|
||||
<div className={classes["close-icon"]} onClick={this.props.closeModal}>
|
||||
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
|
||||
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500}>
|
||||
Tout marquer comme lu
|
||||
</Typography>
|
||||
<Check color={ITypoColor.PINK_FLASH} />
|
||||
<Check color={ETypoColor.COLOR_SECONDARY_500} />
|
||||
</div>
|
||||
<div className={classes["notification-body"]}>
|
||||
<>
|
||||
{!this.state.toastList || this.state.toastList.length === 0 ? (
|
||||
<div className={classes["missing-notification"]}>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
|
||||
<Image src={NotifEmptyIcon} alt="Notif Empty" className={classes["notif-icon"]}></Image>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
|
||||
Vous n'avez pas de notifications.
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
box-shadow: $shadow-nav;
|
||||
padding: 24px;
|
||||
position: absolute;
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
border: 1px solid $grey-medium;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 83px;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
box-shadow: $shadow-nav;
|
||||
padding: 0 48px;
|
||||
position: sticky;
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
.logo-container {
|
||||
> a {
|
||||
cursor: default !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.logo {
|
||||
width: 174px;
|
||||
@ -81,6 +81,6 @@
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--grey-soft);
|
||||
background-color: var(--color-neutral-50);
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Image from "next/image";
|
||||
import LogoIcon from "@Assets/logo.svg";
|
||||
import LogoIcon from "@Assets/logo_standard_neutral.svg";
|
||||
import Link from "next/link";
|
||||
import Navigation from "./Navigation";
|
||||
import Notifications from "./Notifications";
|
||||
@ -16,7 +16,7 @@ import LifeBuoy from "@Assets/Icons/life_buoy.svg";
|
||||
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
|
||||
import JwtService from "@Front/Services/JwtService/JwtService";
|
||||
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import { InformationCircleIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
enum EHeaderOpeningState {
|
||||
@ -72,7 +72,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
|
||||
<link rel="shortcut icon" href={"/favicon.svg"} />
|
||||
</Head>
|
||||
<div className={classes["logo-container"]}>
|
||||
<Link href={"#"}>
|
||||
<Link href={this.props.isUserConnected ? Module.getInstance().get().modules.pages.Folder.props.path : "#"}>
|
||||
<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
|
||||
</Link>
|
||||
</div>
|
||||
@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
|
||||
{this.state.cancelAt && (
|
||||
<div className={classes["subscription-line"]}>
|
||||
<InformationCircleIcon height="24" />;
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||
Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
|
||||
{this.state.cancelAt.toLocaleDateString()}.
|
||||
</Typography>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 8px solid;
|
||||
border-color: var(--grey-soft);
|
||||
border-right-color: var(--blue-soft);
|
||||
border-color: var(--color-neutral-50);
|
||||
border-right-color: var(--color-info-500-soft);
|
||||
animation: s2 1s infinite linear;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import Image from "next/image";
|
||||
import DisconnectIcon from "@Assets/Icons/disconnect.svg";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import { useRouter } from "next/router";
|
||||
import UserStore from "@Front/Stores/UserStore";
|
||||
import { FrontendVariables } from "@Front/Config/VariablesFront";
|
||||
@ -11,14 +11,16 @@ export default function LogOut() {
|
||||
const router = useRouter();
|
||||
const variables = FrontendVariables.getInstance();
|
||||
|
||||
const disconnect = async() => {
|
||||
const disconnect = async () => {
|
||||
await UserStore.instance.disconnect();
|
||||
router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes["root"]} onClick={disconnect}>
|
||||
<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Déconnexion
|
||||
</Typography>
|
||||
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sub-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
import React from "react";
|
||||
import Modal, { IProps as IPropsModal } from "..";
|
||||
import Button, { EButtonVariant } from "../../Button";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = IPropsModal & {
|
||||
closeText: string | JSX.Element;
|
||||
};
|
||||
|
||||
type IState = {
|
||||
isOpen: boolean;
|
||||
};
|
||||
export default class Alert extends React.Component<IProps, IState> {
|
||||
static defaultProps = {
|
||||
closeText: "Ok",
|
||||
...Modal.defaultProps,
|
||||
};
|
||||
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOpen: this.props.isOpen ?? true,
|
||||
};
|
||||
this.onClose = this.onClose.bind(this);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element | null {
|
||||
return (
|
||||
<Modal
|
||||
closeBtn={this.props.closeBtn}
|
||||
isOpen={this.state.isOpen}
|
||||
onClose={this.onClose}
|
||||
header={this.props.header}
|
||||
footer={this.footer()}>
|
||||
{this.props.children}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
private footer(): JSX.Element {
|
||||
return (
|
||||
<div className={classes["button-container"]}>
|
||||
<Button variant={EButtonVariant.SECONDARY} onClick={this.onClose}>
|
||||
{this.props.closeText}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private onClose() {
|
||||
this.setState({ isOpen: false });
|
||||
this.props.onClose?.();
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.buttons-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sub-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import Modal, { IProps as IPropsModal } from "..";
|
||||
import Button, { EButtonVariant } from "../../Button";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = IPropsModal & {
|
||||
onAccept?: () => void;
|
||||
cancelText: string | JSX.Element;
|
||||
cancelPath?: string;
|
||||
confirmText: string | JSX.Element;
|
||||
showCancelButton: boolean;
|
||||
showButtons: boolean;
|
||||
canConfirm: boolean;
|
||||
};
|
||||
|
||||
type IState = {};
|
||||
|
||||
export default class Confirm extends React.Component<IProps, IState> {
|
||||
static defaultProps = {
|
||||
showCancelButton: true,
|
||||
cancelText: "Cancel",
|
||||
confirmText: "Confirm",
|
||||
canConfirm: true,
|
||||
showButtons: true,
|
||||
...Modal.defaultProps,
|
||||
};
|
||||
|
||||
public override render(): JSX.Element | null {
|
||||
return (
|
||||
<Modal
|
||||
closeBtn={this.props.closeBtn}
|
||||
header={this.props.header}
|
||||
footer={this.footer()}
|
||||
animationDelay={this.props.animationDelay}
|
||||
{...this.props}>
|
||||
{this.props.children}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
private footer(): JSX.Element | null {
|
||||
if (!this.props.showButtons) return null;
|
||||
return (
|
||||
<div className={classes["buttons-container"]}>
|
||||
{this.props.showCancelButton &&
|
||||
(this.props.cancelPath ? (
|
||||
<Link href={this.props.cancelPath} className={classes["sub-container"]}>
|
||||
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
|
||||
{this.props.cancelText}
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<div className={classes["sub-container"]}>
|
||||
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}>
|
||||
{this.props.cancelText}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className={classes["sub-container"]}>
|
||||
<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={!this.props.canConfirm} fullwidth>
|
||||
{this.props.confirmText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {
|
||||
content: JSX.Element;
|
||||
};
|
||||
|
||||
export default class Footer extends React.Component<IProps> {
|
||||
public override render(): JSX.Element {
|
||||
return <footer className={classes["root"]}>{this.props.content}</footer>;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
h5 {
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
type IProps = {
|
||||
content: string | JSX.Element;
|
||||
};
|
||||
|
||||
export default class Header extends React.Component<IProps> {
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<header className={classes["root"]}>
|
||||
<Typography typo={ITypo.H2}>{this.props.content}</Typography>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
// import Loader from "Components/Elements/Loader";
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
type IProps = {
|
||||
text?: string | JSX.Element;
|
||||
};
|
||||
|
||||
export default class PopUpLoader extends React.Component<IProps> {
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
{/* <Loader /> */}
|
||||
TODO: INTEGRER LOARDER ISLOADING
|
||||
<Typography typo={ITypo.P_16}>{this.props.text && this.props.text}</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,125 +1,60 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
@keyframes smooth-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes smooth-disappear {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
z-index: 6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--animation-delay: 1ms;
|
||||
animation: smooth-appear var(--animation-delay) $custom-easing;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
|
||||
&[data-will-close="true"] {
|
||||
animation: smooth-disappear var(--animation-delay) $custom-easing;
|
||||
opacity: 0;
|
||||
.content {
|
||||
position: fixed;
|
||||
max-width: 600px;
|
||||
max-height: 75vh;
|
||||
border-radius: var(--modal-radius, 0px);
|
||||
background: var(--modal-background, #fff);
|
||||
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
|
||||
gap: var(--spacing-md, 16px);
|
||||
}
|
||||
|
||||
.children {
|
||||
padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
|
||||
justify-content: center;
|
||||
gap: var(--spacing-md, 16px);
|
||||
}
|
||||
|
||||
&.fullwidth {
|
||||
min-width: 85vw;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
min-width: 85vw;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $modal-background;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 610px;
|
||||
max-height: 90%;
|
||||
background: $white;
|
||||
box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
|
||||
overflow: auto;
|
||||
padding: 32px;
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
width: 90%;
|
||||
max-width: 493px;
|
||||
}
|
||||
|
||||
.cross {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.close-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transparant-background {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[data-side-background="true"] {
|
||||
.container {
|
||||
max-width: 711px;
|
||||
|
||||
.sub-container {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
||||
p {
|
||||
max-width: 711px;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner {
|
||||
@media (max-width: $screen-s) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-image {
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-image {
|
||||
@media (min-width: $screen-s) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-s) {
|
||||
width: 100%;
|
||||
max-height: 82px;
|
||||
min-height: 82px;
|
||||
}
|
||||
}
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,113 +1,65 @@
|
||||
import CrossIcon from "@Assets/Icons/cross.svg";
|
||||
import Image from "next/image";
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Button, { EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
|
||||
import IconButton, { EIconButtonVariant } from "../IconButton";
|
||||
import Typography, { ETypo } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import Footer from "./Elements/Footer";
|
||||
import Header from "./Elements/Header";
|
||||
import Loader from "./Elements/Loader";
|
||||
|
||||
export type IProps = {
|
||||
closeBtn?: boolean;
|
||||
header?: string | JSX.Element;
|
||||
footer?: JSX.Element | null;
|
||||
textLoader?: string | JSX.Element;
|
||||
type IProps = {
|
||||
className?: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
hasTransparentBackground?: boolean;
|
||||
hasContainerClosable?: boolean;
|
||||
withSideBackground?: boolean;
|
||||
onClose?: () => void;
|
||||
children?: React.ReactNode;
|
||||
animationDelay?: number;
|
||||
title?: string;
|
||||
firstButton?: IButtonProps;
|
||||
secondButton?: IButtonProps;
|
||||
fullwidth?: boolean;
|
||||
fullscreen?: boolean;
|
||||
};
|
||||
|
||||
type IState = {
|
||||
willClose: boolean;
|
||||
isOpen: boolean;
|
||||
};
|
||||
export default function Modal(props: IProps) {
|
||||
const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = props;
|
||||
|
||||
export default class Modal extends React.Component<IProps, IState> {
|
||||
static defaultProps = {
|
||||
animationDelay: 250,
|
||||
};
|
||||
public rootRefElement = React.createRef<HTMLDivElement>();
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
this.close = this.close.bind(this);
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["backdrop"]} onClick={onClose} />
|
||||
|
||||
this.state = {
|
||||
willClose: false,
|
||||
isOpen: this.props.isOpen,
|
||||
};
|
||||
}
|
||||
|
||||
public override render(): JSX.Element | null {
|
||||
if (!this.state.isOpen) return null;
|
||||
return (
|
||||
<div
|
||||
ref={this.rootRefElement}
|
||||
className={classes["root"]}
|
||||
data-side-background={this.props.withSideBackground}
|
||||
data-will-close={this.state.willClose.toString()}>
|
||||
<div className={classes["background"]} onClick={this.close} />
|
||||
<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
|
||||
{this.props.closeBtn && (
|
||||
<div className={classes["cross"]}>
|
||||
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
|
||||
</div>
|
||||
)}
|
||||
<div className={classes["sub-container"]}>
|
||||
{this.props.header && <Header content={this.props.header} />}
|
||||
className={classNames(
|
||||
classes["content"],
|
||||
className,
|
||||
fullwidth && classes["fullwidth"],
|
||||
fullscreen && classes["fullscreen"],
|
||||
)}>
|
||||
<div className={classes["header"]}>
|
||||
{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
|
||||
<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon />} />
|
||||
</div>
|
||||
|
||||
<Typography typo={ITypo.P_16}>
|
||||
<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
|
||||
</Typography>
|
||||
{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
|
||||
</div>
|
||||
<div className={classNames(classes["children"], className)}>{children}</div>
|
||||
|
||||
<div className={classes["footer"]}>
|
||||
{firstButton && (
|
||||
<Button
|
||||
{...firstButton}
|
||||
variant={firstButton.variant ?? EButtonVariant.PRIMARY}
|
||||
styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}>
|
||||
{firstButton.children}
|
||||
</Button>
|
||||
)}
|
||||
{secondButton && (
|
||||
<Button
|
||||
{...secondButton}
|
||||
variant={secondButton.variant ?? EButtonVariant.PRIMARY}
|
||||
styletype={secondButton.styletype ?? EButtonstyletype.CONTAINED}>
|
||||
{secondButton.children}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public override componentDidUpdate(prevProps: IProps): void {
|
||||
if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
|
||||
this.setState({ willClose: true });
|
||||
window.setTimeout(() => {
|
||||
this.setState({
|
||||
isOpen: false,
|
||||
willClose: false,
|
||||
});
|
||||
}, this.props.animationDelay);
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
|
||||
this.setState({ isOpen: true });
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
|
||||
}
|
||||
|
||||
public override componentDidMount(): void {
|
||||
document.addEventListener("keydown", this.handleKeyDown);
|
||||
}
|
||||
|
||||
public override componentWillUnmount(): void {
|
||||
document.body.style.overflow = "auto";
|
||||
document.removeEventListener("keydown", this.handleKeyDown);
|
||||
}
|
||||
|
||||
protected close() {
|
||||
if (this.props.hasContainerClosable === false) return;
|
||||
if (this.state.willClose) return;
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
|
||||
|
||||
private handleKeyDown = (e: KeyboardEvent): void => {
|
||||
if (e.key === "Escape" || e.key === "Esc") {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border: 1px solid $grey-medium;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
background-color: transparent;
|
||||
|
||||
.placeholder {
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-family: var(--font-primary);
|
||||
font-family: var(--font-text-family);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
@ -66,12 +66,12 @@
|
||||
z-index: 1;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
|
||||
&[data-is-errored="true"] {
|
||||
.input {
|
||||
border: 1px solid var(--red-flash);
|
||||
border: 1px solid var(--color-error-600);
|
||||
~ .fake-placeholder {
|
||||
color: var(--red-flash);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import React from "react";
|
||||
import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select";
|
||||
|
||||
import { IOption } from "../Form/SelectField";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { styles } from "./styles";
|
||||
import { ValidationError } from "class-validator";
|
||||
@ -37,8 +37,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
|
||||
this.state = {
|
||||
isFocused: false,
|
||||
selectedOptions: [],
|
||||
validationError: this.props.validationError ?? null
|
||||
|
||||
validationError: this.props.validationError ?? null,
|
||||
};
|
||||
this.hasError = this.hasError.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
@ -56,7 +55,9 @@ export default class MultiSelect extends React.Component<IProps, IState> {
|
||||
<div
|
||||
className={classes["placeholder"]}
|
||||
data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{this.props.placeholder}
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
<div className={classes["input-container"]}>
|
||||
@ -147,7 +148,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
|
||||
let errors: JSX.Element[] = [];
|
||||
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
|
||||
errors.push(
|
||||
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
|
||||
<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
{value}
|
||||
</Typography>,
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ export const styles = {
|
||||
...provided,
|
||||
cursor: "pointer",
|
||||
padding: "8px 24px",
|
||||
fontFamily: "var(--font-primary)",
|
||||
fontFamily: "var(--font-text-family)",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
@ -25,7 +25,7 @@ export const styles = {
|
||||
...provided,
|
||||
padding: 0,
|
||||
minWidth: "100px",
|
||||
fontFamily: "var(--font-primary)",
|
||||
fontFamily: "var(--font-text-family)",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "600",
|
||||
fontSize: "16px",
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import TextField from "../Form/TextField";
|
||||
import Button, { EButtonVariant } from "../Button";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
|
||||
import Form from "../Form";
|
||||
import Mail from "@Assets/Icons/mail.svg";
|
||||
@ -70,23 +70,23 @@ export default class Newsletter extends React.Component<IProps, IState> {
|
||||
<div className={classes["container"]}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["text"]}>
|
||||
<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
|
||||
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_GENERIC_WHITE}>
|
||||
Soyez informé, soyez protégé
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
|
||||
Recevez chaque mois nos astuces d’utilisation, promotions exclusives et conseils d'experts pour assurer
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_WHITE}>
|
||||
Recevez chaque mois nos astuces d'utilisation, promotions exclusives et conseils d'experts pour assurer
|
||||
votre cybersécurité !
|
||||
</Typography>
|
||||
{this.state.errorMessage && (
|
||||
<div>
|
||||
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
{this.state.errorMessage}
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
{this.state.successMessage && (
|
||||
<div>
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SUCCESS_600}>
|
||||
{this.state.successMessage}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -97,7 +97,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
|
||||
<Form onSubmit={this.handleSubmit} className={classes["form"]}>
|
||||
<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
|
||||
<div className={classes["buttons-container"]}>
|
||||
<Button fullwidth type="submit" variant={EButtonVariant.WHITE}>
|
||||
<Button fullwidth type="submit" variant={EButtonVariant.PRIMARY}>
|
||||
Envoyer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
background-color: $grey-medium;
|
||||
background-color: var(--color-neutral-200);
|
||||
box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08);
|
||||
height: 12px;
|
||||
border-radius: 5px;
|
||||
@ -15,7 +15,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: width 300ms;
|
||||
background-color: $turquoise-flash;
|
||||
background-color: var(--color-secondary-500);
|
||||
|
||||
.percentage {
|
||||
width: 0;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo } from "../../Typography";
|
||||
import Typography, { ETypo } from "../../Typography";
|
||||
|
||||
type IProps = {
|
||||
percentage: number;
|
||||
@ -11,7 +11,7 @@ export default class ProgressBar extends React.Component<IProps> {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["progress"]} style={{ width: quantity }}>
|
||||
<Typography typo={ITypo.P_16}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||
<div className={classes["percentage"]}>{quantity}</div>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import ProgressBar from "./ProgressBar";
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Typography, { ETypo } from "../Typography";
|
||||
|
||||
type IProps = {
|
||||
currentNumber: number;
|
||||
@ -19,7 +19,7 @@ export default class QuantityProgressBar extends React.Component<IProps> {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["title"]}>
|
||||
<Typography typo={ITypo.P_16}>{this.props.title}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>{this.props.title}</Typography>
|
||||
</div>
|
||||
<ProgressBar percentage={percentage} />
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
background-color: transparent;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid $turquoise-flash;
|
||||
border: 1px solid var(--color-secondary-500);
|
||||
border-radius: 100px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
@ -25,7 +25,7 @@
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-color: $turquoise-flash;
|
||||
background-color: var(--color-secondary-500);
|
||||
border-radius: 100px;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
import Tooltip from "../ToolTip";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {
|
||||
@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
|
||||
};
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||
<label className={classes["root"]}>
|
||||
<input
|
||||
type="radio"
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
background-color: $white;
|
||||
border: 1px solid $grey-medium;
|
||||
background-color: var(--color-generic-white);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
position: relative;
|
||||
|
||||
.fake-placeholder {
|
||||
position: absolute;
|
||||
left: 47px;
|
||||
top: 24px;
|
||||
color: $grey;
|
||||
color: var(--color-neutral-500);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -26,6 +26,6 @@
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: $grey;
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import LoopIcon from "@Assets/Icons/loop.svg";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {
|
||||
@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
|
||||
<div className={classes["root"]}>
|
||||
<Image src={LoopIcon} alt="Loop icon" />
|
||||
{!this.state.hasValue && (
|
||||
<Typography typo={ITypo.P_ERR_18}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
.switch-container {
|
||||
position: relative;
|
||||
width: 46px;
|
||||
height: 24px;
|
||||
background-color: var(--grey-medium);
|
||||
background-color: var(--color-neutral-200);
|
||||
border-radius: 64px;
|
||||
|
||||
transition: all 200ms ease-in-out;
|
||||
&[data-checked="true"] {
|
||||
background-color: var(--turquoise-flash);
|
||||
background-color: var(--color-secondary-500);
|
||||
|
||||
.round {
|
||||
left: 24px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
|
||||
type IProps = {
|
||||
onChange?: (checked: boolean) => void;
|
||||
@ -28,7 +28,7 @@ export default function Switch({ onChange, checked, label, disabled }: IProps) {
|
||||
<div className={classes["round"]} />
|
||||
</div>
|
||||
</div>
|
||||
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||
{label}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -25,10 +25,13 @@
|
||||
.root {
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
background: var(--orange-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;
|
||||
@ -45,7 +48,7 @@
|
||||
&[data-clickable="true"] {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--orange-soft-hover);
|
||||
background: var(--color-warning-500-soft);
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +66,7 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: var(--font-primary);
|
||||
font-family: var(--font-text-family);
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
@ -88,8 +91,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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-primary);
|
||||
font-family: var(--font-text-family);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
|
||||
@ -7,9 +7,9 @@ import React from "react";
|
||||
// Styles
|
||||
import classes from "./classes.module.scss";
|
||||
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import CheckIcon from "@Assets/Icons/check.svg";
|
||||
import Image from "next/image";
|
||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
// 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;
|
||||
@ -55,9 +57,13 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
|
||||
<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>
|
||||
@ -74,16 +80,21 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
|
||||
|
||||
private getToastTitle(title: string | React.ReactNode) {
|
||||
if (typeof title === "string") {
|
||||
return <Typography typo={ITypo.P_16}>{title}</Typography>;
|
||||
return <Typography typo={ETypo.TEXT_MD_REGULAR}>{title}</Typography>;
|
||||
}
|
||||
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 (
|
||||
<div className={classes["text-container"]}>
|
||||
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
{text}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-radius: 8px;
|
||||
|
||||
& > *:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.root {
|
||||
min-width: 100px;
|
||||
max-width: 320px;
|
||||
background: $white;
|
||||
background: var(--color-generic-white);
|
||||
border-radius: 5px !important;
|
||||
position: fixed;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
@ -29,5 +29,5 @@
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
margin-top: -4px;
|
||||
fill: $white;
|
||||
fill: var(--color-generic-white);
|
||||
}
|
||||
|
||||
@ -19,18 +19,18 @@ type IState = {
|
||||
const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
|
||||
({ theme }) => ({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
backgroundColor: "var(--white)",
|
||||
color: "var(--black)",
|
||||
backgroundColor: "var(--color-generic-white)",
|
||||
color: "var(--color-generic-black)",
|
||||
boxShadow: "0px 4px 24px 0px #00000026",
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
lineHeight: "22px",
|
||||
fontFamily: "var(--font-primary)",
|
||||
fontFamily: "var(--font-text-family)",
|
||||
padding: "16px",
|
||||
borderRadius: "0px",
|
||||
},
|
||||
[`& .${tooltipClasses.arrow}`]: {
|
||||
color: "var(--white)",
|
||||
color: "var(--color-generic-white)",
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
@ -2,165 +2,280 @@
|
||||
@import "@Themes/modes.scss";
|
||||
|
||||
.root {
|
||||
color: $black;
|
||||
vertical-align: center;
|
||||
font-family: "Inter", sans-serif;
|
||||
&.H1-60 {
|
||||
font-family: var(--font-text-family);
|
||||
|
||||
color: var(--data-color, var(--color-neutral-950));
|
||||
|
||||
//Displays
|
||||
&.display-large {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 56px;
|
||||
line-height: 67.2px;
|
||||
font-weight: 600;
|
||||
font-size: 50px;
|
||||
line-height: 75px;
|
||||
letter-spacing: -0.8px;
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
font-size: 48px;
|
||||
line-height: 56.7px;
|
||||
line-height: 72px;
|
||||
}
|
||||
}
|
||||
&.display-medium {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
line-height: 72px;
|
||||
letter-spacing: -0.8px;
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
font-size: 48px;
|
||||
line-height: 72px;
|
||||
}
|
||||
}
|
||||
&.display-small {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
line-height: 66px;
|
||||
letter-spacing: -0.8px;
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
font-size: 48px;
|
||||
line-height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
&.H1-bis-40 {
|
||||
//Titles
|
||||
&.title-h1 {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
&.title-h2 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
line-height: 54px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
&.title-h3 {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
|
||||
&.H2-30 {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
&.H3-24 {
|
||||
&.title-h4 {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 42px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
&.title-h5 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
&.title-h6 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
|
||||
&.Paragraphe-semibold-18 {
|
||||
//Text large
|
||||
&.text-lg-bold {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
&.text-lg-semibold {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Paragraphe-simple-18 {
|
||||
&.text-lg-regular {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Paragraphe-MAJ-18 {
|
||||
&.text-lg-uppercase {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.5%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.Nav-header-off-18 {
|
||||
&.text-lg-light {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
color: $grey;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Paragraphe-18-error {
|
||||
//Text medium
|
||||
&.text-md-bold {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Paragraphe-semibold-16 {
|
||||
&.text-md-semibold {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Nav-input-off-16 {
|
||||
&.text-md-regular {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
color: $grey;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Paragraphe-simple-16 {
|
||||
&.text-md-uppercase {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.005em;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.Paragraphe-16-error {
|
||||
color: $re-hover;
|
||||
&.text-md-light {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Caption_14 {
|
||||
//Text small
|
||||
&.text-sm-bold {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.Caption_14-semibold {
|
||||
&.text-sm-semibold {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
&.text-sm-regular {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
&.text-sm-uppercase {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.5%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&.text-sm-light {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.re-hover {
|
||||
color: $re-hover;
|
||||
//Text extra small
|
||||
&.text-xs-bold {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
&.text-xs-semibold {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
&.text-xs-regular {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
&.text-xs-uppercase {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.5%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&.text-xs-light {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.5%;
|
||||
}
|
||||
|
||||
&.grey {
|
||||
color: $grey;
|
||||
//Caption
|
||||
&.caption-bold {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
|
||||
&.black {
|
||||
color: $black;
|
||||
&.caption-semibold {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
|
||||
&.purple-flash {
|
||||
color: var(--purple-flash);
|
||||
&.caption-regular {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
|
||||
&.pink-flash {
|
||||
color: var(--pink-flash);
|
||||
&.caption-uppercase {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.green-flash {
|
||||
color: var(--green-flash);
|
||||
}
|
||||
|
||||
&.red-flash {
|
||||
color: var(--red-flash);
|
||||
}
|
||||
|
||||
&.orange-flash {
|
||||
color: var(--orange-flash);
|
||||
}
|
||||
|
||||
&.white {
|
||||
color: $white;
|
||||
&.caption-light {
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,60 +3,174 @@ import classes from "./classes.module.scss";
|
||||
import classNames from "classnames";
|
||||
|
||||
type IProps = {
|
||||
typo: ITypo;
|
||||
typo: ETypo;
|
||||
children: React.ReactNode;
|
||||
color?: ITypoColor;
|
||||
color?: ETypoColor;
|
||||
className?: string;
|
||||
title?: string;
|
||||
type?: "div" | "span";
|
||||
onClick?: () => void;
|
||||
};
|
||||
type IState = {};
|
||||
|
||||
export enum ITypo {
|
||||
H1 = "H1-60",
|
||||
H1Bis = "H1-bis-40",
|
||||
H2 = "H2-30",
|
||||
H3 = "H3-24",
|
||||
export enum ETypo {
|
||||
DISPLAY_LARGE = "display-large",
|
||||
DISPLAY_MEDIUM = "display-medium",
|
||||
DISPLAY_SMALL = "display-small",
|
||||
|
||||
P_SB_18 = "Paragraphe-semibold-18",
|
||||
P_18 = "Paragraphe-simple-18",
|
||||
P_MAJ_18 = "Paragraphe-MAJ-18",
|
||||
NAV_HEADER_18 = "Nav-header-off-18",
|
||||
P_ERR_18 = "Paragraphe-18-error",
|
||||
TITLE_H1 = "title-h1",
|
||||
TITLE_H2 = "title-h2",
|
||||
TITLE_H3 = "title-h3",
|
||||
TITLE_H4 = "title-h4",
|
||||
TITLE_H5 = "title-h5",
|
||||
TITLE_H6 = "title-h6",
|
||||
|
||||
P_SB_16 = "Paragraphe-semibold-16",
|
||||
P_16 = "Paragraphe-simple-16",
|
||||
NAV_INPUT_16 = "Nav-input-off-16",
|
||||
P_ERR_16 = "Paragraphe-16-error",
|
||||
TEXT_LG_BOLD = "text-lg-bold",
|
||||
TEXT_LG_SEMIBOLD = "text-lg-semibold",
|
||||
TEXT_LG_REGULAR = "text-lg-regular",
|
||||
TEXT_LG_UPPERCASE = "text-lg-uppercase",
|
||||
TEXT_LG_light = "text-lg-light",
|
||||
|
||||
CAPTION_14 = "Caption_14",
|
||||
CAPTION_14_SB = "Caption_14-semibold",
|
||||
TEXT_MD_BOLD = "text-md-bold",
|
||||
TEXT_MD_SEMIBOLD = "text-md-semibold",
|
||||
TEXT_MD_REGULAR = "text-md-regular",
|
||||
TEXT_MD_UPPERCASE = "text-md-uppercase",
|
||||
TEXT_MD_light = "text-md-light",
|
||||
|
||||
TEXT_SM_BOLD = "text-sm-bold",
|
||||
TEXT_SM_SEMIBOLD = "text-sm-semibold",
|
||||
TEXT_SM_REGULAR = "text-sm-regular",
|
||||
TEXT_SM_UPPERCASE = "text-sm-uppercase",
|
||||
TEXT_SM_light = "text-sm-light",
|
||||
|
||||
TEXT_XS_BOLD = "text-xs-bold",
|
||||
TEXT_XS_SEMIBOLD = "text-xs-semibold",
|
||||
TEXT_XS_REGULAR = "text-xs-regular",
|
||||
TEXT_XS_UPPERCASE = "text-xs-uppercase",
|
||||
TEXT_XS_light = "text-xs-light",
|
||||
|
||||
CAPTION_BOLD = "caption-bold",
|
||||
CAPTION_SEMIBOLD = "caption-semibold",
|
||||
CAPTION_REGULAR = "caption-regular",
|
||||
CAPTION_UPPERCASE = "caption-uppercase",
|
||||
CAPTION_LIGHT = "caption-light",
|
||||
}
|
||||
|
||||
export enum ITypoColor {
|
||||
RE_HOVER = "re-hover",
|
||||
GREY = "grey",
|
||||
BLACK = "black",
|
||||
PURPLE_FLASH = "purple-flash",
|
||||
PINK_FLASH = "pink-flash",
|
||||
GREEN_FLASH = "green-flash",
|
||||
ORANGE_FLASH = "orange-flash",
|
||||
RED_FLASH = "red-flash",
|
||||
WHITE = "white",
|
||||
export enum ETypoColor {
|
||||
COLOR_GENERIC_BLACK = "--color-generic-black",
|
||||
COLOR_GENERIC_WHITE = "--color-generic-white",
|
||||
COLOR_GENERIC_NONE = "--color-generic-none",
|
||||
|
||||
COLOR_NEUTRAL_50 = "--color-neutral-50",
|
||||
COLOR_NEUTRAL_100 = "--color-neutral-100",
|
||||
COLOR_NEUTRAL_200 = "--color-neutral-200",
|
||||
COLOR_NEUTRAL_300 = "--color-neutral-300",
|
||||
COLOR_NEUTRAL_400 = "--color-neutral-400",
|
||||
COLOR_NEUTRAL_500 = "--color-neutral-500",
|
||||
COLOR_NEUTRAL_600 = "--color-neutral-600",
|
||||
COLOR_NEUTRAL_700 = "--color-neutral-700",
|
||||
COLOR_NEUTRAL_800 = "--color-neutral-800",
|
||||
COLOR_NEUTRAL_900 = "--color-neutral-900",
|
||||
COLOR_NEUTRAL_950 = "--color-neutral-950",
|
||||
|
||||
COLOR_PRIMARY_50 = "--color-primary-50",
|
||||
COLOR_PRIMARY_100 = "--color-primary-100",
|
||||
COLOR_PRIMARY_200 = "--color-primary-200",
|
||||
COLOR_PRIMARY_300 = "--color-primary-300",
|
||||
COLOR_PRIMARY_400 = "--color-primary-400",
|
||||
COLOR_PRIMARY_500 = "--color-primary-500",
|
||||
COLOR_PRIMARY_600 = "--color-primary-600",
|
||||
COLOR_PRIMARY_700 = "--color-primary-700",
|
||||
COLOR_PRIMARY_800 = "--color-primary-800",
|
||||
COLOR_PRIMARY_900 = "--color-primary-900",
|
||||
COLOR_PRIMARY_950 = "--color-primary-950",
|
||||
|
||||
COLOR_SECONDARY_50 = "--color-secondary-50",
|
||||
COLOR_SECONDARY_100 = "--color-secondary-100",
|
||||
COLOR_SECONDARY_200 = "--color-secondary-200",
|
||||
COLOR_SECONDARY_300 = "--color-secondary-300",
|
||||
COLOR_SECONDARY_400 = "--color-secondary-400",
|
||||
COLOR_SECONDARY_500 = "--color-secondary-500",
|
||||
COLOR_SECONDARY_600 = "--color-secondary-600",
|
||||
COLOR_SECONDARY_700 = "--color-secondary-700",
|
||||
COLOR_SECONDARY_800 = "--color-secondary-800",
|
||||
COLOR_SECONDARY_900 = "--color-secondary-900",
|
||||
COLOR_SECONDARY_950 = "--color-secondary-950",
|
||||
|
||||
COLOR_ERROR_50 = "--color-error-50",
|
||||
COLOR_ERROR_100 = "--color-error-100",
|
||||
COLOR_ERROR_200 = "--color-error-200",
|
||||
COLOR_ERROR_300 = "--color-error-300",
|
||||
COLOR_ERROR_400 = "--color-error-400",
|
||||
COLOR_ERROR_500 = "--color-error-500",
|
||||
COLOR_ERROR_600 = "--color-error-600",
|
||||
COLOR_ERROR_700 = "--color-error-700",
|
||||
COLOR_ERROR_800 = "--color-error-800",
|
||||
COLOR_ERROR_900 = "--color-error-900",
|
||||
COLOR_ERROR_950 = "--color-error-950",
|
||||
|
||||
COLOR_WARNING_50 = "--color-warning-50",
|
||||
COLOR_WARNING_100 = "--color-warning-100",
|
||||
COLOR_WARNING_200 = "--color-warning-200",
|
||||
COLOR_WARNING_300 = "--color-warning-300",
|
||||
COLOR_WARNING_400 = "--color-warning-400",
|
||||
COLOR_WARNING_500 = "--color-warning-500",
|
||||
COLOR_WARNING_700 = "--color-warning-700",
|
||||
COLOR_WARNING_800 = "--color-warning-800",
|
||||
COLOR_WARNING_900 = "--color-warning-900",
|
||||
COLOR_WARNING_950 = "--color-warning-950",
|
||||
|
||||
COLOR_SUCCESS_50 = "--color-success-50",
|
||||
COLOR_SUCCESS_100 = "--color-success-100",
|
||||
COLOR_SUCCESS_200 = "--color-success-200",
|
||||
COLOR_SUCCESS_300 = "--color-success-300",
|
||||
COLOR_SUCCESS_400 = "--color-success-400",
|
||||
COLOR_SUCCESS_500 = "--color-success-500",
|
||||
COLOR_SUCCESS_600 = "--color-success-600",
|
||||
COLOR_SUCCESS_700 = "--color-success-700",
|
||||
COLOR_SUCCESS_800 = "--color-success-800",
|
||||
COLOR_SUCCESS_900 = "--color-success-900",
|
||||
COLOR_SUCCESS_950 = "--color-success-950",
|
||||
|
||||
COLOR_INFO_50 = "--color-info-50",
|
||||
COLOR_INFO_100 = "--color-info-100",
|
||||
COLOR_INFO_200 = "--color-info-200",
|
||||
COLOR_INFO_300 = "--color-info-300",
|
||||
COLOR_INFO_400 = "--color-info-400",
|
||||
COLOR_INFO_500 = "--color-info-500",
|
||||
COLOR_INFO_700 = "--color-info-700",
|
||||
COLOR_INFO_800 = "--color-info-800",
|
||||
COLOR_INFO_900 = "--color-info-900",
|
||||
COLOR_INFO_950 = "--color-info-950",
|
||||
|
||||
TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
|
||||
TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
|
||||
|
||||
INPUT_LABEL = "--input-label",
|
||||
INPUT_ERROR = "--input-error",
|
||||
|
||||
TEXT_ACCENT = "--text-accent",
|
||||
|
||||
CONTRAST_DEFAULT = "--contrast-default",
|
||||
CONTRAST_HOVERED = "--contrast-hovered",
|
||||
ERROR_WEAK_CONTRAST = "--error-weak-contrast",
|
||||
}
|
||||
|
||||
export default class Typography extends React.Component<IProps, IState> {
|
||||
public override render(): JSX.Element {
|
||||
export default function Typography(props: IProps) {
|
||||
const { typo, color, className, title, children, type = "div", onClick } = props;
|
||||
|
||||
const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;
|
||||
|
||||
if (type === "span") {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
classes["root"],
|
||||
classes[this.props.typo],
|
||||
classes[this.props.color ?? ""],
|
||||
this.props.className ?? "",
|
||||
)}
|
||||
title={this.props.title}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<span className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title} onClick={onClick}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import { Document } from "le-coffre-resources/dist/Customer";
|
||||
import Typography, { ITypo } from "../../Typography";
|
||||
import Typography, { ETypo } from "../../Typography";
|
||||
import DocumentNotary from "../../Document/DocumentNotary";
|
||||
import classNames from "classnames";
|
||||
|
||||
@ -28,9 +28,9 @@ export default class DocumentList extends React.Component<IProps, IState> {
|
||||
return (
|
||||
<div className={classNameToAdd}>
|
||||
<div className={classes["title"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
|
||||
</div>
|
||||
<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
|
||||
<div className={classes["content"]}>
|
||||
{this.props.documents &&
|
||||
this.props.documents.map((document) => {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
background-color: var(--grey-soft);
|
||||
background-color: var(--color-neutral-50);
|
||||
width: 100%;
|
||||
gap: 32px;
|
||||
.content {
|
||||
|
||||
@ -8,7 +8,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import Typography, { ITypo } from "../../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../../Typography";
|
||||
import WarningBadge from "../../WarningBadge";
|
||||
import classes from "./classes.module.scss";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
@ -38,26 +38,34 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["content"]}>
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
|
||||
<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Nom
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
|
||||
</div>
|
||||
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
|
||||
<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Prénom
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
|
||||
</div>
|
||||
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
|
||||
<Typography typo={ITypo.P_18}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
Numéro de téléphone
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>
|
||||
{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number!) ??
|
||||
this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<div className={classes["container"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
|
||||
<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
E-mail
|
||||
</Typography>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
{!this.props.isArchived && (
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.root {
|
||||
border: 1px solid $grey;
|
||||
border: 1px solid var(--color-neutral-500);
|
||||
padding: 16px;
|
||||
transition: all 350ms $custom-easing;
|
||||
|
||||
|
||||
@ -10,8 +10,8 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import Button, { EButtonVariant } from "../Button";
|
||||
import Confirm from "../Modal/Confirm";
|
||||
import Button, { EButtonstyletype, EButtonVariant } from "../Button";
|
||||
import Confirm from "../OldModal/Confirm";
|
||||
import QuantityProgressBar from "../QuantityProgressBar";
|
||||
import classes from "./classes.module.scss";
|
||||
import DocumentList from "./DocumentList";
|
||||
@ -138,7 +138,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
|
||||
{!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
||||
<div className={classes["button-container"]}>
|
||||
<Link href={redirectPath}>
|
||||
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
|
||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
|
||||
Demander des documents
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import VersionFile from "@Front/version.json"; // TODO: This is a hack, we will use a proper versioning system stored in DB
|
||||
import Typography, { ITypo, ITypoColor } from "../Typography";
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
|
||||
type IProps = {};
|
||||
type IState = {};
|
||||
@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||
<div>{VersionFile.version}</div>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
background-color: $orange-flash;
|
||||
background-color: var(--color-warning-500);
|
||||
padding: 6px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import { ArrowLongLeftIcon } from "@heroicons/react/24/outline";
|
||||
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import { NextRouter, useRouter } from "next/router";
|
||||
import React from "react";
|
||||
|
||||
@ -21,10 +21,10 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
|
||||
public override render(): JSX.Element {
|
||||
return (
|
||||
<Button
|
||||
icon={ChevronIcon}
|
||||
iconposition={"left"}
|
||||
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
|
||||
variant={EButtonVariant.LINE}
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.TEXT}
|
||||
size={EButtonSize.SM}
|
||||
onClick={this.handleClick}>
|
||||
Retour
|
||||
</Button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import { ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
type IProps = {
|
||||
color?: ITypoColor;
|
||||
color?: ETypoColor;
|
||||
};
|
||||
|
||||
export default function Check(props: IProps) {
|
||||
|
||||
@ -20,12 +20,12 @@
|
||||
}
|
||||
|
||||
&.success {
|
||||
border: 1px solid var(--green-flash);
|
||||
border: 1px solid var(--color-success-600);
|
||||
background: #12bf4d0d;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: 1px solid var(--red-soft);
|
||||
border: 1px solid var(--color-error-600-soft);
|
||||
background: #f087711a;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import classes from "./classes.module.scss";
|
||||
import classNames from "classnames";
|
||||
import { InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
export type IProps = {
|
||||
type: "info" | "warning" | "success" | "error";
|
||||
@ -15,7 +15,7 @@ export default function MessageBox(props: IProps) {
|
||||
<div className={classNames(className, classes["root"], classes[type])}>
|
||||
{getIcon(type)}
|
||||
<div className={classes["content"]}>
|
||||
<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
|
||||
<Typography className={classes["text"]} typo={ETypo.TEXT_SM_REGULAR}>
|
||||
{children}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import classNames from "classnames";
|
||||
import classes from "./classes.module.scss";
|
||||
import Link from "next/link";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
type ITabItem = {
|
||||
@ -31,7 +31,7 @@ export default function NavTab(props: IProps) {
|
||||
key={item.path.toString()}
|
||||
href={item.path}
|
||||
className={classNames(classes["link"], isMatch && classes["active"])}>
|
||||
<Typography key={index} typo={isMatch ? ITypo.P_SB_18 : ITypo.P_18}>
|
||||
<Typography key={index} typo={isMatch ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}>
|
||||
{item.label}
|
||||
</Typography>
|
||||
</Link>
|
||||
|
||||
@ -3,18 +3,42 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
border: 1px solid #e7e7e7;
|
||||
padding: 24px;
|
||||
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
background: var(--input-background, #fff);
|
||||
padding: var(--spacing-1-5, 12px) var(--spacing-md, 16px);
|
||||
gap: var(--spacing-2, 16px);
|
||||
.button {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
> svg {
|
||||
stroke-width: 1.5px;
|
||||
stroke: var(--input-placeholder-filled, #24282e);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
> svg {
|
||||
stroke: var(--input-placeholder-empty, #6d7e8a);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
color: var(--input-placeholder-filled, #24282e);
|
||||
font-family: var(--font-text-family, Poppins);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: var(--font-text-weight-regular, 400);
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,11 +35,11 @@ export default function NumberPicker(props: IProps) {
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
|
||||
<MinusIcon width="20" height="20" />
|
||||
<MinusIcon width="24" height="24" />
|
||||
</button>
|
||||
<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
|
||||
<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
|
||||
<PlusIcon width="20" height="20" />
|
||||
<PlusIcon width="24" height="24" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
.folderlist-container {
|
||||
max-height: calc(100vh - 215px);
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--grey-medium);
|
||||
border-right: 1px solid var(--color-neutral-200);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ export default function CollaboratorListContainer(props: IProps) {
|
||||
height: "12px",
|
||||
width: "12px",
|
||||
borderRadius: "100px",
|
||||
backgroundColor: "var(--green-flash)",
|
||||
backgroundColor: "var(--color-success-600)",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-generic-white);
|
||||
opacity: 0.5;
|
||||
z-index: 2;
|
||||
transition: all 0.3s $custom-easing;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
width: 389px;
|
||||
@ -60,14 +60,14 @@
|
||||
|
||||
.closable-left-side {
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
background-color: var(--color-generic-white);
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
max-width: 56px;
|
||||
height: calc(100vh - 83px);
|
||||
border-right: 1px $grey-medium solid;
|
||||
border-right: 1px var(--color-neutral-200) solid;
|
||||
|
||||
@media (min-width: $screen-m) {
|
||||
display: none;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
||||
import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
|
||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import Header from "@Front/Components/DesignSystem/Header";
|
||||
import Version from "@Front/Components/DesignSystem/Version";
|
||||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||||
@ -13,6 +13,7 @@ import React, { ReactNode } from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
import CollaboratorListContainer from "./CollaboratorListContainer";
|
||||
import { ChevronLeftIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
type IProps = {
|
||||
title: string;
|
||||
@ -69,10 +70,9 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
|
||||
{this.props.mobileBackText && (
|
||||
<div className={classes["back-arrow-mobile"]}>
|
||||
<Button
|
||||
icon={ChevronIcon}
|
||||
iconposition={"left"}
|
||||
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
|
||||
variant={EButtonVariant.LINE}
|
||||
leftIcon={<ChevronLeftIcon />}
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styletype={EButtonstyletype.TEXT}
|
||||
onClick={this.onOpenLeftSide}>
|
||||
{this.props.mobileBackText ?? "Retour"}
|
||||
</Button>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user