UI changes in Contact Profile page.

src/components/Directory/NotesDirectory.jsx

@@ -22,10 +22,7 @@ const NotesDirectory = ({
   setProfileContact,
 }) => {
   const [IsActive, setIsActive] = useState(true);
-  const { contactNotes, refetch } = useContactNotes(
-    contactProfile?.id,
-    IsActive
-  );
+  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
 
   const [IsSubmitting, setIsSubmitting] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
@@ -70,10 +67,7 @@ const NotesDirectory = ({
           ...cached_contactProfile.data,
           notes: [...(cached_contactProfile.data.notes || []), createdNote],
         };
-        cacheData("Contact Profile", {
-          contactId: contactProfile?.id,
-          data: updatedProfile,
-        });
+        cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
       }
 
       setValue("note", "");
@@ -104,13 +98,10 @@ const NotesDirectory = ({
   };
 
   // Use the fullName from contactProfile, which now includes middle and last names if available
-  const contactName =
-    contactProfile?.fullName || contactProfile?.firstName || "Contact";
+  const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
   const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
 
-  const notesToDisplay = IsActive
-    ? contactProfile?.notes || []
-    : contactNotes || [];
+  const notesToDisplay = IsActive ? (contactProfile?.notes || []) : (contactNotes || []);
 
   return (
     <div className="text-start mt-10">
@@ -172,10 +163,11 @@ const NotesDirectory = ({
 
       {showEditor && (
         <div className="card m-2 mb-5 position-relative">
-          <span
+          <button
             type="button"
             className="position-absolute top-0 end-0  mt-3 bg-secondary rounded-circle"
             aria-label="Close"
+            style={{ backgroundColor: "#eee", color: "white" }}
             onClick={() => setShowEditor(false)}
           >
             <i className="bx bx-x fs-5  p-1 text-white"></i>
@@ -202,28 +194,31 @@ const NotesDirectory = ({
             <p>Loading...</p>{" "}
           </div>
         )}
-        {!isLoading && notesToDisplay.length > 0
-          ? notesToDisplay
-              .slice()
-              .reverse()
-              .map((noteItem) => (
-                <NoteCardDirectory
-                  refetchProfile={refetchProfile}
-                  refetchNotes={refetch}
-                  refetchContact={refetch}
-                  noteItem={noteItem}
-                  contactId={contactProfile?.id}
-                  setProfileContact={setProfileContact}
-                  key={noteItem.id}
-                />
-              ))
-          : !isLoading &&
-            !showEditor && (
-              <div className="text-center mt-5">{noNotesMessage}</div>
-            )}
+        {!isLoading && notesToDisplay.length > 0 ? (
+          notesToDisplay
+            .slice()
+            .reverse()
+            .map((noteItem) => (
+              <NoteCardDirectory
+                refetchProfile={refetchProfile}
+                refetchNotes={refetch}
+                refetchContact={refetch}
+                noteItem={noteItem}
+                contactId={contactProfile?.id}
+                setProfileContact={setProfileContact}
+                key={noteItem.id}
+              />
+            ))
+        ) : (
+          !isLoading && !showEditor && (
+            <div className="text-center mt-5">
+              {noNotesMessage}
+            </div>
+          )
+        )}
       </div>
     </div>
   );
 };
 
-export default NotesDirectory;
+export default NotesDirectory;