issue-2516-fixed

PalisadoesFoundation · Dec 23, 2024 · 8d0491c · 8d0491c
1 parent 9b5bd3e
commit 8d0491c
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 152 deletions.
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.module.css b/src/screens/OrganizationFunds/OrganizationFunds.module.css
@@ -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
@@ -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
@@ -613,3 +613,104 @@ hr {
     transform: rotate(360deg);
   }
 }
+
+.list_box {
+  height: auto;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.inputFields {
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.dropdowns {
+  border: 1px solid #31bb6b;
+  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;
+}
+
+.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;
+}
+
+.rowBackgrounds {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.tableHeaders {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}