@@ -184,7 +187,7 @@ const leftDrawerOrg = ({
name={name == 'Membership Requests' ? 'Requests' : name}
fill={
isActive === true
- ? 'var(--bs-white)'
+ ? 'var(--bs-black)'
: 'var(--bs-secondary)'
}
/>
diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
index d24773c02a..dca72b84e7 100644
--- a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
+++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next';
import { REMOVE_MEMBER_MUTATION } from 'GraphQl/Mutations/mutations';
import { useParams, Navigate } from 'react-router-dom';
import { errorHandler } from 'utils/errorHandler';
+import styles from '../../style/app.module.css';
+import { Close } from '@mui/icons-material';
/**
* Props for the OrgPeopleListCard component
@@ -74,20 +76,28 @@ function orgPeopleListCard(
{t('removeMember')}
{/* Button to close the modal */}
-
{t('removeMemberMsg')}
{/* Button to cancel the removal action */}
-
+
{tCommon('no')}
{/* Button to confirm the removal action */}
diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx
index 4c1f15106e..403ea5a923 100644
--- a/src/screens/OrganizationPeople/AddMember.tsx
+++ b/src/screens/OrganizationPeople/AddMember.tsx
@@ -1,5 +1,5 @@
import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
-import { Search } from '@mui/icons-material';
+import { Check, Close, Search } from '@mui/icons-material';
import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
@@ -30,13 +30,13 @@ import type {
InterfaceQueryOrganizationsListObject,
InterfaceQueryUserListItem,
} from 'utils/interfaces';
-import styles from './OrganizationPeople.module.css';
+import styles from '../../style/app.module.css';
import Avatar from 'components/Avatar/Avatar';
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
+const StyledTableCell = styled(TableCell)(() => ({
[`&.${tableCellClasses.head}`]: {
- backgroundColor: ['#31bb6b', '!important'],
- color: theme.palette.common.white,
+ backgroundColor: 'var(--table-head-bg, blue)',
+ color: 'var(--table-header-color, black)',
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
@@ -77,7 +77,7 @@ function AddMember(): JSX.Element {
setAddUserModalIsOpen(true);
}
- const toggleDialogModal = /* istanbul ignore next */ (): void =>
+ const toggleDialogModal = (): void =>
setAddUserModalIsOpen(!addUserModalisOpen);
const [createNewUserModalisOpen, setCreateNewUserModalIsOpen] =
@@ -89,7 +89,7 @@ function AddMember(): JSX.Element {
function closeCreateNewUserModal(): void {
setCreateNewUserModalIsOpen(false);
}
- const toggleCreateNewUserModal = /* istanbul ignore next */ (): void =>
+ const toggleCreateNewUserModal = (): void =>
setCreateNewUserModalIsOpen(!addUserModalisOpen);
const [addMember] = useMutation(ADD_MEMBER_MUTATION);
@@ -216,7 +216,6 @@ function AddMember(): JSX.Element {
closeCreateNewUserModal();
- /* istanbul ignore next */
setCreateUserVariables({
firstName: '',
lastName: '',
@@ -225,52 +224,40 @@ function AddMember(): JSX.Element {
confirmPassword: '',
});
} catch (error: unknown) {
- /* istanbul ignore next */
errorHandler(translateOrgPeople, error);
}
}
};
- /* istanbul ignore next */
const handleFirstName = (e: ChangeEvent): void => {
const firstName = e.target.value;
-
setCreateUserVariables({ ...createUserVariables, firstName });
};
- /* istanbul ignore next */
const handleLastName = (e: ChangeEvent): void => {
const lastName = e.target.value;
-
setCreateUserVariables({ ...createUserVariables, lastName });
};
- /* istanbul ignore next */
const handleEmailChange = (e: ChangeEvent): void => {
const email = e.target.value;
-
setCreateUserVariables({ ...createUserVariables, email });
};
- /* istanbul ignore next */
const handlePasswordChange = (e: ChangeEvent): void => {
const password = e.target.value;
-
setCreateUserVariables({ ...createUserVariables, password });
};
- /* istanbul ignore next */
const handleConfirmPasswordChange = (
e: ChangeEvent,
): void => {
const confirmPassword = e.target.value;
-
setCreateUserVariables({ ...createUserVariables, confirmPassword });
};
const handleUserModalSearchChange = (e: React.FormEvent): void => {
e.preventDefault();
- /* istanbul ignore next */
const [firstName, lastName] = userName.split(' ');
const newFilterData = {
@@ -322,6 +309,7 @@ function AddMember(): JSX.Element {
+ {/* Existing User Modal */}
{allUsersLoading ? (
- <>
-
- >
+
) : (
<>
@@ -356,9 +342,9 @@ function AddMember(): JSX.Element {
-
+
@@ -413,7 +399,7 @@ function AddMember(): JSX.Element {
Add
@@ -446,6 +433,7 @@ function AddMember(): JSX.Element {
+ {/* New User Modal */}
@@ -559,7 +546,12 @@ function AddMember(): JSX.Element {
variant="danger"
onClick={closeCreateNewUserModal}
data-testid="closeBtn"
+ style={{
+ backgroundColor: 'var(--delete-button-bg)',
+ color: 'var(--delete-button-color)',
+ }}
>
+
{translateOrgPeople('cancel')}
+
{translateOrgPeople('create')}
@@ -578,18 +575,3 @@ function AddMember(): JSX.Element {
}
export default AddMember;
-// | typeof ORGANIZATIONS_MEMBER_CONNECTION_LIST
-// | typeof ORGANIZATIONS_LIST
-// | typeof USER_LIST_FOR_TABLE
-// | typeof ADD_MEMBER_MUTATION;
-// {
-// id?: string;
-// orgId?: string;
-// orgid?: string;
-// fristNameContains?: string;
-// lastNameContains?: string;
-// firstName_contains?: string;
-// lastName_contains?: string;
-// id_not_in?: string[];
-// userid?: string;
-// };
diff --git a/src/screens/OrganizationPeople/OrganizationPeople.module.css b/src/screens/OrganizationPeople/OrganizationPeople.module.css
deleted file mode 100644
index 5ff4b0d297..0000000000
--- a/src/screens/OrganizationPeople/OrganizationPeople.module.css
+++ /dev/null
@@ -1,121 +0,0 @@
-@media screen and (max-width: 575.5px) {
- .mainpageright {
- width: 98%;
- }
-}
-.modalContent {
- width: 670px;
- max-width: 680px;
-}
-.dropdown {
- background-color: white;
- border: 1px solid #31bb6b;
- position: relative;
- display: inline-block;
- margin-top: 10px;
- margin-bottom: 10px;
- color: #31bb6b;
-}
-.input {
- flex: 1;
- position: relative;
-}
-
-.btnsContainer {
- display: flex;
- margin: 2.5rem 0 2.5rem 0;
-}
-
-.btnsContainer .btnsBlock {
- display: flex;
-}
-
-.btnsContainer .btnsBlock button {
- margin-left: 1rem;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.btnsContainer .input {
- flex: 1;
- position: relative;
-}
-
-/* input {
- outline: 1px solid var(--bs-gray-400);
-} */
-
-.btnsContainer .input button {
- width: 52px;
-}
-
-.inputField {
- margin-top: 10px;
- margin-bottom: 10px;
- background-color: white;
- box-shadow: 0 1px 1px #31bb6b;
-}
-.inputFieldModal {
- margin-bottom: 10px;
- background-color: white;
- box-shadow: 0 1px 1px #31bb6b;
-}
-.inputField > button {
- padding-top: 10px;
- padding-bottom: 10px;
-}
-.TableImage {
- object-fit: cover;
- width: 50px !important;
- height: 50px !important;
- border-radius: 100% !important;
-}
-.tableHead {
- background-color: #31bb6b !important;
- color: white;
- border-radius: 20px !important;
- padding: 20px;
- margin-top: 20px;
-}
-
-.tableHead :nth-first-child() {
- border-top-left-radius: 20px;
-}
-
-.mainpageright > hr {
- margin-top: 10px;
- width: 100%;
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: 20px;
-}
-.rowBackground {
- background-color: var(--bs-white);
-}
-.tableHeader {
- background-color: var(--bs-primary);
- color: var(--bs-white);
- font-size: 16px;
-}
-
-@-webkit-keyframes load8 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes load8 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
diff --git a/src/screens/OrganizationPeople/OrganizationPeople.tsx b/src/screens/OrganizationPeople/OrganizationPeople.tsx
index 1d230ed058..849135f120 100644
--- a/src/screens/OrganizationPeople/OrganizationPeople.tsx
+++ b/src/screens/OrganizationPeople/OrganizationPeople.tsx
@@ -1,5 +1,5 @@
import { useLazyQuery } from '@apollo/client';
-import { Search, Sort } from '@mui/icons-material';
+import { Delete, Search, Sort } from '@mui/icons-material';
import {
ORGANIZATIONS_LIST,
ORGANIZATIONS_MEMBER_CONNECTION_LIST,
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { toast } from 'react-toastify';
import AddMember from './AddMember';
-import styles from './OrganizationPeople.module.css';
+import styles from '../../style/app.module.css';
import { DataGrid } from '@mui/x-data-grid';
import type { GridColDef, GridCellParams } from '@mui/x-data-grid';
import { Stack } from '@mui/material';
@@ -214,7 +214,7 @@ function organizationPeople(): JSX.Element {