diff --git a/src/components/Duel/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal.tsx
index ccc340d074bfc2b37850ab7ed125fa9a4dfdaa69..e9b0bd9c8b3c6d72c16b476a654f274f9042dd5f 100644
--- a/src/components/Duel/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal.tsx
@@ -1,51 +1,65 @@
-import React, { useEffect, useState } from 'react'
-import './duelEmptyValueModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-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'
-import { importIconbyId } from 'utils/utils'
-
-interface DuelEmptyValueModalProps {
- handleCloseClick: () => void
-}
-
-const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
- handleCloseClick,
-}: DuelEmptyValueModalProps) => {
- const { t } = useI18n()
- const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
- useEffect(() => {
- importIconbyId('emptyValue', 'duel').then(icon => {
- icon ? setEmptyIcon(icon) : setEmptyIcon(defaultIcon)
- })
- }, [])
-
- return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <div className="em-root modal-empty-value">
- <div className="em-content">
- <StyledIcon className="imgResult" icon={emptyIcon} size={208} />
- <div className="text-28-normal-uppercase title">
- {t('duel.empty_value.title')}
- </div>
- <div className="text-18-normal">{t('duel.empty_value.message1')}</div>
- <div className="text-18-normal">{t('duel.empty_value.message2')}</div>
- <MuiButton
- onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('duel.empty_value.button')}
- </MuiButton>
- </div>
- </div>
- </Modal>
- )
-}
-
-export default DuelEmptyValueModal
+import React, { useEffect, useState } from 'react'
+import './duelEmptyValueModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Dialog from '@material-ui/core/Dialog'
+import Button from '@material-ui/core/Button'
+
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+import { importIconbyId } from 'utils/utils'
+
+interface DuelEmptyValueModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const DuelEmptyValueModal: React.FC<DuelEmptyValueModalProps> = ({
+ open,
+ handleCloseClick,
+}: DuelEmptyValueModalProps) => {
+ const { t } = useI18n()
+ const [emptyIcon, setEmptyIcon] = useState<string>(defaultIcon)
+ useEffect(() => {
+ importIconbyId('emptyValue', 'duel').then(icon => {
+ icon ? setEmptyIcon(icon) : setEmptyIcon(defaultIcon)
+ })
+ }, [])
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-label={t('duel_empty_value_modal.accessibility.window_title')}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper blue-border',
+ }}
+ >
+ <div className="modal-empty-value-root">
+ <Icon className="imgResult" icon={emptyIcon} size={208} />
+ <div className="text-28-normal-uppercase modal-empty-value-title">
+ {t('duel_empty_value_modal.title')}
+ </div>
+ <div className="text-18-normal">
+ {t('duel_empty_value_modal.message1')}
+ </div>
+ <div className="text-18-normal">
+ {t('duel_empty_value_modal.message2')}
+ </div>
+ <Button
+ aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('duel_empty_value_modal.button')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default DuelEmptyValueModal
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index d454f5acc948cab6782d73727e4c35f3f135f827..436dbba00d23a788432c157aab2bd149b7231a20 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -1,64 +1,69 @@
-import React, { useCallback, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-import CozyBar from 'components/Header/CozyBar'
-import Content from 'components/Content/Content'
-import Header from 'components/Header/Header'
-import { UserChallengeState } from 'enum/userChallenge.enum'
-
-import DuelError from 'components/Duel/DuelError'
-import DuelUnlocked from 'components/Duel/DuelUnlocked'
-import { UserDuelState } from 'enum/userDuel.enum'
-import { UserChallenge } from 'models'
-import DuelOngoing from './DuelOngoing'
-import DuelEmptyValueModal from './DuelEmptyValueModal'
-import { useHistory } from 'react-router-dom'
-
-const DuelView: React.FC = () => {
- const [headerHeight, setHeaderHeight] = useState<number>(0)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
- const history = useHistory()
- const defineHeaderHeight = useCallback((height: number) => {
- setHeaderHeight(height)
- }, [])
- const goBackToChallenge = () => {
- history.push('/challenges')
- }
- const renderDuel = (challenge: UserChallenge) => {
- switch (challenge.duel.state) {
- case UserDuelState.UNLOCKED:
- return <DuelUnlocked userChallenge={challenge} />
- case UserDuelState.ONGOING:
- return <DuelOngoing userChallenge={challenge} />
- case UserDuelState.NO_REF_PERIOD_VALID:
- return <DuelEmptyValueModal handleCloseClick={goBackToChallenge} />
- default:
- return <DuelError />
- }
- }
-
- return (
- <>
- <CozyBar titleKey={'COMMON.APP_DUEL_TITLE'} displayBackArrow={true} />
- <Header
- setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'COMMON.APP_DUEL_TITLE'}
- displayBackArrow={true}
- ></Header>
- <Content height={headerHeight}>
- <div>
- {currentChallenge &&
- currentChallenge.state === UserChallengeState.DUEL ? (
- renderDuel(currentChallenge)
- ) : (
- <DuelError />
- )}
- </div>
- </Content>
- </>
- )
-}
-
-export default DuelView
+import React, { useCallback, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
+import CozyBar from 'components/Header/CozyBar'
+import Content from 'components/Content/Content'
+import Header from 'components/Header/Header'
+import { UserChallengeState } from 'enum/userChallenge.enum'
+
+import DuelError from 'components/Duel/DuelError'
+import DuelUnlocked from 'components/Duel/DuelUnlocked'
+import { UserDuelState } from 'enum/userDuel.enum'
+import { UserChallenge } from 'models'
+import DuelOngoing from './DuelOngoing'
+import DuelEmptyValueModal from './DuelEmptyValueModal'
+import { useHistory } from 'react-router-dom'
+
+const DuelView: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const { currentChallenge } = useSelector(
+ (state: AppStore) => state.ecolyo.challenge
+ )
+ const history = useHistory()
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+ const goBackToChallenge = () => {
+ history.push('/challenges')
+ }
+ const renderDuel = (challenge: UserChallenge) => {
+ switch (challenge.duel.state) {
+ case UserDuelState.UNLOCKED:
+ return <DuelUnlocked userChallenge={challenge} />
+ case UserDuelState.ONGOING:
+ return <DuelOngoing userChallenge={challenge} />
+ case UserDuelState.NO_REF_PERIOD_VALID:
+ return (
+ <DuelEmptyValueModal
+ open={true}
+ handleCloseClick={goBackToChallenge}
+ />
+ )
+ default:
+ return <DuelError />
+ }
+ }
+
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_DUEL_TITLE'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_DUEL_TITLE'}
+ displayBackArrow={true}
+ ></Header>
+ <Content height={headerHeight}>
+ <div>
+ {currentChallenge &&
+ currentChallenge.state === UserChallengeState.DUEL ? (
+ renderDuel(currentChallenge)
+ ) : (
+ <DuelError />
+ )}
+ </div>
+ </Content>
+ </>
+ )
+}
+
+export default DuelView
diff --git a/src/components/Duel/duelEmptyValueModal.scss b/src/components/Duel/duelEmptyValueModal.scss
index ad4be6ec65bef58d3ca0dd6759fcebc3ce33851c..f5e9172167801afd048e6920cf3d0fccdc66f589 100644
--- a/src/components/Duel/duelEmptyValueModal.scss
+++ b/src/components/Duel/duelEmptyValueModal.scss
@@ -1,13 +1,17 @@
-.modal-empty-value {
- 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 1.5rem;
- }
-}
+@import '../../styles/base/color';
+
+.modal-empty-value-root {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 1.5rem 0.5rem;
+ text-align: center;
+ .modal-empty-value-title{
+ margin: 2rem 0 1rem;
+ }
+
+ button.btn-secondary-negative {
+ margin: 2rem 0.25rem 1.5rem;
+ }
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 8de6400acce54786254bc3162a978810518c02b7..6bc34ddd7f6edc211aac3acca23f1ff5e02cd993 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -416,12 +416,16 @@
"message1": "Vous avez dépassé de ",
"message2": "et manqué le badge ",
"button": "Zut alors"
- },
- "empty_value": {
- "title": "Oups !",
- "message1": "Vous n'avez pas de période de référence valide pour lancer ce duel.",
- "message2": "Réessayer dans quelques jours, peut être que nous aurons changé d'avis.",
- "button": "Je retourne au menu des duels"
+ }
+ },
+ "duel_empty_value_modal": {
+ "title": "Oups !",
+ "message1": "Vous n'avez pas de période de référence valide pour lancer ce duel.",
+ "message2": "Réessayer dans quelques jours, peut être que nous aurons changé d'avis.",
+ "button": "Je retourne au menu des duels",
+ "accessibility": {
+ "window_title": "Fenètre d'erreur",
+ "button_validate": "Retouner au menu des duels"
}
},
"quiz": {