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

Refacto color theme

Browse Source
This commit is contained in:
Vins 2024-07-02 14:12:48 +02:00
parent eceb316881
commit ed3e34a010
124 changed files with 588 additions and 516 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;
width: 100%;
padding: 24px;
border: 1px solid $grey-medium;
border: 1px solid $color-neutral-200;
cursor: pointer;
&:hover {
background-color: $grey-medium;
background-color: $color-neutral-200;
}
&[data-selected="true"] {
background-color: $grey-medium;
background-color: $color-neutral-200;
}
.left-side {

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

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

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

@ -13,7 +13,7 @@
background-color: transparent;
width: 16px;
height: 16px;
border: 1px solid $turquoise-flash;
border: 1px solid $color-secondary-500;
border-radius: 2px;
margin-right: 16px;
display: grid;
@ -30,7 +30,7 @@
display: grid;
width: 16px;
height: 16px;
background-color: $turquoise-flash;
background-color: $color-secondary-500;
border-radius: 2px;
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 {
return (
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
<input
type="checkbox"

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

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

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

@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
</div>
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
<div
className={
this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
)}
</Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
)}
@ -157,7 +157,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["file-container"]} key={fileObj.name + file.index}>
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
<Typography
typo={ITypo.P_16}
color={ITypoColor.COLOR_NEUTRAL_500}
title={file.fileName ?? fileObj.name}>
{this.shortName(file.fileName || fileObj.name)}
</Typography>
</div>
@ -177,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
<div className={classes["loader"]}>
<Loader />
</div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Chargement...
</Typography>
</div>
@ -188,7 +191,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>
@ -262,26 +265,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
switch (history.document_status) {
case EDocumentStatus.ASKED:
return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
Demandé par votre notaire le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.VALIDATED:
return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
Validé par votre notaire le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.DEPOSITED:
return (
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
Déposé le {this.formatDate(history.created_at!)}
</Typography>
);
case EDocumentStatus.REFUSED:
return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_800}>
Document non conforme
{history.refused_reason && history.refused_reason.length > 0 && (
<Button

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

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

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

@ -110,7 +110,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
</div>
<div className={classes["separator"]} />
<div className={classes["right"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
<Typography
typo={ITypo.P_SB_16}
color={ITypoColor.COLOR_GENERIC_BLACK}
className={classes["title"]}>
<div
className={
this.props.document.document_status === EDocumentStatus.VALIDATED
@ -120,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
{this.props.document.document_type?.name}
</div>
</Typography>
<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
Sélectionnez des documents .jpg, .pdf ou .png
</Typography>
</div>
@ -134,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
<div className={classes["file-container"]} key={fileObj.name}>
<div className={classes["left-part"]}>
<Image src={DocumentCheckIcon} alt="Document check" />
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
{this.shortName(fileObj.name)}
</Typography>
</div>
@ -152,7 +155,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
)}
<div className={classes["bottom-container"]}>
<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
<Typography
typo={ITypo.P_SB_16}
color={ITypoColor.COLOR_SECONDARY_500}
className={classes["add-document"]}>
Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
</Typography>
</Button>

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

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

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

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

@ -1,30 +1,30 @@
@import "@Themes/constants.scss";
.root {
border: 1px solid $grey-medium;
border: 1px solid $color-neutral-200;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
&.DEPOSITED {
cursor: pointer;
border: 1px solid $orange-soft;
border: 1px solid $color-warning-500-soft;
&:hover {
border: 1px solid $orange-soft;
outline: 1px solid $orange-soft;
border: 1px solid $color-warning-500-soft;
outline: 1px solid $color-warning-500-soft;
}
}
&.VALIDATED {
cursor: pointer;
border: 1px solid $green-soft;
border: 1px solid $color-success-600-soft;
&:hover {
border: 1px solid $green-soft;
outline: 1px solid $green-soft;
border: 1px solid $color-success-600-soft;
outline: 1px solid $color-success-600-soft;
}
}
.valid-radius {
background-color: $green-flash;
background-color: color-success-600;
padding: 6px;
border-radius: 20px;
}

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 && (
<>
{!type && (
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
Erreur lors du chargement du fichier
</Typography>
)}

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

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

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

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

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

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

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

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

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

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

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[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
{value}
</Typography>,
);

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

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

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 {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}

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

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

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

@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
private renderErrors(): JSX.Element | null {
if (!this.state.errors) return null;
return (
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
{this.props.placeholder} ne peut pas être vide
</Typography>
);

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

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

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 {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<input
onChange={this.onChange}

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

@ -25,7 +25,7 @@
width: 100%;
height: 100px;
border: 1px solid var(--grey-medium);
border: 1px solid var(--color-neutral-200);
~ .fake-placeholder {
z-index: 2;
@ -34,7 +34,7 @@
padding: 0 16px;
pointer-events: none;
position: absolute;
background: $white;
background: $color-generic-white;
transform: translateY(35px);
transition: transform 0.3s ease-in-out;
}
@ -54,9 +54,9 @@
&[data-is-errored="true"] {
.textarea {
border: 1px solid var(--red-flash);
border: 1px solid var(--color-error-600);
~ .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 {
const value = this.state.value ?? "";
return (
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
<textarea
name={this.props.name}

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

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

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

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

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

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

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

@ -5,7 +5,7 @@
flex-direction: column;
width: 390px;
max-height: 80vh;
background-color: $white;
background-color: $color-generic-white;
box-shadow: $shadow-nav;
padding: 24px;
position: absolute;
@ -37,7 +37,7 @@
gap: 8px;
text-decoration: underline;
text-underline-offset: 2px;
color: var(--pink-flash);
color: var(--color-secondary-500);
cursor: pointer;
}

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

@ -40,16 +40,16 @@ export default class NotificationModal extends React.Component<IProps, IState> {
</div>
</div>
<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_SECONDARY_500}>
Tout marquer comme lu
</Typography>
<Check color={ITypoColor.PINK_FLASH} />
<Check color={ITypoColor.COLOR_SECONDARY_500} />
</div>
<div className={classes["notification-body"]}>
<>
{!this.state.toastList || this.state.toastList.length === 0 ? (
<div className={classes["missing-notification"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Vous n'avez pas de notifications.
</Typography>
</div>

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

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

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

@ -5,7 +5,7 @@
align-items: center;
justify-content: space-between;
height: 83px;
background-color: $white;
background-color: $color-generic-white;
box-shadow: $shadow-nav;
padding: 0 48px;
position: sticky;
@ -81,6 +81,6 @@
gap: 8px;
justify-content: center;
align-items: center;
background-color: var(--grey-soft);
background-color: var(--color-neutral-50);
padding: 14px 0;
}

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

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

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

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

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

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

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

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

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

@ -37,8 +37,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
this.state = {
isFocused: false,
selectedOptions: [],
validationError: this.props.validationError ?? null
validationError: this.props.validationError ?? null,
};
this.hasError = this.hasError.bind(this);
this.onChange = this.onChange.bind(this);
@ -147,7 +146,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
let errors: JSX.Element[] = [];
Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
errors.push(
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
{value}
</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["root"]}>
<div className={classes["text"]}>
<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_WHITE}>
Restez Informé(e) avec notre Newsletter
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_WHITE}>
Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
</Typography>
{this.state.errorMessage && (
<div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_ERROR_600}>
{this.state.errorMessage}
</Typography>
</div>
)}
{this.state.successMessage && (
<div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SUCCESS_600}>
{this.state.successMessage}
</Typography>
</div>

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

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

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

@ -11,7 +11,7 @@
background-color: transparent;
width: 15px;
height: 15px;
border: 1px solid $turquoise-flash;
border: 1px solid $color-secondary-500;
border-radius: 100px;
margin-right: 16px;
display: flex;
@ -25,7 +25,7 @@
content: "";
width: 11px;
height: 11px;
background-color: $turquoise-flash;
background-color: $color-secondary-500;
border-radius: 100px;
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 {
return (
<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_ERR_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
<label className={classes["root"]}>
<input
type="radio"

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

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

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

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

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>
</div>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
{label}
</Typography>
</div>

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

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

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

@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
if (typeof text === "string") {
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500}>
{text}
</Typography>
</div>

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

@ -3,7 +3,7 @@
.root {
min-width: 100px;
max-width: 320px;
background: $white;
background: $color-generic-white;
border-radius: 5px !important;
position: fixed;
transition: opacity 0.2s ease-in-out;
@ -29,5 +29,5 @@
position: absolute;
right: 20px;
margin-top: -4px;
fill: $white;
fill: $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 }} />)(
({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: "var(--white)",
color: "var(--black)",
backgroundColor: "var(--color-generic-white)",
color: "var(--color-generic-black)",
boxShadow: "0px 4px 24px 0px #00000026",
fontSize: 14,
fontWeight: 400,
@ -30,7 +30,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
borderRadius: "0px",
},
[`& .${tooltipClasses.arrow}`]: {
color: "var(--white)",
color: "var(--color-generic-white)",
},
}),
);

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

@ -2,7 +2,7 @@
@import "@Themes/modes.scss";
.root {
color: $black;
color: $color-generic-black;
vertical-align: center;
font-family: "Inter", sans-serif;
&.H1-60 {
@ -67,7 +67,7 @@
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
color: $grey;
color: $color-neutral-500;
}
&.Paragraphe-18-error {
@ -92,7 +92,7 @@
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: $grey;
color: $color-neutral-500;
}
&.Paragraphe-simple-16 {
@ -104,7 +104,7 @@
}
&.Paragraphe-16-error {
color: $re-hover;
color: $color-error-800;
font-style: normal;
font-weight: 400;
font-size: 16px;
@ -128,39 +128,39 @@
letter-spacing: 0.5px;
}
&.re-hover {
color: $re-hover;
&.color-error-800 {
color: $color-error-800;
}
&.grey {
color: $grey;
&.color-neutral-500 {
color: $color-neutral-500;
}
&.black {
color: $black;
&.color-generic-black {
color: $color-generic-black;
}
&.purple-flash {
color: var(--purple-flash);
&.color-primary-500 {
color: var(--color-primary-500);
}
&.pink-flash {
color: var(--pink-flash);
&.color-secondary-500 {
color: var(--color-secondary-500);
}
&.green-flash {
color: var(--green-flash);
&.color-success-600 {
color: var(--color-success-600);
}
&.red-flash {
color: var(--red-flash);
&.color-error-600 {
color: var(--color-error-600);
}
&.orange-flash {
color: var(--orange-flash);
&.color-warning-500 {
color: var(--color-warning-500);
}
&.white {
color: $white;
color: $color-generic-white;
}
}

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

@ -33,15 +33,15 @@ export enum ITypo {
}
export enum ITypoColor {
RE_HOVER = "re-hover",
GREY = "grey",
BLACK = "black",
PURPLE_FLASH = "purple-flash",
PINK_FLASH = "pink-flash",
GREEN_FLASH = "green-flash",
ORANGE_FLASH = "orange-flash",
RED_FLASH = "red-flash",
WHITE = "white",
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> {

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

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

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

@ -21,7 +21,7 @@
}
.root {
border: 1px solid $grey;
border: 1px solid $color-neutral-500;
padding: 16px;
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 {
return (
<div className={classes["root"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
<div>{VersionFile.version}</div>
</Typography>
</div>

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

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

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

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

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

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

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

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

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

@ -20,14 +20,14 @@
position: absolute;
width: 100%;
height: 100%;
background-color: var(--white);
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: $white;
background-color: $color-generic-white;
z-index: 3;
display: flex;
width: 389px;
@ -60,14 +60,14 @@
.closable-left-side {
position: absolute;
background-color: $white;
background-color: $color-generic-white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) {
display: none;

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

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

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

@ -20,14 +20,14 @@
position: absolute;
width: 100%;
height: 100%;
background-color: var(--white);
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: $white;
background-color: $color-generic-white;
z-index: 3;
display: flex;
width: 389px;
@ -60,14 +60,14 @@
.closable-left-side {
position: absolute;
background-color: $white;
background-color: $color-generic-white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) {
display: none;

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

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

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

@ -20,14 +20,14 @@
position: absolute;
width: 100%;
height: 100%;
background-color: var(--white);
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: $white;
background-color: $color-generic-white;
z-index: 3;
display: flex;
width: 389px;
@ -60,14 +60,14 @@
.closable-left-side {
position: absolute;
background-color: $white;
background-color: $color-generic-white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) {
display: none;

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

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

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

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

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

@ -18,6 +18,6 @@
max-height: 100vh;
height: 100vh;
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;
width: 100%;
height: 100%;
background-color: var(--white);
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: $white;
background-color: $color-generic-white;
z-index: 3;
display: flex;
width: 389px;
@ -60,14 +60,14 @@
.closable-left-side {
position: absolute;
background-color: $white;
background-color: $color-generic-white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) {
display: none;

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

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

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

@ -20,14 +20,14 @@
position: absolute;
width: 100%;
height: 100%;
background-color: var(--white);
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: $white;
background-color: $color-generic-white;
z-index: 3;
display: flex;
width: 389px;
@ -60,14 +60,14 @@
.closable-left-side {
position: absolute;
background-color: $white;
background-color: $color-generic-white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) {
display: none;

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

@ -18,6 +18,6 @@
max-height: 100vh;
height: 100vh;
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;
width: 100%;
height: 100%;
background-color: var(--white);
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: $white;
background-color: $color-generic-white;
z-index: 3;
display: flex;
width: 389px;
@ -60,14 +60,14 @@
.closable-left-side {
position: absolute;
background-color: $white;
background-color: $color-generic-white;
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - 83px);
border-right: 1px $grey-medium solid;
border-right: 1px $color-neutral-200 solid;
@media (min-width: $screen-m) {
display: none;

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

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

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

@ -134,11 +134,11 @@ export default function ClientDashboard(props: IProps) {
</Typography>
</div>
<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
Dossier {folder?.folder_number} - {folder?.name}
</Typography>
<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
{folder?.office?.name}
</Typography>
@ -153,14 +153,14 @@ export default function ClientDashboard(props: IProps) {
transmis à votre notaire.
</Typography>
<div className={classes["note-box"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
{note?.content}
</Typography>
</div>
</div>
<div className={classes["contact"]}>
<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
<p>
{contact?.first_name} {contact?.last_name}
</p>

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

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

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

@ -153,7 +153,7 @@ export default function CollaboratorInformations(props: IProps) {
{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
<div className={classes["subscription-active"]}>
<div className={classes["subscription-active-dot"]} />
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
Abonnement actif
</Typography>
</div>
@ -161,25 +161,25 @@ export default function CollaboratorInformations(props: IProps) {
</div>
<div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Email
</Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>

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

@ -14,7 +14,7 @@ export default class Collaborators extends BasePage<IProps, IState> {
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du collaborateur</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un collaborateur
</Typography>
</div>

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

@ -23,7 +23,7 @@
gap: 100px;
justify-content: space-between;
padding: 24px;
background-color: var(--grey-soft);
background-color: var(--color-neutral-50);
@media (max-width: $screen-l) {
gap: 80px;
@ -69,7 +69,7 @@
margin-top: 32px;
padding: 32px 16px;
border: 1px solid var(--grey);
border: 1px solid var(--color-neutral-500);
.container-title {
display: flex;

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

@ -135,7 +135,7 @@ export default function DeedTypesInformations(props: IProps) {
<div className={classes["deed-type-container"]}>
<div className={classes["infos"]}>
<div className={classNames(classes["middle-box"], classes["box"])}>
<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
Description
</Typography>
<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>

2
src/front/Components/Layouts/DeedTypes/index.tsx
View File

@ -14,7 +14,7 @@ export default class DeedTypes extends BasePage<IProps, IState> {
<div className={classes["no-role-selected"]}>
<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un type d'acte
</Typography>
</div>

5
src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss
View File

@ -20,7 +20,7 @@
gap: 24px;
padding: 24px;
margin-top: 32px;
background-color: var(--grey-soft);
background-color: var(--color-neutral-50);
.left {
display: flex;
@ -44,8 +44,5 @@
gap: 12px;
}
}
.right {
}
}
}

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

@ -47,19 +47,19 @@ export default function DocumentTypesInformations() {
<div className={classes["document-infos"]}>
<div className={classes["left"]}>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom du document
</Typography>
<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Description visible par les collaborateurs de l'office
</Typography>
<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
Description visible par les clients de l'office
</Typography>
<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>

2
src/front/Components/Layouts/DocumentTypes/index.tsx
View File

@ -14,7 +14,7 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
<div className={classes["no-role-selected"]}>
<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
<div className={classes["choose-a-role"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un document
</Typography>
</div>

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

@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
<div className={classes["root"]}>
<BackArrow url={backUrl} />
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Demander des documents
</Typography>
<Form onSubmit={this.onFormSubmit}>

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

@ -82,10 +82,10 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
<div className={classes["root"]}>
<BackArrow />
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Créer un dossier
</Typography>
<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
Informations dossier
</Typography>
<Form onSubmit={this.onFormSubmit}>
@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
/>
<div className={classes["access-container"]}>
<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500}>
Accès au dossier
</Typography>
<div className={classes["radio-container"]}>

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

@ -50,7 +50,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
) : (
<div className={classes["no-client"]}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun client n'est associé au dossier.
</Typography>
</div>

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

@ -237,7 +237,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
</div>
@ -268,7 +268,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
showButtons={!this.state.hasValidateAnchoring}>
<div className={classes["validate-document-container"]}>
{!this.state.hasValidateAnchoring && (
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
de rédaction d'actes.
@ -276,7 +276,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
)}
{this.state.hasValidateAnchoring && (
<div className={classes["document-validating-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
</Typography>

58
src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss
View File

@ -1,37 +1,37 @@
@import "@Themes/constants.scss";
.root{
background-color: var(--grey-soft);
padding: 24px;
.root {
background-color: var(--color-neutral-50);
padding: 24px;
.result-text{
color: rgba(0, 0, 0, 0.4);
}
.result-text {
color: rgba(0, 0, 0, 0.4);
}
.result-container{
display: flex;
.result-container {
display: flex;
.percentage-container{
display: flex;
align-items: center;
gap: 8px;
.dot{
width: 11px;
height: 11px;
border-radius: 50px;
.percentage-container {
display: flex;
align-items: center;
gap: 8px;
.dot {
width: 11px;
height: 11px;
border-radius: 50px;
&[data-color="green-flash"]{
background-color: var(--green-flash);
}
&[data-color="color-success-600"] {
background-color: var(--color-success-600);
}
&[data-color="orange-flash"]{
background-color: var(--orange-flash);
}
&[data-color="color-warning-500"] {
background-color: var(--color-warning-500);
}
&[data-color="red-flash"]{
background-color: var(--red-flash);
}
}
}
}
}
&[data-color="color-error-600"] {
background-color: var(--color-error-600);
}
}
}
}
}

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

@ -17,15 +17,15 @@ export default class OcrResult extends React.Component<IProps, IState> {
Résultat de l'analyse :
</Typography>
<div className={classes["result-container"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
Document conforme à :&nbsp;
</Typography>
<div className={classes["percentage-container"]}>
<Typography typo={ITypo.P_18} color={this.getColor()}>
{this.props.percentage}%
</Typography>
<div className={classes["dot"]} data-color={this.getColor()} />
</div>
<div className={classes["percentage-container"]}>
<Typography typo={ITypo.P_18} color={this.getColor()}>
{this.props.percentage}%
</Typography>
<div className={classes["dot"]} data-color={this.getColor()} />
</div>
</div>
</div>
);
@ -33,9 +33,9 @@ export default class OcrResult extends React.Component<IProps, IState> {
private getColor() {
if (this.props.percentage > 75) {
return ITypoColor.GREEN_FLASH;
return ITypoColor.COLOR_SUCCESS_600;
} else {
return ITypoColor.RED_FLASH;
return ITypoColor.COLOR_ERROR_600;
}
}
}

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

@ -73,10 +73,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
<div className={classes["root"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
{this.state.document.folder?.name}
</Typography>
<Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}>
<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
{this.state.document.document_type?.name}
</Typography>
<div className={classes["document-container"]}>
@ -139,7 +139,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Confirmer"}>
<div className={classes["validate-document-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
Êtes-vous sûr de vouloir valider ce document ?
</Typography>
</div>
@ -153,7 +153,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
cancelText={"Annuler"}
confirmText={"Refuser"}>
<div className={classes["refuse-document-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
version.
</Typography>
@ -164,7 +164,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
)}
{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
<div className={classes["root"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
Document non trouvé
</Typography>
</div>

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

@ -29,7 +29,7 @@ export default class Folder extends BasePage<IProps, IState> {
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
</div>

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

@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
</>
) : (
<div className={classes["no-client"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun client dans ce dossier
</Typography>
</div>

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

@ -139,7 +139,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>

2
src/front/Components/Layouts/FolderArchived/index.tsx
View File

@ -32,7 +32,7 @@ export default class FolderArchived extends BasePage<IProps, IState> {
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>

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

@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
validationError={validationErrors.find((error) => error.property === "password")}
password
/>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY} className={classes["password_indication"]}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
</Typography>
<TextField

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

@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
validationError={validationErrors.find((error) => error.property === "password")}
password
/>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY} className={classes["password_indication"]}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
</Typography>
<TextField

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

@ -65,7 +65,7 @@ export default function StepTotp(props: IProps) {
{secondsBeforeNewCode !== 0 && (
<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
Redemandez un code dans
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
</Typography>
</Typography>

2
src/front/Components/Layouts/LoginHome/classes.module.scss
View File

@ -14,7 +14,7 @@
}
.separator {
height: 1px;
background-color: var(--grey-medium);
background-color: var(--color-neutral-200);
}
}
.bottom {

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

@ -16,7 +16,7 @@ export default function LoginHome() {
</Typography>
<div className={classes["content"]}>
<div className={classes["section"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
Je suis un notaire / collaborateur
</Typography>
<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@ -25,7 +25,7 @@ export default function LoginHome() {
</div>
<div className={classes["separator"]} />
<div className={classes["section"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
Je suis un client
</Typography>
<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>

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

@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
return (
<DefaultTemplate title={"Mon compte"}>
<div className={classes["root"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Mon compte
</Typography>
<div className={classes["parts-container"]}>
<div className={classes["part"]}>
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
Mes informations
</Typography>
<Form onSubmit={this.onFormSubmit}>
@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
</Form>
</div>
<div className={classes["part"]}>
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
Mon office
</Typography>
<Form onSubmit={this.onFormSubmit}>

12
src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss
View File

@ -20,14 +20,14 @@
.round {
width: 16px;
height: 16px;
background-color: var(--green-flash);
background-color: var(--color-success-600);
border-radius: 100px;
}
}
}
.office-infos {
background-color: var(--grey-soft);
background-color: var(--color-neutral-50);
display: flex;
justify-content: space-between;
padding: 24px;
@ -80,7 +80,7 @@
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 24px;
background-color: var(--purple-soft);
background-color: var(--color-primary-500-soft);
@media (max-width: $screen-l) {
display: none;
@ -88,12 +88,12 @@
}
.user-line-desktop {
background-color: var(--grey-soft);
background-color: var(--color-neutral-50);
}
.user-line-desktop {
&:nth-child(odd) {
background-color: var(--grey-medium);
background-color: var(--color-neutral-200);
}
}
@ -104,7 +104,7 @@
display: flex;
flex-direction: column;
gap: 24px;
background-color: var(--grey-soft);
background-color: var(--color-neutral-50);
padding: 24px 16px;
}
}

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