diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index de3a8728286564e89c38a4811835fa335edd3201..dad91485624f2be5de3258f192ec0ff3d621103d 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -101,9 +101,10 @@ const Content: React.FC<ContentProps> = ({ const { isFeedbacksOpen } = modalState return ( <> - {isFirstConnection && ( - <WelcomeModal handleCloseClick={setWelcomeModalViewed} /> - )} + <WelcomeModal + open={isFirstConnection} + handleCloseClick={setWelcomeModalViewed} + /> <FeedbackModal open={isFeedbacksOpen} handleCloseClick={handleFeedbackModalClose} diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx index b803d0dec654f75db617172cc06f6681d32f564c..4b325c051e44206aeee69de339e787a711c75f99 100644 --- a/src/components/Feedback/FeedbackModal.tsx +++ b/src/components/Feedback/FeedbackModal.tsx @@ -166,7 +166,10 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ return ( <MuiDialog open={open} + disableBackdropClick + disableEscapeKeyDown onClose={closeModal} + aria-labelledby="feedback-title" classes={{ root: 'modal-root', paper: 'modal-paper yellow-border', @@ -214,7 +217,9 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({ </> ) : ( <> - <div className="fb-header text-18-bold">{t('feedback.title')}</div> + <div id="feedback-title" className="fb-header text-18-bold"> + {t('feedback.title')} + </div> <form className="fb-content"> <label htmlFor="feedbackType" className="fb-label text-16-bold"> {t('feedback.type')} diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss index 5c19e2b4b4669847d149b3009919b5d2cd48c19c..eee9f3d5306255a0ca99ce75946ebfd111e0a117 100644 --- a/src/components/Feedback/feedbackModal.scss +++ b/src/components/Feedback/feedbackModal.scss @@ -5,13 +5,13 @@ min-width: 70%; .fb-header { color: $gold-shadow; - padding: 1.5rem 1.5rem 0rem 1.5rem; + padding: 0.5rem 0.5rem 0rem 0.5rem; display: flex; justify-content: center; } .fb-content { - padding: 1rem 1.5rem 1.5rem 1.5rem; + padding: 1rem 0.5rem 0.5rem 0.5rem; display: flex; flex-direction: column; .fb-content-success { diff --git a/src/components/Welcome/WelcomeModal.tsx b/src/components/Welcome/WelcomeModal.tsx index f7d4c9a32584cbf8386af54edd3c6ec13d86c6c6..33bed5e58ec95e77a37742f1506c5c0f9de16748 100644 --- a/src/components/Welcome/WelcomeModal.tsx +++ b/src/components/Welcome/WelcomeModal.tsx @@ -1,36 +1,47 @@ import React from 'react' import { useI18n } from 'cozy-ui/transpiled/react/I18n' -import Modal from 'components/CommonKit/Modal/Modal' +import MuiDialog from '@material-ui/core/Dialog' import MuiButton from '@material-ui/core/Button' import userInstanceSettings from 'components/Hooks/userInstanceSettings' import './welcomeModal.scss' interface WelcomeModalProps { + open: boolean handleCloseClick: () => void } const WelcomeModal: React.FC<WelcomeModalProps> = ({ + open, handleCloseClick, }: WelcomeModalProps) => { const { t } = useI18n() const { data: instanceSettings } = userInstanceSettings() return ( - <Modal handleCloseClick={handleCloseClick} yellowBorder={true}> + <MuiDialog + open={open} + disableBackdropClick + disableEscapeKeyDown + onClose={handleCloseClick} + aria-label={t('welcome_modal.accessibility.title')} + classes={{ + root: 'modal-root', + paper: 'modal-paper yellow-border', + }} + > <div className="wm-header text-24-bold"> - <span>{t('COMMON.WELCOME_MODAL_TITLE')}</span> + <span>{t('welcome_modal.title')}</span> {instanceSettings.public_name ? ( <div className="wm-name text-24-bold">{`${instanceSettings.public_name} !`}</div> ) : ( ' !' )} </div> - <div className="wm-perso text-18-bold"> - {t('COMMON.WELCOME_MODAL_PERSO')} - </div> + <div className="wm-perso text-18-bold">{t('welcome_modal.perso')}</div> <div className="wm-connect text-18-bold"> - {t('COMMON.WELCOME_MODAL_CONNECT')} + {t('welcome_modal.connect')} </div> <MuiButton + aria-label={t('welcome_modal.accessibility.button_valid')} className="button-ok" onClick={handleCloseClick} classes={{ @@ -38,9 +49,9 @@ const WelcomeModal: React.FC<WelcomeModalProps> = ({ label: 'text-16-bold', }} > - {t('COMMON.MODAL_OK')} + {t('welcome_modal.button_valid')} </MuiButton> - </Modal> + </MuiDialog> ) } diff --git a/src/components/Welcome/welcomeModal.scss b/src/components/Welcome/welcomeModal.scss index b2112bbf21a37fe3e67f0af57cc1ff0e29354c64..07e29c90247c56faaa0dfd517968fff495cf57dc 100644 --- a/src/components/Welcome/welcomeModal.scss +++ b/src/components/Welcome/welcomeModal.scss @@ -6,7 +6,7 @@ background-clip: 'text'; -webkit-background-clip: text; color: transparent; - margin: 2rem 0 1.25rem; + margin-bottom: 1.25rem; text-align: center; } .wm-name { diff --git a/src/locales/fr.json b/src/locales/fr.json index a14aa2d1cac22a7cb12751756fec91d9cdf492ce..f5dd9286328c186aa236cee3c065d816e8f2a49a 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -29,9 +29,6 @@ "MINI_CARDS_LABEL": "AUTRES ENERGIES", "APP_FAQ_TITLE": "FAQ", "APP_LEGAL_TITLE": "Mentions légales", - "WELCOME_MODAL_TITLE": "Félicitations", - "WELCOME_MODAL_PERSO": "Votre espace personnel a bien été créé.", - "WELCOME_MODAL_CONNECT": "Vous pouvez maintenant connecter vos compteurs d’énergie à Ecolyo en toute sécurité.", "MODAL_OK": "Ok" }, "header": { @@ -45,6 +42,16 @@ "close": "Fermer cette fenètre" } }, + "welcome_modal": { + "title": "Félicitations", + "perso": "Votre espace personnel a bien été créé.", + "connect": "Vous pouvez maintenant connecter vos compteurs d’énergie à Ecolyo en toute sécurité.", + "button_valid": "Ok", + "accessibility": { + "title": "Fenètre de félicitations", + "button_valid": "Valider" + } + }, "LOADING": { "ERROR_LOADING": "Erreur pendant le chargement des données. Veuillez vérifier votre connexion internet.", "RELOAD": "Recharger" diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss index 6cafa55a888b2bda456182a27d41ae76164f6fba..4654d1cd297103831950cc0e3d804d46ef28ff4c 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: 1rem; + padding: 2rem; box-sizing: border-box; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55); border-radius: 4px;