Add cosmatc changes for font sizes

src/components/Directory/ManageBucket.jsx

@@ -12,13 +12,12 @@ import EmployeeList from "./EmployeeList";
 import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
 import { useSortableData } from "../../hooks/useSortableData";
 import ConfirmModal from "../common/ConfirmModal";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {DIRECTORY_ADMIN, DIRECTORY_MANAGER} from "../../utils/constants";
+import { DIRECTORY_ADMIN, DIRECTORY_MANAGER } from "../../utils/constants";
-import {useProfile} from "../../hooks/useProfile";
+import { useProfile } from "../../hooks/useProfile";
 
-const ManageBucket = () =>
+const ManageBucket = () => {
-{
+  const { profile } = useProfile();
-  const {profile} =useProfile()
   const [bucketList, setBucketList] = useState([]);
   const { employeesList } = useAllEmployees(false);
   const [selectedEmployee, setSelectEmployee] = useState([]);
@@ -27,9 +26,9 @@ const ManageBucket = () =>
   const [isSubmitting, setSubmitting] = useState(false);
   const [selected_bucket, select_bucket] = useState(null);
   const [deleteBucket, setDeleteBucket] = useState(null);
-  const [ searchTerm, setSearchTerm ] = useState( "" );
+  const [searchTerm, setSearchTerm] = useState("");
-  const DirManager = useHasUserPermission( DIRECTORY_MANAGER )
+  const DirManager = useHasUserPermission(DIRECTORY_MANAGER);
-  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN)
+  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
   const {
     items: sortedBuckteList,
     requestSort,
@@ -228,7 +227,7 @@ const ManageBucket = () =>
         <div className="d-flex justify-content-center">
           <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
         </div>
-        <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
+        <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-3 align-items-center ">
           {action_bucket ? (
             <i
               className={`fa-solid fa-arrow-left fs-5 cursor-pointer`}
@@ -255,7 +254,7 @@ const ManageBucket = () =>
 
           <button
             type="button"
-            className={`btn btn-xs btn-primary ms-auto ${
+            className={`btn  btn-sm btn-primary ms-auto ${
               action_bucket ? "d-none" : ""
             }`}
             onClick={() => setAction_bucket(true)}
@@ -266,9 +265,9 @@ const ManageBucket = () =>
         </div>
         <div>
           {!action_bucket ? (
-            <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
+            <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0 mt-3">
               <table className="table  px-2">
-                <thead className="p-0 table-light">
+                <thead className="p-0">
                   <tr className="p-0">
                     <th
                       colSpan={2}
@@ -343,7 +342,6 @@ const ManageBucket = () =>
                         </td>
                         <td>{bucket.numberOfContacts}</td>
                         <td className="justify-content-center">
-                        
                           {(DirManager ||
                             DirAdmin ||
                             bucket?.createdBy?.id ===

src/components/Directory/NoteCardDirectory.jsx

@@ -7,12 +7,18 @@ import showToast from "../../services/toastService";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, setProfileContact, }) => {
+const NoteCardDirectory = ({
+  refetchProfile,
+  refetchNotes,
+  noteItem,
+  contactId,
+  setProfileContact,
+}) => {
   const [editing, setEditing] = useState(false);
   const [editorValue, setEditorValue] = useState(noteItem.note);
   const [isLoading, setIsLoading] = useState(false);
-  const [ isDeleting, setIsDeleting ] = useState( false );
+  const [isDeleting, setIsDeleting] = useState(false);
-  const [isActivProcess,setActiveProcessing]= useState(false)
+  const [isActivProcess, setActiveProcessing] = useState(false);
   const handleUpdateNote = async () => {
     try {
       setIsLoading(true);
@@ -51,7 +57,7 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
         cacheData("Contact Profile", updatedProfile);
       }
       setEditing(false);
-      setIsLoading( false );
+      setIsLoading(false);
 
       showToast("Note Updated successfully", "success");
     } catch (error) {
@@ -66,8 +72,11 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
 
   const handleDeleteNote = async (activeStatue) => {
     try {
-     activeStatue ?   setActiveProcessing(true) : setIsDeleting(true) 
+      activeStatue ? setActiveProcessing(true) : setIsDeleting(true);
-      const resp = await DirectoryRepository.DeleteNote(noteItem.id,activeStatue);
+      const resp = await DirectoryRepository.DeleteNote(
+        noteItem.id,
+        activeStatue
+      );
       setProfileContact((prev) => ({
         ...prev,
         notes: prev.notes.filter((note) => note.id !== noteItem.id),
@@ -91,11 +100,14 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
 
         cacheData("Contact Profile", updatedCache);
       }
-      setIsDeleting( false );
+      setIsDeleting(false);
-      setActiveProcessing( false )
+      setActiveProcessing(false);
-      refetchNotes( contactId, false )
+      refetchNotes(contactId, false);
-      refetchProfile(contactId)
+      refetchProfile(contactId);
-      showToast(`Note ${activeStatue ? "Restored":"Deleted"} Successfully`, "success");
+      showToast(
+        `Note ${activeStatue ? "Restored" : "Deleted"} Successfully`,
+        "success"
+      );
     } catch (error) {
       setIsDeleting(false);
       const msg =
@@ -107,11 +119,15 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
   };
   return (
     <div
-      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
+      className="card p-1 shadow-sm border-1 mb-5 conntactNote rounded"
-      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${noteItem.isActive ?   "": "#f8f6f6"}`  }}
+      style={{
+        width: "100%",
+        minWidth: "300px",
+        borderRadius: "0px",
+        background: `${noteItem.isActive ? "" : "#f8f6f6"}`,
+      }}
       key={noteItem.id}
     >
-
       <div className="d-flex justify-content-between align-items-center mb-1">
         <div className="d-flex align-items-center">
           <Avatar
@@ -156,7 +172,7 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
               )}
             </>
           ) : isActivProcess ? (
-    < i className='bx  bx-loader-alt bx-spin text-primary'  ></i> 
+            <i className="bx  bx-loader-alt bx-spin text-primary"></i>
           ) : (
             <i
               className="bx bx-recycle  me-1 text-primary cursor-pointer"
@@ -165,8 +181,6 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
             ></i>
           )}
         </div>
