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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-05 15:25:50 +02:00
commit f8a46c26bb
84 changed files with 716 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/front/Components/DesignSystem/BlockList/classes.module.scss
View File

@ -6,15 +6,15 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 24px; padding: 24px;
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $color-neutral-200; background-color: var(--color-neutral-200);
} }
&[data-selected="true"] { &[data-selected="true"] {
background-color: $color-neutral-200; background-color: var(--color-neutral-200);
} }
.left-side { .left-side {

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

@ -4,11 +4,9 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
border: 1px solid; border: 1px solid;
gap: 12px;
box-sizing: border-box; box-sizing: border-box;
height: fit-content; height: fit-content;
align-items: center; align-items: center;
gap: 6px;
background: transparent; background: transparent;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
@ -22,102 +20,368 @@
height: 18px; height: 18px;
} }
/**
* Every possible variants
*/
&[variant="primary"] { &[variant="primary"] {
color: $color-generic-white; color: var(--color-primary-500);
background-color: $color-primary-500; background: var(--color-primary-500);
border-color: $color-primary-500; border-color: var(--color-primary-500);
padding: 24px 48px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
&:hover { &:hover {
border-color: $color-primary-700; background: var(--color-primary-700);
background-color: $color-primary-700; border-color: var(--color-primary-700);
} }
&:disabled { &:focus,
border-color: $color-primary-500-soft; &:active {
background-color: $color-primary-500-soft; background: var(--color-primary-800);
pointer-events: none; border-color: var(--color-primary-800);
}
&[styleType="outlined"] {
&:hover {
background-color: var(--color-primary-50);
}
&:focus,
&:active {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
border-color: var(--color-primary-700);
}
}
&[styleType="text"] {
&:hover {
background-color: transparent;
}
&:focus,
&:active {
background-color: transparent;
color: var(--color-primary-800);
border-color: var(--color-primary-800);
}
} }
} }
&[variant="secondary"] { &[variant="secondary"] {
color: $color-generic-white; color: var(--color-secondary-500);
background-color: $color-error-600; background: var(--color-secondary-500);
border-color: $color-error-600; border-color: var(--color-secondary-500);
padding: 24px 48px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
&:hover { &:hover {
border-color: $color-error-800; background: var(--color-secondary-700);
background-color: $color-error-800; border-color: var(--color-secondary-700);
} }
&:disabled { &:focus,
border-color: $color-error-600-soft; &:active {
background-color: $color-error-600-soft; background: var(--color-secondary-800);
pointer-events: none; border-color: var(--color-secondary-800);
} }
}
&[variant="ghost"] { &[styleType="outlined"] {
color: $color-secondary-500; &:hover {
background-color: transparent; background-color: var(--color-secondary-50);
border-color: $color-secondary-500; }
padding: 24px 48px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
svg { &:focus,
path { &:active {
stroke: $color-generic-white; background-color: var(--color-secondary-100);
color: var(--color-secondary-700);
border-color: var(--color-secondary-700);
} }
} }
&:hover { &[styleType="text"] {
border-color: $color-secondary-700; &:hover {
color: $color-secondary-700; background-color: transparent;
} }
&:disabled { &:focus,
border-color: $color-secondary-500-soft; &:active {
background-color: $color-secondary-500-soft; background-color: transparent;
pointer-events: none; color: var(--color-secondary-800);
border-color: var(--color-secondary-800);
}
} }
} }
&[variant="white"] { &[variant="neutral"] {
color: $color-secondary-500; color: var(--color-neutral-500);
background-color: white; background: var(--color-neutral-500);
border-color: $color-secondary-500; border-color: var(--color-neutral-500);
padding: 24px 48px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
svg { &:hover {
path { background: var(--color-neutral-700);
stroke: $color-generic-white; border-color: var(--color-neutral-700);
}
&:focus,
&:active {
background: var(--color-neutral-800);
border-color: var(--color-neutral-800);
}
&[styleType="outlined"] {
&:hover {
background-color: var(--color-neutral-50);
}
&:focus,
&:active {
background-color: var(--color-neutral-100);
color: var(--color-neutral-700);
border-color: var(--color-neutral-700);
} }
} }
&:hover { &[styleType="text"] {
border-color: $color-secondary-700; &:hover {
color: $color-secondary-700; background-color: transparent;
} }
&:disabled { &:focus,
border-color: $color-secondary-500-soft; &:active {
background-color: $color-secondary-500-soft; background-color: transparent;
pointer-events: none; color: var(--color-neutral-800);
border-color: var(--color-neutral-800);
}
} }
} }
&[variant="error"] {
color: var(--color-error-600);
background: var(--color-error-600);
border-color: var(--color-error-600);
&:hover {
background: var(--color-error-800);
border-color: var(--color-error-800);
}
&:focus,
&:active {
background: var(--color-error-900);
border-color: var(--color-error-900);
}
&[styleType="outlined"] {
&:hover {
background-color: var(--color-error-50);
border-color: var(--color-secondary-700);
}
&:focus,
&:active {
background-color: var(--color-error-100);
color: var(--color-secondary-700);
border-color: var(--color-secondary-700);
}
}
&[styleType="text"] {
&:hover {
background-color: transparent;
color: var(--color-error-800);
border-color: var(--color-error-800);
}
&:focus,
&:active {
background-color: transparent;
color: var(--color-error-900);
border-color: var(--color-error-900);
}
}
}
&[variant="warning"] {
color: var(--color-warning-600);
background: var(--color-warning-600);
border-color: var(--color-warning-600);
&:hover {
background: var(--color-warning-800);
border-color: var(--color-warning-800);
}
&:focus,
&:active {
background: var(--color-warning-900);
border-color: var(--color-warning-900);
}
&[styleType="outlined"] {
&:hover {
background-color: var(--color-warning-50);
border-color: var(--color-warning-700);
color: var(--color-warning-700);
}
&:focus,
&:active {
background-color: var(--color-warning-100);
color: var(--color-warning-700);
border-color: var(--color-warning-700);
}
}
&[styleType="text"] {
&:hover {
background-color: transparent;
color: var(--color-warning-800);
border-color: var(--color-warning-800);
}
&:focus,
&:active {
background-color: transparent;
color: var(--color-warning-900);
border-color: var(--color-warning-900);
}
}
}
&[variant="success"] {
color: var(--color-success-600);
background: var(--color-success-600);
border-color: var(--color-success-600);
&:hover {
background: var(--color-success-800);
border-color: var(--color-success-800);
}
&:focus,
&:active {
background: var(--color-success-900);
border-color: var(--color-success-900);
}
&[styleType="outlined"] {
&:hover {
background-color: var(--color-success-50);
border-color: var(--color-success-700);
color: var(--color-success-700);
}
&:focus,
&:active {
background-color: var(--color-success-100);
color: var(--color-success-700);
border-color: var(--color-success-700);
}
}
&[styleType="text"] {
&:hover {
background-color: transparent;
color: var(--color-success-800);
border-color: var(--color-success-800);
}
&:focus,
&:active {
background-color: transparent;
color: var(--color-success-900);
border-color: var(--color-success-900);
}
}
}
&[variant="info"] {
color: var(--color-info-700);
background: var(--color-info-700);
border-color: var(--color-info-700);
&:hover {
background: var(--color-info-900);
border-color: var(--color-info-900);
}
&:focus,
&:active {
background: var(--color-info-950);
border-color: var(--color-info-950);
}
&[styleType="outlined"] {
&:hover {
background-color: var(--color-info-50);
border-color: var(--color-info-700);
color: var(--color-info-700);
}
&:focus,
&:active {
background-color: var(--color-info-100);
color: var(--color-info-700);
border-color: var(--color-info-700);
}
}
&[styleType="text"] {
&:hover {
background-color: transparent;
color: var(--color-info-900);
border-color: var(--color-info-900);
}
&:focus,
&:active {
background-color: transparent;
color: var(--color-info-950);
border-color: var(--color-info-950);
}
}
}
/**
* Every possible sizes
*/
&[sizing="sm"] {
padding: var(--spacing-0-5) var(--spacing-1-5);
gap: var(--spacing-0-75);
font-size: 14px;
}
&[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"] { &[fullwidthattr="true"] {
width: 100%; width: 100%;
flex: 1; flex: 1;
@ -131,14 +395,7 @@
text-transform: inherit; text-transform: inherit;
} }
&[variant="line"] { &[disabled="true"] {
color: $color-secondary-500; opacity: var(--opacity-disabled, 0.3);
background-color: transparent;
border-color: transparent;
padding: 0;
font-weight: 400;
font-size: 18px;
line-height: 22px;
text-decoration-line: underline;
} }
} }

