From fcdcb10f7039605d20dddac681d094704ce8ec29 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 25 Jul 2025 12:54:02 +0530
Subject: [PATCH] UI Alignment and Icon Styling Issue in Contact Card Design in
 Directory.

---
 .../Directory/ProfileContactDirectory.jsx     | 48 ++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index 62ca077f..7aed18d1 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -55,6 +55,9 @@ 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: "110px" }} className="d-flex align-items-center">
+                  <i className="bx bx-envelope bx-xs me-1"></i>
+                  <p className="m-0">Email :</p>
                 <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
                   <i className="bx bx-envelope bx-xs me-1"></i>
                   <p className="m-0">Email :</p>
@@ -67,6 +70,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                           {email.emailAddress}
                         </span>
                         <i
+                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
+                            ? "text-secondary"
+                            : "text-primary"
+                            }`}
                           className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
                             ? "text-secondary"
                             : "text-primary"
@@ -84,17 +91,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
 
             {contactProfile?.contactPhones?.length > 0 && (
               <div className="d-flex mb-2">
-                <div
-                  style={{ width: "100px", minWidth: "110px" }}
-                  className="d-flex align-items-center"
-                >
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
                   <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-1" key={idx}>
+                    {contactProfile?.contactPhones.map((phone, idx) => (
+                      <li className="list-inline-item me-3" key={idx}>
                         {phone.phoneNumber}
                         {idx < contactProfile.contactPhones.length - 1 && ","}
                       </li>
@@ -107,6 +111,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
 
             {contactProfile?.createdAt && (
               <div className="d-flex  mb-2">
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
+                  <i className="bx bx-calendar-week bx-xs me-1"></i>
+                  <p className="m-0">Created :</p>
                 <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
                   <i className="bx bx-calendar-week bx-xs me-1"></i>
                   <p className="m-0">Created :</p>
@@ -120,6 +127,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             )}
             {contactProfile?.address && (
               <div className="d-flex mb-2">
+                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
+                  <i className="bx bx-map bx-xs me-1"></i>
+                  <p className="m-0">Location :</p>
                 <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
                   <i className="bx bx-map bx-xs me-1"></i>
                   <p className="m-0">Location :</p>
@@ -136,6 +146,9 @@ 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: "130px" }} className="d-flex align-items-center">
+                  <i className="fa-solid fa-briefcase me-1"></i>
+                  <p className="m-0">Organization :</p>
                 <div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
                   <i className="fa-solid fa-briefcase me-1"></i>
                   <p className="m-0">Organization :</p>
@@ -149,6 +162,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             )}
             {contactProfile?.contactCategory && (
               <div className="d-flex mb-2">
+                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
+                  <i className="bx bx-user bx-xs me-1"></i>
+                  <p className="m-0">Category :</p>
                 <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
                   <i className="bx bx-user bx-xs me-1"></i>
                   <p className="m-0">Category :</p>
@@ -162,8 +178,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 </div>
               </div>
             )}
+            {contactProfile?.tags?.length > 0 && (
             {contactProfile?.tags?.length > 0 && (
               <div className="d-flex mb-2">
+                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
+                  <i className="fa-solid fa-tag me-2"></i>
+                  <p className="m-0">Tags :</p>
                 <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
                   <i className="fa-solid fa-tag me-2"></i>
                   <p className="m-0">Tags :</p>
@@ -181,9 +201,14 @@ 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: "130px" }}>
+                      <p className="m-0">
+                        <i className="bx bx-layer me-0"></i>Buckets :
+                      </p>
                     <div style={{ width: "100px", minWidth: "130px" }}>
                       <p className="m-0">
                         <i className="bx bx-layer me-0"></i>Buckets :
@@ -205,10 +230,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: "110px" }}>
+              <p className="m-0 text-start">
+                <i className="bx bx-building-house me-0"></i>Projects :
+              </p>
             <div style={{ minWidth: "110px" }}>
               <p className="m-0 text-start">
                 <i className="bx bx-building-house me-0"></i>Projects :
@@ -228,7 +258,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
         )}
 
 
+
         <div className="d-flex mb-2 align-items-start">
+          <div style={{ minWidth: "110px" }}>
+            <p className="m-0 text-start">
+              <i className="bx bx-book me-0"></i>Description :
+            </p>
           <div style={{ minWidth: "110px" }}>
             <p className="m-0 text-start">
               <i className="bx bx-book me-0"></i>Description :
@@ -248,6 +283,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
         </div>
 
 
+
         <hr className="my-1" />
         <NotesDirectory
           refetchProfile={refetch}