Changes in Directory in Filter, removing unnessary gaps and changing color of HideEditor.

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -115,7 +115,7 @@ const NoteCardDirectoryEditable = ({
         </GlobalModel>
       )}
       <div
-        className="card p-1 shadow-sm border-1 mb-4 p-4 rounded"
+        className="card shadow-sm border-1 mb-3 p-4 rounded"
         style={{
           width: "100%",
           background: noteItem.isActive ? "#fff" : "#f8f6f6",
@@ -127,7 +127,7 @@ const NoteCardDirectoryEditable = ({
           <div className="d-flex align-items-center">
 
             <Avatar
-              size="xs"
+              size="xxs"
               firstName={noteItem?.createdBy?.firstName}
               lastName={noteItem?.createdBy?.lastName}
               className="m-0"
@@ -136,7 +136,7 @@ const NoteCardDirectoryEditable = ({
               <div className="d-flex ms-0 align-middle cursor-pointer" onClick={() =>contactProfile(noteItem.contactId)}>
                 <span>
                   <span className="fw-bold ">  {noteItem?.contactName}  </span> <span className="text-muted font-weight-normal">
-                    ( {noteItem?.organizationName})
+                    ({noteItem?.organizationName})
                   </span>
                 </span>
 
@@ -220,7 +220,7 @@ const NoteCardDirectoryEditable = ({
           </>
         ) : (
           <div
-            className="px-10 pb-2 text-start"
+            className="mx-4 px-10 text-start"
             dangerouslySetInnerHTML={{ __html: noteItem.note }}
           />
         )}

src/components/Directory/NotesCardViewDirectory.jsx

@@ -133,11 +133,11 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
           style={{ marginBottom: '70px' }}>
           {/* Previous Button */}
           <button
-            className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm for smaller size like in image
+            className="btn btn-sm rounded-circle border text-secondary"
             onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
             disabled={currentPage === 1}
             title="Previous"
-            style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
+            style={{ width: "30px", height: "30px", padding: 0, fontSize: "0.75rem" }} // Adjusted width, height, and font size
           >
             «
           </button>
@@ -148,10 +148,8 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
             return (
               <button
                 key={page}
-                // Changed btn-sm to just btn, adjusted class for active/inactive state backgrounds and text colors
+                className={`btn rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-light text-secondary"}`}
-                className={`btn rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-light text-secondary"
+                style={{ width: "30px", height: "30px", padding: 0, fontSize: "0.75rem", lineHeight: "1" }} // Adjusted width, height, and font size
-                  }`}
-                style={{ width: "38px", height: "38px", padding: 0, fontSize: "1rem", lineHeight: "1" }} // Adjusted size and font for better fit
                 onClick={() => handlePageClick(page)}
               >
                 {page}
@@ -161,11 +159,11 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
 
           {/* Next Button */}
           <button
-            className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm
+            className="btn btn-sm rounded-circle border text-secondary"
             onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
             disabled={currentPage === totalPages}
             title="Next"
-            style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
+            style={{ width: "30px", height: "30px", padding: 0, fontSize: "0.75rem" }} // Adjusted width, height, and font size
           >
             »
           </button>

src/components/Directory/NotesDirectory.jsx

@@ -135,7 +135,7 @@ const NotesDirectory = ({
 
   <div className="d-flex justify-content-end">
     <span
-      className={`btn btn-sm ${addNote ? "btn-danger" : "btn-primary"}`}
+       className={`btn btn-sm ${addNote ? "btn-secondary" : "btn-primary"}`}
       onClick={() => setAddNote(!addNote)}
     >
       {addNote ? "Hide Editor" : "Add a Note"}