Add GUI improvements in directory notes

src/components/Directory/NotesDirectory.jsx

@@ -22,7 +22,10 @@ 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);
@@ -67,7 +70,10 @@ 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", "");
@@ -100,36 +106,34 @@ 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">
       <div className="d-flex align-items-center justify-content-between">
+        <div className="row w-100 align-items-center">
+          <div className="col col-2">
             <p className="fw-semibold m-0 ms-3">Notes :</p>
           </div>
-      <div className="d-flex align-items-center justify-content-between mb-5">
-        <div className="m-0 d-flex align-items-center">
-          {(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
-            <label className="switch switch-primary">
-              <input
-                type="checkbox"
-                className="switch-input"
-                onChange={handleSwitch}
-                checked={!IsActive}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">Include Deleted Notes</span>
-            </label>
-          )}
-          {!(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
-            <div style={{ visibility: "hidden" }}>
-              <label className="switch switch-primary">
+          <div className="col d-flex justify-content-end gap-2 pe-0">
+            {" "}
+            <div className="d-flex align-items-center justify-content-between">
+              <label
+                className="switch switch-primary"
+                style={{
+                  visibility:
+                    contactProfile?.notes?.length > 0 ||
+                    contactNotes?.length > 0
+                      ? "visible"
+                      : "hidden",
+                }}
+              >
                 <input type="checkbox" className="switch-input" />
                 <span className="switch-toggle-slider">
                   <span className="switch-on"></span>
@@ -137,9 +141,6 @@ const NotesDirectory = ({
                 </span>
                 <span className="switch-label">Include Deleted Notes</span>
               </label>
-            </div>
-          )}
-        </div>
 
               {!showEditor && (
                 <div className="d-flex justify-content-end">
@@ -155,25 +156,28 @@ const NotesDirectory = ({
                     }}
                   >
                     <i
-                className="bx bx-plus-circle me-0"
+                      className="bx bx-plus-circle me-0 text-primary"
                       style={{ fontSize: "1.5rem", color: "#6c757d" }}
                     ></i>
                     Add a Note
                   </button>
                 </div>
               )}
-
+            </div>
+          </div>
+        </div>
       </div>
 
       {showEditor && (
         <div className="card m-2 mb-5 position-relative">
-          <button
+          <span
             type="button"
-            className="btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
+            className="position-absolute top-0 end-0  mt-3 bg-secondary rounded-circle"
             aria-label="Close"
-            style={{ backgroundColor: "#eee", color: "white" }}
             onClick={() => setShowEditor(false)}
-          ></button>
+          >
+            <i className="bx bx-x fs-5  p-1 text-white"></i>
+          </span>
           <form onSubmit={handleSubmit(onSubmit)}>
             <Editor
               value={noteValue}
@@ -196,8 +200,8 @@ const NotesDirectory = ({
             <p>Loading...</p>{" "}
           </div>
         )}
-        {!isLoading && notesToDisplay.length > 0 ? (
-          notesToDisplay
+        {!isLoading && notesToDisplay.length > 0
+          ? notesToDisplay
               .slice()
               .reverse()
               .map((noteItem) => (
@@ -211,12 +215,9 @@ const NotesDirectory = ({
                   key={noteItem.id}
                 />
               ))
-        ) : (
-          !isLoading && !showEditor && (
-            <div className="text-center mt-5">
-              {noNotesMessage}
-            </div>
-          )
+          : !isLoading &&
+            !showEditor && (
+              <div className="text-center mt-5">{noNotesMessage}</div>
             )}
       </div>
     </div>