Revert "Merge branch 'Kartik_Bug#611' of https://git.marcoaiot.com/admin/marco.pms.web into Kartik_Bug#611"

This reverts commit c1358f3409f035c4d827de57363b4ee66ef915bd, reversing
changes made to 3109f577b004116b9b978652a3fd68029bf6286e.

src/pages/Directory/DirectoryPageHeader.jsx

@@ -284,18 +284,19 @@ const DirectoryPageHeader = ({
             placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
-            style={{ width: "200px",height: "30px" }}
+            style={{ width: "200px" }}
           />
 
           {/* 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", minWidth: "400px" }}> {/* Added minWidth here */}
               <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>
+                {/* Removed the numerical badge for notes filter */}
               </a>
 
               <div
@@ -328,6 +329,9 @@ const DirectoryPageHeader = ({
                     ))}
                   </div>
 
+                  {/* Divider */}
+                  {/* <div style={{ width: "1px", backgroundColor: "#dee2e6", margin: "0 12px" }}></div> */}
+
                   {/* Organization */}
                   <div className="ps-3" style={{ flex: 1 }}>
                     <p className="text-muted mb-1">Organization</p>
@@ -349,11 +353,10 @@ const DirectoryPageHeader = ({
                 </div>
 
                 {/* Buttons */}
-                <div className="d-flex justify-content-end gap-2 mt-1">
+                <div className="d-flex justify-content-between mt-3">
                   <button
-                    className="btn btn-xs btn-secondary"
-                    onClick={(e) => {
-                      // e.stopPropagation();
+                    className="btn btn-sm btn-outline-danger"
+                    onClick={() => {
                       setSelectedCreators([]);
                       setSelectedOrgs([]);
                       setFilteredOrganizations(allOrganizations);
@@ -362,12 +365,7 @@ const DirectoryPageHeader = ({
                   >
                     Clear
                   </button>
-                  <button
-                    className="btn btn-xs btn-primary"
-                    onClick={(e) => {
-                      applyCombinedFilter();
-                    }}
-                  >
+                  <button className="btn btn-sm btn-primary" onClick={applyCombinedFilter}>
                     Apply Filter
                   </button>
                 </div>
@@ -459,27 +457,13 @@ const DirectoryPageHeader = ({
                 </div>
 
                 <div className="d-flex justify-content-end gap-2 mt-1">
-                  <button
-                    className="btn btn-xs btn-secondary"
-                    onClick={(e) => {
-                      // e.stopPropagation();
-                      clearFilter();
-                    }}
-                  >
-                    Clear
-                  </button>
-                  <button
-                    className="btn btn-xs btn-primary"
-                    onClick={(e) => {
-                      applyFilter();
-                    }}
-                  >
-                    Apply Filter
-                  </button>
+                  <button className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
+                  <button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
                 </div>
               </ul>
             </div>
           )}
+
         </div>
 
         <div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">