From 3b681362d935e222373555c35959801c19d18aba Mon Sep 17 00:00:00 2001
From: Gurram Karthik <167804249+gurramkarthiknetha@users.noreply.github.com>
Date: Tue, 24 Dec 2024 14:46:43 +0530
Subject: [PATCH] fixed : #2516 Refactor CSS files in
 src/screens/OrganizationFunds (#2743)

* issue-2516-fixed

* test

* removed commented lines

* deleted file
---
 .../OrganizationFunds.module.css              | 142 ------------------
 .../OrganizationFunds/OrganizationFunds.tsx   |  20 +--
 src/style/app.module.css                      | 131 ++++++----------
 3 files changed, 56 insertions(+), 237 deletions(-)
 delete mode 100644 src/screens/OrganizationFunds/OrganizationFunds.module.css

diff --git a/src/screens/OrganizationFunds/OrganizationFunds.module.css b/src/screens/OrganizationFunds/OrganizationFunds.module.css
deleted file mode 100644
index aa9d89dfb1..0000000000
--- a/src/screens/OrganizationFunds/OrganizationFunds.module.css
+++ /dev/null
@@ -1,142 +0,0 @@
-.list_box {
-  height: auto;
-  overflow-y: auto;
-  width: 100%;
-}
-
-.inputField {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
-}
-
-.inputField > button {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.dropdown {
-  background-color: white;
-  border: 1px solid #31bb6b;
-  position: relative;
-  display: inline-block;
-  color: #31bb6b;
-}
-
-.fundName {
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.modalHeader {
-  border: none;
-  padding-bottom: 0;
-}
-
-.label {
-  color: var(--bs-emphasis-color);
-}
-
-.fundModal {
-  max-width: 80vw;
-  margin-top: 2vh;
-  margin-left: 13vw;
-}
-
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 32px;
-  width: 65%;
-  margin-bottom: 0px;
-}
-
-.noOutline input {
-  outline: none;
-}
-
-.modalCloseBtn {
-  width: 40px;
-  height: 40px;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  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%;
-}
-
-.manageBtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  width: 45%;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-}
-
-.btnsContainer {
-  display: flex;
-  margin: 2rem 0 2.5rem 0;
-}
-
-.btnsContainer .input {
-  flex: 1;
-  min-width: 18rem;
-  position: relative;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-
-.mainpageright > hr {
-  margin-top: 20px;
-  width: 100%;
-  margin-left: -15px;
-  margin-right: -15px;
-  margin-bottom: 20px;
-}
-
-.rowBackground {
-  background-color: var(--bs-white);
-  max-height: 120px;
-}
-
-.tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx
index 2c352c1693..ec9409fbe0 100644
--- a/src/screens/OrganizationFunds/OrganizationFunds.tsx
+++ b/src/screens/OrganizationFunds/OrganizationFunds.tsx
@@ -160,7 +160,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return <div>{params.row.id}</div>;
@@ -174,7 +174,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div
@@ -195,7 +195,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return params.row.creator.firstName + ' ' + params.row.creator.lastName;
       },
@@ -207,7 +207,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       flex: 2,
       renderCell: (params: GridCellParams) => {
         return (
@@ -225,7 +225,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return params.row.isArchived ? 'Archived' : 'Active';
       },
@@ -238,7 +238,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return (
           <>
@@ -266,7 +266,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return (
           <Button
@@ -292,7 +292,7 @@ const organizationFunds = (): JSX.Element => {
             placeholder={tCommon('searchByName')}
             autoComplete="off"
             required
-            className={styles.inputField}
+            className={styles.inputFields}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             data-testid="searchByName"
@@ -312,7 +312,7 @@ const organizationFunds = (): JSX.Element => {
               <Dropdown.Toggle
                 variant="success"
                 id="dropdown-basic"
-                className={styles.dropdown}
+                className={styles.dropdowns}
                 data-testid="filter"
               >
                 <Sort className={'me-1'} />
@@ -362,7 +362,7 @@ const organizationFunds = (): JSX.Element => {
           ),
         }}
         sx={dataGridStyle}
-        getRowClassName={() => `${styles.rowBackground}`}
+        getRowClassName={() => `${styles.rowBackgrounds}`}
         autoHeight
         rowHeight={65}
         rows={funds.map((fund, index) => ({
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 3d161b52b1..ae6daace2f 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -434,11 +434,6 @@
   visibility: visible;
 }
 
-.tagsBreadCrumbs {
-  color: var(--bs-gray);
-  cursor: pointer;
-}
-
 .manageTagScrollableDiv {
   scrollbar-width: thin;
   scrollbar-color: var(--bs-gray-400) var(--bs-white);
@@ -462,15 +457,6 @@
   position: sticky;
 }
 
-/* .checkboxButton{
-  background-color: transparent;
-}
-
-.checkboxButton:checked{
-  background-color: var(--subtle-blue-grey);
-  color:white
-} */
-
 input[type='checkbox']:checked + label {
   background-color: var(--subtle-blue-grey) !important;
 }
@@ -1015,67 +1001,41 @@ hr {
   }
 }
 
-.btnsContainer .btnsBlock button {
-  margin-left: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.list_box {
+  height: auto;
+  overflow-y: auto;
+  width: 100%;
 }
 
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
+.inputFields {
+  box-shadow: 0 1px 1px #31bb6b;
 }
 
-.btnsContainer .input button {
-  width: 52px;
+.fundName {
+  font-weight: 600;
+  cursor: pointer;
 }
 
-@media (max-width: 1020px) {
-  .btnsContainer {
-    flex-direction: column;
-    margin: 1.5rem 0;
-  }
-
-  .btnsContainer .btnsBlock {
-    margin: 1.5rem 0 0 0;
-    justify-content: space-between;
-  }
-
-  .btnsContainer .btnsBlock button {
-    margin: 0;
-  }
-
-  .btnsContainer .btnsBlock div button {
-    margin-right: 1.5rem;
-  }
+.modalHeader {
+  border: none;
+  padding-bottom: 0;
 }
 
-/* For mobile devices  */
-
-@media (max-width: 520px) {
-  .btnsContainer {
-    margin-bottom: 0;
-  }
-
-  .btnsContainer .btnsBlock {
-    display: block;
-    margin-top: 1rem;
-    margin-right: 0;
-  }
-
-  .btnsContainer .btnsBlock div {
-    flex: 1;
-  }
+.label {
+  color: var(--bs-emphasis-color);
+}
 
-  .btnsContainer .btnsBlock div[title='Sort organizations'] {
-    margin-right: 0.5rem;
-  }
+.fundModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
 
-  .btnsContainer .btnsBlock button {
-    margin-bottom: 1rem;
-    margin-right: 0;
-    width: 100%;
-  }
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .errorMessage {
@@ -1086,7 +1046,7 @@ hr {
   flex-direction: column;
 }
 
-.tableHeader {
+.tableHeaders {
   background-color: var(--bs-primary-text-emphasis);
   color: var(--bs-white);
   font-size: 1rem;
@@ -1107,10 +1067,6 @@ hr {
   }
 }
 
-.subTagsLink i {
-  visibility: hidden;
-}
-
 .tagsBreadCrumbs {
   color: var(--bs-gray);
   cursor: pointer;
@@ -1176,6 +1132,25 @@ input[type='radio']:checked + label {
   transition:
     transform 0.2s,
     box-shadow 0.2s;
+  width: 100%;
+}
+
+.manageBtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  width: 45%;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
 }
 
 .removeFilterIcon {
@@ -1222,18 +1197,10 @@ input[type='radio']:checked + label {
   opacity: 1;
 }
 
-.inputField {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background-color: white;
+.inputFields {
   box-shadow: 0 1px 1px var(--brand-primary);
 }
 
-.inputField > button {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
 .dropdowns {
   background-color: white;
   border: 1px solid #31bb6b;
@@ -1248,12 +1215,6 @@ input[type='radio']:checked + label {
   max-height: 120px;
 }
 
-.tableHeaders {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
-
 .chipIcon {
   height: 0.9rem !important;
 }