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

V2.4/colors-typo (#168)

Browse Source 
Refacto color theme
Refacto typo theme
This commit is contained in:
VincentAlamelle 2024-07-02 16:58:53 +02:00 committed by GitHub
commit e11fde0d33
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
171 changed files with 1559 additions and 814 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 $grey-medium; border: 1px solid $color-neutral-200;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $grey-medium; background-color: $color-neutral-200;
} }
&[data-selected="true"] { &[data-selected="true"] {
background-color: $grey-medium; background-color: $color-neutral-200;
} }
.left-side { .left-side {

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

@ -32,7 +32,7 @@ export default function BlockList({ blocks, onSelectedBlock }: IProps) {
<div onClick={selectBlock} key={folder.id} id={folder.id}> <div onClick={selectBlock} key={folder.id} id={folder.id}>
<div className={classes["root"]} data-selected={folder.selected.toString()}> <div className={classes["root"]} data-selected={folder.selected.toString()}>
<div className={classes["left-side"]}> <div className={classes["left-side"]}>
<Typography typo={ITypo.P_16}>{folder.name}</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
</div> </div>
<div className={classes["right-side"]}> <div className={classes["right-side"]}>
{folder.hasFlag && <WarningBadge />} {folder.hasFlag && <WarningBadge />}

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

@ -23,51 +23,51 @@
} }
&[variant="primary"] { &[variant="primary"] {
color: $white; color: $color-generic-white;
background-color: $purple-flash; background-color: $color-primary-500;
border-color: $purple-flash; border-color: $color-primary-500;
padding: 24px 48px; padding: 24px 48px;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
&:hover { &:hover {
border-color: $purple-hover; border-color: $color-primary-700;
background-color: $purple-hover; background-color: $color-primary-700;
} }
&:disabled { &:disabled {
border-color: $purple-soft; border-color: $color-primary-500-soft;
background-color: $purple-soft; background-color: $color-primary-500-soft;
pointer-events: none; pointer-events: none;
} }
} }
&[variant="secondary"] { &[variant="secondary"] {
color: $white; color: $color-generic-white;
background-color: $red-flash; background-color: $color-error-600;
border-color: $red-flash; border-color: $color-error-600;
padding: 24px 48px; padding: 24px 48px;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
&:hover { &:hover {
border-color: $re-hover; border-color: $color-error-800;
background-color: $re-hover; background-color: $color-error-800;
} }
&:disabled { &:disabled {
border-color: $red-soft; border-color: $color-error-600-soft;
background-color: $red-soft; background-color: $color-error-600-soft;
pointer-events: none; pointer-events: none;
} }
} }
&[variant="ghost"] { &[variant="ghost"] {
color: $pink-flash; color: $color-secondary-500;
background-color: transparent; background-color: transparent;
border-color: $pink-flash; border-color: $color-secondary-500;
padding: 24px 48px; padding: 24px 48px;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -75,26 +75,26 @@
svg { svg {
path { path {
stroke: $white; stroke: $color-generic-white;
} }
} }
&:hover { &:hover {
border-color: $pink-hover; border-color: $color-secondary-700;
color: $pink-hover; color: $color-secondary-700;
} }
&:disabled { &:disabled {
border-color: $pink-soft; border-color: $color-secondary-500-soft;
background-color: $pink-soft; background-color: $color-secondary-500-soft;
pointer-events: none; pointer-events: none;
} }
} }
&[variant="white"] { &[variant="white"] {
color: $pink-flash; color: $color-secondary-500;
background-color: white; background-color: white;
border-color: $pink-flash; border-color: $color-secondary-500;
padding: 24px 48px; padding: 24px 48px;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -102,18 +102,18 @@
svg { svg {
path { path {
stroke: $white; stroke: $color-generic-white;
} }
} }
&:hover { &:hover {
border-color: $pink-hover; border-color: $color-secondary-700;
color: $pink-hover; color: $color-secondary-700;
} }
&:disabled { &:disabled {
border-color: $pink-soft; border-color: $color-secondary-500-soft;
background-color: $pink-soft; background-color: $color-secondary-500-soft;
pointer-events: none; pointer-events: none;
} }
} }
@ -132,7 +132,7 @@
} }
&[variant="line"] { &[variant="line"] {
color: $pink-flash; color: $color-secondary-500;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
padding: 0; padding: 0;

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 $turquoise-flash; border: 1px solid $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: $turquoise-flash; background-color: $color-secondary-500;
border-radius: 2px; border-radius: 2px;
transform: scale(0); transform: scale(0);
} }

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

@ -37,7 +37,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}> <label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
<input <input
type="checkbox" type="checkbox"

16
src/front/Components/DesignSystem/DepositDocument/classes.module.scss
View File

