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

🔨 update modals

Browse Source
This commit is contained in:
Max S 2024-09-16 17:38:19 +02:00
parent 749b05dc84
commit 6accc0adcd
7 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 3; z-index: 5;
.content { .content {
position: fixed; position: fixed;
@ -54,7 +54,8 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); opacity: 0.3;
background: var(--primary-default-deep, #013391);
overflow: hidden; overflow: hidden;
} }
} }

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

@ -40,7 +40,7 @@
.cancel-button { .cancel-button {
display: flex; display: flex;
margin-right: 32px; margin-right: var(--spacing-md, 16px);
} }
@media (max-width: $screen-m) { @media (max-width: $screen-m) {

11
src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/classes.module.scss
View File

@ -1,11 +1,12 @@
.add-document-form-container { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: var(--spacing-md, 16px);
width: 566px;
.radiobox-container { .radiobox-container {
> :not(:last-child) { display: flex;
margin-bottom: 16px; flex-direction: column;
} gap: var(--spacing-xs, 8px);
} }
} }

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

@ -4,6 +4,7 @@ import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/Dr
import AutocompleteMultiSelectField from "@Front/Components/DesignSystem/Form/AutocompleteMultiSelectField"; import AutocompleteMultiSelectField from "@Front/Components/DesignSystem/Form/AutocompleteMultiSelectField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Modal from "@Front/Components/DesignSystem/Modal";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary"; import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary";
@ -117,32 +118,32 @@ export default function ParameterDocuments(props: IProps) {
}, [getAvailableDocuments, props.folder]); }, [getAvailableDocuments, props.folder]);
return ( return (
<Confirm <Modal
isOpen={props.isCreateDocumentModalVisible} isOpen={props.isCreateDocumentModalVisible}
onClose={handleClose} onClose={handleClose}
onAccept={addDocument} firstButton={{ children: "Annuler", onClick: handleClose }}
closeBtn secondButton={{ children: "Ajouter", onClick: addDocument }}
header={"Ajouter des documents demandables"} title={"Ajouter un document"}>
cancelText={"Annuler"} <div className={classes["root"]}>
confirmText={"Ajouter"}>
<div className={classes["add-document-form-container"]}>
<div className={classes["radiobox-container"]}> <div className={classes["radiobox-container"]}>
<RadioBox <RadioBox
name="document" name="document"
onChange={selectEditMode} onChange={selectEditMode}
checked={addOrEditDocument === "edit"} checked={addOrEditDocument === "edit"}
value={"existing client"} value={"existing client"}
label="Document existant" label="Document existant"
/> />
<RadioBox <RadioBox
name="document" name="document"
onChange={selectAddMode} onChange={selectAddMode}
checked={addOrEditDocument === "add"} checked={addOrEditDocument === "add"}
value={"new client"} value={"new client"}
label="Créer un document" label="Créer un document"
/> />
</div> </div>
{addOrEditDocument === "add" && ( {addOrEditDocument === "add" && (
<> <>
<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={onDocumentNameChange} /> <TextField name="document_name" placeholder="Nom du document à ajouter" onChange={onDocumentNameChange} />
@ -162,6 +163,6 @@ export default function ParameterDocuments(props: IProps) {
/> />
)} )}
</div> </div>
</Confirm> </Modal>
); );
} }

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

@ -33,7 +33,7 @@
.buttons-container { .buttons-container {
display: flex; display: flex;
gap: 32px; gap: var(--spacing-md, 16px);
margin-top: 32px; margin-top: 32px;
@media (max-width: $screen-s) { @media (max-width: $screen-s) {

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

@ -155,7 +155,7 @@ export default function AskDocuments() {
</div> </div>
<div className={classes["add-document-container"]}> <div className={classes["add-document-container"]}>
<Button <Button
rightIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />} leftIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
variant={EButtonVariant.PRIMARY} variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.OUTLINED} styletype={EButtonstyletype.OUTLINED}
size={EButtonSize.MD} size={EButtonSize.MD}
@ -169,7 +169,7 @@ export default function AskDocuments() {
Annuler Annuler
</Button> </Button>
</a> </a>
<Button type="submit">Valider</Button> <Button type="submit">Envoyer la demande</Button>
</div> </div>
</div> </div>
</Form> </Form>

10
src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
View File

@ -16,6 +16,16 @@ $mobile-breakpoint: 664px;
.tabs { .tabs {
width: calc(100% - 210px); width: calc(100% - 210px);
} }
border-bottom: 1px solid var(--tabs-stroke);
> :first-child {
margin-bottom: -1px;
}
> :last-child {
margin-bottom: -1px;
}
} }
.content { .content {