Fixes #1380 by simplifying the modal closure mechanism in the 'Manage Features' modal.

src/screens/OrgList/OrgList.module.css

@@ -12,6 +12,25 @@
   border: None;
 }
 
+.enableEverythingBtn {
+  width: 100%;
+  border: None;
+}
+
+.pluginStoreBtn {
+  width: 100%;
+  background-color: white;
+  color: #31bb6b;
+  border: 0.5px solid #31bb6b;
+}
+
+.pluginStoreBtn:hover,
+.pluginStoreBtn:focus {
+  background-color: #dfe1e2 !important;
+  color: #31bb6b !important;
+  border-color: #31bb6b !important;
+}
+
 .line::before {
   content: '';
   display: inline-block;
@@ -241,13 +260,6 @@ form > input {
   margin-bottom: 0.8rem;
 }
 
-.cancel > i {
-  margin-top: 5px;
-  transform: scale(1.2);
-  cursor: pointer;
-  color: #707070;
-}
-
 .modalbody {
   width: 50px;
 }
@@ -257,51 +269,12 @@ form > input {
   gap: 1rem;
 }
 
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #31bb6b;
-  width: 100%;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  width: 100%;
-}
-
 .itemCard .loadingWrapper .innerContainer .content h6[title='Location'] {
   display: block;
   width: 45%;
   height: 18px;
 }
 
-.secondbtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  border: 1px solid #d0cfcf;
-  box-shadow: 0 2px 2px #d0cfcf;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: white;
-  width: 100%;
-  font-size: 16px;
-  color: #31bb6b;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  width: 100%;
-}
-
 .itemCard .loadingWrapper .innerContainer .content h6 {
   display: block;
   width: 30%;

src/screens/OrgList/OrgList.test.tsx

@@ -214,7 +214,6 @@ describe('Organisations Page testing as SuperAdmin', () => {
         screen.queryByText(/Congratulation the Organization is created/i)
       ).toBeInTheDocument()
     );
-    userEvent.click(screen.getByTestId(/closeOrganizationModal/i));
   });
 
   test('Plugin Notification model should work properly', async () => {
@@ -275,7 +274,9 @@ describe('Organisations Page testing as SuperAdmin', () => {
         screen.queryByText(/Congratulation the Organization is created/i)
       ).toBeInTheDocument()
     );
+    await screen.findByTestId(/pluginNotificationHeader/i);
     userEvent.click(screen.getByTestId(/enableEverythingForm/i));
+    userEvent.click(screen.getByTestId(/goToStore/i));
   });
 
   test('Testing create sample organization working properly', async () => {
@@ -333,7 +334,6 @@ describe('Organisations Page testing as Admin', () => {
 
   test('Create organization modal should not be present in the page for Admin', async () => {
     localStorage.setItem('id', '123');
-
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -345,11 +345,10 @@ describe('Organisations Page testing as Admin', () => {
         </BrowserRouter>
       </MockedProvider>
     );
-
-    await wait();
-    expect(screen.queryByText(/Create Organization/i)).toBeNull();
+    await waitFor(() => {
+      expect(screen.queryByText(/Create Organization/i)).toBeNull();
+    });
   });
-
   test('Testing sort latest and oldest toggle', async () => {
     await act(async () => {
       render(

src/screens/OrgList/OrgList.tsx

@@ -643,53 +643,40 @@ function orgList(): JSX.Element {
         </Modal>{' '}
         {/* Plugin Notification Modal after Org is Created */}
         <Modal show={dialogModalisOpen} onHide={toggleDialogModal}>
+          <Modal.Header
+            className="bg-primary"
+            closeButton
+            data-testid="pluginNotificationHeader"
+          >
+            <Modal.Title className="text-white">
+              {t('manageFeatures')}
+            </Modal.Title>
+          </Modal.Header>
           <Modal.Body>
             <section id={styles.grid_wrapper}>
               <div>
-                <div className={styles.flexdir}>
-                  <p className={styles.titlemodal}>{t('manageFeatures')}</p>
-                  <a
-                    onClick={toggleDialogModal}
-                    className={styles.cancel}
-                    data-testid="closeOrganizationModal"
-                  >
-                    <i
-                      className="fa fa-times"
-                      style={{
-                        cursor: 'pointer',
-                      }}
-                    ></i>
-                  </a>
-                  <Button
-                    variant="secondary"
-                    onClick={toggleModal}
-                    data-testid="cancelOrganizationModal"
-                  >
-                    {t('cancel')}
-                  </Button>
-                </div>
                 <h4 className={styles.titlemodaldialog}>
                   {t('manageFeaturesInfo')}
                 </h4>
 
                 <div className={styles.pluginStoreBtnContainer}>
                   <Link
-                    className={styles.secondbtn}
+                    className={`btn btn-primary ${styles.pluginStoreBtn}`}
                     data-testid="goToStore"
                     to={`orgstore/id=${dialogRedirectOrgId}`}
                   >
                     {t('goToStore')}
                   </Link>
                   {/* </button> */}
-                  <button
+                  <Button
                     type="submit"
-                    className={styles.greenregbtn}
+                    className={styles.enableEverythingBtn}
                     onClick={closeDialogModal}
                     value="invite"
                     data-testid="enableEverythingForm"
                   >
                     {t('enableEverything')}
-                  </button>
+                  </Button>
                 </div>
               </div>
             </section>