Using Global CSS root variables across all files

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-green)', 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">

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-green)',
                             borderRadius: '6px',
                             boxShadow: '0 0 5px rgba(0,0,0,0.1)',
                           },

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,39 +123,39 @@ 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"
               >
                 {t('serialNumber')}
               </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>

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

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%',
                     }}

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';
 

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',
                       },
                     }}

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 />

src/style/app.module.css

@@ -31,6 +31,8 @@
   --tablerow-bg-color: #eff1f7;
   --row-background: var(--bs-white, white);
   --font-size-header: 16px;
+
+  --primary-border-green: 1px solid #31bb6b;
   --input-area-color: #f1f3f6;
   --date-picker-background: #f2f2f2;
   --grey-bg-color-dark: #707070;