feat: CE-550- modal-improvements-V2

frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx

@@ -542,7 +542,7 @@ export const CreateComplaint: FC = () => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed,
         },

frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx

@@ -279,7 +279,7 @@ export const ComplaintDetailsEdit: FC = () => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed: resetErrorMessages,
         },

frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx

@@ -105,7 +105,7 @@ export const AuthoizationOutcomeForm: FC<props> = ({ id, type, value, leadIdenti
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed: () => {
             //-- reset the form to its original state

frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx

@@ -116,10 +116,12 @@ export const DecisionForm: FC<props> = ({
 
   useEffect(() => {
     if (sector && schedule) {
-      let options = scheduleSectorType.filter((item) => item.schedule === schedule).map(item => {
-        const record: Option = { label: item.longDescription, value: item.sector };
-        return record
-      });
+      let options = scheduleSectorType
+        .filter((item) => item.schedule === schedule)
+        .map((item) => {
+          const record: Option = { label: item.longDescription, value: item.sector };
+          return record;
+        });
       setSectorList(options);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -196,10 +198,12 @@ export const DecisionForm: FC<props> = ({
   };
 
   const handleScheduleChange = (schedule: string) => {
-    let options = scheduleSectorType.filter((item) => item.schedule === schedule).map(item => {
-      const record: Option = { label: item.longDescription, value: item.sector };
-      return record
-    });
+    let options = scheduleSectorType
+      .filter((item) => item.schedule === schedule)
+      .map((item) => {
+        const record: Option = { label: item.longDescription, value: item.sector };
+        return record;
+      });
     const model = { ...data, sector: "", schedule: schedule };
     setData(model);
     setSectorList(options);
@@ -218,7 +222,7 @@ export const DecisionForm: FC<props> = ({
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed: () => {
             //-- reset the form to its original state

frontend/src/app/components/containers/complaints/outcomes/hwcr-complaint-assessment.tsx

@@ -216,7 +216,7 @@ export const HWCRComplaintAssessment: FC = () => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed,
         },

frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx

@@ -294,7 +294,7 @@ export const EquipmentForm: FC<EquipmentFormProps> = ({ equipment, assignedOffic
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed,
         },

frontend/src/app/components/containers/complaints/outcomes/hwcr-file-review.tsx

@@ -109,7 +109,7 @@ export const HWCRFileReview: FC = () => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed: () => {
             setReviewRequired(isReviewRequired);

frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx

@@ -71,7 +71,7 @@ export const HWCROutcomeByAnimalv2: FC<props> = () => {
         data: {
           caseFileId: id,
           outcomeId, //-- this is the id of the animal outcome thats being deleted
-          title: "Delete Animal Outcome",
+          title: "Delete animal outcome",
           description: "All the data in this section will be lost.",
           ok: "Yes, delete animal outcome",
           cancel: "No, go back",
@@ -116,7 +116,7 @@ export const HWCROutcomeByAnimalv2: FC<props> = () => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed: () => {
             setShowForm(false);

frontend/src/app/components/containers/complaints/outcomes/hwcr-prevention-education.tsx

@@ -164,7 +164,7 @@ export const HWCRComplaintPrevention: FC = () => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed,
         },

frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx

@@ -369,7 +369,7 @@ export const EditOutcome: FC<props> = ({ id, index, outcome, assignedOfficer: of
   return (
     <>
       <StandaloneConfirmCancelModal
-        title="Cancel Changes?"
+        title="Cancel changes?"
         description="Your changes will be lost."
         show={showModal}
         closeAndCancel={cancel}

frontend/src/app/components/containers/complaints/outcomes/outcome-attachments.tsx

@@ -139,7 +139,7 @@ export const OutcomeAttachments: FC<props> = ({ showAddButton = false }) => {
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed,
         },

frontend/src/app/components/containers/complaints/outcomes/supplemental-note.tsx

@@ -31,7 +31,7 @@ export const SupplementalNote: FC = () => {
         modalSize: "md",
         modalType: DELETE_NOTE,
         data: {
-          title: "Delete Supplemental Note",
+          title: "Delete supplemental note",
           description: "All the data in this section will be lost.",
           caseIdentifier: id,
           ok: "Yes, delete note",

frontend/src/app/components/containers/complaints/outcomes/supplemental-notes/supplemental-notes-input.tsx

@@ -56,7 +56,7 @@ export const SupplementalNotesInput: FC<props> = ({ id, complaintType, notes, cu
         modalSize: "md",
         modalType: CANCEL_CONFIRM,
         data: {
-          title: "Cancel Changes?",
+          title: "Cancel changes?",
           description: "Your changes will be lost.",
           cancelConfirmed: () => {
             setCurrentNotes(notes);

frontend/src/app/components/modal/instances/assign-officer-modal.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FC, useState } from "react";
-import { Modal, Button } from "react-bootstrap";
+import { Modal, Button, CloseButton, ListGroup, ListGroupItem, Card } from "react-bootstrap";
 import { useAppDispatch, useAppSelector } from "../../../hooks/hooks";
 import {
   profileDisplayName,
@@ -121,26 +121,21 @@ export const AssignOfficerModal: FC<AssignOfficerModalProps> = ({ close, submit,
         // don't display the current user in the list since we already have the current user at the top of the modal
         if (authUserId === undefined || !compareUuidToString(authUserId, idir)) {
           return (
-            <div
-              className={`${
-                selectedAssignee === personId
-                  ? "assign_officer_modal_profile_card_selected"
-                  : "assign_officer_modal_profile_card"
-              }`}
+            <ListGroupItem
+              action
+              className={`${selectedAssignee === personId ? "comp-profile-card comp-profile-card-selected" : "comp-profile-card"}`}
               key={personId}
               onClick={() => handleAssigneeClick(personId)}
             >
-              <div className="assign_officer_modal_profile_card_column">
-                <div className="assign_officer_modal_profile_card_profile-picture">
-                  <div data-initials-modal={officerInitials}></div>
-                </div>
-              </div>
-              <div className="assign_officer_modal_profile_card_column">
+              <div className="comp-profile-card-info">
+                <div
+                  className="comp-avatar comp-avatar-sm comp-avatar-orange"
+                  data-initials-modal={officerInitials}
+                ></div>
                 <div className="assign_officer_modal_profile_card_row_1">{displayName}</div>
                 {showExperimentalFeature && <div className="assign_officer_modal_profile_card_row_2">Officer</div>}
               </div>
-              <div className="assign_officer_modal_profile_card_column"></div>
-            </div>
+            </ListGroupItem>
           );
         } else {
           return <></>;
@@ -161,66 +156,67 @@ export const AssignOfficerModal: FC<AssignOfficerModalProps> = ({ close, submit,
   return (
     <>
       {title && (
-        <Modal.Header
-          closeButton={true}
-          className="border-0"
-        >
-          <Modal.Title style={{ fontSize: "20px" }}>{title}</Modal.Title>
+        <Modal.Header closeButton={true}>
+          <Modal.Title as="h3">{title}</Modal.Title>
         </Modal.Header>
       )}
       <Modal.Body>
-        <div className="assign_officer_modal_profile_card self-assign">
-          <div className="assign_officer_modal_profile_card_column">
-            <div className="assign_officer_modal_profile_card_profile-picture">
-              <div
-                data-initials-modal={initials}
-                className="comp-profile-avatar"
-              ></div>
-            </div>
-          </div>
-          <div className="assign_officer_modal_profile_card_column">
+        <Card
+          className="comp-profile-card"
+          style={{ marginBottom: "24px" }}
+        >
+          <div className="comp-profile-card-info">
+            <div
+              className="comp-avatar comp-avatar-sm comp-avatar-orange"
+              data-initials-modal={initials}
+            ></div>
+
             <div className="assign_officer_modal_profile_card_row_1">{displayName}</div>
             {showExperimentalFeature && <div className="assign_officer_modal_profile_card_row_2">Officer</div>}
           </div>
-          <div className="assign_officer_modal_profile_card_column">
+          <div className="profile-card-actions">
             <Button
               id="self_assign_button"
-              title="Self Assign Button"
+              title="Self assign Button"
               onClick={handleSelfAssign}
             >
               Self assign
             </Button>
           </div>
-        </div>
-        <hr className="modal_hr" />
-        <div id="assign_officer_modal_search">
-          <div className="assign_officer_modal_subtitle">Everyone</div>
-          <div className="input_row">
-            <BsPerson className="icon" />
-            <input
-              id="officer-search"
-              className="comp-form-control"
-              placeholder="Type name to search"
-              type="input"
-              aria-label="Search"
-              aria-describedby="basic-addon2"
-              onChange={(evt) => handleInputChange(evt)}
-              onFocus={() => handleInputFocus()}
-              value={searchInput}
-            />
-            {searchInput && (
-              <button
-                type="reset"
-                onClick={() => setSearchInput("")}
-              >
-                &times;
-              </button>
-            )}
+        </Card>
+
+        <section
+          style={{ marginBottom: "24px" }}
+          id="assign_officer_modal_search"
+        >
+          <h4 style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Everyone</h4>
+          <div className="assign-officer-search-container">
+            <div className="comp-search-input">
+              <BsPerson className="icon" />
+              <input
+                id="officer-search"
+                className="comp-form-control"
+                placeholder="Type name to search"
+                type="input"
+                aria-label="Search"
+                aria-describedby="basic-addon2"
+                onChange={(evt) => handleInputChange(evt)}
+                onFocus={() => handleInputFocus()}
+                value={searchInput}
+              />
+              {searchInput && (
+                <CloseButton
+                  onClick={() => setSearchInput("")}
+                  tabIndex={0}
+                ></CloseButton>
+              )}
+            </div>
           </div>
-        </div>
-        <hr className="modal_hr" />
-        <div className="assign_officer_modal_subtitle">{renderHeading()}</div>
-        <div className="modal-scroll">{renderOfficers()}</div>
+        </section>
+        <section>
+          <h4 style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>{renderHeading()}</h4>
+          <ListGroup>{renderOfficers()}</ListGroup>
+        </section>
       </Modal.Body>
       <Modal.Footer>
         <Button

frontend/src/app/components/modal/instances/cancel-confirm-modal.tsx

@@ -27,13 +27,7 @@ export const CancelConfirmModal: FC<CancelConfirmProps> = ({ close, submit, canc
         </Modal.Header>
       )}
       <Modal.Body>
-        <div className="cancel_confirm_modal_description">
-          <Row>
-            <Col>
-              <label>{description}</label>
-            </Col>
-          </Row>
-        </div>
+        <p>{description}</p>
       </Modal.Body>
       <Modal.Footer>
         <Button

frontend/src/app/components/modal/instances/change-status-modal.tsx

@@ -165,43 +165,30 @@ export const ChangeStatusModal: FC<ChangeStatusModalProps> = ({ close, submit, c
   return (
     <>
       {title && (
-        <Modal.Header
-          closeButton={true}
-          className="border-0"
-        >
-          <Modal.Title style={{ fontSize: "20px" }}>{title}</Modal.Title>
+        <Modal.Header closeButton={true}>
+          <Modal.Title>{title}</Modal.Title>
         </Modal.Header>
       )}
       <Modal.Body>
-        <div className="change_status_modal">
-          {statusChangeDisabledInd && (
-            <Row className="status-change-subtext">
-              <Col
-                xs="auto"
-                className="change_status_modal_icon"
-              >
-                <i className="bi bi-exclamation-circle"></i>
-              </Col>
-              <Col>
-                <div>Complaint is pending review.</div>
-                <div>Complete or cancel review before updating status.</div>
-              </Col>
-            </Row>
-          )}
-          <Row>
-            <Col>
-              <label className="modal_description_label">{description}</label>
+        {statusChangeDisabledInd && (
+          <Row className="status-change-subtext">
+            <Col
+              xs="auto"
+              className="change_status_modal_icon"
+            >
+              <i className="bi bi-exclamation-circle"></i>
             </Col>
-          </Row>
-          <Row>
             <Col>
-              <ComplaintStatusSelect
-                isDisabled={statusChangeDisabledInd}
-                onSelectChange={handleSelectChange}
-              />
+              <div>Complaint is pending review.</div>
+              <div>Complete or cancel review before updating status.</div>
             </Col>
           </Row>
-        </div>
+        )}
+        <label style={{ marginBottom: "8px" }}>{description}</label>
+        <ComplaintStatusSelect
+          isDisabled={statusChangeDisabledInd}
+          onSelectChange={handleSelectChange}
+        />
       </Modal.Body>
       <Modal.Footer>
         <Button