33
src/front/Components/DesignSystem/Button/index.tsx
View File

@ -7,21 +7,37 @@ import classNames from "classnames";
export enum EButtonVariant { export enum EButtonVariant {
PRIMARY = "primary", PRIMARY = "primary",
SECONDARY = "secondary", SECONDARY = "secondary",
GHOST = "ghost", NEUTRAL = "neutral",
LINE = "line", ERROR = "error",
WHITE = "white", WARNING = "warning",
SUCCESS = "success",
INFO = "info",
}
export enum EButtonSize {
LG = "lg",
MD = "md",
SM = "sm",
}
export enum EButtonStyleType {
CONTAINED = "contained",
OUTLINED = "outlined",
TEXT = "text",
} }
type IProps = { type IProps = {
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined; onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
children?: React.ReactNode; children?: React.ReactNode;
variant?: EButtonVariant; variant?: EButtonVariant;
size?: EButtonSize;
styleType?: EButtonStyleType;
fullwidth?: boolean; fullwidth?: boolean;
icon?: string; icon?: string;
iconstyle?: CSSProperties; iconstyle?: CSSProperties;
disabled?: boolean; disabled?: boolean;
isLoading?: boolean;
type?: "button" | "submit"; type?: "button" | "submit";
isloading?: string;
iconposition?: "left" | "right"; iconposition?: "left" | "right";
className?: string; className?: string;
}; };
@ -29,9 +45,11 @@ type IProps = {
export default function Button(props: IProps) { export default function Button(props: IProps) {
let { let {
variant = EButtonVariant.PRIMARY, variant = EButtonVariant.PRIMARY,
size = EButtonSize.LG,
styleType = EButtonStyleType.CONTAINED,
disabled = false, disabled = false,
type = "button", type = "button",
isloading = "false", isLoading = false,
fullwidth = false, fullwidth = false,
iconposition = "right", iconposition = "right",
onClick, onClick,
@ -42,13 +60,14 @@ export default function Button(props: IProps) {
} = props; } = props;
const fullwidthattr = fullwidth.toString(); 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.fullwidth;
delete attributes.icon; delete attributes.icon;
delete attributes.iconstyle; delete attributes.iconstyle;
delete attributes.iconposition; delete attributes.iconposition;
return ( return (
<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}> <button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />} {icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}

4
src/front/Components/DesignSystem/CheckBox/classes.module.scss
View File

@ -13,7 +13,7 @@
background-color: transparent; background-color: transparent;
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 1px solid $color-secondary-500; border: 1px solid var(--color-secondary-500);
border-radius: 2px; border-radius: 2px;
margin-right: 16px; margin-right: 16px;
display: grid; display: grid;
@ -30,7 +30,7 @@
display: grid; display: grid;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-color: $color-secondary-500; background-color: var(--color-secondary-500);
border-radius: 2px; border-radius: 2px;
transform: scale(0); transform: scale(0);
} }

11
src/front/Components/DesignSystem/DepositDocument/index.tsx
View File

@ -5,7 +5,7 @@ import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React from "react";
import Button, { EButtonVariant } from "../Button"; import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Tooltip from "../ToolTip"; import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -190,7 +190,11 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</div> </div>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && ( {this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<div className={classes["bottom-container"]}> <div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
className={classes["add-button"]}
onClick={this.addDocument}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500} color={ITypoColor.COLOR_SECONDARY_500}
@ -291,7 +295,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
Document non conforme Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && ( {history.refused_reason && history.refused_reason.length > 0 && (
<Button <Button
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
className={classes["refused-button"]} className={classes["refused-button"]}
onClick={() => this.showRefusedReason(history.refused_reason ?? "")}> onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>
Voir le motif de refus Voir le motif de refus

8
src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
View File

@ -12,7 +12,7 @@ import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames"; import classNames from "classnames";
import Button, { EButtonVariant } from "../Button"; import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm"; import Confirm from "../Modal/Confirm";
import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents"; import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files"; import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
@ -154,7 +154,11 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
</div> </div>
)} )}
<div className={classes["bottom-container"]}> <div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
className={classes["add-button"]}
onClick={this.addDocument}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500} color={ITypoColor.COLOR_SECONDARY_500}

8
src/front/Components/DesignSystem/DepositRib/index.tsx
View File

@ -6,7 +6,7 @@ import CrossIcon from "@Assets/Icons/cross.svg";
import DocumentCheckIcon from "@Assets/Icons/document-check.svg"; import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
import Image from "next/image"; import Image from "next/image";
import Button, { EButtonVariant } from "../Button"; import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Typography, { ITypo, ITypoColor } from "../Typography"; import Typography, { ITypo, ITypoColor } from "../Typography";
type IProps = { type IProps = {
@ -160,7 +160,11 @@ export default class DepositRib extends React.Component<IProps, IState> {
</div> </div>
<div className={classes["bottom-container"]}> <div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
className={classes["add-button"]}
onClick={() => this.fileInput!.click()}>
<Typography <Typography
typo={ITypo.TEXT_MD_SEMIBOLD} typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500} color={ITypoColor.COLOR_SECONDARY_500}

14
src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
View File

@ -1,25 +1,25 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
padding: 16px; padding: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&.DEPOSITED { &.DEPOSITED {
cursor: pointer; cursor: pointer;
border: 1px solid $color-warning-500-soft; border: 1px solid var(--color-warning-500-soft);
&:hover { &:hover {
border: 1px solid $color-warning-500-soft; border: 1px solid var(--color-warning-500-soft);
outline: 1px solid $color-warning-500-soft; outline: 1px solid var(--color-warning-500-soft);
} }
} }
&.VALIDATED { &.VALIDATED {
cursor: pointer; cursor: pointer;
border: 1px solid $color-success-600-soft; border: 1px solid var(--color-success-600-soft);
&:hover { &:hover {
border: 1px solid $color-success-600-soft; border: 1px solid var(--color-success-600-soft);
outline: 1px solid $color-success-600-soft; outline: 1px solid var(--color-success-600-soft);
} }
} }

4
src/front/Components/DesignSystem/FolderContainer/classes.module.scss
View File

@ -6,11 +6,11 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 24px; padding: 24px;
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $color-neutral-200; background-color: var(--color-neutral-200);
} }
.left-side { .left-side {

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

@ -76,7 +76,7 @@
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background: $color-generic-white; background: var(--color-generic-white);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
} }

8
src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
View File

@ -23,7 +23,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: $color-generic-white; background-color: var(--color-generic-white);
cursor: pointer; cursor: pointer;
padding: 24px; padding: 24px;
z-index: 1; z-index: 1;
@ -50,7 +50,7 @@
position: absolute; position: absolute;
top: 24px; top: 24px;
left: 8px; left: 8px;
background-color: $color-generic-white; background-color: var(--color-generic-white);
padding: 0 16px; padding: 0 16px;
&[data-open="true"] { &[data-open="true"] {
@ -62,7 +62,7 @@
.chevron-icon { .chevron-icon {
height: 24px; height: 24px;
fill: $color-neutral-500; fill: var(--color-neutral-500);
transition: all 350ms $custom-easing; transition: all 350ms $custom-easing;
transform: rotate(90deg); transform: rotate(90deg);
@ -85,7 +85,7 @@
opacity: 1; opacity: 1;
overflow: hidden; overflow: hidden;
top: 50px; top: 50px;
background-color: $color-generic-white; background-color: var(--color-generic-white);
&[data-open="false"] { &[data-open="false"] {
height: 0; height: 0;

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

@ -76,7 +76,7 @@
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background: $color-generic-white; background: var(--color-generic-white);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
} }

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

@ -34,7 +34,7 @@
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background: $color-generic-white; background: var(--color-generic-white);
transform: translateY(35px); transform: translateY(35px);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }

4
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
View File

@ -3,7 +3,7 @@
.root { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $color-generic-white; background-color: var(--color-generic-white);
box-shadow: $shadow-nav; box-shadow: $shadow-nav;
padding: 24px; padding: 24px;
position: absolute; position: absolute;
@ -19,7 +19,7 @@
.separator { .separator {
width: 100%; width: 100%;
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
} }
} }

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

@ -14,13 +14,13 @@
.underline { .underline {
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: $color-generic-white; background-color: var(--color-generic-white);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
&[data-active="true"] { &[data-active="true"] {
background-color: $color-generic-black; background-color: var(--color-generic-black);
} }
} }

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

@ -13,13 +13,13 @@
.underline { .underline {
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: $color-generic-white; background-color: var(--color-generic-white);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
&[data-active="true"] { &[data-active="true"] {
background-color: $color-generic-black; background-color: var(--color-generic-black);
} }
} }

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

@ -5,7 +5,7 @@
flex-direction: column; flex-direction: column;
width: 390px; width: 390px;
max-height: 80vh; max-height: 80vh;
background-color: $color-generic-white; background-color: var(--color-generic-white);
box-shadow: $shadow-nav; box-shadow: $shadow-nav;
padding: 24px; padding: 24px;
position: absolute; position: absolute;

4
src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
View File

@ -3,7 +3,7 @@
.root { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $color-generic-white; background-color: var(--color-generic-white);
box-shadow: $shadow-nav; box-shadow: $shadow-nav;
padding: 24px; padding: 24px;
position: absolute; position: absolute;
@ -27,7 +27,7 @@
.separator { .separator {
width: 100%; width: 100%;
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
} }
} }

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

@ -5,7 +5,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 83px; height: 83px;
background-color: $color-generic-white; background-color: var(--color-generic-white);
box-shadow: $shadow-nav; box-shadow: $shadow-nav;
padding: 0 48px; padding: 0 48px;
position: sticky; position: sticky;

10
src/front/Components/DesignSystem/Modal/Confirm/index.tsx
View File

@ -2,7 +2,7 @@ import Link from "next/link";
import React from "react"; import React from "react";
import Modal, { IProps as IPropsModal } from ".."; import Modal, { IProps as IPropsModal } from "..";
import Button, { EButtonVariant } from "../../Button"; import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IProps = IPropsModal & { type IProps = IPropsModal & {
@ -47,13 +47,17 @@ export default class Confirm extends React.Component<IProps, IState> {
{this.props.showCancelButton && {this.props.showCancelButton &&
(this.props.cancelPath ? ( (this.props.cancelPath ? (
<Link href={this.props.cancelPath} className={classes["sub-container"]}> <Link href={this.props.cancelPath} className={classes["sub-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
{this.props.cancelText} {this.props.cancelText}
</Button> </Button>
</Link> </Link>
) : ( ) : (
<div className={classes["sub-container"]}> <div className={classes["sub-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
onClick={this.props.onClose}
className={classes["sub-container"]}>
{this.props.cancelText} {this.props.cancelText}
</Button> </Button>
</div> </div>

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

@ -51,7 +51,7 @@
position: relative; position: relative;
width: 610px; width: 610px;
max-height: 90%; max-height: 90%;
background: $color-generic-white; background: var(--color-generic-white);
box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11); box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
overflow: auto; overflow: auto;
padding: 32px; padding: 32px;

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

@ -7,7 +7,7 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
position: relative; position: relative;
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
background-color: transparent; background-color: transparent;
.placeholder { .placeholder {

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

@ -96,7 +96,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
<Form onSubmit={this.handleSubmit} className={classes["form"]}> <Form onSubmit={this.handleSubmit} className={classes["form"]}>
<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} /> <TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button fullwidth type="submit" variant={EButtonVariant.WHITE}> <Button fullwidth type="submit" variant={EButtonVariant.PRIMARY}>
Envoyer Envoyer
</Button> </Button>
</div> </div>

4
src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
View File

@ -2,7 +2,7 @@
.root { .root {
position: relative; position: relative;
background-color: $color-neutral-200; background-color: var(--color-neutral-200);
box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08); box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08);
height: 12px; height: 12px;
border-radius: 5px; border-radius: 5px;
@ -15,7 +15,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: width 300ms; transition: width 300ms;
background-color: $color-secondary-500; background-color: var(--color-secondary-500);
.percentage { .percentage {
width: 0; width: 0;

4
src/front/Components/DesignSystem/RadioBox/classes.module.scss
View File

@ -11,7 +11,7 @@
background-color: transparent; background-color: transparent;
width: 15px; width: 15px;
height: 15px; height: 15px;
border: 1px solid $color-secondary-500; border: 1px solid var(--color-secondary-500);
border-radius: 100px; border-radius: 100px;
margin-right: 16px; margin-right: 16px;
display: flex; display: flex;
@ -25,7 +25,7 @@
content: ""; content: "";
width: 11px; width: 11px;
height: 11px; height: 11px;
background-color: $color-secondary-500; background-color: var(--color-secondary-500);
border-radius: 100px; border-radius: 100px;
transform: scale(0); transform: scale(0);
} }

8
src/front/Components/DesignSystem/SearchBar/classes.module.scss
View File

@ -4,15 +4,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 24px; padding-left: 24px;
background-color: $color-generic-white; background-color: var(--color-generic-white);
border: 1px solid $color-neutral-200; border: 1px solid var(--color-neutral-200);
position: relative; position: relative;
.fake-placeholder { .fake-placeholder {
position: absolute; position: absolute;
left: 47px; left: 47px;
top: 24px; top: 24px;
color: $color-neutral-500; color: var(--color-neutral-500);
pointer-events: none; pointer-events: none;
} }
@ -26,6 +26,6 @@
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: $color-neutral-500; color: var(--color-neutral-500);
} }
} }

4
src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
View File

@ -3,7 +3,7 @@
.root { .root {
min-width: 100px; min-width: 100px;
max-width: 320px; max-width: 320px;
background: $color-generic-white; background: var(--color-generic-white);
border-radius: 5px !important; border-radius: 5px !important;
position: fixed; position: fixed;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
@ -29,5 +29,5 @@
position: absolute; position: absolute;
right: 20px; right: 20px;
margin-top: -4px; margin-top: -4px;
fill: $color-generic-white; fill: var(--color-generic-white);
} }

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

@ -2,7 +2,7 @@
@import "@Themes/modes.scss"; @import "@Themes/modes.scss";
.root { .root {
color: $color-neutral-950; color: var(--color-neutral-950);
vertical-align: center; vertical-align: center;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;

16
src/front/Components/DesignSystem/Typography/old-classes.module.scss
View File

@ -2,7 +2,7 @@
@import "@Themes/modes.scss"; @import "@Themes/modes.scss";
.root { .root {
color: $color-generic-black; color: var(--color-generic-black);
vertical-align: center; vertical-align: center;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
&.H1-60 { &.H1-60 {
@ -67,7 +67,7 @@
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: $color-neutral-500; color: var(--color-neutral-500);
} }
&.Paragraphe-18-error { &.Paragraphe-18-error {
@ -92,7 +92,7 @@
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: $color-neutral-500; color: var(--color-neutral-500);
} }
&.Paragraphe-simple-16 { &.Paragraphe-simple-16 {
@ -104,7 +104,7 @@
} }
&.Paragraphe-16-error { &.Paragraphe-16-error {
color: $color-error-800; color: var(--color-error-800;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -129,15 +129,15 @@
} }
&.color-error-800 { &.color-error-800 {
color: $color-error-800; color: var(--color-error-800;
} }
&.color-neutral-500 { &.color-neutral-500 {
color: $color-neutral-500; color: var(--color-neutral-500);
} }
&.color-generic-black { &.color-generic-black {
color: $color-generic-black; color: var(--color-generic-black);
} }
&.color-primary-500 { &.color-primary-500 {
@ -161,6 +161,6 @@
} }
&.white { &.white {
color: $color-generic-white; color: var(--color-generic-white);
} }
} }

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

@ -21,7 +21,7 @@
} }
.root { .root {
border: 1px solid $color-neutral-500; border: 1px solid var(--color-neutral-500);
padding: 16px; padding: 16px;
transition: all 350ms $custom-easing; transition: all 350ms $custom-easing;

4
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -10,7 +10,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
import Button, { EButtonVariant } from "../Button"; import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm"; import Confirm from "../Modal/Confirm";
import QuantityProgressBar from "../QuantityProgressBar"; import QuantityProgressBar from "../QuantityProgressBar";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
@ -138,7 +138,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
{!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && ( {!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={redirectPath}> <Link href={redirectPath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
Demander des documents Demander des documents
</Button> </Button>
</Link> </Link>

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

@ -1,7 +1,7 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
background-color: $color-warning-500; background-color: var(--color-warning-500);
padding: 6px; padding: 6px;
border-radius: 20px; border-radius: 20px;
} }

5
src/front/Components/Elements/BackArrow/index.tsx
View File

@ -1,5 +1,5 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { NextRouter, useRouter } from "next/router"; import { NextRouter, useRouter } from "next/router";
import React from "react"; import React from "react";
@ -24,7 +24,8 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.handleClick}> onClick={this.handleClick}>
Retour Retour
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users"; 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 Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
@ -72,7 +72,8 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import DeedTypes, { IGetDeedTypesParams } from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes"; import DeedTypes, { IGetDeedTypesParams } from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
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 Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
@ -71,7 +71,8 @@ export default class DefaultDeedTypesDashboard extends React.Component<IProps, I
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
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 Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
@ -72,7 +72,8 @@ export default class DefaultDocumentTypesDashboard extends React.Component<IProp
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer"; import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer"; import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer";
import Header from "@Front/Components/DesignSystem/Header"; import Header from "@Front/Components/DesignSystem/Header";
@ -88,7 +88,8 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices"; import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
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 Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
@ -69,7 +69,8 @@ export default class DefaultOfficeDashboard extends React.Component<IProps, ISta
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
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 Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
@ -69,7 +69,8 @@ export default class DefaultRoleDashboard extends React.Component<IProps, IState
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

6
src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
View File

@ -27,7 +27,7 @@
} }
.left-side { .left-side {
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 3; z-index: 3;
display: flex; display: flex;
width: 389px; width: 389px;
@ -60,14 +60,14 @@
.closable-left-side { .closable-left-side {
position: absolute; position: absolute;
background-color: $color-generic-white; background-color: var(--color-generic-white);
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-width: 56px; min-width: 56px;
max-width: 56px; max-width: 56px;
height: calc(100vh - 83px); height: calc(100vh - 83px);
border-right: 1px $color-neutral-200 solid; border-right: 1px var(--color-neutral-200 solid);
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

5
src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/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 Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
@ -69,7 +69,8 @@ export default class DefaultUserDashboard extends React.Component<IProps, IState
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"left"} iconposition={"left"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.onOpenLeftSide}> onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"} {this.props.mobileBackText ?? "Retour"}
</Button> </Button>

14
src/front/Components/Layouts/ClientDashboard/index.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents"; import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument"; import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@ -178,6 +178,11 @@ export default function ClientDashboard(props: IProps) {
</div> </div>
); );
}, [ }, [
contact?.cell_phone_number,
contact?.email,
contact?.first_name,
contact?.last_name,
contact?.phone_number,
customer?.contact?.first_name, customer?.contact?.first_name,
customer?.contact?.last_name, customer?.contact?.last_name,
downloadFile, downloadFile,
@ -185,6 +190,7 @@ export default function ClientDashboard(props: IProps) {
folder?.name, folder?.name,
folder?.office?.name, folder?.office?.name,
folder?.office?.rib_name, folder?.office?.rib_name,
note?.content,
]); ]);
const renderBox = useCallback(() => { const renderBox = useCallback(() => {
@ -217,7 +223,11 @@ export default function ClientDashboard(props: IProps) {
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ? Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography> </Typography>
<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={onOpenModalAddDocument}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
className={classes["button"]}
onClick={onOpenModalAddDocument}>
Ajouter d'autres documents Ajouter d'autres documents
</Button> </Button>
</div> </div>

8
src/front/Components/Layouts/ClientDashboard/index2.tsx
View File

@ -1,5 +1,5 @@
//import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers"; //import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument"; import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@ -45,7 +45,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer d'autres documents à votre notaire ? Vous souhaitez envoyer d'autres documents à votre notaire ?
</Typography> </Typography>
<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
className={classes["button"]}
onClick={this.onOpenModalAddDocument}>
Ajouter d'autres documents Ajouter d'autres documents
</Button> </Button>
</div> </div>

5
src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
View File

@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles"; import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users"; import Users 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 SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Switch from "@Front/Components/DesignSystem/Switch"; import Switch from "@Front/Components/DesignSystem/Switch";
@ -197,7 +197,8 @@ export default function CollaboratorInformations(props: IProps) {
icon={ChevronIcon} icon={ChevronIcon}
iconposition={"right"} iconposition={"right"}
iconstyle={{ width: "22px", height: "22px" }} iconstyle={{ width: "22px", height: "22px" }}
variant={EButtonVariant.LINE}> variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}>
Gestion des rôles Gestion des rôles
</Button> </Button>
</Link> </Link>

4
src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
View File

@ -1,5 +1,5 @@
import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes"; import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -101,7 +101,7 @@ export default function DeedTypesCreate(props: IProps) {
validationError={validationError.find((error) => error.property === "description")} validationError={validationError.find((error) => error.property === "description")}
/> />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
Annuler Annuler
</Button> </Button>
<Button type="submit">Créer le type d'acte</Button> <Button type="submit">Créer le type d'acte</Button>

4
src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
View File

@ -1,5 +1,5 @@
import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes"; import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -119,7 +119,7 @@ export default function DeedTypesEdit() {
validationError={validationError.find((error) => error.property === "description")} validationError={validationError.find((error) => error.property === "description")}
/> />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
Annuler Annuler
</Button> </Button>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>

6
src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
View File

@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
import PenICon from "@Assets/Icons/pen.svg"; import PenICon from "@Assets/Icons/pen.svg";
import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes"; import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes"; import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@ -123,7 +123,7 @@ export default function DeedTypesInformations(props: IProps) {
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography> <Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}> <Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
<Button variant={EButtonVariant.LINE}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Modifier la liste des documents Modifier la liste des documents
<Image src={ChevronIcon} alt="Chevron" /> <Image src={ChevronIcon} alt="Chevron" />
</Button> </Button>
@ -174,7 +174,7 @@ export default function DeedTypesInformations(props: IProps) {
</Form> </Form>
</div> </div>
<div className={classes["delete-container"]}> <div className={classes["delete-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={openDeleteModal}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={openDeleteModal}>
Supprimer Supprimer
</Button> </Button>
</div> </div>

6
src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
View File

@ -1,5 +1,5 @@
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -71,7 +71,9 @@ export default function DocumentTypesCreate(props: IProps) {
validationError={validationError.find((error) => error.property === "public_description")} validationError={validationError.find((error) => error.property === "public_description")}
/> />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
<Button type="submit">Créer le document</Button> <Button type="submit">Créer le document</Button>
</div> </div>
</Form> </Form>

6
src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
View File

@ -1,5 +1,5 @@
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -91,7 +91,9 @@ export default function DocumentTypesEdit() {
validationError={validationError.find((error) => error.property === "public_description")} validationError={validationError.find((error) => error.property === "public_description")}
/> />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>
</Form> </Form>

4
src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
View File

@ -11,7 +11,7 @@ import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
export default function DocumentTypesInformations() { export default function DocumentTypesInformations() {
const router = useRouter(); const router = useRouter();
@ -38,7 +38,7 @@ export default function DocumentTypesInformations() {
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography> <Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}> <Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
<Button variant={EButtonVariant.LINE}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Retour au paramétrage des types d'actes Retour au paramétrage des types d'actes
<Image src={ChevronIcon} alt="Chevron" /> <Image src={ChevronIcon} alt="Chevron" />
</Button> </Button>

10
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
View File

@ -1,6 +1,6 @@
import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers"; import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@ -99,7 +99,9 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
/> />
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Associer au dossier</Button> <Button type="submit">Associer au dossier</Button>
</div> </div>
@ -132,7 +134,9 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
/> />
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Associer au dossier</Button> <Button type="submit">Associer au dossier</Button>
</div> </div>

7
src/front/Components/Layouts/Folder/AskDocuments/index.tsx
View File

@ -1,7 +1,7 @@
import PlusIcon from "@Assets/Icons/plus.svg"; import PlusIcon from "@Assets/Icons/plus.svg";
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
@ -78,14 +78,15 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
icon={PlusIcon} icon={PlusIcon}
iconposition={"right"} iconposition={"right"}
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
onClick={this.openModal}> onClick={this.openModal}>
Ajouter un document Ajouter un document
</Button> </Button>
</div> </div>
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<a href={backUrl}> <a href={backUrl}>
<Button variant={EButtonVariant.GHOST} onClick={this.cancel}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.cancel}>
Annuler Annuler
</Button> </Button>
</a> </a>

6
src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
View File

@ -1,4 +1,4 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@ -63,7 +63,9 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={this.backwardPath} className={classes["cancel-button"]}> <Link href={this.backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>

6
src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
View File

@ -1,5 +1,5 @@
import PlusIcon from "@Assets/Icons/plus.svg"; import PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder"; import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -41,7 +41,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
<div className={classes["client"]}>{this.renderCustomerFolders()}</div> <div className={classes["client"]}>{this.renderCustomerFolders()}</div>
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && ( {this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link href={navigatePath}> <Link href={navigatePath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
Ajouter un client Ajouter un client
</Button> </Button>
</Link> </Link>
@ -56,7 +56,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
</div> </div>
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && ( {this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link href={navigatePath}> <Link href={navigatePath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
Ajouter un client Ajouter un client
</Button> </Button>
</Link> </Link>

9
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -1,7 +1,7 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors"; import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation"; import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@ -96,7 +96,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography> <Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
</div> </div>
<Link href={redirectPathEditCollaborators}> <Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
Modifier les collaborateurs Modifier les collaborateurs
</Button> </Button>
</Link> </Link>
@ -140,7 +140,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
)} )}
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
onClick={this.openArchivedModal}>
Archiver le dossier Archiver le dossier
</Button> </Button>
{this.everyDocumentValidated() && !this.props.isLoading && ( {this.everyDocumentValidated() && !this.props.isLoading && (

12
src/front/Components/Layouts/Folder/UpdateClient/index.tsx
View File

@ -1,5 +1,5 @@
import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers"; import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@ -130,10 +130,16 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
{!this.doesInputsHaveValues() ? ( {!this.doesInputsHaveValues() ? (
<Link href={this.backwardPath} className={classes["cancel-button"]}> <Link href={this.backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
) : ( ) : (
<Button variant={EButtonVariant.GHOST} onClick={this.openLeavingModal} className={classes["cancel-button"]}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
onClick={this.openLeavingModal}
className={classes["cancel-button"]}>
Annuler Annuler
</Button> </Button>
)} )}

6
src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
View File

@ -1,4 +1,4 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@ -53,7 +53,9 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={this.state.backwardPath} className={classes["cancel-button"]}> <Link href={this.state.backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>

6
src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
View File

@ -1,6 +1,6 @@
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Users, { IGetUsersParams } from "@Front/Api/LeCoffreApi/Notary/Users/Users"; import Users, { IGetUsersParams } from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@ -105,7 +105,9 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>

6
src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
View File

@ -1,5 +1,5 @@
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@ -54,7 +54,9 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={this.backwardPath} className={classes["cancel-button"]}> <Link href={this.backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>

6
src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
View File

@ -1,5 +1,5 @@
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -77,7 +77,9 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>

7
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -1,7 +1,7 @@
import LeftArrowIcon from "@Assets/Icons/left-arrow.svg"; import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
import RightArrowIcon from "@Assets/Icons/right-arrow.svg"; import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FilePreview from "@Front/Components/DesignSystem/FilePreview"; import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
@ -117,7 +117,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
{this.state.document?.document_status === EDocumentStatus.DEPOSITED && ( {this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
<> <>
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
onClick={this.openRefuseModal}>
Refuser Refuser
</Button> </Button>
<Button onClick={this.openValidateModal}>Valider</Button> <Button onClick={this.openValidateModal}>Valider</Button>

8
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -12,6 +12,9 @@
.choose-a-folder { .choose-a-folder {
margin-top: 96px; margin-top: 96px;
text-align: center; text-align: center;
display: flex;
gap: 16px;
flex-direction: column;
} }
} }
@ -70,3 +73,8 @@
} }
} }
} }
.buttons {
display: flex;
gap: 16px;
}

64
src/front/Components/Layouts/Folder/index.tsx
View File

@ -5,6 +5,7 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import BasePage from "../Base"; import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Newletter from "@Front/Components/DesignSystem/Newsletter"; import Newletter from "@Front/Components/DesignSystem/Newsletter";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
type IProps = {}; type IProps = {};
type IState = { type IState = {
@ -32,6 +33,69 @@ export default class Folder extends BasePage<IProps, IState> {
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier Sélectionnez un dossier
</Typography> </Typography>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
PRIMARY
</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
PRIMARY
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
SECONDARY
</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
SECONDARY
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
NEUTRAL
</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
NEUTRAL
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.ERROR}>ERROR</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
ERROR
</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
ERROR
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.WARNING}>WARNING</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
WARNING
</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
WARNING
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
SUCCESS
</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
SUCCESS
</Button>
</div>
<div className={classes["buttons"]}>
<Button variant={EButtonVariant.INFO}>INFO</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
INFO
</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
INFO
</Button>
</div>
</div> </div>
<Newletter isOpen /> <Newletter isOpen />
</div> </div>

9
src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
View File

@ -1,6 +1,6 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation"; import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
@ -66,7 +66,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography> <Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
</div> </div>
<Link href={redirectPathEditCollaborators}> <Link href={redirectPathEditCollaborators}>
<Button variant={EButtonVariant.LINE} icon={ChevronIcon}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
Modifier les collaborateurs Modifier les collaborateurs
</Button> </Button>
</Link> </Link>
@ -115,7 +115,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
)} )}
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
onClick={this.restoreFolder}>
Restaurer le dossier Restaurer le dossier
</Button> </Button>
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && ( {this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (

6
src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
View File

@ -1,4 +1,4 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
@ -62,7 +62,9 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Annuler
</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
</div> </div>

6
src/front/Components/Layouts/Login/index.tsx
View File

@ -1,6 +1,6 @@
import CoffreIcon from "@Assets/Icons/coffre.svg"; import CoffreIcon from "@Assets/Icons/coffre.svg";
import idNoteLogo from "@Assets/Icons/id-note-logo.svg"; import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Image from "next/image"; import Image from "next/image";
@ -65,7 +65,9 @@ export default function Login() {
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">
<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Contacter l'administrateur
</Button>
</Link> </Link>
</div> </div>
<Confirm <Confirm

6
src/front/Components/Layouts/LoginCallback/index.tsx
View File

@ -8,7 +8,7 @@ import Module from "@Front/Config/Module";
import Auth from "@Front/Api/Auth/IdNot"; import Auth from "@Front/Api/Auth/IdNot";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Loader from "@Front/Components/DesignSystem/Loader"; import Loader from "@Front/Components/DesignSystem/Loader";
import UserStore from "@Front/Stores/UserStore"; import UserStore from "@Front/Stores/UserStore";
import Link from "next/link"; import Link from "next/link";
@ -73,7 +73,9 @@ export default function LoginCallBack() {
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">
<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Contacter l'administrateur
</Button>
</Link> </Link>
</div> </div>
</DefaultDoubleSidePage> </DefaultDoubleSidePage>

6
src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
View File

@ -6,7 +6,7 @@ import React, { useEffect } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Loader from "@Front/Components/DesignSystem/Loader"; import Loader from "@Front/Components/DesignSystem/Loader";
import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers"; import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers";
import CustomerStore from "@Front/Stores/CustomerStore"; import CustomerStore from "@Front/Stores/CustomerStore";
@ -59,7 +59,9 @@ export default function LoginCallBackCustomer() {
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">
<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Contacter l'administrateur
</Button>
</Link> </Link>
</div> </div>
</DefaultDoubleSidePage> </DefaultDoubleSidePage>

2
src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
View File

@ -57,7 +57,7 @@ export default function StepEmail(props: IProps) {
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">
<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>Contacter l'administrateur</Button>
</Link> */} </Link> */}
</div> </div>
); );

5
src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { ValidationError } from "class-validator"; import { ValidationError } from "class-validator";
type IProps = { type IProps = {
onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void; onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
@ -55,7 +55,8 @@ export default function StepTotp(props: IProps) {
<div className={classes["ask-another-code"]}> <div className={classes["ask-another-code"]}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
<Button <Button
variant={EButtonVariant.LINE} variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
disabled={disableNewCodeButton} disabled={disableNewCodeButton}
data-disabled={disableNewCodeButton.toString()} data-disabled={disableNewCodeButton.toString()}
onClick={sendAnotherCode} onClick={sendAnotherCode}

6
src/front/Components/Layouts/LoginHome/index.tsx
View File

@ -3,7 +3,7 @@ import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoub
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import LandingImage from "../Login/landing-connect.jpeg"; import LandingImage from "../Login/landing-connect.jpeg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Link from "next/link"; import Link from "next/link";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
@ -38,7 +38,9 @@ export default function LoginHome() {
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
</Typography> </Typography>
<Link href="mailto:support@lecoffre.io"> <Link href="mailto:support@lecoffre.io">
<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
Contacter l'administrateur
</Button>
</Link> </Link>
</div> </div>
</div> </div>

4
src/front/Components/Layouts/Rib/index.tsx
View File

@ -3,7 +3,7 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import FilePreview from "@Front/Components/DesignSystem/FilePreview"; import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib"; import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
import DepositRib from "@Front/Components/DesignSystem/DepositRib"; import DepositRib from "@Front/Components/DesignSystem/DepositRib";
@ -133,7 +133,7 @@ export default function Rib() {
<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}> <Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
Supprimer Supprimer
</Button> </Button>
<Button onClick={openRibModal} variant={EButtonVariant.GHOST}> <Button onClick={openRibModal} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Modifier Modifier
</Button> </Button>
<Button onClick={downloadFile}>Télécharger</Button> <Button onClick={downloadFile}>Télécharger</Button>

4
src/front/Components/Layouts/Roles/RolesCreate/index.tsx
View File

@ -1,5 +1,5 @@
import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@ -100,7 +100,7 @@ export default function RolesCreate(props: IProps) {
validationError={validationError.find((error) => error.property === "name")} validationError={validationError.find((error) => error.property === "name")}
/> />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={onCancel}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
Annuler Annuler
</Button> </Button>
<Button type="submit">Créer le rôle</Button> <Button type="submit">Créer le rôle</Button>

4
src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
View File

@ -6,7 +6,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
import { EForfeitType, forfeitsPrices } from "../../SubscriptionFacturation"; import { EForfeitType, forfeitsPrices } from "../../SubscriptionFacturation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Check from "@Front/Components/Elements/Icons/Check"; import Check from "@Front/Components/Elements/Icons/Check";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
@ -135,7 +135,7 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
</Typography> </Typography>
</div> </div>
<div className={classes["voir-recap"]}> <div className={classes["voir-recap"]}>
<Button fullwidth variant={EButtonVariant.LINE} onClick={open}> <Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
Voir le récapitulatif plus en détail Voir le récapitulatif plus en détail
</Button> </Button>
</div> </div>

4
src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
View File

@ -7,7 +7,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation"; import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Check from "@Front/Components/Elements/Icons/Check"; import Check from "@Front/Components/Elements/Icons/Check";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
@ -130,7 +130,7 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
</Typography> </Typography>
</div> </div>
<div className={classes["voir-recap"]}> <div className={classes["voir-recap"]}>
<Button fullwidth variant={EButtonVariant.LINE} onClick={open}> <Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
Voir le récapitulatif plus en détail Voir le récapitulatif plus en détail
</Button> </Button>
</div> </div>

9
src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import User, { Subscription } from "le-coffre-resources/dist/Admin"; import User, { Subscription } from "le-coffre-resources/dist/Admin";
import JwtService, { IUserJwtPayload } from "@Front/Services/JwtService/JwtService"; import JwtService, { IUserJwtPayload } from "@Front/Services/JwtService/JwtService";
@ -116,7 +116,12 @@ export default function SubscriptionManageCollaborators() {
<Button type="submit" variant={EButtonVariant.PRIMARY} fullwidth> <Button type="submit" variant={EButtonVariant.PRIMARY} fullwidth>
Enregistrer Enregistrer
</Button> </Button>
<Button variant={EButtonVariant.GHOST} fullwidth onClick={cancelAll} type="button"> <Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
fullwidth
onClick={cancelAll}
type="button">
Annuler Annuler
</Button> </Button>
</div> </div>

18
src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
View File

@ -1,7 +1,7 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
@ -150,7 +150,11 @@ export default function SubscriptionFacturation() {
{subscription.type === "UNLIMITED" && ( {subscription.type === "UNLIMITED" && (
// <Link // <Link
// href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}> // href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
<Button onClick={manageSubscription} fullwidth variant={EButtonVariant.GHOST}> <Button
onClick={manageSubscription}
fullwidth
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}>
Rétrograder mon abonnement Rétrograder mon abonnement
</Button> </Button>
// </Link> // </Link>
@ -169,7 +173,7 @@ export default function SubscriptionFacturation() {
href={ href={
Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path
}> }>
<Button fullwidth variant={EButtonVariant.GHOST}> <Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
Gérer mes attributions Gérer mes attributions
</Button> </Button>
</Link> </Link>
@ -226,7 +230,11 @@ export default function SubscriptionFacturation() {
{subscription.type === "STANDARD" && ( {subscription.type === "STANDARD" && (
// <Link // <Link
// href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Illimity.props.path}> // href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Illimity.props.path}>
<Button onClick={manageSubscription} fullwidth variant={EButtonVariant.GHOST}> <Button
onClick={manageSubscription}
fullwidth
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}>
Améliorer mon abonnement Améliorer mon abonnement
</Button> </Button>
// </Link> // </Link>
@ -235,7 +243,7 @@ export default function SubscriptionFacturation() {
</div> </div>
</div> </div>
<div className={classes["actions-container"]}> <div className={classes["actions-container"]}>
<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}> <Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={cancelOrReactivateSubscription}>
{!cancelAt && ( {!cancelAt && (
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
Arrêter l'abonnement Arrêter l'abonnement

8
src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions"; import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
@ -108,7 +108,11 @@ export default function SubscriptionInvite() {
))} ))}
{isNaN(nbOfCollaborators) && ( {isNaN(nbOfCollaborators) && (
<div className={classes["add-line-container"]}> <div className={classes["add-line-container"]}>
<Button onClick={addLine} variant={EButtonVariant.LINE} icon={PlusIcon}> <Button
onClick={addLine}
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.TEXT}
icon={PlusIcon}>
Ajouter une adresse email Ajouter une adresse email
</Button> </Button>
</div> </div>