diff --git a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx b/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx index 7d1d78058a595cdcdef3859a11f243cccbfa3d2a..8ef9aacba7488282d0f9f9b8668bdf5781414a4a 100644 --- a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx +++ b/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx @@ -15,6 +15,9 @@ import Lottie from 'react-lottie' import * as loadingData from 'assets/anims/bounceloading.json' import StyledButton from 'components/CommonKit/Button/StyledButton' import Modal from 'components/CommonKit/Modal/Modal' +import StyledIcon from 'components/CommonKit/Icon/StyledIcon' +import errorIcon from 'assets/icons/visu/data-nok.svg' +import successIcon from 'assets/icons/visu/data-ok.svg' const loadingOptions = { loop: true, @@ -92,10 +95,24 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({ </> ) : ( <> - <div className="klaunch-info-txt"> - {state === ERROR_EVENT - ? t('KONNECTORCONFIG.ERROR_DATA') - : t('KONNECTORCONFIG.SUCCESS')} + <div className="klaunch-info"> + {state === ERROR_EVENT ? ( + <div className="konnector-config"> + <StyledIcon icon={errorIcon} size={48} /> + <div className="kce-picto-txt text-20-bold"> + {t('KONNECTORCONFIG.ERROR_TXT')} + </div> + {t('KONNECTORCONFIG.ERROR_DATA')} + </div> + ) : ( + <div className="konnector-config"> + <StyledIcon icon={successIcon} size={48} /> + <div className="kcs-picto-txt text-20-bold"> + {t('KONNECTORCONFIG.SUCCESS_TXT')} + </div> + {t('KONNECTORCONFIG.SUCCESS_DATA')} + </div> + )} <StyledButton type="button" color="primary" onClick={handleClick}> <div>{t('KONNECTORCONFIG.OK')}</div> </StyledButton> diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss index 9d5a231effb08284bd46f677987f04a5dbff0837..76a1cfdd36d30f7be3394be308d0138fd44b942c 100644 --- a/src/styles/components/_konnector.scss +++ b/src/styles/components/_konnector.scss @@ -167,8 +167,23 @@ .klaunch-content-text-center { text-align: center; } - .klaunch-info-txt { + .klaunch-info { margin: 1.5rem; + .konnector-config { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + .kce-picto-txt { + color: $red-primary; + margin: 1.25rem; + } + .kcs-picto-txt { + color: $multi-color; + margin: 1.25rem; + } + } } }