From 78699b300c05c794b0b9590873baf080d6cce279 Mon Sep 17 00:00:00 2001
From: Mehul Aggarwal <88583647+AceHunterr@users.noreply.github.com>
Date: Sun, 29 Dec 2024 21:21:03 +0530
Subject: [PATCH] Using Global CSS root variables across all files (#3014)

* Using Global CSS root variables across all files

* Removed green color
---
 .../AddOn/core/AddOnEntry/AddOnEntry.tsx       | 13 +------------
 .../EventAttendance/EventAttendance.tsx        |  4 ++--
 .../EventRegistrant/EventRegistrants.tsx       | 18 +++++++++---------
 .../VolunteerGroupViewModal.tsx                |  2 +-
 src/screens/ManageTag/ManageTag.tsx            |  2 +-
 src/screens/OrgList/OrgList.tsx                |  1 -
 .../OrganizationTags/OrganizationTags.tsx      | 12 +++++-------
 src/screens/Requests/Requests.tsx              |  1 -
 src/style/app.module.css                       |  1 +
 9 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
index e2971fee14..0d317266d9 100644
--- a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
@@ -104,19 +104,8 @@ function addOnEntry({
     <>
       <Card
         data-testid="AddOnEntry"
-        style={{ border: '1px solid #31BB6B', borderRadius: '10px' }}
+        style={{ border: 'var(--primary-border-solid)', borderRadius: '10px' }}
       >
-        {/* {uninstalledOrgs.includes(currentOrg) && (
-          <Form.Check
-            type="switch"
-            id="custom-switch"
-            label={t('enable')}
-            className={styles.entrytoggle}
-            onChange={(): void => {}}
-            disabled={switchInProgress}
-            checked={enabled}
-          />
-        )} */}
         <Card.Body>
           <Card.Title style={{ fontWeight: '800' }}>{title}</Card.Title>
           <Card.Subtitle className="mb-2 text-muted author">
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
index 06b047a973..57ce357835 100644
--- a/src/components/EventManagement/EventAttendance/EventAttendance.tsx
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -312,12 +312,12 @@ function EventAttendance(): JSX.Element {
                       componentsProps={{
                         tooltip: {
                           sx: {
-                            backgroundColor: 'white',
+                            backgroundColor: 'var(--bs-white)',
                             fontSize: '2em',
                             maxHeight: '170px',
                             overflowY: 'scroll',
                             scrollbarColor: 'white',
-                            border: '1px solid green',
+                            border: 'var(--primary-border-solid)',
                             borderRadius: '6px',
                             boxShadow: '0 0 5px rgba(0,0,0,0.1)',
                           },
diff --git a/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx b/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx
index efcc2e91f7..d6488025ac 100644
--- a/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx
+++ b/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx
@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { Button, Table } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import style from '../../../style/app.module.css';
+import styles from '../../../style/app.module.css';
 import { useLazyQuery } from '@apollo/client';
 import { EVENT_ATTENDEES, EVENT_REGISTRANTS } from 'GraphQl/Queries/Queries';
 import { useParams } from 'react-router-dom';
@@ -112,7 +112,7 @@ function EventRegistrants(): JSX.Element {
         )}
         <Button
           data-testid="filter-button"
-          className={`border-1 mx-4 ${style.createButton} `}
+          className={`border-1 mx-4 ${styles.createButton} `}
         >
           <img
             src="/images/svg/organization.svg"
@@ -123,13 +123,13 @@ function EventRegistrants(): JSX.Element {
           {t('allRegistrants')}
         </Button>
       </div>
-      <TableContainer component={Paper} className={`mt-3 ${style.tableHead}`}>
+      <TableContainer component={Paper} className={`mt-3 ${styles.tableHead}`}>
         <Table aria-label={t('eventRegistrantsTable')} role="grid">
           <TableHead>
-            <TableRow role="row" className={`${style.rowBackground}`}>
+            <TableRow role="row" className={`${styles.rowBackground}`}>
               <TableCell
                 data-testid="table-header-serial"
-                className={style.tableHeader}
+                className={styles.tableHeader}
                 role="columnheader"
                 aria-sort="none"
               >
@@ -137,25 +137,25 @@ function EventRegistrants(): JSX.Element {
               </TableCell>
               <TableCell
                 data-testid="table-header-registrant"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('registrant')}
               </TableCell>
               <TableCell
                 data-testid="table-header-registered-at"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('registeredAt')}
               </TableCell>
               <TableCell
                 data-testid="table-header-created-at"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('createdAt')}
               </TableCell>
               <TableCell
                 data-testid="table-header-add-registrant"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('addRegistrant')}
               </TableCell>
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx
index 5fb090649f..bad1e40232 100644
--- a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx
@@ -185,7 +185,7 @@ const VolunteerGroupViewModal: React.FC<InterfaceVolunteerGroupViewModal> = ({
                 className="fw-lighter ms-2 mb-0"
                 style={{
                   fontSize: '0.8rem',
-                  color: 'grey',
+                  color: 'var(--search-button-border)',
                 }}
               >
                 Volunteers
diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
index 7eb6a3221d..38466f6f11 100644
--- a/src/screens/ManageTag/ManageTag.tsx
+++ b/src/screens/ManageTag/ManageTag.tsx
@@ -536,7 +536,7 @@ function ManageTag(): JSX.Element {
                   </div>
                   <hr
                     style={{
-                      borderColor: 'lightgray',
+                      borderColor: 'var(--grey-border-box-color)',
                       borderWidth: '2px',
                       width: '85%',
                     }}
diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
index f30bb8f1ea..2d53425d2e 100644
--- a/src/screens/OrgList/OrgList.tsx
+++ b/src/screens/OrgList/OrgList.tsx
@@ -27,7 +27,6 @@ import type {
   InterfaceUserType,
 } from 'utils/interfaces';
 import useLocalStorage from 'utils/useLocalstorage';
-// import styles from '../../style/app.module.css';
 import styles from '../../style/app.module.css';
 import OrganizationModal from './OrganizationModal';
 
diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
index c88ca7b821..558eb4eaf8 100644
--- a/src/screens/OrganizationTags/OrganizationTags.tsx
+++ b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -402,25 +402,23 @@ function OrganizationTags(): JSX.Element {
                       ),
                     }}
                     sx={{
-                      borderRadius: '20px',
-                      backgroundColor: '#EAEBEF',
+                      borderRadius: 'var(--table-head-radius)',
+                      backgroundColor: 'var(--grey-bg-color)',
                       '& .MuiDataGrid-row': {
-                        backgroundColor: '#eff1f7',
+                        backgroundColor: 'var(--tablerow-bg-color)',
                         '&:focus-within': {
-                          // outline: '2px solid #000',
                           outlineOffset: '-2px',
                         },
                       },
                       '& .MuiDataGrid-row:hover': {
-                        backgroundColor: '#EAEBEF',
+                        backgroundColor: 'var(--grey-bg-color)',
                         boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
                       },
                       '& .MuiDataGrid-row.Mui-hovered': {
-                        backgroundColor: '#EAEBEF',
+                        backgroundColor: 'var(--grey-bg-color)',
                         boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
                       },
                       '& .MuiDataGrid-cell:focus': {
-                        // outline: '2px solid #000',
                         outlineOffset: '-2px',
                       },
                     }}
diff --git a/src/screens/Requests/Requests.tsx b/src/screens/Requests/Requests.tsx
index b078b2cbc0..c998a225f9 100644
--- a/src/screens/Requests/Requests.tsx
+++ b/src/screens/Requests/Requests.tsx
@@ -258,7 +258,6 @@ const Requests = (): JSX.Element => {
               tabIndex={-1}
               className={`${styles.searchButton} `}
               data-testid="searchButton"
-              // style={{ marginTop: '9px' }}
               onClick={handleSearchByBtnClick}
             >
               <Search />
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 137ff0bd01..4a44aecfa2 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -34,6 +34,7 @@
   --input-area-color: #f1f3f6;
   --date-picker-background: #f2f2f2;
   --grey-bg-color-dark: #707070;
+  --primary-border-solid: 1px solid var(--dropdown-border-color);
 }
 .fonts {
   color: #707070;