feat: change welcome and feedback modal

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}

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')}

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 {

src/components/Welcome/WelcomeModal.tsx

 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>
   )
 }
 

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 {

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"

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;