@ -1,19 +1,17 @@
.container { .container {
.root { .root {
padding: 24px; padding: 24px;
background-color: var(--white); background-color: var(--color-generic-white);
border: 1px dashed #e7e7e7; border: 1px dashed #e7e7e7;
height: fit-content; height: fit-content;
&[data-drag-over="true"] { &[data-drag-over="true"] {
border: 1px dashed var(--grey); border: 1px dashed var(--color-neutral-500);
} }
&.validated { &.validated {
border: 1px dashed var(--green-flash); border: 1px dashed var(--color-success-600);
} }
.top-container { .top-container {
@ -34,12 +32,12 @@
margin-left: 18px; margin-left: 18px;
.validated { .validated {
color: var(--green-flash); color: var(--color-success-600);
} }
.refused-button { .refused-button {
font-size: 14px; font-size: 14px;
color: var(--re-hover); color: var(--color-error-800);
margin-left: 8px; margin-left: 8px;
} }
@ -102,7 +100,7 @@
} }
.error-message { .error-message {
color: var(--red-flash); color: var(--color-error-600);
margin-top: 8px; margin-top: 8px;
} }
} }

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

@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["right"]}> <div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}> <Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div <div
className={ className={
this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : "" this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
)} )}
</Typography> </Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && ( {this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}> <Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png Sélectionnez des documents .jpg, .pdf ou .png
</Typography> </Typography>
)} )}
@ -157,7 +157,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["file-container"]} key={fileObj.name + file.index}> <div className={classes["file-container"]} key={fileObj.name + file.index}>
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" /> <Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}> <Typography
typo={ITypo.TEXT_MD_REGULAR}
color={ITypoColor.COLOR_NEUTRAL_500}
title={file.fileName ?? fileObj.name}>
{this.shortName(file.fileName || fileObj.name)} {this.shortName(file.fileName || fileObj.name)}
</Typography> </Typography>
</div> </div>
@ -177,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["loader"]}> <div className={classes["loader"]}>
<Loader /> <Loader />
</div> </div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Chargement... Chargement...
</Typography> </Typography>
</div> </div>
@ -188,7 +191,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
{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.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}> <Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" /> Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography> </Typography>
</Button> </Button>
@ -203,7 +209,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
header={"Motif du refus"} header={"Motif du refus"}
confirmText={"J'ai compris"}> confirmText={"J'ai compris"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre document a été refusé pour la raison suivante : Votre document a été refusé pour la raison suivante :
</Typography> </Typography>
<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly /> <TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
@ -211,14 +217,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</Confirm> </Confirm>
</div> </div>
{this.props.document.document_status === EDocumentStatus.REFUSED && ( {this.props.document.document_status === EDocumentStatus.REFUSED && (
<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}> <Typography typo={ITypo.TEXT_SM_REGULAR} className={classes["error-message"]}>
Ce document n'est pas conforme. Veuillez le déposer à nouveau. Ce document n'est pas conforme. Veuillez le déposer à nouveau.
</Typography> </Typography>
)} )}
{this.state.showFailedUploaded && ( {this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}> <Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedUploaded} {this.state.showFailedUploaded}
</Typography> </Typography>
</div> </div>
@ -262,26 +268,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
switch (history.document_status) { switch (history.document_status) {
case EDocumentStatus.ASKED: case EDocumentStatus.ASKED:
return ( return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}> <Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Demandé par votre notaire le {this.formatDate(history.created_at!)} Demandé par votre notaire le {this.formatDate(history.created_at!)}
</Typography> </Typography>
); );
case EDocumentStatus.VALIDATED: case EDocumentStatus.VALIDATED:
return ( return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}> <Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Validé par votre notaire le {this.formatDate(history.created_at!)} Validé par votre notaire le {this.formatDate(history.created_at!)}
</Typography> </Typography>
); );
case EDocumentStatus.DEPOSITED: case EDocumentStatus.DEPOSITED:
return ( return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}> <Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Déposé le {this.formatDate(history.created_at!)} Déposé le {this.formatDate(history.created_at!)}
</Typography> </Typography>
); );
case EDocumentStatus.REFUSED: case EDocumentStatus.REFUSED:
return ( return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}> <Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_800}>
Document non conforme Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && ( {history.refused_reason && history.refused_reason.length > 0 && (
<Button <Button

12
src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss
View File

@ -1,18 +1,18 @@
.container { .container {
.root { .root {
padding: 24px; padding: 24px;
background-color: var(--white); background-color: var(--color-generic-white);
border: 1px dashed #e7e7e7; border: 1px dashed #e7e7e7;
height: fit-content; height: fit-content;
margin-top: 16px; margin-top: 16px;
&[data-drag-over="true"] { &[data-drag-over="true"] {
border: 1px dashed var(--grey); border: 1px dashed var(--color-neutral-500);
} }
&.validated { &.validated {
border: 1px dashed var(--green-flash); border: 1px dashed var(--color-success-600);
} }
.top-container { .top-container {
@ -33,12 +33,12 @@
margin-left: 18px; margin-left: 18px;
.validated { .validated {
color: var(--green-flash); color: var(--color-success-600);
} }
.refused-button { .refused-button {
font-size: 14px; font-size: 14px;
color: var(--re-hover); color: var(--color-error-800);
margin-left: 8px; margin-left: 8px;
} }
@ -101,7 +101,7 @@
} }
.error-message { .error-message {
color: var(--red-flash); color: var(--color-error-600);
margin-top: 8px; margin-top: 8px;
} }
} }

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

@ -87,10 +87,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
canConfirm={!this.state.isLoading}> canConfirm={!this.state.isLoading}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<div className={classes["container"]}> <div className={classes["container"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer un autre document à votre notaire ? Vous souhaitez envoyer un autre document à votre notaire ?
</Typography> </Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. document correspondant.
</Typography> </Typography>
@ -110,7 +110,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["right"]}> <div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}> <Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_GENERIC_BLACK}
className={classes["title"]}>
<div <div
className={ className={
this.props.document.document_status === EDocumentStatus.VALIDATED this.props.document.document_status === EDocumentStatus.VALIDATED
@ -120,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.props.document.document_type?.name} {this.props.document.document_type?.name}
</div> </div>
</Typography> </Typography>
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}> <Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png Sélectionnez des documents .jpg, .pdf ou .png
</Typography> </Typography>
</div> </div>
@ -134,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["file-container"]} key={fileObj.name}> <div className={classes["file-container"]} key={fileObj.name}>
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" /> <Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{this.shortName(fileObj.name)} {this.shortName(fileObj.name)}
</Typography> </Typography>
</div> </div>
@ -152,7 +155,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
)} )}
<div className={classes["bottom-container"]}> <div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}> <Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}> <Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" /> Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography> </Typography>
</Button> </Button>
@ -167,7 +173,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
header={"L'ajout de Document n'est plus autorisé"} header={"L'ajout de Document n'est plus autorisé"}
isOpen={!!this.state.showFailedDocument}> isOpen={!!this.state.showFailedDocument}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedDocument} {this.state.showFailedDocument}
</Typography> </Typography>
</div> </div>
@ -176,7 +182,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.state.showFailedUploaded && ( {this.state.showFailedUploaded && (
<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}> <Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{this.state.showFailedUploaded} {this.state.showFailedUploaded}
</Typography> </Typography>
</div> </div>

16
src/front/Components/DesignSystem/DepositRib/classes.module.scss
View File

@ -1,19 +1,17 @@
.container { .container {
.root { .root {
padding: 24px; padding: 24px;
background-color: var(--white); background-color: var(--color-generic-white);
border: 1px dashed #e7e7e7; border: 1px dashed #e7e7e7;
height: fit-content; height: fit-content;
&[data-drag-over="true"] { &[data-drag-over="true"] {
border: 1px dashed var(--grey); border: 1px dashed var(--color-neutral-500);
} }
&.validated { &.validated {
border: 1px dashed var(--green-flash); border: 1px dashed var(--color-success-600);
} }
.top-container { .top-container {
@ -34,12 +32,12 @@
margin-left: 18px; margin-left: 18px;
.validated { .validated {
color: var(--green-flash); color: var(--color-success-600);
} }
.refused-button { .refused-button {
font-size: 14px; font-size: 14px;
color: var(--re-hover); color: var(--color-error-800);
margin-left: 8px; margin-left: 8px;
} }
@ -102,7 +100,7 @@
} }
.error-message { .error-message {
color: var(--red-flash); color: var(--color-error-600);
margin-top: 8px; margin-top: 8px;
} }
} }

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

@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["right"]}> <div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}> <Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div>Déposer un RIB</div> <div>Déposer un RIB</div>
</Typography> </Typography>
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}> <Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
Sélectionnez des documents .jpg, .pdf ou .png Sélectionnez des documents .jpg, .pdf ou .png
</Typography> </Typography>
</div> </div>
@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
<div className={classes["file-container"]} key="0"> <div className={classes["file-container"]} key="0">
<div className={classes["left-part"]}> <div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" /> <Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.name}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
{this.shortName(file.name)} {this.shortName(file.name)}
</Typography> </Typography>
</div> </div>
@ -161,7 +161,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
<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.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}> <Typography
typo={ITypo.TEXT_MD_SEMIBOLD}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" /> Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography> </Typography>
</Button> </Button>

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

@ -1,30 +1,30 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
border: 1px solid $grey-medium; border: 1px solid $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 $orange-soft; border: 1px solid $color-warning-500-soft;
&:hover { &:hover {
border: 1px solid $orange-soft; border: 1px solid $color-warning-500-soft;
outline: 1px solid $orange-soft; outline: 1px solid $color-warning-500-soft;
} }
} }
&.VALIDATED { &.VALIDATED {
cursor: pointer; cursor: pointer;
border: 1px solid $green-soft; border: 1px solid $color-success-600-soft;
&:hover { &:hover {
border: 1px solid $green-soft; border: 1px solid $color-success-600-soft;
outline: 1px solid $green-soft; outline: 1px solid $color-success-600-soft;
} }
} }
.valid-radius { .valid-radius {
background-color: $green-flash; background-color: color-success-600;
padding: 6px; padding: 6px;
border-radius: 20px; border-radius: 20px;
} }

4
src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
View File

