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"
@@ -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"}

src/pages/Directory/DirectoryPageHeader.jsx

@@ -37,6 +37,13 @@ const DirectoryPageHeader = ({
         setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
     }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
 
+    // New state to track active filters for notes
+    const [notesFilterCount, setNotesFilterCount] = useState(0);
+
+    useEffect(() => {
+        // Calculate the number of active filters for notes
+        setNotesFilterCount(selectedCreators.length + selectedOrgs.length);
+    }, [selectedCreators, selectedOrgs]);
 
     useEffect(() => {
         if (viewType === "notes") {
@@ -125,10 +132,6 @@ const DirectoryPageHeader = ({
         setSelectedOrgs(updated);
     };
 
-  useEffect(() => {
-    updateFilteredOrganizations();
-  }, [selectedCreators]);
-
     const handleExport = (type) => {
         let dataToExport = [];
 
@@ -289,29 +292,37 @@ const DirectoryPageHeader = ({
 
                     {/* Filter by funnel icon for Notes view */}
                     {viewType === "notes" && (
-            <div className="dropdown" style={{ width: "fit-content", minWidth: "400px" }}>
+                        <div className="dropdown" style={{ width: "fit-content" }}>
                             <a
                                 className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                                 data-bs-toggle="dropdown"
                                 aria-expanded="false"
                             >
-                <i className={`fa-solid fa-filter ms-1 fs-5 ${selectedCreators.length > 0 || selectedOrgs.length > 0 ? "text-primary" : "text-muted"}`}></i>
+                                <i className={`fa-solid fa-filter ms-1 fs-5 ${notesFilterCount > 0 ? "text-primary" : "text-muted"}`}></i>
+                                {notesFilterCount > 0 && (
+                                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
+                                        {notesFilterCount}
+                                    </span>
+                                )}
                             </a>
 
+                            <div className="dropdown-menu p-0" style={{ minWidth: "600px" }}>
+                                {/* Scrollable Filter Content */}
                                 <div
-                className="dropdown-menu p-3"
+                                    className="p-3"
                                     style={{
-                  minWidth: "600px",
+                                        maxHeight: "300px",
-                  maxHeight: "400px",
                                         overflowY: "auto",
                                         overflowX: "hidden",
                                         whiteSpace: "normal"
                                     }}
                                 >
-                <div className="d-flex">
+                                    <div className="d-flex gap-3">
                                         {/* Created By */}
-                  <div className="pe-3" style={{ flex: 1 }}>
+                                        <div style={{ flex: 1, maxHeight: "260px", overflowY: "auto" }}>
-                    <p className="text-muted mb-1">Created By</p>
+                                            <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
+                                                <p className="text-muted mb-2 pt-2">Created By</p>
+                                            </div>
                                             {allCreators.map((name, idx) => (
                                                 <div className="form-check mb-1" key={`creator-${idx}`}>
                                                     <input
@@ -329,8 +340,10 @@ const DirectoryPageHeader = ({
                                         </div>
 
                                         {/* Organization */}
-                  <div className="ps-3" style={{ flex: 1 }}>
+                                        <div style={{ flex: 1, maxHeight: "260px", overflowY: "auto" }}>
-                    <p className="text-muted mb-1">Organization</p>
+                                            <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
+                                                <p className="text-muted mb-2 pt-2">Organization</p>
+                                            </div>
                                             {filteredOrganizations.map((org, idx) => (
                                                 <div className="form-check mb-1" key={`org-${idx}`}>
                                                     <input
@@ -348,12 +361,20 @@ const DirectoryPageHeader = ({
                                         </div>
                                     </div>
 
-                {/* Buttons */}
+                                </div>
-                <div className="d-flex justify-content-end gap-2 mt-1">
+
+                                {/* Sticky Footer Buttons */}
+                                <div
+                                    className="d-flex justify-content-end gap-2 p-2 "
+                                    style={{
+                                        background: "#fff",
+                                        position: "sticky",
+                                        bottom: 0
+                                    }}
+                                >
                                     <button
                                         className="btn btn-xs btn-secondary"
-                    onClick={(e) => {
+                                        onClick={() => {
-                      // e.stopPropagation();
                                             setSelectedCreators([]);
                                             setSelectedOrgs([]);
                                             setFilteredOrganizations(allOrganizations);
@@ -364,7 +385,7 @@ const DirectoryPageHeader = ({
                                     </button>
                                     <button
                                         className="btn btn-xs btn-primary"
-                    onClick={(e) => {
+                                        onClick={() => {
                                             applyCombinedFilter();
                                         }}
                                     >
@@ -372,7 +393,6 @@ const DirectoryPageHeader = ({
                                     </button>
                                 </div>
                             </div>
-
                         </div>
                     )}