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

🎨 validated document

Browse Source
This commit is contained in:
Hugo Lextrait 2023-05-11 18:31:18 +02:00
parent 4687b4bfe1
commit 6e26d11bcc
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/Icons/green-check.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L8.375 16L4 11.4545" stroke="#12BF4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

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

@ -30,6 +30,10 @@
.right { .right {
margin-left: 18px; margin-left: 18px;
.validated {
color: var(--green-flash);
}
.refused-button { .refused-button {
font-size: 14px; font-size: 14px;
color: var(--re-hover); color: var(--re-hover);
@ -84,7 +88,7 @@
} }
} }
.modal-content{ .modal-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;

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

@ -15,6 +15,7 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames"; import classNames from "classnames";
import Confirm from "../Modal/Confirm"; import Confirm from "../Modal/Confirm";
import InputField from "../Form/Elements/InputField"; import InputField from "../Form/Elements/InputField";
import GreenCheckIcon from "@Assets/Icons/green-check.svg";
type IProps = { type IProps = {
defaultFiles?: FileCustomer[]; defaultFiles?: FileCustomer[];
@ -82,9 +83,15 @@ export default class DepositDocument 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.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
{this.props.document.document_type?.name}{" "} <div className={this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""}>
{this.props.document.document_type?.public_description !== "" && ( {this.props.document.document_type?.name}
<Tooltip text={this.props.document.document_type?.public_description} /> </div>
{this.props.document.document_type?.public_description !== "" &&
this.props.document.document_status !== EDocumentStatus.VALIDATED && (
<Tooltip text={this.props.document.document_type?.public_description} />
)}
{this.props.document.document_status === EDocumentStatus.VALIDATED && (
<Image src={GreenCheckIcon} alt="Document check" />
)} )}
</Typography> </Typography>
{this.props.document.document_status !== EDocumentStatus.VALIDATED && ( {this.props.document.document_status !== EDocumentStatus.VALIDATED && (