@ -41,8 +41,8 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
return ( return (
<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}> <div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
<div> <div>
<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography> <Typography typo={ITypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
<Typography typo={ITypo.CAPTION_14}>{this.getDocumentsTitle()}</Typography> <Typography typo={ITypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
</div> </div>
{this.renderIcon()} {this.renderIcon()}
</div> </div>

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

@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
{this.props.href && ( {this.props.href && (
<> <>
{!type && ( {!type && (
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> <Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
Erreur lors du chargement du fichier Erreur lors du chargement du fichier
</Typography> </Typography>
)} )}

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

@ -18,6 +18,6 @@
max-height: calc(100vh - 215px); max-height: calc(100vh - 215px);
height: calc(100vh - 215px); height: calc(100vh - 215px);
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
} }

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

@ -1,7 +1,7 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
background-color: var(--grey-soft); background-color: var(--color-neutral-50);
padding: 24px; padding: 24px;
width: 100%; width: 100%;
display: flex; display: flex;

44
src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
View File

@ -6,7 +6,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 Typography, { ITypo } from "../Typography"; import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation"; import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
import Note from "le-coffre-resources/dist/Customer/Note"; import Note from "le-coffre-resources/dist/Customer/Note";
@ -70,42 +70,56 @@ export default function FolderBoxInformation(props: IProps) {
case EFolderBoxInformationType.DESCRIPTION: case EFolderBoxInformationType.DESCRIPTION:
return ( return (
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography> Note dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
</div> </div>
); );
case EFolderBoxInformationType.NOTE: case EFolderBoxInformationType.NOTE:
return ( return (
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note client</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{note?.content ?? ""}</Typography> Note client
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
</div> </div>
); );
case EFolderBoxInformationType.ARCHIVED_DESCRIPTION: case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
return ( return (
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Note archive</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography> Note archive
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
</div> </div>
); );
case EFolderBoxInformationType.INFORMATIONS: case EFolderBoxInformationType.INFORMATIONS:
return ( return (
<> <>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography> Intitulé du dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
</div> </div>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography> Numéro de dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
</div> </div>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Type d'acte</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</Typography> Type d'acte
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
</div> </div>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography> Ouverture du dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
</div> </div>
</> </>
); );

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 $grey-medium; border: 1px solid $color-neutral-200;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $grey-medium; background-color: $color-neutral-200;
} }
.left-side { .left-side {

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

@ -24,7 +24,7 @@ export default class FolderContainer extends React.Component<IProps, IState> {
return ( return (
<div className={classes["root"]} onClick={this.onSelectedFolder}> <div className={classes["root"]} onClick={this.onSelectedFolder}>
<div className={classes["left-side"]}> <div className={classes["left-side"]}>
<Typography typo={ITypo.P_16}> <Typography typo={ITypo.TEXT_MD_REGULAR}>
{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)} {this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
</Typography> </Typography>
{this.countPendingDocuments() > 0 && ( {this.countPendingDocuments() > 0 && (

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

@ -4,11 +4,11 @@
height: calc(100vh - 290px); height: calc(100vh - 290px);
overflow-y: scroll; overflow-y: scroll;
&.archived{ &.archived {
height: calc(100vh - 220px); height: calc(100vh - 220px);
} }
.active { .active {
background-color: var(--grey-medium); background-color: var(--color-neutral-200);
} }
} }

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

@ -18,6 +18,6 @@
max-height: calc(100vh - 290px); max-height: calc(100vh - 290px);
height: calc(100vh - 290px); height: calc(100vh - 290px);
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
} }

2
src/front/Components/DesignSystem/Form/BaseField.tsx
View File

@ -107,7 +107,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
let errors: JSX.Element[] = []; let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => { Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push( errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}> <Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{value} {value}
</Typography>, </Typography>,
); );

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

@ -12,7 +12,7 @@
gap: 10px; gap: 10px;
width: 100%; width: 100%;
height: 70px; height: 70px;
border: 1px solid var(--grey-medium); border: 1px solid var(--color-neutral-200);
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
@ -76,16 +76,16 @@
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background: $white; background: $color-generic-white;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
} }
&[data-is-errored="true"] { &[data-is-errored="true"] {
.input { .input {
border: 1px solid var(--red-flash); border: 1px solid var(--color-error-600);
~ .fake-placeholder { ~ .fake-placeholder {
color: var(--red-flash); color: var(--color-error-600);
} }
} }
} }

2
src/front/Components/DesignSystem/Form/DateField/index.tsx
View File

@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
public override render(): ReactNode { public override render(): ReactNode {
const value = this.state.value ?? ""; const value = this.state.value ?? "";
return ( return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}> <div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input <input
onChange={this.onChange} onChange={this.onChange}

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

@ -5,14 +5,14 @@
position: relative; position: relative;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
border: 1px solid var(--grey-medium); border: 1px solid var(--color-neutral-200);
&[data-errored="true"]{ &[data-errored="true"] {
border: 1px solid var(--red-flash); border: 1px solid var(--color-error-600);
} }
&[data-disabled="true"]{ &[data-disabled="true"] {
.container-label{ .container-label {
cursor: not-allowed; cursor: not-allowed;
} }
opacity: 0.6; opacity: 0.6;
@ -23,13 +23,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: $white; background-color: $color-generic-white;
cursor: pointer; cursor: pointer;
padding: 24px; padding: 24px;
z-index: 1; z-index: 1;
&[data-border-right-collapsed="true"] { &[data-border-right-collapsed="true"] {
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
} }
@ -52,7 +50,7 @@
position: absolute; position: absolute;
top: 24px; top: 24px;
left: 8px; left: 8px;
background-color: $white; background-color: $color-generic-white;
padding: 0 16px; padding: 0 16px;
&[data-open="true"] { &[data-open="true"] {
@ -64,7 +62,7 @@
.chevron-icon { .chevron-icon {
height: 24px; height: 24px;
fill: $grey; fill: $color-neutral-500;
transition: all 350ms $custom-easing; transition: all 350ms $custom-easing;
transform: rotate(90deg); transform: rotate(90deg);
@ -87,7 +85,7 @@
opacity: 1; opacity: 1;
overflow: hidden; overflow: hidden;
top: 50px; top: 50px;
background-color: $white; background-color: $color-generic-white;
&[data-open="false"] { &[data-open="false"] {
height: 0; height: 0;

8
src/front/Components/DesignSystem/Form/SelectField/index.tsx
View File

@ -81,14 +81,14 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
{selectedOption && ( {selectedOption && (
<> <>
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span> <span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
<Typography typo={ITypo.P_18}> <Typography typo={ITypo.TEXT_LG_REGULAR}>
<span className={classes["text"]}>{selectedOption?.label}</span> <span className={classes["text"]}>{selectedOption?.label}</span>
</Typography> </Typography>
</> </>
)} )}
{!selectedOption && ( {!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}> <div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<Typography typo={ITypo.NAV_INPUT_16}> <Typography typo={ITypo.TEXT_MD_REGULAR}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span> <span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography> </Typography>
</div> </div>
@ -110,7 +110,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
className={classes["container-li"]} className={classes["container-li"]}
onClick={(e) => this.onSelect(option, e)}> onClick={(e) => this.onSelect(option, e)}>
<div className={classes["token-icon"]}>{option.icon}</div> <div className={classes["token-icon"]}>{option.icon}</div>
<Typography typo={ITypo.P_18}>{option.label}</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR}>{option.label}</Typography>
</li> </li>
))} ))}
</ul> </ul>
@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
private renderErrors(): JSX.Element | null { private renderErrors(): JSX.Element | null {
if (!this.state.errors) return null; if (!this.state.errors) return null;
return ( return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}> <Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{this.props.placeholder} ne peut pas être vide {this.props.placeholder} ne peut pas être vide
</Typography> </Typography>
); );

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

@ -12,7 +12,7 @@
gap: 10px; gap: 10px;
width: 100%; width: 100%;
height: 70px; height: 70px;
border: 1px solid var(--grey-medium); border: 1px solid var(--color-neutral-200);
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
@ -76,16 +76,16 @@
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background: $white; background: $color-generic-white;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
} }
&[data-is-errored="true"] { &[data-is-errored="true"] {
.input { .input {
border: 1px solid var(--red-flash); border: 1px solid var(--color-error-600);
~ .fake-placeholder { ~ .fake-placeholder {
color: var(--red-flash); color: var(--color-error-600);
} }
} }
} }

2
src/front/Components/DesignSystem/Form/TextField/index.tsx
View File

@ -21,7 +21,7 @@ export default class TextField extends BaseField<IProps> {
public override render(): ReactNode { public override render(): ReactNode {
const value = this.state.value ?? ""; const value = this.state.value ?? "";
return ( return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}> <div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input <input
onChange={this.onChange} onChange={this.onChange}

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

@ -25,7 +25,7 @@
width: 100%; width: 100%;
height: 100px; height: 100px;
border: 1px solid var(--grey-medium); border: 1px solid var(--color-neutral-200);
~ .fake-placeholder { ~ .fake-placeholder {
z-index: 2; z-index: 2;
@ -34,7 +34,7 @@
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background: $white; background: $color-generic-white;
transform: translateY(35px); transform: translateY(35px);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
@ -54,9 +54,9 @@
&[data-is-errored="true"] { &[data-is-errored="true"] {
.textarea { .textarea {
border: 1px solid var(--red-flash); border: 1px solid var(--color-error-600);
~ .fake-placeholder { ~ .fake-placeholder {
color: var(--red-flash); color: var(--color-error-600);
} }
} }
} }

2
src/front/Components/DesignSystem/Form/TextareaField/index.tsx
View File

@ -17,7 +17,7 @@ export default class TextAreaField extends BaseField<IProps> {
public override render(): ReactNode { public override render(): ReactNode {
const value = this.state.value ?? ""; const value = this.state.value ?? "";
return ( return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}> <div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<textarea <textarea
name={this.props.name} name={this.props.name}

8
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
View File

@ -5,7 +5,7 @@ import classes from "./classes.module.scss";
import { IAppRule } from "@Front/Api/Entities/rule"; import { IAppRule } from "@Front/Api/Entities/rule";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { IHeaderLinkProps } from "../../../HeaderLink"; import { IHeaderLinkProps } from "../../../HeaderLink";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink"; import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
import useToggle from "@Front/Hooks/useToggle"; import useToggle from "@Front/Hooks/useToggle";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
@ -34,7 +34,11 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classes["container"]}> <div className={classes["container"]}>
<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}> <div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
<div className={classes["content"]} onClick={toggle}> <div className={classes["content"]} onClick={toggle}>
<Typography typo={isActive || isSubmenuOpened ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography> <Typography
typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isSubmenuOpened ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />} {isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}
</div> </div>
<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} /> <div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />

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: $white; background-color: $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 $grey-medium; border: 1px solid $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: $white; background-color: $color-generic-white;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
&[data-active="true"] { &[data-active="true"] {
background-color: $black; background-color: $color-generic-black;
} }
} }

12
src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
View File

@ -3,7 +3,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Typography, { ITypo } from "../../Typography"; import Typography, { ITypo, ITypoColor } from "../../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable"; import useHoverable from "@Front/Hooks/useHoverable";
@ -37,7 +37,11 @@ export default function HeaderLink(props: IHeaderLinkProps) {
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}> onMouseLeave={handleMouseLeave}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography> <Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div> </div>
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} /> <div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
</Link> </Link>
@ -46,7 +50,9 @@ export default function HeaderLink(props: IHeaderLinkProps) {
return ( return (
<div className={classNames(classes["root"], classes["desactivated"])}> <div className={classNames(classes["root"], classes["desactivated"])}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div> </div>
</div> </div>
); );

8
src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
View File

@ -2,7 +2,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import useHoverable from "@Front/Hooks/useHoverable"; import useHoverable from "@Front/Hooks/useHoverable";
type IHeaderLinkProps = { type IHeaderLinkProps = {
@ -29,7 +29,11 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
return ( return (
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> <Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography> <Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</Link> </Link>
); );
} }

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: $white; background-color: $color-generic-white;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
&[data-active="true"] { &[data-active="true"] {
background-color: $black; background-color: $color-generic-black;
} }
} }

8
src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { IHeaderLinkProps } from "../HeaderLink"; import { IHeaderLinkProps } from "../HeaderLink";
import Typography, { ITypo } from "../../Typography"; import Typography, { ITypo, ITypoColor } from "../../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable"; import useHoverable from "@Front/Hooks/useHoverable";
import HeaderSubmenuLink from "./HeaderSubmenuLink"; import HeaderSubmenuLink from "./HeaderSubmenuLink";
@ -34,7 +34,11 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> <div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}> <div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography> <Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div> </div>
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} /> <div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
{isHovered && ( {isHovered && (

8
src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import Link from "next/link"; import Link from "next/link";
import classNames from "classnames"; import classNames from "classnames";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
type IProps = { type IProps = {
text: string | JSX.Element; text: string | JSX.Element;
@ -29,7 +29,11 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
onClick={this.props.onClick} onClick={this.props.onClick}
target={this.props.target}> target={this.props.target}>
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography> <Typography
typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{this.props.text}
</Typography>
</div> </div>
</Link> </Link>
); );

4
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: $white; background-color: $color-generic-white;
box-shadow: $shadow-nav; box-shadow: $shadow-nav;
padding: 24px; padding: 24px;
position: absolute; position: absolute;
@ -37,7 +37,7 @@
gap: 8px; gap: 8px;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
color: var(--pink-flash); color: var(--color-secondary-500);
cursor: pointer; cursor: pointer;
} }

8
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
View File

@ -34,22 +34,22 @@ export default class NotificationModal extends React.Component<IProps, IState> {
<div className={classes["background"]} onClick={this.props.closeModal} /> <div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["notification-header"]}> <div className={classes["notification-header"]}>
<Typography typo={ITypo.P_SB_16}>Notifications</Typography> <Typography typo={ITypo.TEXT_MD_SEMIBOLD}>Notifications</Typography>
<div className={classes["close-icon"]} onClick={this.props.closeModal}> <div className={classes["close-icon"]} onClick={this.props.closeModal}>
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image> <Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
</div> </div>
</div> </div>
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}> <div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}> <Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
Tout marquer comme lu Tout marquer comme lu
</Typography> </Typography>
<Check color={ITypoColor.PINK_FLASH} /> <Check color={ITypoColor.COLOR_SECONDARY_500} />
</div> </div>
<div className={classes["notification-body"]}> <div className={classes["notification-body"]}>
<> <>
{!this.state.toastList || this.state.toastList.length === 0 ? ( {!this.state.toastList || this.state.toastList.length === 0 ? (
<div className={classes["missing-notification"]}> <div className={classes["missing-notification"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Vous n'avez pas de notifications. Vous n'avez pas de notifications.
</Typography> </Typography>
</div> </div>

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: $white; background-color: $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 $grey-medium; border: 1px solid $color-neutral-200;
} }
} }

4
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: $white; background-color: $color-generic-white;
box-shadow: $shadow-nav; box-shadow: $shadow-nav;
padding: 0 48px; padding: 0 48px;
position: sticky; position: sticky;
@ -81,6 +81,6 @@
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--grey-soft); background-color: var(--color-neutral-50);
padding: 14px 0; padding: 14px 0;
} }

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

@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
{this.state.cancelAt && ( {this.state.cancelAt && (
<div className={classes["subscription-line"]}> <div className={classes["subscription-line"]}>
<InformationCircleIcon height="24" />; <InformationCircleIcon height="24" />;
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "} Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
{this.state.cancelAt.toLocaleDateString()}. {this.state.cancelAt.toLocaleDateString()}.
</Typography> </Typography>

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

@ -9,7 +9,7 @@
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 8px solid; border: 8px solid;
border-color: var(--grey-soft); border-color: var(--color-neutral-50);
border-right-color: var(--blue-soft); border-right-color: var(--color-info-500-soft);
animation: s2 1s infinite linear; animation: s2 1s infinite linear;
} }

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

@ -2,7 +2,7 @@ import React from "react";
import Image from "next/image"; import Image from "next/image";
import DisconnectIcon from "@Assets/Icons/disconnect.svg"; import DisconnectIcon from "@Assets/Icons/disconnect.svg";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography"; import Typography, { ITypo, ITypoColor } from "../Typography";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import UserStore from "@Front/Stores/UserStore"; import UserStore from "@Front/Stores/UserStore";
import { FrontendVariables } from "@Front/Config/VariablesFront"; import { FrontendVariables } from "@Front/Config/VariablesFront";
@ -11,14 +11,16 @@ export default function LogOut() {
const router = useRouter(); const router = useRouter();
const variables = FrontendVariables.getInstance(); const variables = FrontendVariables.getInstance();
const disconnect = async() => { const disconnect = async () => {
await UserStore.instance.disconnect(); await UserStore.instance.disconnect();
router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`); router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`);
}; };
return ( return (
<div className={classes["root"]} onClick={disconnect}> <div className={classes["root"]} onClick={disconnect}>
<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Déconnexion
</Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" /> <Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
</div> </div>
); );

2
src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx
View File

@ -10,7 +10,7 @@ export default class Header extends React.Component<IProps> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<header className={classes["root"]}> <header className={classes["root"]}>
<Typography typo={ITypo.H2}>{this.props.content}</Typography> <Typography typo={ITypo.TITLE_H3}>{this.props.content}</Typography>
</header> </header>
); );
} }

2
src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx
View File

@ -13,7 +13,7 @@ export default class PopUpLoader extends React.Component<IProps> {
<div className={classes["root"]}> <div className={classes["root"]}>
{/* <Loader /> */} {/* <Loader /> */}
TODO: INTEGRER LOARDER ISLOADING TODO: INTEGRER LOARDER ISLOADING
<Typography typo={ITypo.P_16}>{this.props.text && this.props.text}</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.text && this.props.text}</Typography>
</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: $white; background: $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;

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

@ -60,7 +60,7 @@ export default class Modal extends React.Component<IProps, IState> {
<div className={classes["sub-container"]}> <div className={classes["sub-container"]}>
{this.props.header && <Header content={this.props.header} />} {this.props.header && <Header content={this.props.header} />}
<Typography typo={ITypo.P_16}> <Typography typo={ITypo.TEXT_MD_REGULAR}>
<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</> <>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
</Typography> </Typography>
{this.props.children && this.props.footer && <Footer content={this.props.footer} />} {this.props.children && this.props.footer && <Footer content={this.props.footer} />}
@ -96,18 +96,16 @@ export default class Modal extends React.Component<IProps, IState> {
document.body.style.overflow = "auto"; document.body.style.overflow = "auto";
document.removeEventListener("keydown", this.handleKeyDown); document.removeEventListener("keydown", this.handleKeyDown);
} }
protected close() { protected close() {
if (this.props.hasContainerClosable === false) return; if (this.props.hasContainerClosable === false) return;
if (this.state.willClose) return; if (this.state.willClose) return;
this.props.onClose(); this.props.onClose();
} }
private handleKeyDown = (e: KeyboardEvent): void => { private handleKeyDown = (e: KeyboardEvent): void => {
if (e.key === "Escape" || e.key === "Esc") { if (e.key === "Escape" || e.key === "Esc") {
this.props.onClose(); this.props.onClose();
} }
} };
} }

8
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 $grey-medium; border: 1px solid $color-neutral-200;
background-color: transparent; background-color: transparent;
.placeholder { .placeholder {
@ -66,12 +66,12 @@
z-index: 1; z-index: 1;
padding: 0 16px; padding: 0 16px;
} }
&[data-is-errored="true"] { &[data-is-errored="true"] {
.input { .input {
border: 1px solid var(--red-flash); border: 1px solid var(--color-error-600);
~ .fake-placeholder { ~ .fake-placeholder {
color: var(--red-flash); color: var(--color-error-600);
} }
} }
} }

9
src/front/Components/DesignSystem/MultiSelect/index.tsx
View File

@ -37,8 +37,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
this.state = { this.state = {
isFocused: false, isFocused: false,
selectedOptions: [], selectedOptions: [],
validationError: this.props.validationError ?? null validationError: this.props.validationError ?? null,
}; };
this.hasError = this.hasError.bind(this); this.hasError = this.hasError.bind(this);
this.onChange = this.onChange.bind(this); this.onChange = this.onChange.bind(this);
@ -56,7 +55,9 @@ export default class MultiSelect extends React.Component<IProps, IState> {
<div <div
className={classes["placeholder"]} className={classes["placeholder"]}
data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}> data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{this.props.placeholder}
</Typography>
</div> </div>
)} )}
<div className={classes["input-container"]}> <div className={classes["input-container"]}>
@ -147,7 +148,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
let errors: JSX.Element[] = []; let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => { Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push( errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}> <Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{value} {value}
</Typography>, </Typography>,
); );

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

