diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index d3779766..84428234 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -14,6 +14,7 @@ user-select: none; cursor: pointer; font-family: var(--font-text-family); + border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0)); svg { width: 18px; @@ -26,36 +27,72 @@ &[variant="primary"] { color: var(--color-primary-500); - border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0)); background: var(--button-contained-primary-default-background, #005bcb); + border-color: var(--button-contained-primary-default-border); + + svg { + stroke: var(--button-contained-primary-default-contrast); + } &:hover { - border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0)); + border-color: var(--button-contained-primary-hovered-border); background: var(--button-contained-primary-hovered-background, #0040a4); + + svg { + stroke: var(--button-contained-primary-hovered-contrast); + } } &:focus, &:active { - border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0)); + border-color: var(--button-contained-primary-pressed-border); background: var(--button-contained-primary-pressed-background, #013391); + + svg { + stroke: var(--button-contained-primary-pressed-contrast); + } } &[styleType="outlined"] { + border-color: var(--button-outlined-primary-default-border); + + svg { + stroke: var(--button-outlined-primary-default-contrast); + } + &:hover { background-color: var(--color-primary-50); + border-color: var(--button-outlined-primary-hovered-border); + + svg { + stroke: var(--button-outlined-primary-hovered-contrast); + } } &:focus, &:active { background-color: var(--color-primary-100); color: var(--color-primary-700); - border-color: var(--color-primary-700); + border-color: var(--button-outlined-primary-pressed-border); + + svg { + stroke: var(--button-outlined-primary-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-primary-default-contrast); + } + &:hover { background-color: transparent; + border-color: var(--button-outlined-primary-hovered-border); + + svg { + stroke: var(--button-text-primary-hovered-contrast); + } } &:focus, @@ -63,6 +100,10 @@ background-color: transparent; color: var(--color-primary-800); border-color: var(--color-primary-800); + + svg { + stroke: var(--button-text-primary-pressed-contrast); + } } } } @@ -72,20 +113,40 @@ background: var(--color-secondary-500); border-color: var(--color-secondary-500); + svg { + stroke: var(--button-contained-secondary-default-contrast); + } + &:hover { background: var(--color-secondary-700); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-contained-secondary-hovered-contrast); + } } &:focus, &:active { background: var(--color-secondary-800); border-color: var(--color-secondary-800); + + svg { + stroke: var(--button-contained-secondary-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-secondary-default-contrast); + } + &:hover { background-color: var(--color-secondary-50); + + svg { + stroke: var(--button-outlined-secondary-hovered-contrast); + } } &:focus, @@ -93,12 +154,24 @@ background-color: var(--color-secondary-100); color: var(--color-secondary-700); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-outlined-secondary-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-secondary-default-contrast); + } + &:hover { background-color: transparent; + + svg { + stroke: var(--button-text-secondary-hovered-contrast); + } } &:focus, @@ -106,6 +179,10 @@ background-color: transparent; color: var(--color-secondary-800); border-color: var(--color-secondary-800); + + svg { + stroke: var(--button-text-secondary-pressed-contrast); + } } } } @@ -115,20 +192,40 @@ background: var(--color-neutral-500); border-color: var(--color-neutral-500); + svg { + stroke: var(--button-contained-neutral-default-contrast); + } + &:hover { background: var(--color-neutral-700); border-color: var(--color-neutral-700); + + svg { + stroke: var(--button-contained-neutral-hovered-contrast); + } } &:focus, &:active { background: var(--color-neutral-800); border-color: var(--color-neutral-800); + + svg { + stroke: var(--button-contained-neutral-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-neutral-default-contrast); + } + &:hover { background-color: var(--color-neutral-50); + + svg { + stroke: var(--button-outlined-neutral-hovered-contrast); + } } &:focus, @@ -136,12 +233,24 @@ background-color: var(--color-neutral-100); color: var(--color-neutral-700); border-color: var(--color-neutral-700); + + svg { + stroke: var(--button-outlined-neutral-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-neutral-default-contrast); + } + &:hover { background-color: transparent; + + svg { + stroke: var(--button-text-neutral-hovered-contrast); + } } &:focus, @@ -149,6 +258,10 @@ background-color: transparent; color: var(--color-neutral-800); border-color: var(--color-neutral-800); + + svg { + stroke: var(--button-text-neutral-pressed-contrast); + } } } } @@ -158,21 +271,41 @@ background: var(--color-error-600); border-color: var(--color-error-600); + svg { + stroke: var(--button-contained-error-default-contrast); + } + &:hover { background: var(--color-error-800); border-color: var(--color-error-800); + + svg { + stroke: var(--button-contained-error-hovered-contrast); + } } &:focus, &:active { background: var(--color-error-900); border-color: var(--color-error-900); + + svg { + stroke: var(--button-contained-error-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-error-default-contrast); + } + &:hover { background-color: var(--color-error-50); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-outlined-error-hovered-contrast); + } } &:focus, @@ -180,14 +313,26 @@ background-color: var(--color-error-100); color: var(--color-secondary-700); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-outlined-error-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-error-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-error-800); border-color: var(--color-error-800); + + svg { + stroke: var(--button-text-error-hovered-contrast); + } } &:focus, @@ -195,6 +340,10 @@ background-color: transparent; color: var(--color-error-900); border-color: var(--color-error-900); + + svg { + stroke: var(--button-text-error-pressed-contrast); + } } } } @@ -204,22 +353,42 @@ background: var(--color-warning-600); border-color: var(--color-warning-600); + svg { + stroke: var(--button-contained-warning-default-contrast); + } + &:hover { background: var(--color-warning-800); border-color: var(--color-warning-800); + + svg { + stroke: var(--button-contained-warning-hovered-contrast); + } } &:focus, &:active { background: var(--color-warning-900); border-color: var(--color-warning-900); + + svg { + stroke: var(--button-contained-warning-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-warning-default-contrast); + } + &:hover { background-color: var(--color-warning-50); border-color: var(--color-warning-700); color: var(--color-warning-700); + + svg { + stroke: var(--button-outlined-warning-hovered-contrast); + } } &:focus, @@ -227,14 +396,26 @@ background-color: var(--color-warning-100); color: var(--color-warning-700); border-color: var(--color-warning-700); + + svg { + stroke: var(--button-outlined-warning-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-warning-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-warning-800); border-color: var(--color-warning-800); + + svg { + stroke: var(--button-text-warning-hovered-contrast); + } } &:focus, @@ -242,6 +423,10 @@ background-color: transparent; color: var(--color-warning-900); border-color: var(--color-warning-900); + + svg { + stroke: var(--button-text-warning-pressed-contrast); + } } } } @@ -251,22 +436,42 @@ background: var(--color-success-600); border-color: var(--color-success-600); + svg { + stroke: var(--button-contained-success-default-contrast); + } + &:hover { background: var(--color-success-800); border-color: var(--color-success-800); + + svg { + stroke: var(--button-contained-success-hovered-contrast); + } } &:focus, &:active { background: var(--color-success-900); border-color: var(--color-success-900); + + svg { + stroke: var(--button-contained-success-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-success-default-contrast); + } + &:hover { background-color: var(--color-success-50); border-color: var(--color-success-700); color: var(--color-success-700); + + svg { + stroke: var(--button-outlined-success-hovered-contrast); + } } &:focus, @@ -274,14 +479,26 @@ background-color: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-700); + + svg { + stroke: var(--button-outlined-success-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-success-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-success-800); border-color: var(--color-success-800); + + svg { + stroke: var(--button-text-success-hovered-contrast); + } } &:focus, @@ -289,6 +506,10 @@ background-color: transparent; color: var(--color-success-900); border-color: var(--color-success-900); + + svg { + stroke: var(--button-text-success-pressed-contrast); + } } } } @@ -298,22 +519,41 @@ background: var(--color-info-700); border-color: var(--color-info-700); + svg { + stroke: var(--button-contained-info-default-contrast); + } + &:hover { background: var(--color-info-900); border-color: var(--color-info-900); + + svg { + stroke: var(--button-contained-info-hovered-contrast); + } } &:focus, &:active { background: var(--color-info-950); border-color: var(--color-info-950); + + svg { + stroke: var(--button-contained-info-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-info-default-contrast); + } &:hover { background-color: var(--color-info-50); border-color: var(--color-info-700); color: var(--color-info-700); + + svg { + stroke: var(--button-outlined-info-hovered-contrast); + } } &:focus, @@ -321,14 +561,26 @@ background-color: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-700); + + svg { + stroke: var(--button-outlined-info-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-info-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-info-900); border-color: var(--color-info-900); + + svg { + stroke: var(--button-text-info-hovered-contrast); + } } &:focus, @@ -336,6 +588,10 @@ background-color: transparent; color: var(--color-info-950); border-color: var(--color-info-950); + + svg { + stroke: var(--button-text-info-pressed-contrast); + } } } } diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 4c2e7baa..1c02e5e2 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -1,8 +1,7 @@ -import Image from "next/image"; -import React, { CSSProperties } from "react"; +import classNames from "classnames"; +import React from "react"; import classes from "./classes.module.scss"; -import classNames from "classnames"; export enum EButtonVariant { PRIMARY = "primary", @@ -33,12 +32,11 @@ type IProps = { size?: EButtonSize; styleType?: EButtonStyleType; fullwidth?: boolean; - icon?: string; - iconstyle?: CSSProperties; + leftIcon?: React.ReactNode; + rightIcon?: React.ReactNode; disabled?: boolean; isLoading?: boolean; type?: "button" | "submit"; - iconposition?: "left" | "right"; className?: string; }; @@ -51,12 +49,11 @@ export default function Button(props: IProps) { type = "button", isLoading = false, fullwidth = false, - iconposition = "right", onClick, children, - icon, - iconstyle, className = "", + leftIcon, + rightIcon, } = props; const fullwidthattr = fullwidth.toString(); @@ -64,15 +61,14 @@ export default function Button(props: IProps) { const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType }; delete attributes.fullwidth; - delete attributes.icon; - delete attributes.iconstyle; - delete attributes.iconposition; + delete attributes.leftIcon; + delete attributes.rightIcon; return ( ); } diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx index 1a4f48b9..938960a3 100644 --- a/src/front/Components/DesignSystem/DepositDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -13,8 +13,8 @@ import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resou import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files"; import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import classNames from "classnames"; -import Confirm from "../Modal/Confirm"; -import Alert from "../Modal/Alert"; +import Confirm from "../OldModal/Confirm"; +import Alert from "../OldModal/Alert"; import GreenCheckIcon from "@Assets/Icons/green-check.svg"; import Loader from "../Loader"; import TextAreaField from "../Form/TextareaField"; diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx index 3937cd10..a23f9d2d 100644 --- a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx @@ -13,10 +13,10 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document"; import classNames from "classnames"; import Button, { EButtonStyleType, EButtonVariant } from "../Button"; -import Confirm from "../Modal/Confirm"; +import Confirm from "../OldModal/Confirm"; import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents"; import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files"; -import Alert from "../Modal/Alert"; +import Alert from "../OldModal/Alert"; type IProps = { onChange?: (files: File[]) => void; diff --git a/src/front/Components/DesignSystem/IconButton/classes.module.scss b/src/front/Components/DesignSystem/IconButton/classes.module.scss new file mode 100644 index 00000000..0a0b751c --- /dev/null +++ b/src/front/Components/DesignSystem/IconButton/classes.module.scss @@ -0,0 +1,98 @@ +@import "@Themes/constants.scss"; + +.root { + cursor: pointer; + border-radius: var(--button-icon-button-radius, 8px); + + svg { + width: 24px; + min-width: 24px; + stroke: var(--button-icon-button-default-default); + } + + &:hover { + svg { + stroke: var(--button-icon-button-default-hovered); + } + } + + &.neutral { + background: var(--button-icon-button-neutral-default); + + svg { + stroke: var(--button-icon-button-default-default); + } + + &:hover { + background: var(--button-icon-button-neutral-hovered); + + svg { + stroke: var(--button-icon-button-default-hovered); + } + } + } + + &.primary { + background: var(--button-icon-button-primary-default); + + svg { + stroke: var(--button-icon-button-primary-contrast); + } + + &:hover { + background: var(--button-icon-button-primary-hovered); + } + } + + &.error { + background: var(--button-icon-button-error-default); + + svg { + stroke: var(--button-icon-button-error-contrast); + } + + &:hover { + background: var(--button-icon-button-error-hovered); + } + } + &.success { + background: var(--button-icon-button-success-default); + + svg { + stroke: var(--button-icon-button-success-contrast); + } + + &:hover { + background: var(--button-icon-button-success-hovered); + } + } + + &.warning { + background: var(--button-icon-button-warning-default); + + svg { + stroke: var(--button-icon-button-warning-contrast); + } + + &:hover { + background: var(--button-icon-button-warning-hovered); + } + } + + &.info { + background: var(--button-icon-button-info-default); + + svg { + stroke: var(--button-icon-button-info-contrast); + } + + &:hover { + background: var(--button-icon-button-info-hovered); + } + } + + &.disabled { + cursor: default; + opacity: var(--opacity-disabled, 0.3); + } +} diff --git a/src/front/Components/DesignSystem/IconButton/index.tsx b/src/front/Components/DesignSystem/IconButton/index.tsx new file mode 100644 index 00000000..817cee68 --- /dev/null +++ b/src/front/Components/DesignSystem/IconButton/index.tsx @@ -0,0 +1,32 @@ +import classNames from "classnames"; +import React from "react"; + +import classes from "./classes.module.scss"; + +export enum EIconButtonVariant { + DEFAULT = "default", + NEUTRAL = "neutral", + PRIMARY = "primary", + ERROR = "error", + SUCCESS = "success", + WARNING = "warning", + INFO = "info", +} + +type IProps = { + icon: React.ReactNode; + onClick?: React.MouseEventHandler | undefined; + variant?: EIconButtonVariant; + disabled?: boolean; + className?: string; +}; + +export default function IconButton(props: IProps) { + const { icon, onClick, className, variant = EIconButtonVariant.DEFAULT, disabled = false } = props; + + return ( + + {icon} + + ); +} diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss index 408155b3..da05f014 100644 --- a/src/front/Components/DesignSystem/Modal/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/classes.module.scss @@ -1,125 +1,60 @@ -@import "@Themes/constants.scss"; - -@keyframes smooth-appear { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes smooth-disappear { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - .root { position: fixed; - z-index: 6; + display: flex; + justify-content: center; + align-items: center; top: 0; left: 0; - width: 100vw; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - --animation-delay: 1ms; - animation: smooth-appear var(--animation-delay) $custom-easing; + width: 100%; + height: 100%; + z-index: 3; - &[data-will-close="true"] { - animation: smooth-disappear var(--animation-delay) $custom-easing; - opacity: 0; + .content { + position: fixed; + max-width: 600px; + max-height: 85vh; + border-radius: var(--modal-radius, 0px); + background: var(--modal-background, #fff); + box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15); + + overflow-y: auto; + + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--spacing-md, 16px) var(--modal-spacing, 16px); + gap: var(--spacing-md, 16px); + } + + .children { + padding: var(--spacing-md, 16px) var(--modal-spacing, 16px); + } + + .footer { + display: flex; + padding: var(--spacing-md, 16px) var(--modal-spacing, 16px); + justify-content: center; + gap: var(--spacing-md, 16px); + } + + &.fullwidth { + min-width: 85vw; + } + + &.fullscreen { + min-width: 85vw; + padding: 0; + } } - .background { + .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background-color: $modal-background; - } - - .container { - position: relative; - width: 610px; - max-height: 90%; - background: var(--color-generic-white); - box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11); - overflow: auto; - padding: 32px; - - @media (max-width: $screen-s) { - width: 90%; - max-width: 493px; - } - - .cross { - display: flex; - flex-direction: row-reverse; - - .close-icon { - height: 24px; - width: 24px; - cursor: pointer; - } - } - } - - .transparant-background { - background-color: transparent; - box-shadow: none; - } - - &[data-side-background="true"] { - .container { - max-width: 711px; - - .sub-container { - padding: 0; - display: flex; - - p { - max-width: 711px; - } - - @media (max-width: $screen-s) { - display: block; - } - - .banner { - @media (max-width: $screen-s) { - overflow: hidden; - } - } - } - } - - .side-image { - height: 100%; - - @media (max-width: $screen-s) { - display: none; - } - } - - .top-image { - @media (min-width: $screen-s) { - display: none; - } - - @media (max-width: $screen-s) { - width: 100%; - max-height: 82px; - min-height: 82px; - } - } + background-color: rgba(0, 0, 0, 0.5); + overflow: hidden; } } diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index 534e9442..61022860 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -1,111 +1,79 @@ -import CrossIcon from "@Assets/Icons/cross.svg"; -import Image from "next/image"; -import React from "react"; - -import Typography, { ETypo } from "../Typography"; +import classNames from "classnames"; import classes from "./classes.module.scss"; -import Footer from "./Elements/Footer"; -import Header from "./Elements/Header"; -import Loader from "./Elements/Loader"; +import Button, { EButtonStyleType, EButtonVariant } from "../Button"; +import React from "react"; +import Typography, { ETypo } from "../Typography"; -export type IProps = { - closeBtn?: boolean; - header?: string | JSX.Element; - footer?: JSX.Element | null; - textLoader?: string | JSX.Element; +import { XMarkIcon } from "@heroicons/react/24/outline"; +import IconButton, { EIconButtonVariant } from "../IconButton"; + +type IProps = { + className?: string; isOpen: boolean; - onClose: () => void; - hasTransparentBackground?: boolean; - hasContainerClosable?: boolean; - withSideBackground?: boolean; + onClose?: () => void; children?: React.ReactNode; - animationDelay?: number; -}; - -type IState = { - willClose: boolean; - isOpen: boolean; -}; - -export default class Modal extends React.Component { - static defaultProps = { - animationDelay: 250, + title?: string; + firstButton?: { + text: string; + onClick?: () => void; + rightIcon?: React.ReactNode; + leftIcon?: React.ReactNode; }; - public rootRefElement = React.createRef(); - constructor(props: IProps) { - super(props); - this.close = this.close.bind(this); + secondButton?: { + text: string; + onClick?: () => void; + rightIcon?: React.ReactNode; + leftIcon?: React.ReactNode; + }; + fullwidth?: boolean; + fullscreen?: boolean; +}; - this.state = { - willClose: false, - isOpen: this.props.isOpen, - }; - } +export default function Modal(props: IProps) { + const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = props; + + if (!isOpen) return null; + return ( +
+
- public override render(): JSX.Element | null { - if (!this.state.isOpen) return null; - return (
-
-
- {this.props.closeBtn && ( -
- Unplugged -
- )} -
- {this.props.header &&
} + className={classNames( + classes["content"], + className, + fullwidth && classes["fullwidth"], + fullscreen && classes["fullscreen"], + )}> +
+ {title && {title}} + }/> +
- - <>{this.props.children ? this.props.children : } - - {this.props.children && this.props.footer &&
} -
+
{children}
+ +
+ {firstButton && ( + + )} + {secondButton && ( + + )}
- ); - } - - public override componentDidUpdate(prevProps: IProps): void { - if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) { - this.setState({ willClose: true }); - window.setTimeout(() => { - this.setState({ - isOpen: false, - willClose: false, - }); - }, this.props.animationDelay); - document.body.style.overflow = "auto"; - } - if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { - this.setState({ isOpen: true }); - document.body.style.overflow = "hidden"; - } - this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); - } - - public override componentDidMount(): void { - document.addEventListener("keydown", this.handleKeyDown); - } - - public override componentWillUnmount(): void { - document.body.style.overflow = "auto"; - document.removeEventListener("keydown", this.handleKeyDown); - } - - protected close() { - if (this.props.hasContainerClosable === false) return; - if (this.state.willClose) return; - this.props.onClose(); - } - - private handleKeyDown = (e: KeyboardEvent): void => { - if (e.key === "Escape" || e.key === "Esc") { - this.props.onClose(); - } - }; +
+ ); } diff --git a/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Alert/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Alert/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Alert/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Alert/index.tsx b/src/front/Components/DesignSystem/OldModal/Alert/index.tsx similarity index 90% rename from src/front/Components/DesignSystem/Modal/Alert/index.tsx rename to src/front/Components/DesignSystem/OldModal/Alert/index.tsx index bc00d3b3..d9293647 100644 --- a/src/front/Components/DesignSystem/Modal/Alert/index.tsx +++ b/src/front/Components/DesignSystem/OldModal/Alert/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Modal, { IProps as IPropsModal } from ".."; +import OldModal, { IProps as IPropsModal } from ".."; import Button, { EButtonVariant } from "../../Button"; import classes from "./classes.module.scss"; @@ -13,7 +13,7 @@ type IState = { export default class Alert extends React.Component { static defaultProps = { closeText: "Ok", - ...Modal.defaultProps, + ...OldModal.defaultProps, }; constructor(props: IProps) { @@ -26,14 +26,14 @@ export default class Alert extends React.Component { public override render(): JSX.Element | null { return ( - {this.props.children} - + ); } diff --git a/src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Confirm/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Confirm/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/OldModal/Confirm/index.tsx similarity index 94% rename from src/front/Components/DesignSystem/Modal/Confirm/index.tsx rename to src/front/Components/DesignSystem/OldModal/Confirm/index.tsx index 06e394a7..b5b5cd72 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx +++ b/src/front/Components/DesignSystem/OldModal/Confirm/index.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import React from "react"; -import Modal, { IProps as IPropsModal } from ".."; +import OldModal, { IProps as IPropsModal } from ".."; import Button, { EButtonStyleType, EButtonVariant } from "../../Button"; import classes from "./classes.module.scss"; @@ -24,19 +24,19 @@ export default class Confirm extends React.Component { confirmText: "Confirm", canConfirm: true, showButtons: true, - ...Modal.defaultProps, + ...OldModal.defaultProps, }; public override render(): JSX.Element | null { return ( - {this.props.children} - + ); } diff --git a/src/front/Components/DesignSystem/Modal/Elements/Footer/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Elements/Footer/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Footer/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Elements/Footer/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Elements/Footer/index.tsx b/src/front/Components/DesignSystem/OldModal/Elements/Footer/index.tsx similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Footer/index.tsx rename to src/front/Components/DesignSystem/OldModal/Elements/Footer/index.tsx diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Elements/Header/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Elements/Header/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx b/src/front/Components/DesignSystem/OldModal/Elements/Header/index.tsx similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx rename to src/front/Components/DesignSystem/OldModal/Elements/Header/index.tsx diff --git a/src/front/Components/DesignSystem/Modal/Elements/Loader/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Elements/Loader/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Loader/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Elements/Loader/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx b/src/front/Components/DesignSystem/OldModal/Elements/Loader/index.tsx similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx rename to src/front/Components/DesignSystem/OldModal/Elements/Loader/index.tsx diff --git a/src/front/Components/DesignSystem/OldModal/classes.module.scss b/src/front/Components/DesignSystem/OldModal/classes.module.scss new file mode 100644 index 00000000..408155b3 --- /dev/null +++ b/src/front/Components/DesignSystem/OldModal/classes.module.scss @@ -0,0 +1,125 @@ +@import "@Themes/constants.scss"; + +@keyframes smooth-appear { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes smooth-disappear { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.root { + position: fixed; + z-index: 6; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + --animation-delay: 1ms; + animation: smooth-appear var(--animation-delay) $custom-easing; + + &[data-will-close="true"] { + animation: smooth-disappear var(--animation-delay) $custom-easing; + opacity: 0; + } + + .background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $modal-background; + } + + .container { + position: relative; + width: 610px; + max-height: 90%; + background: var(--color-generic-white); + box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11); + overflow: auto; + padding: 32px; + + @media (max-width: $screen-s) { + width: 90%; + max-width: 493px; + } + + .cross { + display: flex; + flex-direction: row-reverse; + + .close-icon { + height: 24px; + width: 24px; + cursor: pointer; + } + } + } + + .transparant-background { + background-color: transparent; + box-shadow: none; + } + + &[data-side-background="true"] { + .container { + max-width: 711px; + + .sub-container { + padding: 0; + display: flex; + + p { + max-width: 711px; + } + + @media (max-width: $screen-s) { + display: block; + } + + .banner { + @media (max-width: $screen-s) { + overflow: hidden; + } + } + } + } + + .side-image { + height: 100%; + + @media (max-width: $screen-s) { + display: none; + } + } + + .top-image { + @media (min-width: $screen-s) { + display: none; + } + + @media (max-width: $screen-s) { + width: 100%; + max-height: 82px; + min-height: 82px; + } + } + } +} diff --git a/src/front/Components/DesignSystem/OldModal/index.tsx b/src/front/Components/DesignSystem/OldModal/index.tsx new file mode 100644 index 00000000..2b30c00a --- /dev/null +++ b/src/front/Components/DesignSystem/OldModal/index.tsx @@ -0,0 +1,111 @@ +import CrossIcon from "@Assets/Icons/cross.svg"; +import Image from "next/image"; +import React from "react"; + +import Typography, { ETypo } from "../Typography"; +import classes from "./classes.module.scss"; +import Footer from "./Elements/Footer"; +import Header from "./Elements/Header"; +import Loader from "./Elements/Loader"; + +export type IProps = { + closeBtn?: boolean; + header?: string | JSX.Element; + footer?: JSX.Element | null; + textLoader?: string | JSX.Element; + isOpen: boolean; + onClose: () => void; + hasTransparentBackground?: boolean; + hasContainerClosable?: boolean; + withSideBackground?: boolean; + children?: React.ReactNode; + animationDelay?: number; +}; + +type IState = { + willClose: boolean; + isOpen: boolean; +}; + +export default class OldModal extends React.Component { + static defaultProps = { + animationDelay: 250, + }; + public rootRefElement = React.createRef(); + constructor(props: IProps) { + super(props); + this.close = this.close.bind(this); + + this.state = { + willClose: false, + isOpen: this.props.isOpen, + }; + } + + public override render(): JSX.Element | null { + if (!this.state.isOpen) return null; + return ( +
+
+
+ {this.props.closeBtn && ( +
+ Unplugged +
+ )} +
+ {this.props.header &&
} + + + <>{this.props.children ? this.props.children : } + + {this.props.children && this.props.footer &&
} +
+
+
+ ); + } + + public override componentDidUpdate(prevProps: IProps): void { + if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) { + this.setState({ willClose: true }); + window.setTimeout(() => { + this.setState({ + isOpen: false, + willClose: false, + }); + }, this.props.animationDelay); + document.body.style.overflow = "auto"; + } + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { + this.setState({ isOpen: true }); + document.body.style.overflow = "hidden"; + } + this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); + } + + public override componentDidMount(): void { + document.addEventListener("keydown", this.handleKeyDown); + } + + public override componentWillUnmount(): void { + document.body.style.overflow = "auto"; + document.removeEventListener("keydown", this.handleKeyDown); + } + + protected close() { + if (this.props.hasContainerClosable === false) return; + if (this.state.willClose) return; + this.props.onClose(); + } + + private handleKeyDown = (e: KeyboardEvent): void => { + if (e.key === "Escape" || e.key === "Esc") { + this.props.onClose(); + } + }; +} diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index cb1ea3bb..56ac5055 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -11,7 +11,7 @@ import Link from "next/link"; import React from "react"; import Button, { EButtonStyleType, EButtonVariant } from "../Button"; -import Confirm from "../Modal/Confirm"; +import Confirm from "../OldModal/Confirm"; import QuantityProgressBar from "../QuantityProgressBar"; import classes from "./classes.module.scss"; import DocumentList from "./DocumentList"; @@ -138,7 +138,7 @@ export default class UserFolder extends React.Component { {!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
- diff --git a/src/front/Components/Elements/BackArrow/index.tsx b/src/front/Components/Elements/BackArrow/index.tsx index d075a098..5091555d 100644 --- a/src/front/Components/Elements/BackArrow/index.tsx +++ b/src/front/Components/Elements/BackArrow/index.tsx @@ -1,4 +1,4 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; +import { ChevronLeftIcon } from "@heroicons/react/24/solid"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { NextRouter, useRouter } from "next/router"; import React from "react"; @@ -21,9 +21,7 @@ class BackArrowClass extends React.Component { public override render(): JSX.Element { return ( diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx index b5c3c7bf..d5c491e3 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx @@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi import Form from "@Front/Components/DesignSystem/Form"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx index 9a442889..7c7f936b 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx @@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi import Form from "@Front/Components/DesignSystem/Form"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx index b032cd01..31ec5a3a 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx @@ -5,7 +5,7 @@ import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTy import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 9dcea52f..7a60cacd 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -4,13 +4,18 @@ import Newsletter from "@Front/Components/DesignSystem/Newsletter"; import Table from "@Front/Components/DesignSystem/Table"; import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; -import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; - -import classes from "./classes.module.scss"; import Tabs from "@Front/Components/Elements/Tabs"; +import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import { ArrowLongLeftIcon, ArrowLongRightIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { useCallback, useMemo, useState } from "react"; +import classes from "./classes.module.scss"; +import useOpenable from "@Front/Hooks/useOpenable"; +import Modal from "@Front/Components/DesignSystem/Modal"; +import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton"; + export default function DesignSystem() { + const { isOpen, open, close } = useOpenable(); const userDb = useMemo( () => [ { @@ -57,15 +62,25 @@ export default function DesignSystem() { DesignSystem - Tabs - tabs={userDbArray} onSelect={onSelect} /> -
- - {selectedTab.id} - {selectedTab.username} - -
+ Modal + + , rightIcon: }} + secondButton={{ text: "Confirmer", leftIcon: , rightIcon: }}> + Modal Content + + + Tabs + tabs={userDbArray} onSelect={onSelect} /> + + {selectedTab.id} - {selectedTab.username} + + Circle Progress
@@ -134,67 +149,147 @@ export default function DesignSystem() { Buttons
- - - +
- - - +
- - - +
- - - +
- - - +
- - - +
- - - + +
+
+ } variant={EIconButtonVariant.DEFAULT} /> + } variant={EIconButtonVariant.NEUTRAL} /> + } variant={EIconButtonVariant.PRIMARY} /> + } variant={EIconButtonVariant.ERROR} /> + } variant={EIconButtonVariant.SUCCESS} /> + } variant={EIconButtonVariant.WARNING} /> + } variant={EIconButtonVariant.INFO} /> + } variant={EIconButtonVariant.INFO} disabled />
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx index 17e822e2..6b0a7759 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx @@ -1,4 +1,4 @@ -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import classes from "./classes.module.scss"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index 1261b148..b477af69 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -1,4 +1,4 @@ -import PlusIcon from "@Assets/Icons/plus.svg"; +import { PlusIcon } from "@heroicons/react/24/outline"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; @@ -75,9 +75,7 @@ class AskDocumentsClass extends BasePage {
@@ -56,7 +56,7 @@ export default class ClientSection extends React.Component {
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && ( - diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index d93b8bcb..26ff7502 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx @@ -4,7 +4,7 @@ import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAncho import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; @@ -96,7 +96,7 @@ class FolderInformationClass extends BasePage { Informations du dossier
- diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx index a22ba91d..11bf9643 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx @@ -2,7 +2,7 @@ import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx index 3de0979e..15256050 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx @@ -3,7 +3,7 @@ import RightArrowIcon from "@Assets/Icons/right-arrow.svg"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import FilePreview from "@Front/Components/DesignSystem/FilePreview"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx index 216d4f0f..34cf5284 100644 --- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx @@ -66,7 +66,10 @@ class FolderInformationClass extends BasePage { Informations du dossier
- diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx index 8243bab6..dfc30001 100644 --- a/src/front/Components/Layouts/Login/index.tsx +++ b/src/front/Components/Layouts/Login/index.tsx @@ -11,7 +11,7 @@ import classes from "./classes.module.scss"; import LandingImage from "./landing-connect.jpeg"; import { FrontendVariables } from "@Front/Config/VariablesFront"; import Link from "next/link"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; export default function Login() { const router = useRouter(); @@ -58,7 +58,7 @@ export default function Login() {
Connexion espace professionnel
 - diff --git a/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx index e1f9543e..f05511a9 100644 --- a/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx +++ b/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx @@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { ValidationError } from "class-validator"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; type IProps = { onSubmit: (e: React.FormEvent | null, values: { [key: string]: string }) => void; validationErrors: ValidationError[]; diff --git a/src/front/Components/Layouts/LoginCustomer/index.tsx b/src/front/Components/Layouts/LoginCustomer/index.tsx index d73013bb..3b4a7670 100644 --- a/src/front/Components/Layouts/LoginCustomer/index.tsx +++ b/src/front/Components/Layouts/LoginCustomer/index.tsx @@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react"; import classes from "./classes.module.scss"; import LandingImage from "./landing-connect.jpeg"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import StepEmail from "./StepEmail"; import StepTotp from "./StepTotp"; import Auth from "@Front/Api/Auth/Customer/Auth"; diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx index 6967e9e6..ee2ac0ba 100644 --- a/src/front/Components/Layouts/Rib/index.tsx +++ b/src/front/Components/Layouts/Rib/index.tsx @@ -7,7 +7,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi import { useRouter } from "next/router"; import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib"; import DepositRib from "@Front/Components/DesignSystem/DepositRib"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Loader from "@Front/Components/DesignSystem/Loader"; export default function Rib() { diff --git a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx index c98a7c8e..a0553f55 100644 --- a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx +++ b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx @@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx index 07970c9f..f8cd78af 100644 --- a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx +++ b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx @@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import Button from "@Front/Components/DesignSystem/Button"; import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import Form from "@Front/Components/DesignSystem/Form"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin"; diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx index 9c3bcd2c..da5f7936 100644 --- a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx +++ b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx @@ -8,7 +8,7 @@ import { useEffect, useState } from "react"; import Check from "@Front/Components/Elements/Icons/Check"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import useOpenable from "@Front/Hooks/useOpenable"; import { EType } from "le-coffre-resources/dist/Admin/Subscription"; import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe"; diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx index c62048d6..e19a3dc5 100644 --- a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx +++ b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx @@ -9,7 +9,7 @@ import { useEffect, useState } from "react"; import Check from "@Front/Components/Elements/Icons/Check"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import useOpenable from "@Front/Hooks/useOpenable"; // import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe"; // import { EType } from "le-coffre-resources/dist/Admin/Subscription"; diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx index 371ec226..4dc1ed1c 100644 --- a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx +++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx @@ -3,7 +3,7 @@ import classes from "./classes.module.scss"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { useCallback, useEffect, useState } from "react"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import useOpenable from "@Front/Hooks/useOpenable"; import MessageBox from "@Front/Components/Elements/MessageBox"; import Link from "next/link"; diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx index a780136d..a8187883 100644 --- a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx +++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx @@ -112,7 +112,7 @@ export default function SubscriptionInvite() { onClick={addLine} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} - icon={PlusIcon}> + rightIcon={}> Ajouter une adresse email
diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx index e3f618df..2ffc406f 100644 --- a/src/front/Components/Layouts/Users/UserInformations/index.tsx +++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx @@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles"; import LiveVotes from "@Front/Api/LeCoffreApi/SuperAdmin/LiveVotes/LiveVotes"; import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Switch from "@Front/Components/DesignSystem/Switch"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard"; diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss index ef4cc7da..6661f268 100644 --- a/src/front/Themes/variables.scss +++ b/src/front/Themes/variables.scss @@ -565,7 +565,7 @@ --modal-spacing: var(--spacing-md); --navigation-radius: var(--radius-none); --notification-radius: var(--radius-minimal); - --opacity-disabled: 1.875rem; + --opacity-disabled: 0.3; --radius-none: 0px; --radius-minimal: var(--radius-md); --radius-rounded: var(--radius-lg);