diff --git a/src/components/Connection/ModalGRDF.tsx b/src/components/Connection/ModalGRDF.tsx index 4e41235adc6bdee205eea02d07c9e6e6e6007a3c..0908d2186851035511a02a4ffd6d2da04bd93b91 100644 --- a/src/components/Connection/ModalGRDF.tsx +++ b/src/components/Connection/ModalGRDF.tsx @@ -1,10 +1,12 @@ import React from 'react' import { useI18n } from 'cozy-ui/transpiled/react/I18n' - -import Modal from 'components/CommonKit/Modal/Modal' -import MuiButton from '@material-ui/core/Button' +import Icon from 'cozy-ui/transpiled/react/Icon' +import IconButton from '@material-ui/core/IconButton' +import Button from '@material-ui/core/Button' +import Dialog from '@material-ui/core/Dialog' import switchMobile from 'assets/icons/ico/switchGRDFMobile.svg' import switchDesktop from 'assets/icons/ico/switchGRDFDesktop.svg' +import CloseIcon from 'assets/icons/ico/close.svg' import { ScreenType } from 'enum/screen.enum' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' @@ -14,12 +16,14 @@ import { AppStore } from 'store' import './modalGRDF.scss' interface ModalGRDFProps { + open: boolean isWaiting?: boolean handleSubmit: () => void handleCloseClick: () => void } const ModalGRDF: React.FC<ModalGRDFProps> = ({ + open, handleSubmit, handleCloseClick, isWaiting, @@ -28,7 +32,26 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({ const { screenType } = useSelector((state: AppStore) => state.ecolyo.global) return ( - <Modal handleCloseClick={handleCloseClick}> + <Dialog + open={open} + disableBackdropClick + disableEscapeKeyDown + onClose={handleCloseClick} + aria-label={t('auth.grdfgrandlyon.authModal.accessibility.window_title')} + classes={{ + root: 'modal-root', + paper: 'modal-paper', + }} + > + <IconButton + aria-label={t( + 'auth.grdfgrandlyon.authModal.accessibility.button_close' + )} + className="modal-paper-close-button" + onClick={handleCloseClick} + > + <Icon icon={CloseIcon} size={16} /> + </IconButton> {screenType === ScreenType.MOBILE ? ( <StyledIcon icon={switchMobile} size={200} /> ) : ( @@ -53,7 +76,10 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({ </span> {t('auth.grdfgrandlyon.authModal.endText2')} </p> - <MuiButton + <Button + aria-label={t( + 'auth.grdfgrandlyon.authModal.accessibility.button_validate' + )} onClick={handleSubmit} disabled={isWaiting} classes={{ @@ -63,9 +89,9 @@ const ModalGRDF: React.FC<ModalGRDFProps> = ({ > {t('auth.grdfgrandlyon.authModal.buttonText')} {isWaiting && <StyledBlackSpinner size={30} />} - </MuiButton> + </Button> </div> - </Modal> + </Dialog> ) } diff --git a/src/components/Connection/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx index 9299ceef24d5d31725eeaf0d79a5de9113bcb03a..fbaffc1bb1b4dfdbfd47e54175b66c7244415ec8 100644 --- a/src/components/Connection/OAuthForm.tsx +++ b/src/components/Connection/OAuthForm.tsx @@ -107,13 +107,12 @@ const OAuthForm: React.FC<OAuthFormProps> = ({ t={t} /> )} - {openGRDFModal && ( - <ModalGRDF - handleSubmit={handleSubmit} - handleCloseClick={toggleGRDFModal} - isWaiting={isWaiting} - /> - )} + <ModalGRDF + open={openGRDFModal} + handleSubmit={handleSubmit} + handleCloseClick={toggleGRDFModal} + isWaiting={isWaiting} + /> </> ) } diff --git a/src/components/Connection/modalGRDF.scss b/src/components/Connection/modalGRDF.scss index 5972a0c39952c525fcd835f98f5ec08094c08ba0..703f45081562e58cc4daa06c34820f269444e889 100644 --- a/src/components/Connection/modalGRDF.scss +++ b/src/components/Connection/modalGRDF.scss @@ -1,20 +1,20 @@ -@import 'src/styles/base/color'; - -.grdfAuthModal { - padding: 0 1.5rem; - p { - color: white; - } - .yellowText { - color: $gold-shadow; - } - button.btn-highlight { - width: 100%; - display: flex; - align-items: center; - justify-content: space-evenly; - margin: 1.5rem auto; - padding: 1rem 2rem; - transition: all 300ms ease; - } -} +@import 'src/styles/base/color'; + +.grdfAuthModal { + padding: 0 0.5rem; + p { + color: white; + } + .yellowText { + color: $gold-shadow; + } + button.btn-highlight { + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; + margin: 1.5rem 0 1rem; + padding: 1rem 2rem; + transition: all 300ms ease; + } +} diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss index eee9f3d5306255a0ca99ce75946ebfd111e0a117..e41fdb4bc2732b42edf47d1659c284791efe2fc8 100644 --- a/src/components/Feedback/feedbackModal.scss +++ b/src/components/Feedback/feedbackModal.scss @@ -3,6 +3,7 @@ .fb-root { overflow-y: auto; min-width: 70%; + margin: 1rem 0; .fb-header { color: $gold-shadow; padding: 0.5rem 0.5rem 0rem 0.5rem; diff --git a/src/locales/fr.json b/src/locales/fr.json index e313f61cd7b313f6c50c76d6a15948a7158c7b31..863b52711c4460b0ce3ef36792a5464ca19d2d36 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -246,7 +246,12 @@ "endText1": "Une période de consentement de ", "duration": "1 an ", "endText2": "minimum est demandée pour une expérience optimale.", - "buttonText": "J'ai compris" + "buttonText": "J'ai compris", + "accessibility": { + "window_title": "Fenètre d'information GRDF", + "button_close": "Fermer la fenètre", + "button_validate": "Valider" + } } }, "eglgrandlyon": { diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss index ab7ac5a748fb0be5cf07764b646fe17c7428486a..983b2fc1b1e894d6c80f91f05e07268b9fb87385 100644 --- a/src/styles/components/_dialog.scss +++ b/src/styles/components/_dialog.scss @@ -11,7 +11,7 @@ div.modal-paper{ width: 36rem; max-width: 100%; max-height: 90vh; - padding: 2rem; + padding: 1rem; box-sizing: border-box; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); border-radius: 4px;