diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index 9363749906c104d64eadfa687a4e7d688f796efb..ef3a1cb146cec90daaac01d174983dfdad899aad 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -163,13 +163,12 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
</div>
</div>
</div>
- {resultModal && (
- <DuelResultModal
- userChallenge={userChallenge}
- win={winChallenge}
- handleCloseClick={setResult}
- />
- )}
+ <DuelResultModal
+ open={resultModal}
+ userChallenge={userChallenge}
+ win={winChallenge}
+ handleCloseClick={setResult}
+ />
</>
)
}
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
index efccd255ac5a97fb2195d712d163cd2940ff76f0..36ac47b1b5eed9d1c3b5a98bac73563da1dcf6c4 100644
--- a/src/components/Duel/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -1,78 +1,94 @@
-import React, { useEffect, useState } from 'react'
-import './duelResultModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { formatNumberValues, importIconbyId } from 'utils/utils'
-
-import { UserChallenge } from 'models/challenge.model'
-import Modal from 'components/CommonKit/Modal/Modal'
-import MuiButton from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
-import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-
-interface DuelResultModalProps {
- userChallenge: UserChallenge
- win: boolean
- handleCloseClick: () => void
-}
-
-const DuelResultModal: React.FC<DuelResultModalProps> = ({
- userChallenge,
- win,
- handleCloseClick,
-}: DuelResultModalProps) => {
- const { t } = useI18n()
- const [winIcon, setWinIcon] = useState<string>(defaultIcon)
- const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
- const result: string | number = formatNumberValues(
- Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
- )
-
- useEffect(() => {
- importIconbyId(userChallenge.id + '-1', 'duelResult').then(icon => {
- icon ? setWinIcon(icon) : setWinIcon(defaultIcon)
- })
- importIconbyId(userChallenge.id + '-0', 'duelResult').then(icon => {
- icon ? setLossIcon(icon) : setLossIcon(defaultIcon)
- })
- }, [userChallenge])
-
- return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <div className="em-root modal-congrats">
- <div className="em-content">
- <StyledIcon
- className="imgResult"
- icon={win ? winIcon : lossIcon}
- size={208}
- />
- <div className="text-28-normal-uppercase title">
- {win ? t('duel.sucess.title') : t('duel.lost.title')}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel.sucess.message1') + result + ' €'
- : t('duel.lost.message1') + result + ' €'}
- </div>
- <div className="text-18-normal">
- {win
- ? t('duel.sucess.message2') + userChallenge.title
- : t('duel.lost.message2') + userChallenge.title + '...'}
- </div>
- <MuiButton
- className="button"
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {win ? t('duel.sucess.button') : t('duel.lost.button')}
- </MuiButton>
- </div>
- </div>
- </Modal>
- )
-}
-
-export default DuelResultModal
+import React, { useEffect, useState } from 'react'
+import './duelResultModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { formatNumberValues, importIconbyId } from 'utils/utils'
+
+import { UserChallenge } from 'models/challenge.model'
+import Modal from 'components/CommonKit/Modal/Modal'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+
+interface DuelResultModalProps {
+ open: boolean
+ userChallenge: UserChallenge
+ win: boolean
+ handleCloseClick: () => void
+}
+
+const DuelResultModal: React.FC<DuelResultModalProps> = ({
+ open,
+ userChallenge,
+ win,
+ handleCloseClick,
+}: DuelResultModalProps) => {
+ const { t } = useI18n()
+ const [winIcon, setWinIcon] = useState<string>(defaultIcon)
+ const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
+ const result: string | number = formatNumberValues(
+ Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
+ )
+
+ useEffect(() => {
+ importIconbyId(userChallenge.id + '-1', 'duelResult').then(icon => {
+ icon ? setWinIcon(icon) : setWinIcon(defaultIcon)
+ })
+ importIconbyId(userChallenge.id + '-0', 'duelResult').then(icon => {
+ icon ? setLossIcon(icon) : setLossIcon(defaultIcon)
+ })
+ }, [userChallenge])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('duel_result_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div className="duel-result-modal-root ">
+ <StyledIcon
+ className="imgResult"
+ icon={win ? winIcon : lossIcon}
+ size={208}
+ />
+ <div className="text-28-normal-uppercase title">
+ {win
+ ? t('duel_result_modal.sucess.title')
+ : t('duel_result_modal.lost.title')}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel_result_modal.sucess.message1') + result + ' €'
+ : t('duel_result_modal.lost.message1') + result + ' €'}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel_result_modal.sucess.message2') + userChallenge.title
+ : t('duel_result_modal.lost.message2') +
+ userChallenge.title +
+ '...'}
+ </div>
+ <Button
+ aria-label={t('duel_result_modal.accessibility.button_validate')}
+ className="button"
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {win
+ ? t('duel_result_modal.sucess.button_validate')
+ : t('duel_result_modal.lost.button_validate')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default DuelResultModal
diff --git a/src/components/Duel/duelResultModal.scss b/src/components/Duel/duelResultModal.scss
index 3bac30f6dec013cfab4e3c8152abeb78ed28c92a..28a988fa6b7b886f04c488f5afa946a9952e98ab 100644
--- a/src/components/Duel/duelResultModal.scss
+++ b/src/components/Duel/duelResultModal.scss
@@ -1,13 +1,11 @@
-.modal-congrats {
- text-align: center;
- overflow-x: hidden;
- .em-content {
- padding: 1.5rem 2.5rem;
- }
- .title {
- margin: 2rem 0 1rem;
- }
- button.btn-secondary-negative {
- margin: 2rem 0.25rem 0.5rem;
- }
-}
+.duel-result-modal-root {
+ text-align: center;
+ overflow-x: hidden;
+ padding: 1rem 1.5rem 0.5rem;
+ .title {
+ margin: 2rem 0 1rem;
+ }
+ button.btn-secondary-negative {
+ margin: 2rem 0.25rem 0.5rem;
+ }
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3d17fe45f534f742c5fea6a90dce964973aee35c..2dffd7df066fc216fb1a9e235e113950014d1bca 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -408,18 +408,24 @@
"goal2": "pour gagner le badge %{title}",
"caption_average": "Votre moyenne à titre indicatif",
"caption_consumption": "Votre consommation",
- "caption_incoming": "Données à venir",
+ "caption_incoming": "Données à venir"
+ },
+ "duel_result_modal": {
"sucess": {
"title": "Félicitations !",
"message1": "Vous avez économisé ",
"message2": "et gagné le badge ",
- "button": "Youpi"
+ "button_validate": "Youpi"
},
"lost": {
"title": "Presque !",
"message1": "Vous avez dépassé de ",
"message2": "et manqué le badge ",
- "button": "Zut alors"
+ "button_validate": "Zut alors"
+ },
+ "accessibility": {
+ "window_title": "Fenètre de résultat",
+ "button_validate": "Valider"
}
},
"duel_empty_value_modal": {