Add cosmatic changes

src/components/Directory/CardViewDirectory.jsx

@@ -23,12 +23,17 @@ const CardViewDirectory = ({
     >
       <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
-          <div className={`d-flex align-items-center ${IsActive && "cursor-pointer"}`}  onClick={() => {
+          <div
-          if (IsActive) {
+            className={`d-flex align-items-center ${
-            setIsOpenModalNote(true);
+              IsActive && "cursor-pointer"
-            setOpen_contact(contact);
+            }`}
-          }
+            onClick={() => {
-        }}>
+              if (IsActive) {
+                setIsOpenModalNote(true);
+                setOpen_contact(contact);
+              }
+            }}
+          >
             <Avatar
               size="xs"
               firstName={
@@ -50,7 +55,7 @@ const CardViewDirectory = ({
                   aria-expanded="false"
                 >
                   <i
-                    className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
+                    className="bx bx-dots-vertical-rounded text-muted p-0"
                     data-bs-toggle="tooltip"
                     data-bs-offset="0,8"
                     data-bs-placement="top"
@@ -100,16 +105,18 @@ const CardViewDirectory = ({
         </div>
 
         <ul className="list-inline m-0 ps-4 d-flex align-items-start">
-          <li className="list-inline-item me-1 small">
+          {/* <li className="list-inline-item me-1 small">
             <i className="fa-solid fa-briefcase me-2"></i>
-          </li>
+          </li> */}
-          <li className="list-inline-item text-break small">
+          <li className="list-inline-item text-break small ms-5">
             {contact.organization}
           </li>
         </ul>
       </div>
       <div
-        className={`card-footer text-start px-1 py-1 ${IsActive && "cursor-pointer"}`}
+        className={`card-footer text-start px-1 py-1 ${
+          IsActive && "cursor-pointer"
+        }`}
         onClick={() => {
           if (IsActive) {
             setIsOpenModalNote(true);
@@ -119,7 +126,7 @@ const CardViewDirectory = ({
       >
         <hr className="my-0" />
         {contact.contactEmails[0] && (
-          <ul className="list-unstyled my-1 d-flex align-items-start">
+          <ul className="list-unstyled my-1 d-flex align-items-start   ms-2">
             <li className="me-2">
               <i className="bx bx-envelope bx-xs mt-1"></i>
             </li>
@@ -130,7 +137,7 @@ const CardViewDirectory = ({
         )}
 
         {contact.contactPhones[0] && (
-          <ul className="list-inline m-0 ">
+          <ul className="list-inline m-0  ms-2">
             <li className="list-inline-item me-1">
               <i
                 className={` ${getPhoneIcon(
@@ -145,24 +152,24 @@ const CardViewDirectory = ({
         )}
 
         {contact?.contactCategory?.name ? (
-          <ul className="list-inline m-0">
+          <ul className="list-inline m-0   ms-2">
             <li className="list-inline-item me-2 my-1">
-              <i className="fa-solid fa-tag fs-6"></i>
+              <i className="fa-solid fa-tag fs-6 ms-1"></i>
             </li>
             <li className="list-inline-item text-small active">
               {contact?.contactCategory?.name}
             </li>
           </ul>
         ) : (
-          <ul className="list-inline m-0">
+          <ul className="list-inline m-0   ms-2">
             <li className="list-inline-item me-2 my-1">
-              <i className="fa-solid fa-tag fs-6"></i>
+              <i className="fa-solid fa-tag fs-6 ms-1"></i>
             </li>
             <li className="list-inline-item text-small active">Other</li>
           </ul>
         )}
 
-        <ul className="list-inline m-0">
+        <ul className="list-inline m-0   ms-2">
           {contact?.bucketIds?.map((bucketId) => (
             <li key={bucketId} className="list-inline-item me-1">
               <span

src/pages/Directory/Directory.jsx

@@ -18,13 +18,12 @@ import ConfirmModal from "../../components/common/ConfirmModal";
 import DirectoryListTableHeader from "./DirectoryListTableHeader";
 import DirectoryPageHeader from "./DirectoryPageHeader";
 import ManageBucket from "../../components/Directory/ManageBucket";
-import {useFab} from "../../Context/FabContext";
+import { useFab } from "../../Context/FabContext";
-import {DireProvider, useDir} from "../../Context/DireContext";
+import { DireProvider, useDir } from "../../Context/DireContext";
 
-const Directory = ({IsPage=true,prefernceContacts}) =>
+const Directory = ({ IsPage = true, prefernceContacts }) => {
-{
+  const [projectPrefernce, setPerfence] = useState(null);
-  const [ projectPrefernce, setPerfence ] = useState( null )
+  const [IsActive, setIsActive] = useState(true);
-  const[IsActive,setIsActive] = useState(true)
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
@@ -35,20 +34,21 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
   const [listView, setListView] = useState(false);
   const [selectedBucketIds, setSelectedBucketIds] = useState([]);
   const [deleteContact, setDeleteContact] = useState(null);
-  const [ IsDeleting, setDeleting ] = useState( false );
+  const [IsDeleting, setDeleting] = useState(false);
-  const [ openBucketModal, setOpenBucketModal ] = useState( false )
+  const [openBucketModal, setOpenBucketModal] = useState(false);
- 
 
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
-  const [ tempSelectedCategoryIds, setTempSelectedCategoryIds ] = useState( [] );
+  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
-  const {setActions} = useFab()
+  const { setActions } = useFab();
   const { dirActions, setDirActions } = useDir();
 
-
+  const { contacts, loading, refetch } = useDirectory(
-  const { contacts, loading , refetch} = useDirectory(IsActive,projectPrefernce);
+    IsActive,
+    projectPrefernce
+  );
   const { contactCategory, loading: contactCategoryLoading } =
-  useContactCategory();
+    useContactCategory();
-  const {buckets,refetch:refetchBucket} = useBuckets();
+  const { buckets, refetch: refetchBucket } = useBuckets();
 
   const submitContact = async (data) => {
     try {
@@ -63,7 +63,7 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
         );
         showToast("Contact updated successfully", "success");
         setIsOpenModal(false);
-        setSelectedContact( null );
+        setSelectedContact(null);
       } else {
         response = await DirectoryRepository.CreateContact(data);
         updatedContacts = [...contacts_cache, response.data];
@@ -73,8 +73,8 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
 
       // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       // setContactList(updatedContacts);
-      refetch( IsActive, prefernceContacts )
+      refetch(IsActive, prefernceContacts);
-      refetchBucket()
+      refetchBucket();
     } catch (error) {
       const msg =
         error.response?.data?.message ||
@@ -84,44 +84,45 @@ const Directory = ({IsPage=true,prefernceContacts}) =>
     }
   };
 
-const handleDeleteContact = async (overrideId = null) => {
+  const handleDeleteContact = async (overrideId = null) => {
-  try
+    try {
-  {
+      if (!IsActive) {
-    if (!IsActive) {
+        setDirActions((prev) => ({ ...prev, action: true }));
-      setDirActions((prev) => ({ ...prev, action: true }));
+      } else {
-    } else {
+        setDeleting(true);
-      setDeleting(true);
+      }
-    }
       const id = overrideId || (!IsActive ? dirActions.id : deleteContact);
-    if (!id) {
+      if (!id) {
-      showToast("No contact selected for deletion", "error");
+        showToast("No contact selected for deletion", "error");
-      return;
+        return;
+      }
+
+      await DirectoryRepository.DeleteContact(id, !IsActive);
+
+      const updatedContacts = ContactList.filter((c) => c.id !== id);
+      setContactList(updatedContacts);
+      cacheData("Contacts", { data: updatedContacts, isActive: IsActive });
+
+      showToast(
+        `Contact ${IsActive ? "Deleted" : "Restored"} successfully`,
+        "success"
+      );
+
+      setDeleteContact(null);
+      refetchBucket();
+      setDirActions({ action: false, id: null });
+      setDeleting(false);
+    } catch (error) {
+      const msg =
+        error?.response?.data?.message ||
+        error.message ||
+        "Error occurred during API call";
+      showToast(msg, "error");
+
+      setDeleting(false);
+      setDirActions({ action: false, id: null });
     }
-
+  };
-    await DirectoryRepository.DeleteContact(id, !IsActive);
-
-    const updatedContacts = ContactList.filter((c) => c.id !== id);
-    setContactList(updatedContacts);
-    cacheData("Contacts", { data: updatedContacts, isActive: IsActive });
-
-    showToast(`Contact ${IsActive ? "Deleted":"Restored"} successfully`, "success");
-
-    setDeleteContact( null );
-    refetchBucket()
-    setDirActions({ action: false, id: null });
-    setDeleting(false);
-  } catch (error) {
-    const msg =
-      error?.response?.data?.message ||
-      error.message ||
-      "Error occurred during API call";
-    showToast(msg, "error");
-
-    setDeleting(false);
-    setDirActions({ action: false, id: null });
-  }
-};
-
 
   const closedModel = () => {
     setIsOpenModal(false);
@@ -181,7 +182,13 @@ const handleDeleteContact = async (overrideId = null) => {
 
       return matchesSearch && matchesCategory && matchesBucket;
     }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds,selectedContact]);
+  }, [
+    ContactList,
+    searchText,
+    selectedCategoryIds,
+    selectedBucketIds,
+    selectedContact,
+  ]);
 
   const applyFilter = () => {
     setSelectedBucketIds(tempSelectedBucketIds);
@@ -218,46 +225,44 @@ const handleDeleteContact = async (overrideId = null) => {
     }
   };
 
+  useEffect(() => {
+    const actions = [];
 
- useEffect(() => {
+    if (IsPage) {
-  const actions = [];
+      actions.push({
+        label: "Manage Bucket",
+        icon: "fa-solid fa-bucket fs-5",
+        color: "primary",
+        onClick: () => setOpenBucketModal(true),
+      });
+    }
+    if (buckets?.length > 0) {
+      actions.push({
+        label: "New Contact",
+        icon: "bx bx-plus-circle",
+        color: "warning",
+        onClick: () => setIsOpenModal(true),
+      });
+    }
 
-  if (IsPage) {
+    setActions(actions);
-    actions.push({
-    label: "Manage Bucket",
-    icon: "fa-solid fa-bucket fs-5",
-    color:"primary",
-    onClick: () => setOpenBucketModal(true),
-  });
-   }
-   if ( buckets?.length > 0 )
-   {
-     actions.push( {
-       label: "New Contact",
-       icon: "bx bx-plus-circle",
-       color: "warning",
-       onClick: () => setIsOpenModal( true ),
-     } );
-   }
 
-  setActions(actions);
+    return () => setActions([]);
-
+  }, [IsPage, buckets]);
-  return () => setActions([]); 
+  useEffect(() => {
-}, [IsPage,buckets]);
+    setPerfence(prefernceContacts);
-  useEffect( () =>
+  }, [prefernceContacts]);
-  {
-  setPerfence(prefernceContacts)
-},[prefernceContacts])
 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
-    
+      {IsPage && (
-   {IsPage && (   <Breadcrumb
+        <Breadcrumb
-        data={[
+          data={[
-          { label: "Home", link: "/dashboard" },
+            { label: "Home", link: "/dashboard" },
-          { label: "Directory", link: null },
+            { label: "Directory", link: null },
-        ]}
+          ]}
-      ></Breadcrumb>)}
+        ></Breadcrumb>
+      )}
 
       {isOpenModal && (
         <GlobalModel
@@ -266,7 +271,7 @@ const handleDeleteContact = async (overrideId = null) => {
             setSelectedContact(null);
             setIsOpenModal(false);
           }}
-          size="lg"
+          size="xl"
         >
           {renderModalContent()}
         </GlobalModel>
@@ -312,155 +317,164 @@ const handleDeleteContact = async (overrideId = null) => {
       )}
 
       {openBucketModal && (
-         <GlobalModel
+        <GlobalModel
           isOpen={openBucketModal}
-          closeModal={() =>setOpenBucketModal(false)}
+          closeModal={() => setOpenBucketModal(false)}
           size="lg"
         >
           <ManageBucket buckets={buckets} />
         </GlobalModel>
       )}
 
-  <div className="card p-2 card-minHeight">
+      <div className="card p-2 card-minHeight">
-  <DirectoryPageHeader
+        <DirectoryPageHeader
-    searchText={searchText}
+          searchText={searchText}
-    setSearchText={setSearchText}
+          setSearchText={setSearchText}
-    setIsActive={setIsActive}
+          setIsActive={setIsActive}
-    listView={listView}
+          listView={listView}
-    setListView={setListView}
+          setListView={setListView}
-    filteredBuckets={filteredBuckets}
+          filteredBuckets={filteredBuckets}
-    tempSelectedBucketIds={tempSelectedBucketIds}
+          tempSelectedBucketIds={tempSelectedBucketIds}
-    handleTempBucketChange={handleTempBucketChange}
+          handleTempBucketChange={handleTempBucketChange}
-    filteredCategories={filteredCategories}
+          filteredCategories={filteredCategories}
-    tempSelectedCategoryIds={tempSelectedCategoryIds}
+          tempSelectedCategoryIds={tempSelectedCategoryIds}
-    handleTempCategoryChange={handleTempCategoryChange}
+          handleTempCategoryChange={handleTempCategoryChange}
-    clearFilter={clearFilter}
+          clearFilter={clearFilter}
-    applyFilter={applyFilter}
+          applyFilter={applyFilter}
-    loading={loading}
+          loading={loading}
-    IsActive={IsActive}
+          IsActive={IsActive}
-    setOpenBucketModal={setOpenBucketModal}
+          setOpenBucketModal={setOpenBucketModal}
-  />
+        />
 
-  {/* Messages when listView is false */}
+        {/* Messages when listView is false */}
-  {!listView && (
+        {!listView && (
-    <div className="d-flex flex-column justify-content-center align-items-center text-center ">
+          <div className="d-flex flex-column justify-content-center align-items-center text-center ">
-      {loading && <p>Loading...</p>}
+            {loading && <p className="mt-10">Loading...</p>}
-      {!loading && contacts?.length === 0 && <p>No contact found</p>}
+            {!loading && contacts?.length === 0 && (
-      {!loading && contacts?.length > 0 && currentItems.length === 0 && (
+              <p className="mt-10">No contact found</p>
-        <p>No matching contact found</p>
+            )}
-      )}
+            {!loading && contacts?.length > 0 && currentItems.length === 0 && (
-    </div>
+              <p className="mt-10">No matching contact found</p>
-  )}
+            )}
-
-  {/* Table view (listView === true) */}
-  {listView ? (
-    <DirectoryListTableHeader>
-      {loading && (
-        <tr>
-          <td colSpan={10}>Loading...</td>
-        </tr>
-      )}
-
-      {!loading && contacts?.length === 0 && (
-        <tr >
-          <td colSpan={10}>No contact found</td>
-        </tr>
-      )}
-
-      {!loading && currentItems.length === 0 && contacts?.length > 0 && (
-        <tr>
-          <td colSpan={10}>No matching contact found</td>
-        </tr>
-      )}
-
-      {!loading &&
-        currentItems.map((contact) => (
-          <ListViewDirectory
-            key={contact.id}
-            IsActive={IsActive}
-            contact={contact}
-            setSelectedContact={setSelectedContact}
-            setIsOpenModal={setIsOpenModal}
-            setOpen_contact={setOpen_contact}
-            setIsOpenModalNote={setIsOpenModalNote}
-            IsDeleted={setDeleteContact}
-            restore={handleDeleteContact}
-          />
-        ))}
-    </DirectoryListTableHeader>
-  ) : (
-    <div className="row">
-      {!loading &&
-        currentItems.map((contact) => (
-          <div
-            key={contact.id}
-            className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
-          >
-            <CardViewDirectory
-              IsActive={IsActive}
-              contact={contact}
-              setSelectedContact={setSelectedContact}
-              setIsOpenModal={setIsOpenModal}
-              setOpen_contact={setOpen_contact}
-              setIsOpenModalNote={setIsOpenModalNote}
-              IsDeleted={setDeleteContact}
-              restore={handleDeleteContact}
-            />
           </div>
-        ))}
+        )}
-    </div>
-  )}
 
-  {/* Pagination */}
+        {/* Table view (listView === true) */}
-  {!loading &&
+        {listView ? (
-    contacts?.length > 0 &&
+          <DirectoryListTableHeader>
-    currentItems.length < ITEMS_PER_PAGE && (
+            {loading && (
-      <nav aria-label="Page navigation">
+              <tr>
-        <ul className="pagination pagination-sm justify-content-end py-1">
+                <td colSpan={10}>
-          <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+                  {" "}
-            <button
+                  <p className="mt-10">Loading...</p>{" "}
-              className="page-link btn-xs"
+                </td>
-              onClick={() => paginate(currentPage - 1)}
+              </tr>
-            >
+            )}
-              &laquo;
-            </button>
-          </li>
 
-          {[...Array(totalPages)].map((_, index) => (
+            {!loading && contacts?.length === 0 && (
-            <li
+              <tr>
-              key={index}
+                <td colSpan={10}>
-              className={`page-item ${
+                  <p className="mt-10">No contact found</p>
-                currentPage === index + 1 ? "active" : ""
+                </td>
-              }`}
+              </tr>
-            >
+            )}
-              <button
-                className="page-link"
-                onClick={() => paginate(index + 1)}
-              >
-                {index + 1}
-              </button>
-            </li>
-          ))}
 
-          <li
+            {!loading && currentItems.length === 0 && contacts?.length > 0 && (
-            className={`page-item ${
+              <tr>
-              currentPage === totalPages ? "disabled" : ""
+                <td colSpan={10}>
-            }`}
+                  <p className="mt-10">No matching contact found</p>
-          >
+                </td>
-            <button
+              </tr>
-              className="page-link"
+            )}
-              onClick={() => paginate(currentPage + 1)}
-            >
-              &raquo;
-            </button>
-          </li>
-        </ul>
-      </nav>
-    )}
-</div>
 
+            {!loading &&
+              currentItems.map((contact) => (
+                <ListViewDirectory
+                  key={contact.id}
+                  IsActive={IsActive}
+                  contact={contact}
+                  setSelectedContact={setSelectedContact}
+                  setIsOpenModal={setIsOpenModal}
+                  setOpen_contact={setOpen_contact}
+                  setIsOpenModalNote={setIsOpenModalNote}
+                  IsDeleted={setDeleteContact}
+                  restore={handleDeleteContact}
+                />
+              ))}
+          </DirectoryListTableHeader>
+        ) : (
+          <div className="row mt-5">
+            {!loading &&
+              currentItems.map((contact) => (
+                <div
+                  key={contact.id}
+                  className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+                >
+                  <CardViewDirectory
+                    IsActive={IsActive}
+                    contact={contact}
+                    setSelectedContact={setSelectedContact}
+                    setIsOpenModal={setIsOpenModal}
+                    setOpen_contact={setOpen_contact}
+                    setIsOpenModalNote={setIsOpenModalNote}
+                    IsDeleted={setDeleteContact}
+                    restore={handleDeleteContact}
+                  />
+                </div>
+              ))}
+          </div>
+        )}
 
+        {/* Pagination */}
+        {!loading &&
+          contacts?.length > 0 &&
+          currentItems.length > ITEMS_PER_PAGE && (
+            <nav aria-label="Page navigation">
+              <ul className="pagination pagination-sm justify-content-end py-1">
+                <li
+                  className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
+                >
+                  <button
+                    className="page-link btn-xs"
+                    onClick={() => paginate(currentPage - 1)}
+                  >
+                    &laquo;
+                  </button>
+                </li>
+
+                {[...Array(totalPages)].map((_, index) => (
+                  <li
+                    key={index}
+                    className={`page-item ${
+                      currentPage === index + 1 ? "active" : ""
+                    }`}
+                  >
+                    <button
+                      className="page-link"
+                      onClick={() => paginate(index + 1)}
+                    >
+                      {index + 1}
+                    </button>
+                  </li>
+                ))}
+
+                <li
+                  className={`page-item ${
+                    currentPage === totalPages ? "disabled" : ""
+                  }`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => paginate(currentPage + 1)}
+                  >
+                    &raquo;
+                  </button>
+                </li>
+              </ul>
+            </nav>
+          )}
       </div>
+    </div>
   );
 };
 

src/pages/Directory/DirectoryPageHeader.jsx

@@ -27,15 +27,16 @@ const DirectoryPageHeader = ({
   }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
   return (
     <>
-      <div className="row"></div>
+      {/* <div className="row">vikas</div> */}
-      <div className="row mx-0 px-0 align-items-center">
+      <div className="row mx-0 px-0 align-items-center mt-2">
         <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
           <input
             type="search"
-            className="form-control form-control-sm me-2"
+            className="form-control me-2"
             placeholder="Search Contact..."
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
+            style={{ width: "200px" }}
           />
           <div className="d-flex gap-2 ">
             <button
@@ -50,7 +51,7 @@ const DirectoryPageHeader = ({
               data-bs-custom-class="tooltip"
               title="Card View"
             >
-              <i className="bx bx-grid-alt bx-sm"></i>
+              <i className="bx bx-grid-alt"></i>
             </button>
             <button
               type="button"
@@ -64,7 +65,7 @@ const DirectoryPageHeader = ({
               data-bs-custom-class="tooltip"
               title="List View"
             >
-              <i className="bx bx-list-ul bx-sm"></i>
+              <i className="bx bx-list-ul "></i>
             </button>
           </div>
           <div className="dropdown" style={{ width: "fit-content" }}>
@@ -74,12 +75,16 @@ const DirectoryPageHeader = ({
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
-                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
+                <i
+                  className={`fa-solid fa-filter ms-1 fs-5 ${
+                    filtered > 0 ? "text-primary" : "text-muted"
+                  }`}
+                ></i>
 
                 {filtered > 0 && (
                   <span
                     className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
-                    style={{ fontSize: "0.4rem"}}
+                    style={{ fontSize: "0.4rem" }}
                   >
                     {filtered}
                   </span>
@@ -88,9 +93,7 @@ const DirectoryPageHeader = ({
 
               <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                 <div>
-                  <p className="text-small text-muted m-0">
+                  <p className="text-muted m-0 h6 ">Filter by</p>
-                    Filter by
-                  </p>
 
                   {/* Bucket Filter */}
                   <div className="mt-1">
@@ -168,22 +171,22 @@ const DirectoryPageHeader = ({
           </div>
         </div>
         <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
-             <label className="switch switch-primary align-self-start mb-2">
+          <label className="switch switch-primary align-self-start mb-2">
-                    <input
+            <input
-                      type="checkbox"
+              type="checkbox"
-                      className="switch-input me-3"
+              className="switch-input me-3"
-                      onChange={() => setIsActive(!IsActive)}
+              onChange={() => setIsActive(!IsActive)}
-                      value={IsActive}
+              value={IsActive}
-                      disabled={loading}
+              disabled={loading}
-                    />
+            />
-                    <span className="switch-toggle-slider">
+            <span className="switch-toggle-slider">
-                      <span className="switch-on"></span>
+              <span className="switch-on"></span>
-                      <span className="switch-off"></span>
+              <span className="switch-off"></span>
-                    </span>
+            </span>
-                    <span className=" list-inline-item ms-12 small-text">
+            <span className=" list-inline-item ms-12 ">
-                      Show Inactive Contacts
+              Show Inactive Contacts
-                    </span>
+            </span>
-                  </label>
+          </label>
         </div>
       </div>
     </>
@@ -191,4 +194,3 @@ const DirectoryPageHeader = ({
 };
 
 export default DirectoryPageHeader;
-