modal after connection + ecogestures longname bold

src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx

@@ -83,6 +83,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
                 </div>
               </div>
               <div className="em-description text-16-normal-150">
+                <span className="long-name">{ecogesture.longName} </span>
                 {ecogesture.longDescription}
               </div>
             </div>

src/components/ContentComponents/Konnector/KonnectorLaunch.tsx

@@ -14,6 +14,7 @@ import { Trigger } from 'doctypes'
 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'
 
 const loadingOptions = {
   loop: true,
@@ -38,6 +39,7 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
   t,
 }: KonnectorLaunchProps) => {
   const [state, setState] = useState<string | null>(null)
+  const [openModal, setOpenModal] = useState(false)
 
   const callbackResponse = (_state: string) => {
     setState(_state)
@@ -47,6 +49,10 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
     handleKonnectorLaunch()
   }
 
+  const handleCloseClick = () => {
+    setOpenModal(false)
+  }
+
   useEffect(() => {
     let subscribed = true
     async function getData() {
@@ -62,6 +68,7 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
         konnectorJob.jobWatcher.on(SUCCESS_EVENT, () => {
           callbackResponse(SUCCESS_EVENT)
         })
+        setOpenModal(true)
       }
     }
     getData()
@@ -84,14 +91,16 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
         </>
       ) : (
         <>
-          <div className="klaunch-info-txt">
-            {state === ERROR_EVENT
-              ? t('KONNECTORCONFIG.ERROR_DATA')
-              : t('KONNECTORCONFIG.SUCCESS')}
-            <StyledButton type="button" color="primary" onClick={handleClick}>
-              <div>{t('KONNECTORCONFIG.OK')}</div>
-            </StyledButton>
-          </div>
+          <Modal open={openModal} handleCloseClick={handleCloseClick} border>
+            <div className="klaunch-info-txt">
+              {state === ERROR_EVENT
+                ? t('KONNECTORCONFIG.ERROR_DATA')
+                : t('KONNECTORCONFIG.SUCCESS')}
+              <StyledButton type="button" color="primary" onClick={handleClick}>
+                <div>{t('KONNECTORCONFIG.OK')}</div>
+              </StyledButton>
+            </div>
+          </Modal>
         </>
       )}
     </div>

src/styles/components/_ecogesture.scss

@@ -164,6 +164,9 @@
     }
     .em-description {
       padding-bottom: 2.5rem;
+      .long-name {
+        font-weight: bold;
+      }
     }
     .em-description-2 {
       padding-top: 2rem;

src/styles/components/_konnector.scss

@@ -168,11 +168,10 @@
     text-align: center;
   }
   .klaunch-info-txt {
-    margin-top: 1.5rem;
+    margin: 1.5rem;
   }
 }
 
-
 .state-icon {
   height: 22px;
   width: 22px;