fixed #2505 :Refactor CSS Structure for EventVolunteers: Improved Maintainability and UI Consistency

src/components/OrganizationScreen/OrganizationScreen.test.tsx

@@ -85,6 +85,7 @@ describe('Testing OrganizationScreen', () => {
     const openButton = screen.getByTestId('openMenu');
     fireEvent.click(openButton);
 
+    // Check for expand class after opening
     expect(screen.getByTestId('mainpageright')).toHaveClass(styles.contract);
   });
 

src/screens/EventVolunteers/Requests/Requests.tsx

@@ -13,7 +13,7 @@ import {
   type GridColDef,
 } from '@mui/x-data-grid';
 import Avatar from 'components/Avatar/Avatar';
-import styles from '../EventVolunteers.module.css';
+import styles from '../../../style/app.module.css';
 import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
 import type { InterfaceVolunteerMembership } from 'utils/interfaces';
 import dayjs from 'dayjs';
@@ -154,7 +154,7 @@ function requests(): JSX.Element {
       align: 'center',
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return params.row.id;
       },
@@ -167,7 +167,7 @@ function requests(): JSX.Element {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         const { firstName, lastName, image } = params.row.volunteer.user;
         return (
@@ -180,14 +180,14 @@ function requests(): JSX.Element {
                 src={image}
                 alt="volunteer"
                 data-testid={`volunteer_image`}
-                className={styles.TableImage}
+                className={styles.TableImages}
               />
             ) : (
               <div className={styles.avatarContainer}>
                 <Avatar
                   key="volunteer_avatar"
                   containerStyle={styles.imageContainer}
-                  avatarStyle={styles.TableImage}
+                  avatarStyle={styles.TableImages}
                   name={firstName + ' ' + lastName}
                   alt={firstName + ' ' + lastName}
                 />
@@ -205,7 +205,7 @@ function requests(): JSX.Element {
       minWidth: 150,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return dayjs(params.row.createdAt).format('DD/MM/YYYY');
@@ -219,7 +219,7 @@ function requests(): JSX.Element {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaders}`,
       renderCell: (params: GridCellParams) => {
         return (
           <>
@@ -251,7 +251,7 @@ function requests(): JSX.Element {
   return (
     <div>
       {/* Header with search, filter  and Create Button */}
-      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+      <div className={`${styles.btnsContainer} btncon gap-4 flex-wrap`}>
         <div className={`${styles.input} mb-1`}>
           <Form.Control
             type="name"
@@ -260,7 +260,7 @@ function requests(): JSX.Element {
             })}
             autoComplete="off"
             required
-            className={styles.inputField}
+            className={styles.inputFields}
             value={searchValue}
             onChange={(e) => {
               setSearchValue(e.target.value);
@@ -282,7 +282,7 @@ function requests(): JSX.Element {
             <Dropdown>
               <Dropdown.Toggle
                 variant="success"
-                className={styles.dropdown}
+                className={styles.dropdowns}
                 data-testid="sort"
               >
                 <Sort className={'me-1'} />
@@ -316,7 +316,7 @@ function requests(): JSX.Element {
           hideFooter={true}
           getRowId={(row) => row._id}
           sx={dataGridStyle}
-          getRowClassName={() => `${styles.rowBackground}`}
+          getRowClassName={() => `${styles.rowBackgrounds}`}
           autoHeight
           rowHeight={65}
           rows={requests.map((request, index) => ({

src/screens/EventVolunteers/VolunteerContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Navigate, useParams } from 'react-router-dom';
-import styles from './EventVolunteers.module.css';
+import styles from '../../style/app.module.css';
 import { HiUserGroup, HiUser } from 'react-icons/hi2';
 import Volunteers from './Volunteers/Volunteers';
 import VolunteerGroups from './VolunteerGroups/VolunteerGroups';

src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.tsx

@@ -1,5 +1,5 @@
 import { Button, Modal } from 'react-bootstrap';
-import styles from '../EventVolunteers.module.css';
+import styles from '../../../style/app.module.css';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@apollo/client';

src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.tsx

@@ -5,7 +5,7 @@ import type {
   InterfaceUserInfo,
   InterfaceVolunteerGroupInfo,
 } from 'utils/interfaces';
-import styles from '../EventVolunteers.module.css';
+import styles from '../../../style/app.module.css';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from '@apollo/client';