Newer
Older
import { Button, IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import QuestionIcon from 'assets/icons/ico/questionMark.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import './noDataModal.scss'
interface NoDataModalProps {
open: boolean
handleCloseClick: () => void
}
const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
const { t } = useI18n()
return (
<Dialog
open={open}
onClose={handleCloseClick}
aria-labelledby="accessibility-title"
classes={{
root: 'modal-root',
paper: 'modal-paper',
}}
>
<div id="accessibility-title">
{t('consumption_visualizer.modal.window_title')}
</div>
<IconButton
aria-label={t('consumption_visualizer.modal.close')}
className="modal-paper-close-button"
onClick={handleCloseClick}
>
<Icon icon={CloseIcon} size={16} />
</IconButton>
<div className="nodata-modal">
<div className="question-mark">
<Icon icon={QuestionIcon} size={36} />
</div>
<div className="text-20-normal title">
{t('consumption_visualizer.why_no_data')}
</div>
<div className="text-16-normal">
{t('consumption_visualizer.dataModal.list_title')}
</div>
<ul>
<li>{t('consumption_visualizer.dataModal.item1')}</li>
<li>{t('consumption_visualizer.dataModal.item2')}</li>
<li>{t('consumption_visualizer.dataModal.item3')}</li>
<li>{t('consumption_visualizer.dataModal.item4')}</li>
</ul>
<Button
aria-label={t('ecogesture_info_modal.button_close')}
onClick={handleCloseClick}