@ -70,22 +70,22 @@ export default class Newsletter extends React.Component<IProps, IState> {
<div className={classes["container"]}> <div className={classes["container"]}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["text"]}> <div className={classes["text"]}>
<Typography typo={ITypo.H3} color={ITypoColor.WHITE}> <Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
Restez Informé(e) avec notre Newsletter Restez Informé(e) avec notre Newsletter
</Typography> </Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_WHITE}>
Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts ! Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
</Typography> </Typography>
{this.state.errorMessage && ( {this.state.errorMessage && (
<div> <div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{this.state.errorMessage} {this.state.errorMessage}
</Typography> </Typography>
</div> </div>
)} )}
{this.state.successMessage && ( {this.state.successMessage && (
<div> <div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
{this.state.successMessage} {this.state.successMessage}
</Typography> </Typography>
</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: $grey-medium; background-color: $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: $turquoise-flash; background-color: $color-secondary-500;
.percentage { .percentage {
width: 0; width: 0;

2
src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx
View File

@ -11,7 +11,7 @@ export default class ProgressBar extends React.Component<IProps> {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["progress"]} style={{ width: quantity }}> <div className={classes["progress"]} style={{ width: quantity }}>
<Typography typo={ITypo.P_16}> <Typography typo={ITypo.TEXT_MD_REGULAR}>
<div className={classes["percentage"]}>{quantity}</div> <div className={classes["percentage"]}>{quantity}</div>
</Typography> </Typography>
</div> </div>

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

@ -19,7 +19,7 @@ export default class QuantityProgressBar extends React.Component<IProps> {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.P_16}>{this.props.title}</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.title}</Typography>
</div> </div>
<ProgressBar percentage={percentage} /> <ProgressBar percentage={percentage} />
</div> </div>

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 $turquoise-flash; border: 1px solid $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: $turquoise-flash; background-color: $color-secondary-500;
border-radius: 100px; border-radius: 100px;
transform: scale(0); transform: scale(0);
} }

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

@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
}; };
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
<label className={classes["root"]}> <label className={classes["root"]}>
<input <input
type="radio" type="radio"

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: $white; background-color: $color-generic-white;
border: 1px solid $grey-medium; border: 1px solid $color-neutral-200;
position: relative; position: relative;
.fake-placeholder { .fake-placeholder {
position: absolute; position: absolute;
left: 47px; left: 47px;
top: 24px; top: 24px;
color: $grey; color: $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: $grey; color: $color-neutral-500;
} }
} }

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