-        
-
       </div>
 
       <hr className="mt-0" />

src/components/Directory/NotesDirectory.jsx

@@ -16,13 +16,18 @@ const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileContact }) => {
+const NotesDirectory = ({
+  refetchProfile,
+  isLoading,
+  contactProfile,
+  setProfileContact,
+}) => {
   const [IsActive, setIsActive] = useState(true);
-  const {contactNotes,refetch} = useContactNotes( contactProfile?.id, true );
+  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, true);
 
   const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
-  const [addNote, setAddNote] = useState(false);
+  const [addNote, setAddNote] = useState(true);
   const {
     register,
     handleSubmit,
@@ -70,7 +75,7 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
-      setAddNote(false);
+      setAddNote(true);
       setIsActive(true);
     } catch (error) {
       setIsSubmitting(false);
@@ -85,14 +90,12 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
   const onCancel = () => {
     setValue("note", "");
   };
-  const handleSwitch = () =>
+  const handleSwitch = () => {
-  {
+    setIsActive(!IsActive);
-    setIsActive( !IsActive )
+    if (IsActive) {
-    if ( IsActive )
+      refetch(contactProfile?.id, false);
-    {
-      refetch(contactProfile?.id, false)
-    }
     }
+  };
 
   return (
     <div className="text-start">
@@ -103,7 +106,7 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
             <input
               type="checkbox"
               className="switch-input"
-              onChange={()=>handleSwitch(!IsActive)}
+              onChange={() => handleSwitch(!IsActive)}
               value={IsActive}
             />
             <span className="switch-toggle-slider">
@@ -114,24 +117,11 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
                 {/* <i class="icon-base bx bx-x"></i> */}
               </span>
             </span>
-            <span className="switch-label small-text">Show Including Inactive Notes</span>
+            <span className="switch-label ">Show Including Inactive Notes</span>
           </label>
+        </div>
+      </div>
 
-        </div>
-      </div>
-      <div className="d-flex justify-content-end px-2">
-        <span
-            className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
-            onClick={() => setAddNote(!addNote)}
-          >
-            {/* <i
-            className={`icon-base  bx ${
-              addNote ? "bx-x bx-sm" : "bx-pencil"
-            } bx-xs `}
-          ></i> */}
-            {addNote ? "close" : "Add Note"}
-          </span>
-      </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Editor
@@ -146,6 +136,14 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
           )}
         </form>
       )}
+      <div className="d-flex justify-content-end px-2">
+        <span
+          className={`btn btn-sm   ${addNote ? "btn-danger" : "btn-primary"}`}
+          onClick={() => setAddNote(!addNote)}
+        >
+          {addNote ? "Hide Editor" : "Add Note"}
+        </span>
+      </div>
       <div className=" justify-content-start  px-1 mt-1">
         {isLoading && (
           <div className="text-center">
@@ -160,26 +158,25 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
               <NoteCardDirectory
                 refetchProfile={refetchProfile}
                 refetchNotes={refetch}
-        refetchContact ={refetch}
+                refetchContact={refetch}
                 noteItem={noteItem}
                 contactId={contactProfile?.id}
                 setProfileContact={setProfileContact}
                 key={noteItem.id}
-
               />
             ))}
 
         {IsActive && (
           <div>
             {!isLoading && contactProfile?.notes.length == 0 && !addNote && (
-             <div className="text-center">No Notes Found</div>
+              <div className="text-center mt-5">No Notes Found</div>
             )}
           </div>
         )}
         {!IsActive && (
           <div>
             {!isLoading && contactNotes.length == 0 && !addNote && (
-               <div className="text-center">No Notes Found</div>
+              <div className="text-center  mt-5">No Notes Found</div>
             )}
           </div>
         )}

src/components/Directory/ProfileContactDirectory.jsx

@@ -11,7 +11,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const [profileContact, setProfileContact] = useState();
   const [expanded, setExpanded] = useState(false);
   const description = contactProfile?.description || "";
-  const limit = 100;
+  const limit = 500;
 
   const toggleReadMore = () => setExpanded(!expanded);
 
@@ -202,8 +202,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           </div>
         )}
 
-        <div className="p-3 alert alert-secondary text-small text-start rounded  muted">
+        <div className="d-flex mb-2 align-items-start">
-          <small className="fw-130">
+          <div style={{ minWidth: "100px" }}>
+            <p className="m-0 text-start">Description :</p>
+          </div>
+          <div className="text-start">
             {displayText}
             {isLong && (
               <span
@@ -213,8 +216,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 {expanded ? "Read less" : "Read more"}
               </span>
             )}
-          </small>
           </div>
+        </div>
+
         <hr className="my-1" />
         <NotesDirectory
           refetchProfile={refetch}

src/components/common/TextEditor/Editor.jsx

@@ -33,7 +33,7 @@ const Editor = ({
   ];
 
   return (
-    <div className="editor-wrapper">
+    <div className="editor-wrapper m-5">
       <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
         <div className="d-flex justify-content-between align-items-center w-100">
           {/* Left: Quill Format Buttons */}