From 6280b0c8503b7565185beee3b5c4adb8c96cc3f9 Mon Sep 17 00:00:00 2001
From: Ankit varsheny <lyfflame45@gmail.com>
Date: Wed, 6 Nov 2024 00:29:13 +0530
Subject: [PATCH] remove hard coded colors

---
 .../OrgPeopleListCard/OrgPeopleListCard.tsx   | 18 +++-
 src/screens/OrganizationPeople/AddMember.tsx  | 93 ++++---------------
 src/style/app.module.css                      | 89 ++++++++++--------
 3 files changed, 82 insertions(+), 118 deletions(-)

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(
         <Modal.Header>
           <h5>{t('removeMember')}</h5>
           {/* Button to close the modal */}
-          <Button variant="danger" onClick={props.toggleRemoveModal}>
-            <i className="fa fa-times"></i>
+          <Button
+            variant="danger"
+            onClick={props.toggleRemoveModal}
+            className={styles.closeButton}
+          >
+            <Close className={styles.closeButton} />
           </Button>
         </Modal.Header>
         <Modal.Body>{t('removeMemberMsg')}</Modal.Body>
         <Modal.Footer>
           {/* Button to cancel the removal action */}
-          <Button variant="danger" onClick={props.toggleRemoveModal}>
+          <Button
+            variant="danger"
+            onClick={props.toggleRemoveModal}
+            className={styles.closeButton}
+          >
             {tCommon('no')}
           </Button>
           {/* Button to confirm the removal action */}
           <Button
             type="button"
-            className="btn btn-success"
+            className={styles.yesButton}
             onClick={removeMember}
             data-testid="removeMemberBtn"
           >
diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx
index 3085721342..59b4887fb3 100644
--- a/src/screens/OrganizationPeople/AddMember.tsx
+++ b/src/screens/OrganizationPeople/AddMember.tsx
@@ -35,8 +35,8 @@ import Avatar from 'components/Avatar/Avatar';
 
 const StyledTableCell = styled(TableCell)(() => ({
   [`&.${tableCellClasses.head}`]: {
-    backgroundColor: ['#EAEBEF', '!important'],
-    color: '#555555',
+    backgroundColor: 'var(--table-head-bg, blue)',
+    color: 'var(--table-header-color, black)',
   },
   [`&.${tableCellClasses.body}`]: {
     fontSize: 14,
@@ -49,15 +49,6 @@ const StyledTableRow = styled(TableRow)(() => ({
   },
 }));
 
-/**
- * AddMember component is used to add new members to the organization by selecting from
- * the existing users or creating a new user.
- * It uses the following queries and mutations:
- *  ORGANIZATIONS_LIST,
- *  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
- *  USERS_CONNECTION_LIST,
- *  ADD_MEMBER_MUTATION,SIGNUP_MUTATION.
- */
 function AddMember(): JSX.Element {
   const { t: translateOrgPeople } = useTranslation('translation', {
     keyPrefix: 'organizationPeople',
@@ -77,7 +68,7 @@ function AddMember(): JSX.Element {
     setAddUserModalIsOpen(true);
   }
 
-  const toggleDialogModal = /* istanbul ignore next */ (): void =>
+  const toggleDialogModal = (): void =>
     setAddUserModalIsOpen(!addUserModalisOpen);
 
   const [createNewUserModalisOpen, setCreateNewUserModalIsOpen] =
@@ -89,7 +80,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 +207,6 @@ function AddMember(): JSX.Element {
 
         closeCreateNewUserModal();
 
-        /* istanbul ignore next */
         setCreateUserVariables({
           firstName: '',
           lastName: '',
@@ -225,52 +215,40 @@ function AddMember(): JSX.Element {
           confirmPassword: '',
         });
       } catch (error: unknown) {
-        /* istanbul ignore next */
         errorHandler(translateOrgPeople, error);
       }
     }
   };
 
-  /* istanbul ignore next */
   const handleFirstName = (e: ChangeEvent<HTMLInputElement>): void => {
     const firstName = e.target.value;
-
     setCreateUserVariables({ ...createUserVariables, firstName });
   };
 
-  /* istanbul ignore next */
   const handleLastName = (e: ChangeEvent<HTMLInputElement>): void => {
     const lastName = e.target.value;
-
     setCreateUserVariables({ ...createUserVariables, lastName });
   };
 
-  /* istanbul ignore next */
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const email = e.target.value;
-
     setCreateUserVariables({ ...createUserVariables, email });
   };
 
-  /* istanbul ignore next */
   const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const password = e.target.value;
-
     setCreateUserVariables({ ...createUserVariables, password });
   };
 
-  /* istanbul ignore next */
   const handleConfirmPasswordChange = (
     e: ChangeEvent<HTMLInputElement>,
   ): 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 +300,7 @@ function AddMember(): JSX.Element {
         </Dropdown.Menu>
       </Dropdown>
 
+      {/* Existing User Modal */}
       <Modal
         data-testid="addExistingUserModal"
         show={addUserModalisOpen}
@@ -333,9 +312,7 @@ function AddMember(): JSX.Element {
         </Modal.Header>
         <Modal.Body>
           {allUsersLoading ? (
-            <>
-              <Loader />
-            </>
+            <Loader />
           ) : (
             <>
               <div className={styles.input}>
@@ -356,14 +333,9 @@ function AddMember(): JSX.Element {
                   <Button
                     type="submit"
                     data-testid="submitBtn"
-                    className={`position-absolute z-10 bottom-10 end-0  d-flex justify-content-center align-items-center `}
-                    style={{
-                      marginBottom: '10px',
-                      backgroundColor: '#A8C7FA',
-                      border: '1px #555555 solid',
-                    }}
+                    className={styles.searchButton}
                   >
-                    <Search style={{ color: '#555555' }} />
+                    <Search className={styles.searchIcon} />
                   </Button>
                 </Form>
               </div>
@@ -436,10 +408,7 @@ function AddMember(): JSX.Element {
                                   createMember(userDetails.user._id);
                                 }}
                                 data-testid="addBtn"
-                                style={{
-                                  backgroundColor: '#A8C7FA',
-                                  border: '#555555 solid 1px',
-                                }}
+                                className={styles.searchButton}
                               >
                                 Add
                               </Button>
@@ -455,6 +424,7 @@ function AddMember(): JSX.Element {
         </Modal.Body>
       </Modal>
 
+      {/* New User Modal */}
       <Modal
         data-testid="addNewUserModal"
         show={createNewUserModalisOpen}
@@ -556,8 +526,7 @@ function AddMember(): JSX.Element {
               <Form.Control
                 className={styles.borderNone}
                 value={organizationData?.organizations[0]?.name}
-                onChange={handlePasswordChange}
-                data-testid=""
+                data-testid="organizationName"
                 disabled
               />
             </InputGroup>
@@ -569,17 +538,11 @@ function AddMember(): JSX.Element {
               onClick={closeCreateNewUserModal}
               data-testid="closeBtn"
               style={{
-                backgroundColor: '#F8D6DC',
-                color: '#555555',
+                backgroundColor: 'var(--delete-button-bg)',
+                color: 'var(--delete-button-color)',
               }}
             >
-              <Close
-                style={{
-                  color: '#FF4D4F',
-                  marginRight: '5px',
-                }}
-              />
-
+              <Close className={styles.closeButton} />
               {translateOrgPeople('cancel')}
             </Button>
             <Button
@@ -588,18 +551,11 @@ function AddMember(): JSX.Element {
               onClick={handleCreateUser}
               data-testid="createBtn"
               style={{
-                backgroundColor: '#A8C7FA',
-                border: '#555555 solid 1px',
-                marginLeft: '10px',
-                color: '#555555',
+                backgroundColor: 'var(--search-button-bg)',
+                border: '1px solid var(--dropdown-border-color)',
               }}
             >
-              <Check
-                style={{
-                  color: '#555555', // Green color for the tick icon
-                  marginRight: '5px',
-                }}
-              />
+              <Check className={styles.searchIcon} />
               {translateOrgPeople('create')}
             </Button>
           </div>
@@ -610,18 +566,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/style/app.module.css b/src/style/app.module.css
index 6628b3ee9c..3196965193 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1,26 +1,45 @@
 :root {
   --dropdown-border-color: #555555;
   --dropdown-text-color: #555555;
-}
-
-@media screen and (max-width: 575.5px) {
-  .mainpageright {
-    width: 98%;
-  }
+  --subtle-blue-grey: #7c9beb;
+  --subtle-blue-grey-hover: #5f7e91;
+  --modal-width: 670px;
+  --modal-max-width: 680px;
+  --input-shadow-color: #dddddd;
+  --delete-button-bg: #f8d6dc;
+  --delete-button-color: #ff4d4f;
+  --search-button-bg: #a8c7fa;
+  --search-button-border: #555555;
+  --table-image-size: 50px;
+  --table-head-bg: var(
+    --bs-primary,
+    blue
+  ); /* Assuming var(--bs-primary) is defined elsewhere */
+  --table-head-color: white;
+  --table-header-color: var(--bs-greyish-black, black);
+  --table-head-radius: 20px;
+  --row-background: var(--bs-white, white);
+  --font-size-header: 16px;
+}
+
+.closeButton {
+  color: var(--delete-button-color);
+  margin-right: 5px;
+  background-color: var(--delete-button-bg);
 }
 
 .modalContent {
-  width: 670px;
-  max-width: 680px;
+  width: var(--modal-width);
+  max-width: var(--modal-max-width);
 }
 
 .subtleBlueGrey {
-  color: #7c9beb;
+  color: var(--subtle-blue-grey);
   text-decoration: none;
 }
 
 .subtleBlueGrey:hover {
-  color: #5f7e91;
+  color: var(--subtle-blue-grey-hover);
   text-decoration: underline;
 }
 
@@ -42,21 +61,17 @@
 
 .dropdownItem {
   background-color: white !important;
-  color: #555555 !important;
+  color: var(--dropdown-text-color) !important;
   border: none !important;
 }
 
-/* Override Bootstrap's hover, focus, and active styles for dropdown items */
 .dropdownItem:hover,
 .dropdownItem:focus,
 .dropdownItem:active {
   background-color: white !important;
-  /* Keep the background white */
-  color: #555555 !important;
-  /* Keep the text color as default */
+  color: var(--dropdown-text-color) !important;
   outline: none !important;
   box-shadow: none !important;
-  /* Remove any shadow */
 }
 
 .input {
@@ -66,7 +81,7 @@
 
 .btnsContainer {
   display: flex;
-  margin: 2.5rem 0 2.5rem 0;
+  margin: 2.5rem 0;
 }
 
 .btnsContainer .btnsBlock {
@@ -90,8 +105,8 @@
 }
 
 .deleteButton {
-  background-color: #f8d6dc;
-  color: #ff4d4f;
+  background-color: var(--delete-button-bg);
+  color: var(--delete-button-color);
   border: none;
   padding: 5px 20px;
   display: flex;
@@ -117,13 +132,13 @@
   margin-top: 10px;
   margin-bottom: 10px;
   background-color: white;
-  box-shadow: 0 1px 1px #dddddd;
+  box-shadow: 0 1px 1px var(--input-shadow-color);
 }
 
 .inputFieldModal {
   margin-bottom: 10px;
   background-color: white;
-  box-shadow: 0 1px 1px #dddddd;
+  box-shadow: 0 1px 1px var(--input-shadow-color);
 }
 
 .inputField > button {
@@ -133,33 +148,33 @@
 
 .searchButton {
   margin-bottom: 10px;
-  background-color: #a8c7fa;
-  border-color: #555555;
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+}
+.yesButton {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
 }
 
 .searchIcon {
-  color: #555555;
+  color: var(--dropdown-text-color);
 }
 
 .TableImage {
   object-fit: cover;
   margin-top: 15px !important;
-  width: 50px !important;
-  height: 50px !important;
+  width: var(--table-image-size) !important;
+  height: var(--table-image-size) !important;
   border-radius: 100% !important;
 }
 
 .tableHead {
-  color: white;
-  border-radius: 20px !important;
+  color: var(--table-head-color);
+  border-radius: var(--table-head-radius) !important;
   padding: 20px;
   margin-top: 20px;
 }
 
-.tableHead :nth-first-child() {
-  border-top-left-radius: 20px;
-}
-
 .mainpageright > hr {
   margin-top: 10px;
   width: 100%;
@@ -169,13 +184,13 @@
 }
 
 .rowBackground {
-  background-color: var(--bs-white);
+  background-color: var(--row-background);
 }
 
 .tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-greyish-black);
-  font-size: 16px;
+  background-color: var(--table-head-bg);
+  color: var(--table-header-color);
+  font-size: var(--font-size-header);
 }
 
 @-webkit-keyframes load8 {
@@ -183,7 +198,6 @@
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
-
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
@@ -195,7 +209,6 @@
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
-
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);