@ -2,7 +2,7 @@ import LoopIcon from "@Assets/Icons/loop.svg";
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React from "react";
import Typography, { ITypo } from "../Typography"; import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IProps = { type IProps = {
@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
<div className={classes["root"]}> <div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" /> <Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && ( {!this.state.hasValue && (
<Typography typo={ITypo.P_ERR_18}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div> <div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
</Typography> </Typography>
)} )}

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

@ -8,17 +8,17 @@
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
} }
.switch-container { .switch-container {
position: relative; position: relative;
width: 46px; width: 46px;
height: 24px; height: 24px;
background-color: var(--grey-medium); background-color: var(--color-neutral-200);
border-radius: 64px; border-radius: 64px;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
&[data-checked="true"] { &[data-checked="true"] {
background-color: var(--turquoise-flash); background-color: var(--color-secondary-500);
.round { .round {
left: 24px; left: 24px;

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

@ -28,7 +28,7 @@ export default function Switch({ onChange, checked, label, disabled }: IProps) {
<div className={classes["round"]} /> <div className={classes["round"]} />
</div> </div>
</div> </div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
{label} {label}
</Typography> </Typography>
</div> </div>

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

@ -26,7 +26,7 @@
pointer-events: all; pointer-events: all;
position: relative; position: relative;
padding: 24px; padding: 24px;
background: var(--orange-soft); background: var(--color-warning-500-soft);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
border-radius: 5px; border-radius: 5px;
@ -45,7 +45,7 @@
&[data-clickable="true"] { &[data-clickable="true"] {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--orange-soft-hover); background: var(--color-warning-500-soft);
} }
} }

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

@ -74,7 +74,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
private getToastTitle(title: string | React.ReactNode) { private getToastTitle(title: string | React.ReactNode) {
if (typeof title === "string") { if (typeof title === "string") {
return <Typography typo={ITypo.P_16}>{title}</Typography>; return <Typography typo={ITypo.TEXT_MD_REGULAR}>{title}</Typography>;
} }
return title; return title;
} }
@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
if (typeof text === "string") { if (typeof text === "string") {
return ( return (
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{text} {text}
</Typography> </Typography>
</div> </div>

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: $white; background: $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: $white; fill: $color-generic-white;
} }

6
src/front/Components/DesignSystem/ToolTip/index.tsx
View File

@ -19,8 +19,8 @@ type IState = {
const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)( const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
({ theme }) => ({ ({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: { [`& .${tooltipClasses.tooltip}`]: {
backgroundColor: "var(--white)", backgroundColor: "var(--color-generic-white)",
color: "var(--black)", color: "var(--color-generic-black)",
boxShadow: "0px 4px 24px 0px #00000026", boxShadow: "0px 4px 24px 0px #00000026",
fontSize: 14, fontSize: 14,
fontWeight: 400, fontWeight: 400,
@ -30,7 +30,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
borderRadius: "0px", borderRadius: "0px",
}, },
[`& .${tooltipClasses.arrow}`]: { [`& .${tooltipClasses.arrow}`]: {
color: "var(--white)", color: "var(--color-generic-white)",
}, },
}), }),
); );

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

@ -2,165 +2,279 @@
@import "@Themes/modes.scss"; @import "@Themes/modes.scss";
.root { .root {
color: $black; color: $color-neutral-950;
vertical-align: center; vertical-align: center;
font-family: "Inter", sans-serif; font-family: "Poppins", sans-serif;
&.H1-60 {
//Displays
&.display-large {
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 600;
font-size: 56px; font-size: 50px;
line-height: 67.2px; line-height: 75px;
letter-spacing: -2%;
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
font-size: 48px; font-size: 48px;
line-height: 56.7px; line-height: 72px;
}
}
&.display-medium {
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 72px;
letter-spacing: -2%;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
}
}
&.display-small {
font-style: normal;
font-weight: 600;
font-size: 44px;
line-height: 66px;
letter-spacing: -2%;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
} }
} }
&.H1-bis-40 { //Titles
&.title-h1 {
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 600;
font-size: 40px; font-size: 40px;
line-height: 60px;
letter-spacing: -2%;
}
&.title-h2 {
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 54px;
letter-spacing: -2%;
}
&.title-h3 {
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 48px; line-height: 48px;
letter-spacing: -2%;
} }
&.title-h4 {
&.H2-30 {
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 36px;
}
&.H3-24 {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 28px;
line-height: 42px;
letter-spacing: -2%;
}
&.title-h5 {
font-style: normal;
font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 29px; line-height: 36px;
letter-spacing: -2%;
}
&.title-h6 {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: -2%;
} }
&.Paragraphe-semibold-18 { //Text large
&.text-lg-bold {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
}
&.text-lg-semibold {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 27px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
} }
&.text-lg-regular {
&.Paragraphe-simple-18 {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 27px;
letter-spacing: 0.5%;
} }
&.text-lg-uppercase {
&.Paragraphe-MAJ-18 {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 27px;
letter-spacing: 0.5%;
text-transform: uppercase; text-transform: uppercase;
} }
&.text-lg-light {
&.Nav-header-off-18 {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 300;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 27px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
color: $grey;
} }
&.Paragraphe-18-error { //Text medium
&.text-md-bold {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 700;
font-size: 18px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
} }
&.text-md-semibold {
&.Paragraphe-semibold-16 {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
} }
&.text-md-regular {
&.Nav-input-off-16 {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
color: $grey;
} }
&.text-md-uppercase {
&.Paragraphe-simple-16 {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0.005em; letter-spacing: 0.5%;
text-transform: uppercase;
} }
&.text-md-light {
&.Paragraphe-16-error {
color: $re-hover;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 300;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
} }
&.Caption_14 { //Text small
&.text-sm-bold {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 21px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
} }
&.text-sm-semibold {
&.Caption_14-semibold {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 21px;
letter-spacing: 0.5px; letter-spacing: 0.5%;
}
&.text-sm-regular {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
}
&.text-sm-uppercase {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-sm-light {
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
} }
&.re-hover { //Text extra small
color: $re-hover; &.text-xs-bold {
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-semibold {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-regular {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-uppercase {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-xs-light {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
} }
&.grey { //Caption
color: $grey; &.caption-bold {
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
} }
&.caption-semibold {
&.black { font-style: normal;
color: $black; font-weight: 600;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
} }
&.caption-regular {
&.purple-flash { font-style: normal;
color: var(--purple-flash); font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
} }
&.caption-uppercase {
&.pink-flash { font-style: normal;
color: var(--pink-flash); font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
text-transform: uppercase;
} }
&.caption-light {
&.green-flash { font-style: normal;
color: var(--green-flash); font-weight: 300;
} font-size: 10px;
line-height: 15px;
&.red-flash { letter-spacing: -2%;
color: var(--red-flash);
}
&.orange-flash {
color: var(--orange-flash);
}
&.white {
color: $white;
} }
} }

62
src/front/Components/DesignSystem/Typography/index-old.tsx Normal file
View File

@ -0,0 +1,62 @@
import React from "react";
import classes from "./old-classes.module.scss";
import classNames from "classnames";
type IProps = {
typo: ITypo;
children: React.ReactNode;
color?: ITypoColor;
className?: string;
title?: string;
};
type IState = {};
export enum ITypo {
H1 = "H1-60",
H1Bis = "H1-bis-40",
H2 = "H2-30",
H3 = "H3-24",
P_SB_18 = "Paragraphe-semibold-18",
P_18 = "Paragraphe-simple-18",
P_MAJ_18 = "Paragraphe-MAJ-18",
NAV_HEADER_18 = "Nav-header-off-18",
P_ERR_18 = "Paragraphe-18-error",
P_SB_16 = "Paragraphe-semibold-16",
P_16 = "Paragraphe-simple-16",
NAV_INPUT_16 = "Nav-input-off-16",
P_ERR_16 = "Paragraphe-16-error",
CAPTION_14 = "Caption_14",
CAPTION_14_SB = "Caption_14-semibold",
}
export enum ITypoColor {
COLOR_ERROR_800 = "color-error-800",
COLOR_NEUTRAL_500 = "color-neutral-500",
COLOR_GENERIC_BLACK = "color-generic-black",
COLOR_PRIMARY_500 = "color-primary-500",
COLOR_SECONDARY_500 = "color-secondary-500",
COLOR_SUCCESS_600 = "color-success-600",
COLOR_WARNING_500 = "color-warning-500",
COLOR_ERROR_600 = "color-error-600",
COLOR_GENERIC_WHITE = "color-generic-white",
}
export default class Typography extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div
className={classNames(
classes["root"],
classes[this.props.typo],
classes[this.props.color ?? ""],
this.props.className ?? "",
)}
title={this.props.title}>
{this.props.children}
</div>
);
}
}

146
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -12,36 +12,134 @@ type IProps = {
type IState = {}; type IState = {};
export enum ITypo { export enum ITypo {
H1 = "H1-60", DISPLAY_LARGE = "display-large",
H1Bis = "H1-bis-40", DISPLAY_MEDIUM = "display-medium",
H2 = "H2-30", DISPLAY_SMALL = "display-small",
H3 = "H3-24",
P_SB_18 = "Paragraphe-semibold-18", TITLE_H1 = "title-h1",
P_18 = "Paragraphe-simple-18", TITLE_H2 = "title-h2",
P_MAJ_18 = "Paragraphe-MAJ-18", TITLE_H3 = "title-h3",
NAV_HEADER_18 = "Nav-header-off-18", TITLE_H4 = "title-h4",
P_ERR_18 = "Paragraphe-18-error", TITLE_H5 = "title-h5",
TITLE_H6 = "title-h6",
P_SB_16 = "Paragraphe-semibold-16", TEXT_LG_BOLD = "text-lg-bold",
P_16 = "Paragraphe-simple-16", TEXT_LG_SEMIBOLD = "text-lg-semibold",
NAV_INPUT_16 = "Nav-input-off-16", TEXT_LG_REGULAR = "text-lg-regular",
P_ERR_16 = "Paragraphe-16-error", TEXT_LG_UPPERCASE = "text-lg-uppercase",
TEXT_LG_light = "text-lg-light",
CAPTION_14 = "Caption_14", TEXT_MD_BOLD = "text-md-bold",
CAPTION_14_SB = "Caption_14-semibold", TEXT_MD_SEMIBOLD = "text-md-semibold",
TEXT_MD_REGULAR = "text-md-regular",
TEXT_MD_UPPERCASE = "text-md-uppercase",
TEXT_MD_light = "text-md-light",
TEXT_SM_BOLD = "text-sm-bold",
TEXT_SM_SEMIBOLD = "text-sm-semibold",
TEXT_SM_REGULAR = "text-sm-regular",
TEXT_SM_UPPERCASE = "text-sm-uppercase",
TEXT_SM_light = "text-sm-light",
TEXT_XS_BOLD = "text-xs-bold",
TEXT_XS_SEMIBOLD = "text-xs-semibold",
TEXT_XS_REGULAR = "text-xs-regular",
TEXT_XS_UPPERCASE = "text-xs-uppercase",
TEXT_XS_light = "text-xs-light",
CAPTION_BOLD = "caption-bold",
CAPTION_SEMIBOLD = "caption-semibold",
CAPTION_REGULAR = "caption-regular",
CAPTION_UPPERCASE = "caption-uppercase",
CAPTION_LIGHT = "caption-light",
} }
export enum ITypoColor { export enum ITypoColor {
RE_HOVER = "re-hover", COLOR_GENERIC_BLACK = "color-generic-black",
GREY = "grey", COLOR_GENERIC_WHITE = "color-generic-white",
BLACK = "black", COLOR_GENERIC_NONE = "color-generic-none",
PURPLE_FLASH = "purple-flash",
PINK_FLASH = "pink-flash", COLOR_NEUTRAL_50 = "color-neutral-50",
GREEN_FLASH = "green-flash", COLOR_NEUTRAL_100 = "color-neutral-100",
ORANGE_FLASH = "orange-flash", COLOR_NEUTRAL_200 = "color-neutral-200",
RED_FLASH = "red-flash", COLOR_NEUTRAL_300 = "color-neutral-300",
WHITE = "white", COLOR_NEUTRAL_400 = "color-neutral-400",
COLOR_NEUTRAL_500 = "color-neutral-500",
COLOR_NEUTRAL_600 = "color-neutral-600",
COLOR_NEUTRAL_700 = "color-neutral-700",
COLOR_NEUTRAL_800 = "color-neutral-800",
COLOR_NEUTRAL_900 = "color-neutral-900",
COLOR_NEUTRAL_950 = "color-neutral-950",
COLOR_PRIMARY_50 = "color-primary-50",
COLOR_PRIMARY_100 = "color-primary-100",
COLOR_PRIMARY_200 = "color-primary-200",
COLOR_PRIMARY_300 = "color-primary-300",
COLOR_PRIMARY_400 = "color-primary-400",
COLOR_PRIMARY_500 = "color-primary-500",
COLOR_PRIMARY_600 = "color-primary-600",
COLOR_PRIMARY_700 = "color-primary-700",
COLOR_PRIMARY_800 = "color-primary-800",
COLOR_PRIMARY_900 = "color-primary-900",
COLOR_PRIMARY_950 = "color-primary-950",
COLOR_SECONDARY_50 = "color-secondary-50",
COLOR_SECONDARY_100 = "color-secondary-100",
COLOR_SECONDARY_200 = "color-secondary-200",
COLOR_SECONDARY_300 = "color-secondary-300",
COLOR_SECONDARY_400 = "color-secondary-400",
COLOR_SECONDARY_500 = "color-secondary-500",
COLOR_SECONDARY_600 = "color-secondary-600",
COLOR_SECONDARY_700 = "color-secondary-700",
COLOR_SECONDARY_800 = "color-secondary-800",
COLOR_SECONDARY_900 = "color-secondary-900",
COLOR_SECONDARY_950 = "color-secondary-950",
COLOR_ERROR_50 = "color-error-50",
COLOR_ERROR_100 = "color-error-100",
COLOR_ERROR_200 = "color-error-200",
COLOR_ERROR_300 = "color-error-300",
COLOR_ERROR_400 = "color-error-400",
COLOR_ERROR_500 = "color-error-500",
COLOR_ERROR_600 = "color-error-600",
COLOR_ERROR_700 = "color-error-700",
COLOR_ERROR_800 = "color-error-800",
COLOR_ERROR_900 = "color-error-900",
COLOR_ERROR_950 = "color-error-950",
COLOR_WARNING_50 = "color-warning-50",
COLOR_WARNING_100 = "color-warning-100",
COLOR_WARNING_200 = "color-warning-200",
COLOR_WARNING_300 = "color-warning-300",
COLOR_WARNING_400 = "color-warning-400",
COLOR_WARNING_500 = "color-warning-500",
COLOR_WARNING_700 = "color-warning-700",
COLOR_WARNING_800 = "color-warning-800",
COLOR_WARNING_900 = "color-warning-900",
COLOR_WARNING_950 = "color-warning-950",
COLOR_SUCCESS_50 = "color-success-50",
COLOR_SUCCESS_100 = "color-success-100",
COLOR_SUCCESS_200 = "color-success-200",
COLOR_SUCCESS_300 = "color-success-300",
COLOR_SUCCESS_400 = "color-success-400",
COLOR_SUCCESS_500 = "color-success-500",
COLOR_SUCCESS_600 = "color-success-600",
COLOR_SUCCESS_700 = "color-success-700",
COLOR_SUCCESS_800 = "color-success-800",
COLOR_SUCCESS_900 = "color-success-900",
COLOR_SUCCESS_950 = "color-success-950",
COLOR_INFO_50 = "color-info-50",
COLOR_INFO_100 = "color-info-100",
COLOR_INFO_200 = "color-info-200",
COLOR_INFO_300 = "color-info-300",
COLOR_INFO_400 = "color-info-400",
COLOR_INFO_500 = "color-info-500",
COLOR_INFO_700 = "color-info-700",
COLOR_INFO_800 = "color-info-800",
COLOR_INFO_900 = "color-info-900",
COLOR_INFO_950 = "color-info-950",
} }
export default class Typography extends React.Component<IProps, IState> { export default class Typography extends React.Component<IProps, IState> {

166
src/front/Components/DesignSystem/Typography/old-classes.module.scss Normal file
View File

@ -0,0 +1,166 @@
@import "@Themes/constants.scss";
@import "@Themes/modes.scss";
.root {
color: $color-generic-black;
vertical-align: center;
font-family: "Inter", sans-serif;
&.H1-60 {
font-style: normal;
font-weight: 500;
font-size: 56px;
line-height: 67.2px;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 56.7px;
}
}
&.H1-bis-40 {
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 48px;
}
&.H2-30 {
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 36px;
}
&.H3-24 {
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 29px;
}
&.Paragraphe-semibold-18 {
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Paragraphe-simple-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
}
&.Paragraphe-MAJ-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
}
&.Nav-header-off-18 {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
color: $color-neutral-500;
}
&.Paragraphe-18-error {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Paragraphe-semibold-16 {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Nav-input-off-16 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: $color-neutral-500;
}
&.Paragraphe-simple-16 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.005em;
}
&.Paragraphe-16-error {
color: $color-error-800;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Caption_14 {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.Caption_14-semibold {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.5px;
}
&.color-error-800 {
color: $color-error-800;
}
&.color-neutral-500 {
color: $color-neutral-500;
}
&.color-generic-black {
color: $color-generic-black;
}
&.color-primary-500 {
color: var(--color-primary-500);
}
&.color-secondary-500 {
color: var(--color-secondary-500);
}
&.color-success-600 {
color: var(--color-success-600);
}
&.color-error-600 {
color: var(--color-error-600);
}
&.color-warning-500 {
color: var(--color-warning-500);
}
&.white {
color: $color-generic-white;
}
}

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

@ -28,9 +28,9 @@ export default class DocumentList extends React.Component<IProps, IState> {
return ( return (
<div className={classNameToAdd}> <div className={classNameToAdd}>
<div className={classes["title"]}> <div className={classes["title"]}>
<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography> <Typography typo={ITypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
</div> </div>
<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
<div className={classes["content"]}> <div className={classes["content"]}>
{this.props.documents && {this.props.documents &&
this.props.documents.map((document) => { this.props.documents.map((document) => {

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

@ -5,7 +5,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px; padding: 24px;
background-color: var(--grey-soft); background-color: var(--color-neutral-50);
width: 100%; width: 100%;
gap: 32px; gap: 32px;
.content { .content {

26
src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
View File

@ -8,7 +8,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 Typography, { ITypo } from "../../Typography"; import Typography, { ITypo, ITypoColor } from "../../Typography";
import WarningBadge from "../../WarningBadge"; import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@ -38,26 +38,34 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["content"]}> <div className={classes["content"]}>
<div className={classes["container"]}> <div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</Typography> Nom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
</div> </div>
<div className={classes["container"]}> <div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</Typography> Prénom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
</div> </div>
<div className={classes["container"]}> <div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}> Numéro de téléphone
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number!) ?? {this.formatPhoneNumber(this.props.customer.contact.cell_phone_number!) ??
this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")} this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
</Typography> </Typography>
</div> </div>
<div className={classes["container"]}> <div className={classes["container"]}>
<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography> E-mail
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
</div> </div>
</div> </div>
{!this.props.isArchived && ( {!this.props.isArchived && (

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

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

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

@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
<div>{VersionFile.version}</div> <div>{VersionFile.version}</div>
</Typography> </Typography>
</div> </div>

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: $orange-flash; background-color: $color-warning-500;
padding: 6px; padding: 6px;
border-radius: 20px; border-radius: 20px;
} }

4
src/front/Components/Elements/MessageBox/classes.module.scss
View File

@ -20,12 +20,12 @@
} }
&.success { &.success {
border: 1px solid var(--green-flash); border: 1px solid var(--color-success-600);
background: #12bf4d0d; background: #12bf4d0d;
} }
&.error { &.error {
border: 1px solid var(--red-soft); border: 1px solid var(--color-error-600-soft);
background: #f087711a; background: #f087711a;
} }
} }

2
src/front/Components/Elements/MessageBox/index.tsx
View File

@ -15,7 +15,7 @@ export default function MessageBox(props: IProps) {
<div className={classNames(className, classes["root"], classes[type])}> <div className={classNames(className, classes["root"], classes[type])}>
{getIcon(type)} {getIcon(type)}
<div className={classes["content"]}> <div className={classes["content"]}>
<Typography className={classes["text"]} typo={ITypo.CAPTION_14}> <Typography className={classes["text"]} typo={ITypo.TEXT_SM_REGULAR}>
{children} {children}
</Typography> </Typography>
</div> </div>

2
src/front/Components/Elements/NavTab/index.tsx
View File

@ -31,7 +31,7 @@ export default function NavTab(props: IProps) {
key={item.path.toString()} key={item.path.toString()}
href={item.path} href={item.path}
className={classNames(classes["link"], isMatch && classes["active"])}> className={classNames(classes["link"], isMatch && classes["active"])}>
<Typography key={index} typo={isMatch ? ITypo.P_SB_18 : ITypo.P_18}> <Typography key={index} typo={isMatch ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}>
{item.label} {item.label}
</Typography> </Typography>
</Link> </Link>

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

@ -17,7 +17,7 @@
.folderlist-container { .folderlist-container {
max-height: calc(100vh - 215px); max-height: calc(100vh - 215px);
height: 100%; height: 100%;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
overflow: auto; overflow: auto;
} }
} }

2
src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
View File

@ -59,7 +59,7 @@ export default function CollaboratorListContainer(props: IProps) {
height: "12px", height: "12px",
width: "12px", width: "12px",
borderRadius: "100px", borderRadius: "100px",
backgroundColor: "var(--green-flash)", backgroundColor: "var(--color-success-600)",
}} }}
/> />
) : ( ) : (

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

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

@ -20,7 +20,7 @@
max-height: calc(100vh - 290px); max-height: calc(100vh - 290px);
height: calc(100vh - 290px); height: calc(100vh - 290px);
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
.create-container { .create-container {

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

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

@ -18,7 +18,7 @@
max-height: calc(100vh - 290px); max-height: calc(100vh - 290px);
height: calc(100vh - 290px); height: calc(100vh - 290px);
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
.create-container { .create-container {

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

4
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
View File

@ -30,7 +30,7 @@
display: none; display: none;
} }
background: var(--grey-soft); background: var(--color-neutral-50);
.image { .image {
width: 100%; width: 100%;
@ -56,4 +56,4 @@
} }
} }
} }
} }

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;
@ -88,18 +88,18 @@
min-width: calc(100vw - 389px); min-width: calc(100vw - 389px);
padding: 64px 48px; padding: 64px 48px;
overflow-y: auto; overflow-y: auto;
@media (max-width: ($screen-m - 1px)) { @media (max-width: ($screen-m - 1px)) {
min-width: calc(100vw - 56px); min-width: calc(100vw - 56px);
} }
@media(max-width: $screen-s){ @media (max-width: $screen-s) {
padding: 40px 16px 64px 16px; padding: 40px 16px 64px 16px;
flex: 1; flex: 1;
min-width: unset; min-width: unset;
} }
.back-arrow-mobile{ .back-arrow-mobile {
display: none; display: none;
@media (max-width: $screen-s) { @media (max-width: $screen-s) {
display: block; display: block;
@ -107,7 +107,7 @@
} }
} }
.back-arrow-desktop{ .back-arrow-desktop {
@media (max-width: $screen-s) { @media (max-width: $screen-s) {
display: none; display: none;
} }

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

@ -18,6 +18,6 @@
max-height: 100vh; max-height: 100vh;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
} }

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

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

@ -20,7 +20,7 @@
max-height: calc(100vh - 215px); max-height: calc(100vh - 215px);
height: calc(100vh - 215px); height: calc(100vh - 215px);
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
.create-container { .create-container {

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

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

@ -18,6 +18,6 @@
max-height: 100vh; max-height: 100vh;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--color-neutral-200);
} }
} }

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

@ -20,14 +20,14 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--white); background-color: var(--color-generic-white);
opacity: 0.5; opacity: 0.5;
z-index: 2; z-index: 2;
transition: all 0.3s $custom-easing; transition: all 0.3s $custom-easing;
} }
.left-side { .left-side {
background-color: $white; background-color: $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: $white; background-color: $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 $grey-medium solid; border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) { @media (min-width: $screen-m) {
display: none; display: none;

4
src/front/Components/Layouts/ClientDashboard/classes.module.scss
View File

@ -72,7 +72,7 @@
} }
.sub-container { .sub-container {
background-color: var(--grey-soft); background-color: var(--color-neutral-50);
padding: 64px; padding: 64px;
.content { .content {
@ -113,7 +113,7 @@
} }
.component-to-replace { .component-to-replace {
background-color: var(--grey-soft); background-color: var(--color-neutral-50);
height: 98px; height: 98px;
width: 100%; width: 100%;
} }

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

@ -129,38 +129,38 @@ export default function ClientDashboard(props: IProps) {
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
{/* TODO Get name from userStore */} {/* TODO Get name from userStore */}
<div className={classes["title-container"]}> <div className={classes["title-container"]}>
<Typography typo={ITypo.H1} className={classes["title"]}> <Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)} Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
</Typography> </Typography>
</div> </div>
<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
Dossier {folder?.folder_number} - {folder?.name} Dossier {folder?.folder_number} - {folder?.name}
</Typography> </Typography>
<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
{folder?.office?.name} {folder?.office?.name}
</Typography> </Typography>
<Typography typo={ITypo.H2} className={classes["subtitle"]}> <Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer Documents à envoyer
</Typography> </Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents. Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
<br /> Veuillez glisser / déposer chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis <br /> Veuillez glisser / déposer chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis
sélectionnez le document correspondant. <br /> En déposant un document, celui-ci est automatiquement enregistré et sélectionnez le document correspondant. <br /> En déposant un document, celui-ci est automatiquement enregistré et
transmis à votre notaire. transmis à votre notaire.
</Typography> </Typography>
<div className={classes["note-box"]}> <div className={classes["note-box"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{note?.content} {note?.content}
</Typography> </Typography>
</div> </div>
</div> </div>
<div className={classes["contact"]}> <div className={classes["contact"]}>
<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<p> <p>
{contact?.first_name} {contact?.last_name} {contact?.first_name} {contact?.last_name}
</p> </p>
@ -213,8 +213,8 @@ export default function ClientDashboard(props: IProps) {
<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} /> <DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))} ))}
</div> </div>
<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography> <Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.P_16} 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.GHOST} className={classes["button"]} onClick={onOpenModalAddDocument}>

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

