UI Alignment and Icon Styling Issue in Contact Card Design in Directory.

src/components/Directory/CardViewDirectory.jsx

@@ -107,13 +107,13 @@ const CardViewDirectory = ({
           {/* <li className="list-inline-item me-1 small">
             <i className="fa-solid fa-briefcase me-2"></i>
           </li> */}
-          <li className="list-inline-item text-break small ms-5">
+          <li className="list-inline-item text-break small ms-5 px-1">
             {contact.organization}
           </li>
         </ul>
       </div>
       <div
-        className={`card-footer text-start px-1 py-1 ${IsActive && "cursor-pointer"
+        className={`card-footer text-start mx-4 px-4 py-1 ${IsActive && "cursor-pointer"
           }`}
         onClick={() => {
           if (IsActive) {

src/components/Directory/ProfileContactDirectory.jsx

@@ -47,7 +47,6 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           <div className="d-flex flex-column text-start ms-1">
             <span className="m-0 fw-semibold">{contact?.name}</span>
             <small className="text-secondary small-text">
-              {/* {contactProfile?.tags?.map((tag) => tag.name).join(" | ")} */}
               {contactProfile?.designation}
             </small>
           </div>
@@ -56,23 +55,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           <div className="col-12 col-md-6 d-flex flex-column text-start">
             {contactProfile?.contactEmails?.length > 0 && (
               <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <p className="m-0">Email:</p>
+                  <i className="bx bx-envelope bx-xs me-1"></i>
+                  <p className="m-0">Email :</p>
                 </div>
                 <div style={{ flex: 1 }}>
                   <ul className="list-unstyled mb-0">
                     {contactProfile.contactEmails.map((email, idx) => (
                       <li className="d-flex align-items-center mb-1" key={idx}>
-                        <i className="bx bx-envelope bx-xs me-1 mt-1"></i>
                         <span className="me-1 flex-grow text-break overflow-wrap">
                           {email.emailAddress}
                         </span>
                         <i
-                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
+                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
-                            copiedIndex === idx
+                            ? "text-secondary"
-                              ? "text-secondary"
+                            : "text-primary"
-                              : "text-primary"
+                            }`}
-                          }`}
                           title={copiedIndex === idx ? "Copied!" : "Copy Email"}
                           style={{ flexShrink: 0 }}
                           onClick={() => handleCopy(email.emailAddress, idx)}
@@ -86,14 +84,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
 
             {contactProfile?.contactPhones?.length > 0 && (
               <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <p className="m-0">Phone : </p>
+                  <i className="bx bx-phone bx-xs me-1"></i>
+                  <p className="m-0">Phone :</p>
                 </div>
                 <div>
                   <ul className="list-inline mb-0">
                     {contactProfile?.contactPhones.map((phone, idx) => (
                       <li className="list-inline-item me-3" key={idx}>
-                        <i className="bx bx-phone bx-xs me-1"></i>
                         {phone.phoneNumber}
                       </li>
                     ))}
@@ -104,12 +102,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
 
             {contactProfile?.createdAt && (
               <div className="d-flex  mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <p className="m-0">Created : </p>
+                  <i className="bx bx-calendar-week bx-xs me-1"></i>
+                  <p className="m-0">Created :</p>
                 </div>
                 <div className="d-flex align-items-center">
                   <li className="list-inline-item">
-                    <i className="bx bx-calendar-week bx-xs me-1"></i>
                     {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
                   </li>
                 </div>
@@ -117,11 +115,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             )}
             {contactProfile?.address && (
               <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <p className="m-0">Location:</p>
+                  <i className="bx bx-map bx-xs me-1"></i>
+                  <p className="m-0">Location :</p>
                 </div>
                 <div className="d-flex align-items-center">
-                  <i className="bx bx-map bx-xs me-1 "></i>
                   <span className="text-break small">
                     {contactProfile.address}
                   </span>
@@ -133,12 +131,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           <div className="col-12 col-md-6 d-flex flex-column text-start">
             {contactProfile?.organization && (
               <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
-                  <p className="m-0">Orgnization : </p>
+                  <i className="fa-solid fa-briefcase me-1"></i>
+                  <p className="m-0">Organization :</p>
                 </div>
                 <div className="d-flex align-items-center">
-                  <i className="fa-solid fa-briefcase me-2"></i>
-
                   <span style={{ wordBreak: "break-word" }}>
                     {contactProfile.organization}
                   </span>
@@ -147,29 +144,29 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             )}
             {contactProfile?.contactCategory && (
               <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
-                  <p className="m-0">Category : </p>
+                  <i className="bx bx-user bx-xs me-1"></i>
+                  <p className="m-0">Category :</p>
                 </div>
                 <div>
                   <ul className="list-inline mb-0">
                     <li className="list-inline-item">
-                      <i className="bx bx-user bx-xs me-1"></i>
                       {contactProfile.contactCategory.name}
                     </li>
                   </ul>
                 </div>
               </div>
             )}
-             {contactProfile?.tags?.length > 0 && (
+            {contactProfile?.tags?.length > 0 && (
               <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
-                  <p className="m-0">Tags : </p>
+                  <i className="fa-solid fa-tag me-2"></i>
+                  <p className="m-0">Tags :</p>
                 </div>
                 <div>
                   <ul className="list-inline mb-0">
                     {contactProfile.tags.map((tag, index) => (
                       <li key={index} className="list-inline-item">
-                        <i className="fa-solid fa-tag  me-1"></i>
                         {tag.name}
                       </li>
                     ))}
@@ -179,11 +176,13 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             )}
 
             {contactProfile?.buckets?.length > 0 && (
-              <div className="d-flex ">
+              <div className="d-flex">
                 {contactProfile?.contactEmails?.length > 0 && (
                   <div className="d-flex mb-2 align-items-center">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
+                    <div style={{ width: "100px", minWidth: "130px" }}>
-                      <p className="m-0">Buckets : </p>
+                      <p className="m-0">
+                        <i className="bx bx-layer me-0"></i>Buckets :
+                      </p>
                     </div>
                     <div>
                       <ul className="list-inline mb-0">
@@ -200,12 +199,15 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 )}
               </div>
             )}
+
           </div>
         </div>
         {contactProfile?.projects?.length > 0 && (
           <div className="d-flex mb-2 align-items-start">
-            <div style={{ minWidth: "100px" }}>
+            <div style={{ minWidth: "110px" }}>
-              <p className="m-0 text-start">Projects :</p>
+              <p className="m-0 text-start">
+                <i className="bx bx-building-house me-0"></i>Projects :
+              </p>
             </div>
             <div className="text-start">
               <ul className="list-inline mb-0">
@@ -220,9 +222,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           </div>
         )}
 
+
         <div className="d-flex mb-2 align-items-start">
-          <div style={{ minWidth: "100px" }}>
+          <div style={{ minWidth: "110px" }}>
-            <p className="m-0 text-start">Description :</p>
+            <p className="m-0 text-start">
+              <i className="bx bx-book me-0"></i>Description :
+            </p>
           </div>
           <div className="text-start">
             {displayText}
@@ -237,6 +242,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           </div>
         </div>
 
+
         <hr className="my-1" />
         <NotesDirectory
           refetchProfile={refetch}