picto modal konnector

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>

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;
+      }
+    }
   }
 }