@ -41,8 +41,8 @@ export default class ClientDashboard extends Base<IProps, IState> {
<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} /> <DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
))} ))}
</div> </div>
<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography> <Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
<Typography typo={ITypo.P_16} 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.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
@ -58,11 +58,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Déposer le document"}> confirmText={"Déposer le document"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Vous souhaitez envoyer un autre document à votre notaire ? Vous souhaitez envoyer un autre document à votre notaire ?
</Typography> </Typography>
<TextField placeholder="Nom du document" /> <TextField placeholder="Nom du document" />
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. document correspondant.
</Typography> </Typography>
@ -85,15 +85,15 @@ export default class ClientDashboard extends Base<IProps, IState> {
<div className={classes["header"]}> <div className={classes["header"]}>
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
{/* TODO Get name from userStore */} {/* TODO Get name from userStore */}
<Typography typo={ITypo.H1} className={classes["title"]}> <Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)} Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
</Typography> </Typography>
<Typography typo={ITypo.H2} className={classes["subtitle"]}> <Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
Documents à envoyer Documents à envoyer
</Typography> </Typography>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez
glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à

6
src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss
View File

@ -12,13 +12,13 @@
.subscription-active-dot { .subscription-active-dot {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: var(--green-flash); background-color: var(--color-success-600);
border-radius: 100px; border-radius: 100px;
} }
} }
} }
.user-infos { .user-infos {
background-color: var(--grey-soft); background-color: var(--color-neutral-50);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 24px; padding: 24px;
@ -44,7 +44,7 @@
.role-container { .role-container {
padding: 32px 16px; padding: 32px 16px;
border: 1px solid var(--grey); border: 1px solid var(--color-neutral-500);
margin-top: 32px; margin-top: 32px;

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

@ -149,11 +149,13 @@ export default function CollaboratorInformations(props: IProps) {
<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}> <DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["folder-header"]}> <div className={classes["folder-header"]}>
<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography> <Typography typo={ITypo.TITLE_H1}>
{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
</Typography>
{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && ( {userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
<div className={classes["subscription-active"]}> <div className={classes["subscription-active"]}>
<div className={classes["subscription-active-dot"]} /> <div className={classes["subscription-active-dot"]} />
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
Abonnement actif Abonnement actif
</Typography> </Typography>
</div> </div>
@ -161,34 +163,34 @@ export default function CollaboratorInformations(props: IProps) {
</div> </div>
<div className={classes["user-infos"]}> <div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}> <div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom Nom
</Typography> </Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
</div> </div>
<div className={classes["user-infos-row"]}> <div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Prénom Prénom
</Typography> </Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
</div> </div>
<div className={classes["user-infos-row"]}> <div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone Numéro de téléphone
</Typography> </Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
</div> </div>
<div className={classes["user-infos-row"]}> <div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Email Email
</Typography> </Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography> <Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
</div> </div>
</div> </div>
<div className={classes["role-container"]}> <div className={classes["role-container"]}>
<div className={classes["first-line"]}> <div className={classes["first-line"]}>
<Typography typo={ITypo.P_SB_18}>Modifier le rôle</Typography> <Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
<div className={classes["gestion-role"]}> <div className={classes["gestion-role"]}>
<Link href={Module.getInstance().get().modules.pages.Roles.props.path}> <Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
<Button <Button
@ -227,7 +229,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "} Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ? {userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography> </Typography>
@ -242,7 +244,7 @@ export default function CollaboratorInformations(props: IProps) {
confirmText={"Valider"} confirmText={"Valider"}
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
{adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "} {adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "}
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ? {userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
</Typography> </Typography>

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

@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}> <DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["no-folder-selected"]}> <div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du collaborateur</Typography> <Typography typo={ITypo.TITLE_H1}>Informations du collaborateur</Typography>
<div className={classes["choose-a-folder"]}> <div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}> <Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un collaborateur Sélectionnez un collaborateur
</Typography> </Typography>
</div> </div>

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

@ -87,7 +87,7 @@ export default function DeedTypesCreate(props: IProps) {
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte"> <DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.H1Bis}>Créer un type d'acte</Typography> <Typography typo={ITypo.TITLE_H1}>Créer un type d'acte</Typography>
</div> </div>
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}> <Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
<TextField <TextField
@ -116,7 +116,7 @@ export default function DeedTypesCreate(props: IProps) {
cancelText={"Annuler"} cancelText={"Annuler"}
confirmText={"Quitter"}> confirmText={"Quitter"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées. Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
</Typography> </Typography>
</div> </div>

Some files were not shown because too many files have changed in this diff Show More