fix: Fundraising Campaigns Styles

PalisadoesFoundation · Jan 30, 2025 · 1b77948 · 1b77948
1 parent ae65ed7
commit 1b77948
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
@@ -24,23 +24,25 @@ import SortingButton from 'subComponents/SortingButton';
 import SearchBar from 'subComponents/SearchBar';
 
 const dataGridStyle = {
-  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
-    outline: 'none !important',
-  },
-  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
-    outline: 'none',
+  borderRadius: 'var(--table-head-radius)',
+  backgroundColor: 'var(--row-background)',
+  '& .MuiDataGrid-row': {
+    backgroundColor: 'var(--row-background)',
+    '&:focus-within': {
+      outline: 'none',
+    },
   },
   '& .MuiDataGrid-row:hover': {
-    backgroundColor: 'transparent',
+    backgroundColor: 'var(--row-background)',
   },
   '& .MuiDataGrid-row.Mui-hovered': {
-    backgroundColor: 'transparent',
+    backgroundColor: 'var(--row-background)',
   },
-  '& .MuiDataGrid-root': {
-    borderRadius: '0.5rem',
+  '& .MuiDataGrid-cell:focus': {
+    outline: 'none',
   },
-  '& .MuiDataGrid-main': {
-    borderRadius: '0.5rem',
+  '& .MuiDataGrid-cell:focus-within': {
+    outline: 'none',
   },
 };
 
@@ -185,7 +187,7 @@ const orgFundCampaign = (): JSX.Element => {
   const columns: GridColDef[] = [
     {
       field: 'id',
-      headerName: 'Sr. No.',
+      headerName: '#',
       flex: 1,
       minWidth: 100,
       align: 'center',
@@ -207,7 +209,7 @@ const orgFundCampaign = (): JSX.Element => {
       renderCell: (params: GridCellParams) => {
         return (
           <div
-            className="d-flex justify-content-center fw-bold"
+            className={styles.hyperlinkText}
             data-testid="campaignName"
             onClick={() => handleClick(params.row.campaign._id as string)}
           >

diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx
@@ -37,6 +37,9 @@ const dataGridStyle = {
   '& .MuiDataGrid-cell:focus': {
     outline: 'none',
   },
+  '& .MuiDataGrid-cell:focus-within': {
+    outline: 'none',
+  },
 };
 
 /**
@@ -179,7 +182,7 @@ const organizationFunds = (): JSX.Element => {
   const columns: GridColDef[] = [
     {
       field: 'id',
-      headerName: 'Sr. No.',
+      headerName: '#',
       flex: 1,
       minWidth: 100,
       align: 'center',
@@ -202,7 +205,7 @@ const organizationFunds = (): JSX.Element => {
       renderCell: (params: GridCellParams) => {
         return (
           <div
-            className={`d-flex justify-content-center fw-bold ${styles.subtleBlueGrey}`}
+            className={styles.hyperlinkText}
             data-testid="fundName"
             onClick={() => handleClick(params.row._id as string)}
           >

diff --git a/src/style/app.module.css b/src/style/app.module.css
@@ -91,6 +91,7 @@
   --primary-text-color: black;
   --rating-star-filled: #ff6d75;
   --rating-star-hover: #ff3d47;
+  --hyperlink-text-color: #1778f2;
 
   --input-text-color: #737373;
   --info-button-text: var(--davys-grey);
@@ -559,6 +560,16 @@
   text-decoration: underline;
 }
 
+.hyperlinkText {
+  color: var(--hyperlink-text-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.hyperlinkText:hover {
+  color: var(--subtle-blue-grey-hover);
+}
+
 .closeButton {
   color: var(--close-button-text);
   border: none;