From 60a93d0fb5d1f1aca5cc7f11f436e05db693bc91 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Fri, 26 Mar 2021 15:37:18 +0100
Subject: [PATCH] feat: change welcome and feedback modal
---
src/components/Content/Content.tsx | 7 +++---
src/components/Feedback/FeedbackModal.tsx | 7 +++++-
src/components/Feedback/feedbackModal.scss | 4 +--
src/components/Welcome/WelcomeModal.tsx | 29 +++++++++++++++-------
src/components/Welcome/welcomeModal.scss | 2 +-
src/locales/fr.json | 13 +++++++---
src/styles/components/_dialog.scss | 2 +-
7 files changed, 44 insertions(+), 20 deletions(-)
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index de3a87282..dad914856 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 b803d0dec..4b325c051 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 5c19e2b4b..eee9f3d53 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 f7d4c9a32..33bed5e58 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 b2112bbf2..07e29c902 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 a14aa2d1c..f5dd92863 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 6cafa55a8..4654d1cd2 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;
--
GitLab