From 8d39fd43ea49885578a1ad81475ede2352c56e3a Mon Sep 17 00:00:00 2001
From: Harshpreet Kaur <114172812+harshpreet14@users.noreply.github.com>
Date: Sun, 7 Jan 2024 19:47:45 +0530
Subject: [PATCH] Fix:Replacing Modal Buttons with Bootstrap buttons.

Changes Made:
-Replaced existing buttons in the OrgList component with Bootstrap buttons for a more consistent and modern UI.
-Removed unused CSS classes (greenredbtn, cancel, secondbtn) from OrgList.module.css.
-Added new CSS classes enableEverythingBtn and pluginStoreBtn for specific button styling.
-Implemented a new test to verify the functionality of the 'Go to Plugin Store' button.

Tests:
- Tested the individual file by running this command: `npm run test --watchAll=false  /src/screens/OrgList/OrgList.test.tsx`
- Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx`
---
 src/screens/OrgList/OrgList.module.css | 65 ++++++++------------------
 src/screens/OrgList/OrgList.test.tsx   |  1 +
 src/screens/OrgList/OrgList.tsx        |  8 ++--
 3 files changed, 24 insertions(+), 50 deletions(-)

diff --git a/src/screens/OrgList/OrgList.module.css b/src/screens/OrgList/OrgList.module.css
index e1f1729d18..61b9f4e11e 100644
--- a/src/screens/OrgList/OrgList.module.css
+++ b/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%;
diff --git a/src/screens/OrgList/OrgList.test.tsx b/src/screens/OrgList/OrgList.test.tsx
index 2bc33011af..070add228b 100644
--- a/src/screens/OrgList/OrgList.test.tsx
+++ b/src/screens/OrgList/OrgList.test.tsx
@@ -275,6 +275,7 @@ describe('Organisations Page testing as SuperAdmin', () => {
       ).toBeInTheDocument()
     );
     userEvent.click(screen.getByTestId(/enableEverythingForm/i));
+    userEvent.click(screen.getByTestId(/goToStore/i));
   });
 
   test('Testing create sample organization working properly', async () => {
diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
index da660c2950..06f38d69af 100644
--- a/src/screens/OrgList/OrgList.tsx
+++ b/src/screens/OrgList/OrgList.tsx
@@ -661,22 +661,22 @@ function orgList(): JSX.Element {
 
                 <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>