fix: Funds & Campaign Pages Violate The Figma Style (#3478)

* fix: Funds & Campaign Pages Violate The Figma Style * fix: Fundraising Campaigns Styles --------- Co-authored-by: Peter Harrison <[email protected]>
PalisadoesFoundation · Jan 30, 2025 · 891ac62 · 891ac62
1 parent f63f181
commit 891ac62
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 32 deletions.
diff --git a/...docs/auto-docs/screens/OrganizationFunds/OrganizationFunds/functions/default.md b/...docs/auto-docs/screens/OrganizationFunds/OrganizationFunds/functions/default.md
@@ -6,7 +6,7 @@
 
 > **default**(): `Element`
 
-Defined in: [src/screens/OrganizationFunds/OrganizationFunds.tsx:103](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationFunds/OrganizationFunds.tsx#L103)
+Defined in: [src/screens/OrganizationFunds/OrganizationFunds.tsx:99](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationFunds/OrganizationFunds.tsx#L99)
 
 `organizationFunds` component displays a list of funds for a specific organization,
 allowing users to search, sort, view and edit funds.

diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
@@ -199,7 +199,7 @@ const CampaignModal: React.FC<InterfaceCampaignModal> = ({
           <Button
             variant="danger"
             onClick={hide}
-            className={styles.modalCloseBtn}
+            className={styles.closeButton}
             data-testid="campaignCloseBtn"
           >
             <i className="fa fa-times"></i>

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
@@ -20,26 +20,25 @@ import SortingButton from 'subComponents/SortingButton';
 import SearchBar from 'subComponents/SearchBar';
 
 const dataGridStyle = {
-  borderRadius: '20px',
-  backgroundColor: '#EAEBEF',
+  borderRadius: 'var(--table-head-radius)',
+  backgroundColor: 'var(--row-background)',
   '& .MuiDataGrid-row': {
-    backgroundColor: '#eff1f7',
+    backgroundColor: 'var(--row-background)',
     '&:focus-within': {
-      outline: '2px solid #000',
-      outlineOffset: '-2px',
+      outline: 'none',
     },
   },
   '& .MuiDataGrid-row:hover': {
-    backgroundColor: '#EAEBEF',
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'var(--row-background)',
   },
   '& .MuiDataGrid-row.Mui-hovered': {
-    backgroundColor: '#EAEBEF',
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'var(--row-background)',
   },
   '& .MuiDataGrid-cell:focus': {
-    outline: '2px solid #000',
-    outlineOffset: '-2px',
+    outline: 'none',
+  },
+  '& .MuiDataGrid-cell:focus-within': {
+    outline: 'none',
   },
 };
 
@@ -106,6 +105,9 @@ const organizationFunds = (): JSX.Element => {
   });
   const { t: tCommon } = useTranslation('common');
 
+  // Set the document title based on the translation
+  document.title = t('title');
+
   const { orgId } = useParams();
   const navigate = useNavigate();
 
@@ -180,7 +182,7 @@ const organizationFunds = (): JSX.Element => {
   const columns: GridColDef[] = [
     {
       field: 'id',
-      headerName: 'Sr. No.',
+      headerName: '#',
       flex: 1,
       minWidth: 100,
       align: 'center',
@@ -203,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)}
           >
@@ -335,6 +337,7 @@ const organizationFunds = (): JSX.Element => {
               }
               dataTestIdPrefix="filter"
               buttonLabel={tCommon('sort')}
+              className={styles.dropdown}
             />
             <Button
               variant="success"

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;
@@ -568,12 +579,10 @@
 .dropdown {
   background-color: var(--sortBtn-bg) !important;
   min-width: 150px;
-  border: 1px solid var(--dropdown-border-color);
+  border: 1px solid var(--dropdown-border);
   color: var(--dropdown-font-color) !important;
   position: relative;
   display: inline-block;
-  /* margin-top: 10px;
-  margin-bottom: 10px; */
 }
 
 .dropdown:is(
@@ -775,7 +784,7 @@
   box-shadow: var(--dorpdownItem-hover-shadow);
   background-color: var(--create-button-bg-color) !important;
   color: var(--create_button-text) !important;
-  border: 1px solid var(--create-button-border) !important;
+  border: 1px solid var(--createButton-border) !important;
 }
 
 .createButton:active {
@@ -1233,6 +1242,12 @@ hr {
   box-shadow: 0 0 0.1rem 0.2rem var(--light-blue);
 }
 
+.switch input:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: var(--checkbox-focus-border);
+}
+
 .pageNotFound {
   position: relative;
   bottom: 20px;