updated Tags section

PalisadoesFoundation · Jan 6, 2025 · 8090392 · 8090392
1 parent 7a3b7d0
commit 8090392
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 133 deletions.
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/src/components/AddPeopleToTag/AddPeopleToTag.module.css
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx
@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import { useParams } from 'react-router-dom';
 import type { InterfaceQueryUserTagsMembersToAssignTo } from 'utils/interfaces';
-import styles from './AddPeopleToTag.module.css';
+import styles from '../../style/app.module.css';
 import type { InterfaceTagUsersToAssignToQuery } from 'utils/organizationTagsUtils';
 import {
   TAGS_QUERY_DATA_CHUNK_SIZE,
@@ -244,7 +244,10 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
             data-testid={
               isToBeAssigned ? 'deselectMemberBtn' : 'selectMemberBtn'
             }
-            variant={!isToBeAssigned ? 'primary' : 'danger'}
+            // variant={!isToBeAssigned ? 'primary' : 'danger'}
+            className={
+              !isToBeAssigned ? styles.editButton : `btn btn-danger btn-sm`
+            }
           >
             {isToBeAssigned ? 'x' : '+'}
           </Button>
@@ -263,7 +266,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={`bg-primary ${styles.modalHeader}`}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -301,7 +304,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                 <Form.Control
                   type="text"
                   id="firstName"
-                  className="bg-light"
+                  className={`bg-light ${styles.inputField}`}
                   placeholder={tCommon('firstName')}
                   onChange={(e) =>
                     setMemberToAssignToSearchFirstName(e.target.value.trim())
@@ -315,7 +318,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                 <Form.Control
                   type="text"
                   id="lastName"
-                  className="bg-light"
+                  className={`bg-light ${styles.inputField}`}
                   placeholder={tCommon('lastName')}
                   onChange={(e) =>
                     setMemberToAssignToSearchLastName(e.target.value.trim())
@@ -396,16 +399,17 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
           <Modal.Footer>
             <Button
               onClick={hideAddPeopleToTagModal}
-              variant="outline-secondary"
+              variant="outline-danger"
               data-testid="closeAddPeopleToTagModal"
+              className={styles.removeButton}
             >
               {tCommon('cancel')}
             </Button>
             <Button
               type="submit"
               disabled={addPeopleToTagLoading}
-              variant="primary"
               data-testid="assignPeopleBtn"
+              className={styles.addButton}
             >
               {t('assign')}
             </Button>

diff --git a/src/components/TagActions/TagActions.module.css b/src/components/TagActions/TagActions.module.css
diff --git a/src/components/TagActions/TagActions.tsx b/src/components/TagActions/TagActions.tsx
@@ -7,7 +7,7 @@ import type {
   InterfaceQueryOrganizationUserTags,
   InterfaceTagData,
 } from 'utils/interfaces';
-import styles from './TagActions.module.css';
+import styles from '../../style/app.module.css';
 import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
 import {
   ASSIGN_TO_TAGS,
@@ -270,7 +270,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.modalHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -312,7 +312,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
               <Form.Control
                 type="text"
                 id="userName"
-                className="bg-light"
+                className={styles.inputField}
                 placeholder={tCommon('searchByName')}
                 onChange={(e) => setTagSearchName(e.target.value.trim())}
                 data-testid="searchByName"
@@ -388,13 +388,18 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
 
           <Modal.Footer>
             <Button
-              variant="secondary"
+              className={`btn btn-danger ${styles.removeButton}`}
               onClick={(): void => hideTagActionsModal()}
               data-testid="closeTagActionsModalBtn"
             >
               {tCommon('cancel')}
             </Button>
-            <Button type="submit" value="add" data-testid="tagActionSubmitBtn">
+            <Button
+              type="submit"
+              value="add"
+              data-testid="tagActionSubmitBtn"
+              className={`btn ${styles.addButton}`}
+            >
               {tagActionType === 'assignToTags' ? t('assign') : t('remove')}
             </Button>
           </Modal.Footer>

diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx
@@ -7,7 +7,7 @@ import type {
 } from 'utils/interfaces';
 import type { InterfaceOrganizationSubTagsQuery } from 'utils/organizationTagsUtils';
 import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
-import styles from './TagActions.module.css';
+import styles from '../../style/app.module.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 import { WarningAmberRounded } from '@mui/icons-material';

diff --git a/src/screens/ManageTag/EditUserTagModal.tsx b/src/screens/ManageTag/EditUserTagModal.tsx
@@ -2,6 +2,7 @@ import type { TFunction } from 'i18next';
 import type { FormEvent } from 'react';
 import React from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
+import styles from '../../style/app.module.css';
 
 /**
  * Edit UserTag Modal component for the Manage Tag screen.
@@ -37,7 +38,7 @@ const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.modalHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -56,7 +57,7 @@ const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
             <Form.Control
               type="text"
               id="tagName"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('tagNamePlaceholder')}
               data-testid="tagNameInput"
               autoComplete="off"
@@ -73,10 +74,16 @@ const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
               variant="secondary"
               onClick={(): void => hideEditUserTagModal()}
               data-testid="closeEditTagModalBtn"
+              className={styles.removeButton}
             >
               {tCommon('cancel')}
             </Button>
-            <Button type="submit" value="invite" data-testid="editTagSubmitBtn">
+            <Button
+              type="submit"
+              value="invite"
+              data-testid="editTagSubmitBtn"
+              className={styles.addButton}
+            >
               {tCommon('edit')}
             </Button>
           </Modal.Footer>

diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
@@ -292,7 +292,7 @@ function ManageTag(): JSX.Element {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return <div>{params.row.id}</div>;
@@ -304,7 +304,7 @@ function ManageTag(): JSX.Element {
       flex: 2,
       minWidth: 100,
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div data-testid="memberName">
@@ -321,7 +321,7 @@ function ManageTag(): JSX.Element {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div>
@@ -330,7 +330,9 @@ function ManageTag(): JSX.Element {
               state={{ id: params.row._id }}
               data-testid="viewProfileBtn"
             >
-              <div className="btn btn-sm btn-primary me-3">
+              <div
+                className={`btn btn-sm btn-primary me-3 ${styles.editButton}`}
+              >
                 {t('viewProfile')}
               </div>
             </Link>
@@ -519,7 +521,7 @@ function ManageTag(): JSX.Element {
                       setTagActionType('assignToTags');
                       showTagActionsModal();
                     }}
-                    className="my-2 btn btn-primary btn-sm w-75"
+                    className={`my-2 btn btn-primary btn-sm w-75 ${styles.editButton}`}
                     data-testid="assignToTags"
                   >
                     {t('assignToTags')}
@@ -543,7 +545,7 @@ function ManageTag(): JSX.Element {
                   />
                   <div
                     onClick={showEditUserTagModal}
-                    className="mt-1 mb-2 btn btn-primary btn-sm w-75"
+                    className={`mt-1 mb-2 btn btn-primary btn-sm w-75 ${styles.editButton}`}
                     data-testid="editUserTag"
                   >
                     {tCommon('edit')}

diff --git a/src/screens/ManageTag/RemoveUserTagModal.tsx b/src/screens/ManageTag/RemoveUserTagModal.tsx
@@ -1,6 +1,7 @@
 import type { TFunction } from 'i18next';
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
+import styles from '../../style/app.module.css';
 
 /**
  * Remove UserTag Modal component for the Manage Tag screen.
@@ -33,7 +34,7 @@ const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
         keyboard={false}
         centered
       >
-        <Modal.Header closeButton className="bg-primary">
+        <Modal.Header closeButton className={styles.modalHeader}>
           <Modal.Title className="text-white" id="removeUserTag">
             {t('removeUserTag')}
           </Modal.Title>
@@ -44,7 +45,7 @@ const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
         <Modal.Footer>
           <Button
             type="button"
-            className="btn btn-danger"
+            className={`btn btn-danger ${styles.removeButton}`}
             data-dismiss="modal"
             role="button"
             aria-label={tCommon('no')}
@@ -55,7 +56,7 @@ const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
           </Button>
           <Button
             type="button"
-            className="btn btn-success"
+            className={`btn ${styles.addButton}`}
             role="button"
             aria-label={tCommon('yes')}
             onClick={handleRemoveUserTag}

diff --git a/src/screens/ManageTag/UnassignUserTagModal.tsx b/src/screens/ManageTag/UnassignUserTagModal.tsx
@@ -1,7 +1,7 @@
 import type { TFunction } from 'i18next';
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
-
+import styles from '../../style/app.module.css';
 /**
  * Unassign UserTag Modal component for the Manage Tag screen.
  */
@@ -35,7 +35,7 @@ const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
       >
         <Modal.Header
           closeButton
-          className="bg-primary"
+          className={styles.modalHeader}
           aria-label={t('closeModal')}
         >
           <Modal.Title className="text-white" id={`unassignTag`}>
@@ -46,7 +46,7 @@ const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
         <Modal.Footer>
           <Button
             type="button"
-            className="btn btn-danger"
+            className={`btn btn-danger ${styles.removeButton}`}
             data-dismiss="modal"
             onClick={toggleUnassignUserTagModal}
             data-testid="unassignTagModalCloseBtn"
@@ -56,7 +56,7 @@ const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
           </Button>
           <Button
             type="button"
-            className="btn btn-success"
+            className={`btn ${styles.addButton}`}
             onClick={async (e) => {
               const btn = e.currentTarget;
               btn.disabled = true;